Build a GameCreating Shatterfield

3  Hyperspace

Goal

The Ship flies and shoots. Now it gets a way out. By the end of this chapter, Shift throws it through hyperspace: it vanishes in a burst of sparks and appears somewhere else on the screen, standing still.

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 4 from it.

Shatterfield, Chapter 3 finishedZip of a Myth project · 5.0 MB

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.

3.1 The Idea

The Ship drifts across the dark, a little too fast, toward an edge. Press Shift. A small burst of sparks flares where it was, white, cyan, gold and orange, and the Ship is gone. In the same instant, another burst flares far across the screen, and the Ship sits in the middle of it, perfectly still.

Where will it land? Even the Ship doesn’t know.

Later, when the field is full of rocks, this is the button you press when there’s no other way out. It’s a gamble. The Ship might land somewhere quiet, or right beside the thing it was running from. Hyperspace is fair about it: anywhere on the screen is as likely as anywhere else.

Two new things make this work. The first is a Global Variable, a value the whole game shares. This chapter makes two, the screen’s width and height in meters. Any piece of Logic can read them, so the size of the screen is written down in one place.

The second is a Custom Event, a message one piece of Logic sends and another listens for. Here the Ship sends it to itself. Ship Hyperspace doesn’t move the Ship. It asks, and a built-in piece of Logic that’s been listening does the moving.

3.2 The Plan

Here’s how the pieces work together, read from left to right.

  • Shift is pressed -> Ship Hyperspace asks whether hyperspace is ready.
  • It’s ready -> sparks flare where the Ship is, the Hyper sound plays, and the message randomTeleport goes to the Ship itself.
  • The message arrives -> Random Teleport moves the Ship to a random place on the screen. Its width and height are the two Global Variables, $areaWidth and $areaHeight.
  • Back in Ship Hyperspace -> the Ship stops dead, sparks flare at its new place, and the cooldown starts.

Shift belongs to a new Command, Hyperspace.

3.3 Set Up

This chapter needs one sound, one key and two Global Variables. The Hyper sound is in your project already. It came in the Starter Kit, with every other sound the game will use.

Started from Chapter 2’s download? Hyper is in there too. Every download carries the whole Starter Kit, the way your own project does.

Make the Command the way you made Fire. In the Input Manager, press Add Command, name it Hyperspace, and leave its Input Type on Button. Click its key row, the one that reads No Input Assigned. Then press Shift and let go, and the row reads Shift.

The two Global Variables are new. You make them from a Logic Component, and any you’ve made will do, such as Ship Gun. Down the left of its canvas, the small card named Globals has a + in its corner. Press it, and choose New Global….

The Add Global window has three boxes. Its Name reads globalVariable, its Type is Number, and its Default is 0. Type areaWidth over the name, without the $, and 32 into Default, and press Add. Add refuses a $ in a name. Make areaHeight the same way, starting at 24.

Ship Gun’s Globals card lists them now, but that’s only a note of where you made them. They belong to the whole game, and every piece of Logic can read them. On the card, the $ in front of each name marks a Global Variable.

Remember where you put the Ship in Chapter 1? It was X 16 and Y 12, right in the middle of the screen, which is half of 32 and half of 24. The screen is 32 meters wide and 24 tall, and now the game knows it too.

Set upWhat this chapter adds
SOUNDS (from the starter kit)
Hyper
COMMANDS (Game Settings > Input Manager)
HyperspaceButton
KeybindingsShift
GLOBAL VARIABLES
$areaWidthNumberstarts at 32
$areaHeightNumberstarts at 24

3.4 Sparks

First comes the light.

3.4.1 Impact Sparks

Every jump flares twice, once where the Ship leaves and once where it lands. Each flare is a little spray of glowing specks. They fly out in all directions, slow down, shrink to nothing and are gone.

That spray is a particle effect, the first in the book. It has no Logic. It’s a recipe for sparks, kept under a name, and the Logic asks for it by that name when it wants some.

Follow one spark. It starts near the middle of the burst and shoots away, faster or slower than its neighbors. Drag pulls at it, and it shrinks as it flies. Within about half a second, it’s gone. Each spark picks its own speed, life and size from the card’s ranges, and one of its four colors, so no two fly alike.

Particle EffectImpact Sparks
Emitter
Emitter Shape > Emit Radius (m)0.156
Motion
Lifecycle > Each Particle Lives (ms)min 180, max 520
Motion > Speed (m/s)min 2.188, max 7.813
Forces > Dragx 1.1, y 1.1
Appearance
Appearance > Color SourceMultiple Colors
Appearance > Multiple Colors#EFFBFF, #62DCFF, #FFD166, #FF7B45
Appearance > Glow1.3
Appearance Over Life > Scalestart 0.85, end 0
Appearance Over Life > Size Variation (0–1)0.45
Appearance Over Life > Starting RotationRandom Spin On

