- Learn
- Build a Game
- Shatterfield
- 1 The Ship Flies
1 The Ship Flies
One small white Ship waits in the middle of a dark screen. By the end of this chapter, it flies. It turns, burns its cyan flame and drifts, and when it leaves one edge of the screen, it comes back on the other.
The game as it is at the end of this chapter. Click the game to play.
If your game and this chapter part ways, here is the chapter’s finished project. Open it and compare, or start Chapter 2 from it.
To open it, right-click the downloaded file, choose Extract All... and then Extract. Start Myth Engine, choose File › Open Project... and pick the .mythproj file in the new folder. Beside it, OFL.txt is the license of the project’s font, Press Start 2P.
1.1 The Idea
The screen is dark. It’s nearly black, with a little blue in it, and there are no stars yet, no rocks and no saucers. In the middle waits one small white Ship, drawn in thin lines, with cyan lights along its wings.
By the end of this chapter, it flies. Hold Left, and it turns on the spot. Hold Up, and a cyan flame flickers at its tail, the engine hums, and the Ship pushes forward. Let go, and the flame goes out.
The Ship doesn’t stop.
That’s the feel of the whole game, so it’s worth a moment. Out here, almost nothing holds the Ship back. Up doesn’t carry it along the way an arrow key walks a character across a room. It changes how fast the Ship is going, and which way. Let go, and the Ship carries that speed on, giving it up only slowly.
Think of a hockey puck on ice. Push it, and it slides on long after your hand has left it, slowing a little at a time. The Ship is that puck. The word for it is momentum: the speed a thing keeps by itself, with nothing pushing it. Turn the Ship around while it slides, and it still goes the same way, tail first now, until you thrust against it.
Most of that flying, you won’t build by hand. Myth Engine has Logic Components that come whole, ready to attach, and two of them are in this chapter. Rotate-and-thrust Controls does the turning, the pushing and the sliding. Wrap Around World takes care of the edges.
You still decide how the Ship flies. A Logic Component can bring Shared Variables, values that each Object it’s on sets for itself. Rotate-and-thrust Controls brings four. The Ship sets its own, and those four numbers are how it feels under your fingers.
The third piece, Thrust Feedback, you’ll build yourself. It never moves the Ship. What it does is let you see the Ship fly, and hear it.
It needs one new idea. Logic waits for moments, such as Up being held, and each moment it waits for is an Event. Some Events can be answered in more than one way. Each way is a Mode, and only one of them answers at a time. Think of the sign on a shop door. It’s the same door all day, and the sign says which answer you get right now: OPEN, or CLOSED.
One of Thrust Feedback’s Events has a sign like that, with two Modes. Coasting is the side it starts on, and Thrusting is the other. Thrust Feedback turns that sign itself. When you build it, you’ll see why it has to.
1.2 The Plan
Here’s how the pieces work together. Each line is a chain, read from left to right.
- Left or Right is held -> Rotate-and-thrust Controls turns the Ship.
- Up is held -> Rotate-and-thrust Controls pushes the Ship toward its nose, but never past its top speed.
- Up is let go -> the Ship slides on, and Rotate-and-thrust Controls slows it a little at a time, until it stops.
- Up is held -> Thrust Feedback, on Coasting, lights the flame, starts the hum, and turns its sign to Thrusting.
- Up is let go -> Thrust Feedback puts out the flame, stops the hum, and turns its sign back to Coasting.
- The Ship leaves the screen -> Wrap Around World brings it back at the opposite edge.
Every key in that plan belongs to one Command, and it’s named Rotate-and-thrust Controls too.
1.3 Set Up
Every game starts as an empty project. The first time, an empty project is a little daunting, with nothing on the screen and a lot of buttons around it. It fills quickly. By the end of this chapter, something flies in it.
If you came straight here, read two passages of Making what a card shows first: Before your first card and The Set up card. They show where things are in the editor. This chapter sends you back there when a card shows something new.
Choose File > New Project… to open its window. Pick Blank 2D there, type a Project Name, such as Shatterfield, and press Create Project. Myth makes a folder for your project. Browse… beside the Location can put it somewhere else.
Install the Starter Kit into your new project: choose File > Install Myth Pack… and pick the file. Every picture and sound in Shatterfield is in there. There’s nothing to draw.
To install it, open Myth Engine, choose File › Install Myth Pack... and pick the downloaded file.
Save as you go, with File > Save or Ctrl+S. A dot beside your project’s name, at the top of the window, means there’s something new to save.
Now work through the card below, from the top down. Leave COMMANDS for now, but read it. That Command and all its keys arrive by themselves when you make Rotate-and-thrust Controls, later in this chapter. When they do, come back to this card and check them.
The first two Game Settings name the window and choose how it draws. WebGL 2 Only is there for a reason. Shatterfield was made and tested on WebGL 2, and this keeps your game drawing the same way.
Next comes the Scene. Your new project already has one, named Scene. The card calls it Space and marks it new, but you don’t need a second one. Right-click Scene in the Resources panel, choose Rename, and type Space.
Now double-click Space to open it. It opens ready for placing things, with the Place Scene Content panel on its left. The Scene’s own settings are one step away. Pick the arrow tool, Select, the first button above the preview. Then click an empty spot in the preview, and the panel on the left turns into the Properties.
Background Color is at the top. Click its swatch, the little square of color, and a picker opens. Type the card’s code into its HEX box, after the # that’s already in place. That’s the dark of space.
Renaming the Scene carried Start Scene along, so it should already say Space · 2D. Check it. If it says anything else, pick Space · 2D from its list. That’s why Start Scene comes after the Scene on the card. Its list offers only the Scenes your project has, so Space has to be there first. PLACE THESE waits until the Ship exists.
Left Arrow, ARight Arrow, DUp Arrow, WDown Arrow, SShatterfieldWebGL 2 Only#02040ASpace · 2D1.4 The Ship
First comes the Ship itself, sitting perfectly still in the dark.
Make it with Add > Object. The Create Object window that opens wants a name, Ship, and an Object Type. The Ship’s card has a Collider, so pick 2D Object, which comes with its Collider already attached. An Object card and its components walks through the rest.
Its Scene Depth Draw Order of 20 puts it in front of everything else. Shots, Asteroids and Saucers all get lower numbers later, so they pass under the Ship, never over it.
The Sprite is under Rendering in the Component Toolbox. Click it, and the Add Sprite Component window opens. Pick Ship Sprite from its list there, and press Add Sprite to attach it.
The Collider is a circle, about half as wide as the Ship. Nothing can touch it yet. Its Interactions list, in the Tags and Interactions section, starts at Everything. Pick the card’s Collide Only With there. That’s a list of the only things the Ship may touch, and it starts empty. The Collider says so, in so many words: this Collider meets nothing. In Chapter 4, the Asteroids join the list.
The Logic and the Shared Variables at the bottom of the card wait for the parts after this one. The Logic brings those Variables with it, so for now, make the Ship without them.
X 2.4375, Y 3.0625Circle0.594Collide Only With20Ship SpriteX 2.4375, Y 3.062513.7529013.1251.719Now place it, from PLACE THESE. Open Space, and pick Place, the button beside the arrow. The Place Scene Content panel is back on the left, and your Ship is near its bottom, under Predefined Objects. Press it there, then click once in the dark of the preview. A Ship lands where you click. Every click places another, so one is enough, and Ctrl+Z takes back a spare.
To put it exactly where the card says, pick Select, the arrow, and click your Ship. Its Properties show a World Position. Type X 16 and Y 12 there, and the Ship sits in the middle of the screen.
Run the game: press Play, at the top of the editor, or F5. Your game opens in its own window. The Ship sits in the middle of the dark, nose up. Press any key you like, and nothing happens. That’s right, for now. Press Stop, beside Play, and the game’s window closes.
1.5 Flying
Now the Ship learns to fly.
1.5.1 Rotate-and-Thrust Controls
Hold Right, and the Ship turns to the right, on the spot. Hold Up, and it pushes off toward its nose, faster and faster. Let go, and it slides on by itself.
This is the first Logic Component that comes built in. You make it from the Starter list, in the Controls group, and its Events are already there. Making what a card shows has the window. When you press Create, it does one more thing. It adds the Command on your setup card to the Input Manager, with all eight keys bound. Open the Game Settings and look.
Its four Shared Variables are the whole feel. How fast the Ship turns, in degrees each second, is turnSpeed. How much speed holding Up adds each second is thrust, and it pushes the Ship toward its nose. Two more hold the Ship back. It loses coastDrag each second that nothing pushes it, and topSpeed is the fastest it can go, in meters each second.
The numbers on the Rotate-and-thrust Controls card below are what every Object starts with. Leave them be. The Ship sets its own four, on its Object card, and they make a quicker Ship. At 290, it turns a full circle in about a second and a quarter. That’s nimble. With thrust at 13.125, it reaches its top speed of 13.75 in about a second. Let go at that speed, and it slides for about eight seconds before it rests.
Left and Right turn the Ship and Up thrusts it forward; it keeps its momentum, slowing by coastDrag, up to topSpeed.
Any ObjectNow attach it. Open the Ship, switch the list at the top right to Logic, and click Rotate-and-thrust Controls under Compatible Logic. It joins the Attached Logic, on the left.
Then switch the list back to Components. The four have arrived at the top of the Properties, under Variables, each with a line saying it came from Rotate-and-thrust Controls. Type the Ship card’s four values into their Value boxes, which come in the card’s order.
Run the game. Turn, thrust, let go. The Ship slides across the dark, and it keeps sliding, right off the edge of the screen.
And it’s gone. It’s still out there, flying on where you can’t see it, and it isn’t coming back by itself. Press Stop. The next part brings it home.
1.6 The Edges
Now the edges of the screen learn to let the Ship through.
1.6.1 Wrap Around World
Fly off the right edge, and the Ship comes back at the left, at the same height, still sliding. Off the top, it comes back at the bottom. The Ship never knows it went anywhere.
Watch closely as it crosses. For a moment, there are two halves of a Ship. Its nose has already come in at the left edge, while its tail is still leaving at the right. That’s seamlessEdges, set to Yes. With it off, the Ship would vanish at one edge and appear whole at the other.
You’ll find this one in the Movement group of the Starter list. Its card is short. There’s nothing to build. Its one Shared Variable, seamlessEdges, starts at Yes, and the Ship keeps that. So the Ship’s card has no line for it.
An Object that leaves the screen comes back at the opposite edge, drawn across the edge while it passes.
Any ObjectAttach it to the Ship, below Rotate-and-thrust Controls. The order follows the Ship’s card, so your Attached Logic reads like it. Back in Components, seamlessEdges has joined the Ship’s Variables, and its Value already says Yes. There’s nothing to type.
Run the game and fly off any edge you like. The Ship always comes back.
1.7 Flame and Sound
Now the flight gets its light and its sound.
1.7.1 Thrust Feedback
This is the piece you build yourself, Event by Event. Hold Up, and a cyan flame flickers at the Ship’s tail while the engine hums. Let go. The flame is gone, and the hum stops.
It looks as if this belongs inside Rotate-and-thrust Controls. It doesn’t. Rotate-and-thrust Controls moves the Ship and does nothing else, and Thrust Feedback never moves it at all. It only changes what you see and hear.
Its first Event runs while Up is held. It runs on every step of the game, over and over, for as long as your finger stays down. And there’s the problem. The flame only needs starting once. Start the Thrust clip on every step, and it starts over every time. The flame would never get past its first frame.
So that one Event has two Modes, and this is the shop sign. Coasting is the one it starts with. Set Animation Clip starts the Ship Sprite’s Thrust clip, a few frames of flame that play over and over. Control Sound starts the Thrust sound, looping. Then Switch Mode turns the sign to Thrusting, and its work is done.
Thrusting has no Actions at all. The Event keeps running while you hold Up, and Thrusting answers it with nothing. The flame and the hum carry on by themselves.
The second Event is the moment Up comes back up. It puts things back. Frame 0 of the Ship Sprite is the Ship with no flame, and Set Frame shows it. Control Sound stops the hum. Then Switch Mode turns the sign back to Coasting, ready for the next time.
Why not wait for the moment Up is pressed? In Chapter 5, a new Ship will appear while your finger may still be on Up. That Ship never saw the press. Coasting catches it anyway, on its very first step.
Make Thrust Feedback with Add > Logic Component, from the Empty Logic Component starter. It opens on its canvas, empty. The Ship’s card has no values under Thrust Feedback. Once you’ve built it, you only attach it, third, below Wrap Around World.
Making what a card shows has every window you’ll need, in its passages on a Logic Component card, Events and Actions. For the first Event, type 2D Direction Held into the Add Event window’s filter. Myth then asks for its Command. It offers Rotate-and-thrust Controls, the Command the built-in piece made. That’s why this card comes third.
The Event lands as a big green block. Its Direction hides in the block’s Command section, which starts closed. Click the heading to open it. Direction starts on Left, so click Up. Myth renames the Event to match, While Command Rotate and Thrust Controls Up Is Held.
Beside the Event sits a smaller block, its first Mode, named Mode 1. Right-click it, choose Rename Mode…, and type Coasting. Then right-click the Event’s own block, choose New Mode…, and name the new one Thrusting. It gets a block of its own, to the right. Leave the Event’s Modes on One at a time, as it starts. Its Starting Mode already says Coasting. That’s the side the sign starts on.
Each Mode has its own line of Actions, so you add each Action to a line. Right-click the Coasting block and choose Add unattached Action here. Pick Set Animation Clip in the window, and press OK. Its block lands near the line, apart from it, with no arrow into it. It does nothing until it’s joined. Right-click it and choose Connect to sequence, and an arrow runs to it from the block above. The next Action goes the same way, from a right-click on the last block of the line.
Two fields are lists. Set Animation Clip’s Clip holds Ship Sprite/Thrust, and Control Sound’s Sound holds Thrust. Pick each one there. The card shows them in quotes, but there’s nothing to type.
Switch Mode picks from two lists, the Event first and then its Mode. The Event list starts on Current Event. Pick the Event with Up Is Held in its name, then Thrusting.
On the card, that Event shows up twice, once with each Mode under it. It’s still one Event, and you make it once. Myth names the Events for you, so their headings are a mouthful, and you never type them. Their headings spell the Command without its hyphens, but it’s the same Command.
The second Event goes in the same way, with 2D Direction Released in the filter and Up in its Command section. It keeps its one Mode, Mode 1, and the card shows no Mode line for it. Its three Actions go on that Mode’s line. Its Switch Mode picks the first Event again, the one with Up Is Held in its name, and Coasting.
While Up is held the Ship shows its thrust flame and the thrust sound loops.
Any Object- Clip
"Ship Sprite/Thrust"
- Operation
Loop- Sound
"Thrust"
- Event
While Command Rotate and Thrust Controls Up Is Held- Mode
Thrusting
- Frame
0
- Operation
Stop- Sound
"Thrust"
- Event
While Command Rotate and Thrust Controls Up Is Held- Mode
Coasting
Run the game, and hold Up.
Watch for each of these.
- The Ship waits in the middle of a dark screen, nose up.
- Hold Left or A, and it turns to the left. Right or D turns it right, a full circle in about a second and a quarter.
- Hold Up or W. A cyan flame flickers at the tail, and the engine hums as the Ship speeds up toward its nose.
- Keep holding. In about a second, it stops getting faster. That’s its top speed, and the flame is still flickering.
- Let go. The flame goes out, the hum stops, and the Ship slides on, slower and slower, for about eight seconds from top speed.
- Hold Up again. The flame and the hum come back, every time.
- Turn the Ship around while it slides. It keeps going the same way, tail first, until you thrust against it.
- Fly off any edge. The Ship comes back at the opposite edge, and for a moment you see part of it on each side.
- Down and S do nothing. Nothing in this game listens for them.
Rotate-and-thrust Controls turns the Ship and pushes it, and slows it when you let go. Wrap Around World brings it back from every edge. And Thrust Feedback, the one you built by hand, lights the flame once, then turns its sign to Thrusting until you let go.
Underneath them is one idea. Up never moves the Ship. It changes the Ship’s speed, and the speed does the moving. That’s momentum. Every chapter after this one flies on it.
1.8 If It Didn’t Work
Something may be a little off the first time, and that’s normal. Run the game, watch what the Ship does, and think it through one piece at a time.
No Ship at all? Look in Space for its placement, at X 16 and Y 12. Then look at Start Scene in the Game Settings. It should say Space · 2D.
The keys do nothing? Open the Ship and switch the list to Logic, where Rotate-and-thrust Controls should be in the Attached Logic. Then open the Input Manager. Its Command needs all eight keys from your setup card, each in its place.
The Ship turns slowly and feels heavy, or never slows down? Perhaps the four values never reached the Ship’s Variables. A Ship that flies with the Logic Component’s starting numbers turns at 260 and never passes 6.875. Its coastDrag starts at 0, so it never slows down either. Type the Ship card’s values into their Value boxes, in Components. It wakes up.
The Ship stops dead at the edge, as if it hit a wall? Open the Physics section of the Ship’s Transform, where Stay inside the scene should be off, as it starts. Turn it off, and the wall is gone.
The Ship flies off and never comes back? Then Wrap Around World is missing from the Ship’s Attached Logic, and attaching it brings the Ship home.
The flame shows when you hold Left? The first Event’s Direction is still on Left, where every new one starts. Open its Command section and click Up.
Switch Mode’s Event list has no Event with Up Is Held in its name? That Event’s Direction is still Left, and its name says so. Click Up in its Command section, and the name follows.
No flame and no hum? Follow each line on Thrust Feedback’s canvas: Coasting’s should hold three Actions, and Thrusting’s none. The Released Event’s Mode 1 holds the other three. An Action on the wrong line went in from another line’s right-click. Right-click it, choose Delete, and add it again from the right line. One at a time, in the card’s order.
Still no flame and no hum? Look on Thrust Feedback’s canvas for a block standing apart, with no arrow into it. That block does nothing yet. Right-click it, and Connect to sequence puts it to work.
The flame shows, but it never flickers? Coasting is starting it over on every step, because nothing turns the sign. Its last Action, Switch Mode, should pick Thrusting.
No flame, but the hum plays? Perhaps the Clip list still holds another clip, when Set Animation Clip’s should be Ship Sprite/Thrust.
The flame shows, but you never hear the hum? Look at Control Sound. Its Operation should be Loop, and its Sound should be Thrust.
The flame stays after you let go, or the hum never stops? Check the second Event against its card. Its When bar is 2D Direction Released, with Up as its Direction, and its Control Sound has the Operation Stop.
The flame comes once, and never again? The Released Event’s Switch Mode should turn the sign back to Coasting.
Each of these is a small fix. Make it, run the game again, and you’re back with the chapter.
The catch-up download in the Goal is this chapter, finished, and you can hold yours up against it. Save your project first. Then unzip the download, as its button says, and open the .mythproj file inside with File > Open Project…. Myth shows one project at a time, so it takes your project’s place for a while. Look at the piece that misbehaves, and note how it differs from yours. File > Open Recent brings your own project back.
The Ship’s four numbers are its whole feel, and they’re yours to change. Set coastDrag to 0, and the Ship slides forever, like a puck on perfect ice. Double its turnSpeed, or halve its topSpeed. Fly a while each way, and find the Ship that feels like yours. Then, before Chapter 2, type the card’s four numbers back in, so your Ship flies the way the next chapters describe. Write your favorites down first, if you’d like to keep them.
Still stuck? Search the manual, or ask in the Myth Engine Discord (opens a new tab).
One Ship, alone in the dark, and it flies. In Chapter 2, it learns to shoot.