Make it with Add > Particle. The Create Particle window asks for its Name, Impact Sparks, and a Starter. Leave that on Blank Particle. The card follows the editor’s three pages, Emitter, Motion and Appearance. You switch between them in the list at the top right of the preview. A Particle Effect card shows the rest of the layout.

Most lines are a box or two to type in. A few need a word more.

On the Motion page, Lifecycle and Forces start closed, so click each one’s name to open it. Each Particle Lives is inside the first, and Drag inside the second.

On the Appearance page, pick Multiple Colors in Color Source. Two colors are there already. Click each swatch and type the card’s first two codes into its HEX box, after the # that’s already there. Add Color, pressed twice, makes two more rows. Give them the last two codes the same way.

Glow is a slider that moves in tenths, so drag it until the number beside it reads 1.3×.

Starting Rotation is one switch, Random Spin. Turn it on.

The card has no count of sparks, because the effect doesn’t decide how many. Whoever asks for it does. Ship Hyperspace asks for 36 at a time.

These sparks come back in Chapter 4, where they’re what’s left when a small rock breaks.

3.5 The Jump

Now the Ship learns to leave.

3.5.1 Random Teleport

Random Teleport does one thing. When the message randomTeleport arrives, it picks a random spot and puts the Object there, all at once. There’s no flight in between: the Ship is here, and then it’s there.

This one comes built in too. Make it now, with Add > Logic Component, and pick Random Teleport from the Starter list, in its Movement group beside Motion Facing. The passage A Logic Component that comes built in shows that window. Its Event is already there, listening for randomTeleport.

The spot it picks is inside a box. Its four Shared Variables are the sides: minimumX and maximumX the left and right, minimumY and maximumY the bottom and top. The template’s box is a little narrower than your screen, and its floor sits a little way up. Left like that, the Ship would never land near the right edge, or along the bottom.

So the Ship’s card moves three sides. The floor, minimumY, drops to 0, and the two maximums become the Global Variables. Now the box is the whole screen.

Logic ComponentRandom TeleportAttach to: Ship

Moves the Ship to a random place in the play area whenever it hears randomTeleport.

Attach toAny Object
SHARED VARIABLES
NameTypeKindStarting Value
minimumXNumberConstant0
maximumXNumberConstant25
minimumYNumberConstant5.25
maximumYNumberConstant24
Built in: this Logic Component comes whole from the engine's template.
You add it and set its Variables on the Object; you do not build its Events.

It goes on the Ship later, together with Ship Hyperspace, the piece that sends randomTeleport. Until then, it would only wait for a message nobody sends.

3.6 A Way Out

Now Shift gets a job of its own, and the Ship gets its way out.

3.6.1 Ship Hyperspace

Press Shift. Sparks, the Hyper sound, the Ship gone and back somewhere else, still. Press it again at once, and nothing happens. Hyperspace needs 1.2 seconds to be ready again.

Ship Hyperspace has a single Event, When Hyperspace Is Pressed, and it runs once each time Shift goes down.

The start of it will look familiar, because you built one like it in Chapter 2. Ship Gun asked whether its cooldown was over before it fired, and Ship Hyperspace asks the same question about its own. Check Cooldown Ready looks at hyperspaceCooldown and keeps its answer as isHyperspaceReady. One If reads it. Everything else happens inside that If.

The rest is the chapter’s one hard idea, so take it beat by beat. It’s a chain of small things, in order, and the order is the whole trick.

First, Burst Particles sprays sparkCount sparks at the Ship. The Ship hasn’t moved yet, so these are the sparks it leaves behind. Then the Hyper sound plays.

Then Trigger Custom Event on Object sends randomTeleport. It names no Object, so the message goes to this Logic’s own Ship. Random Teleport hears it at once. It moves the Ship before the next step even starts.

Set Velocity takes away all the speed the Ship had, so it arrives standing still.

Next comes a second Burst Particles, the same as the first. It’s the same Action, at the same Ship, and the sparks come out somewhere else entirely. The Ship moved between them. Last, Start Cooldown sets hyperspaceCooldown running for cooldownSeconds.

Logic ComponentShip HyperspaceAttach to: Ship

Hyperspace jumps the Ship to a random place on screen and stops it, at most once every cooldownSeconds.

Attach toAny Object
SHARED VARIABLES
NameTypeKindStarting Value
cooldownSecondsNumberConstant1.2
sparkCountNumberConstant36
When Hyperspace Is Pressed
WhenCommand PressedCommand: Hyperspace
1Check Cooldown Ready
Action Name
isHyperspaceReady
Cooldown Key
hyperspaceCooldown
2IfisHyperspaceReady.value == true
Then
3Burst Particles
Particles
"Impact Sparks"
Count
@self.sparkCount
4Control Sound
Sound
"Hyper"
5Trigger Custom Event on Object
Custom Event
randomTeleport
6Set Velocity
X Velocity
0
Y Velocity
0
7Burst Particles
Particles
"Impact Sparks"
Count
@self.sparkCount
8Start Cooldown
Cooldown Key
hyperspaceCooldown
Seconds
@self.cooldownSeconds

Now build it, from the top of the card. Make it the way you made Ship Gun, with Add > Logic Component and Empty Logic Component. Its SHARED VARIABLES come first, as in Chapter 2, each with the + on the Shared Variables card. The first, cooldownSeconds, is a Number, Constant, with 1.2 as its Starting Value. The second, sparkCount, is the same, at 36. The blocks read them as @self.cooldownSeconds and @self.sparkCount.

The When bar is Command Pressed. The window that asks for its Command lists both of yours, Fire and Hyperspace, with Fire picked at first. Pick Hyperspace. Then every Action goes in from a right-click on Mode 1, or on the last block of its line, as in Chapter 2.

Steps 1 and 2 you know already. Check Cooldown Ready arrives with cooldown in its Cooldown Key, and a name of Myth’s after the word as. Type hyperspaceCooldown over the first, bare, and isHyperspaceReady over the second. Step 2 is the If, from the Action List’s Logic group. Its condition is its one box. Type the card’s line there, isHyperspaceReady.value == true, and press Enter.

Steps 3 to 8 hang on its True line. For each one, right-click the If and choose Add inside Then. Join each with Connect to sequence as it comes, and they stay in the card’s order.

Burst Particles’ Particles is a list. Pick Impact Sparks there, the only particle effect your game has so far. Its Count is a box: @self.sparkCount. Control Sound’s Sound is a list too, so pick Hyper there. The card shows both picks in quotes, the way it writes a list’s value.

The Custom Event is a box, and it keeps a message’s name exactly as you type it. So the card writes randomTeleport with no quotes. Type it as the card spells it, with a capital T, because that’s how Random Teleport knows the message is for it. The passage on Events says more about sending.

Set Velocity’s two boxes start blank, and a blank box keeps the old speed. Type the 0s.

Start Cooldown comes last. It arrives with cooldown and 0.2, the way Check Cooldown Ready did. Type hyperspaceCooldown over the first, and @self.cooldownSeconds over the second.

There’s no Create Instance this time, so every Applies To starts on Self and stays there. Each of these blocks works on the Ship.

Now give the Ship both pieces. Attach Random Teleport fifth and Ship Hyperspace sixth, as the Ship’s Changes card shows.

Switch back to Components. Six Shared Variables have joined the Ship’s, under Variables: Random Teleport’s four, then Ship Hyperspace’s two. Of those, cooldownSeconds and sparkCount arrive at 1.2 and 36, and minimumX at 0. The card has no lines for them, but three of its lines do need you.

First, minimumY is a number, so type 0 into its Value.

Next, maximumX and maximumY each change their Kind. Pick Expression in maximumX’s Kind list, and an Expression box takes the Value’s place. Type $areaWidth there, dollar sign and all. Do the same for maximumY, with $areaHeight.

An Expression works its value out from something else, here a Global Variable. So the box always matches the screen, whatever its size. The passage on Object cards shows the Kind list.

ObjectShipAddDelete
Transform
Bounding Box > SizeX 2.4375, Y 3.0625
Collider
Shape and Transform > ShapeCircle
Shape and Transform > Radius0.594
Tags and Interactions > InteractionsCollide Only With
Sprite
Scene Depth Draw Order20
SpriteShip Sprite
Transform > SizeX 2.4375, Y 3.0625
Logic
Rotate-and-thrust Controls
Wrap Around World
Thrust Feedback
Ship Gun
Random Teleport
Ship Hyperspace
Shared Variables
topSpeed13.75
turnSpeed290
thrust13.125
coastDrag1.719
shotShot
maximumX > KindExpression
maximumX > Expression$areaWidth
minimumY0
maximumY > KindExpression
maximumY > Expression$areaHeight

Run the game. Fly for a moment, then press Shift.

The Ship blinks out in a puff of sparks, and another puff flares far off, and there it is. It isn’t moving.

Now and then it lands right on an edge, half on one side and half on the other. Wrap Around World takes care of that, the way it always has.

Play it!

Watch for each of these.

  • Press Shift. Sparks flare where the Ship was, and the Hyper sound plays.
  • In the same instant, a second burst of sparks appears somewhere else, with the Ship in the middle of it.
  • Thrust hard, then jump. The Ship arrives standing still, nose pointing the same way it was.
  • Press Shift twice, fast. The second press does nothing. Wait a little over a second, and it works again.
  • Hold Shift down. One jump, not a stream of them, since each press counts once.
  • Jump ten times. Each landing is somewhere new, from one side of the screen to the other.
  • Fire right after a jump. The gun works from the new place, as if nothing happened.
How it works

Three new pieces share each jump. Impact Sparks is its light, and Random Teleport is the move itself. Ship Hyperspace decides when, and stops the Ship where it lands.

Underneath them is one idea. A piece of Logic doesn’t have to do everything itself. Ship Hyperspace asks for the move with a message, and the piece that knows how to move answers. The message arrives at once. So the Logic after it already sees the Ship in its new place. And the screen’s size lives in two Global Variables, where any piece of Logic can find it.

3.7 If It Didn’t Work

Something may be a little off the first time, and that’s normal. Press Shift, watch what the game does, and take it one piece at a time.

Shift does nothing at all? Perhaps the Command isn’t there. Open the Input Manager and look for Hyperspace, a Button, with Shift in its key row. If it’s there, look in the Ship’s Attached Logic for Ship Hyperspace.

Space fires and jumps, and Shift does nothing? The Event still listens for Fire, the Command its window picked first. On Ship Hyperspace’s canvas, the Event’s block has a Command line, folded at first. Click it open, and change the Command to Hyperspace.

Still nothing? Look on Ship Hyperspace’s canvas for a block standing apart, with no arrow into it. Right-click it, and Connect to sequence puts it to work. If the If has a red edge, a name in its box isn’t one Ship Hyperspace knows. Check it against the card, letter by letter.

Sparks and a sound, but the Ship stays where it was? The message isn’t reaching Random Teleport. Is Random Teleport attached to the Ship? Is the Custom Event in Ship Hyperspace spelled randomTeleport, with a capital T and nothing else?

A sound, but no sparks? Each Burst Particles needs Impact Sparks picked in its Particles list, and @self.sparkCount in its Count.

The Ship never lands near the right edge, or along the bottom? Random Teleport is still using its own box. Look at the Ship’s Variables. maximumX and maximumY should each be Kind Expression, holding $areaWidth and $areaHeight, with the dollar signs. And minimumY should be 0.

The Ship always lands right on the left edge, or right on the bottom? Perhaps a Global Variable is still at 0. Open Ship Gun, where you made them, and look at its Globals card. The pencil beside $areaWidth opens it again, with its Default, which should be 32. For $areaHeight, it’s 24.

The Ship jumps, but keeps drifting the way it was going? Look at Set Velocity. Its X Velocity and Y Velocity both need a 0, because a blank box keeps the old speed.

Both bursts of sparks show up at the new place? The first Burst Particles has ended up below Trigger Custom Event on Object. It belongs above it, before the jump. The round handles move a joined block, as the passage on Actions shows.

Shift jumps every time, with no wait at all? Look at the two cooldown blocks. Both need the Cooldown Key hyperspaceCooldown, spelled the same, in place of the cooldown they arrived with.

Each of these is a small fix. Make it, press Shift 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…. It takes your project’s place for a while, and File > Open Recent brings yours back.

Challenge

Hyperspace is yours to tune, in the Ship’s Variables. Shorten cooldownSeconds, and the Ship skips around the screen like a stone across a pond. Raise sparkCount, and every jump goes off like a firework. Or shrink Random Teleport’s box. Type 8 into minimumX and 6 into minimumY, and make maximumX’s Expression $areaWidth - 8, and maximumY’s $areaHeight - 6. The Ship only ever lands in the middle of the screen then: a gentler kind of hyperspace. Which one feels right is up to you. Chapter 4 picks up from the card’s values. So write down any of yours you’d like to keep, then put the card’s back: 1.2 and 36, the two 0s, and plain $areaWidth and $areaHeight.

Still stuck? Search the manual, or ask in the Myth Engine Discord (opens a new tab).

A Ship that flies, a gun that answers, and a way out. In Chapter 4, the field arrives.