Open your game on its own Title screen. Choose a game, read its controls, and return to the menu when the well fills.
The game as it is at the end of this chapter. Click the game, then press Enter to start.
This chapter’s finished project can help you compare a piece that behaves differently.
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. Nunito-OFL.txt beside it comes with the game.
7.1 The Idea
Soap bubbles rise behind the logo. Loose crystals tumble past them, and PRESS ENTER TO PLAY dims and brightens under the glass letters. The well can wait.
Press Enter. The logo gives way to a menu, and the chosen button glows. Beside it, a panel tells you what that choice offers. Your game has somewhere to begin before a single piece falls into the well.
The results panel already knows how to offer a choice. We’ll give that same idea more room: several buttons, one chosen number, and a listener for each button’s job. The menu is another panel.
There’s a quiet problem behind HOW TO PLAY. The buttons remain underneath, with their sensors and listeners still waiting for a player to choose them. A veil can cover their pictures without stopping their Logic. Help borrows their controls.
Confirm normally runs the selected button. While help is open, that same Event closes help instead. Modes keep those responses separate until the menu is ready again.
7.2 The Plan
- Title Controls hears Confirm or a left click -> Go To The Main Menu changes Scene.
- Panel Choices changes the remembered choice. Main Menu Controls announces that choice so the text can follow. Their connection runs through Panel Choices and Main Menu Controls before Show Menu Info hears
menuChoiceChanged. - Show Menu Info reads that choice’s row. A chosen button sends
choiceRunto its own job. - Open How To Play sends
howToPlayOpened-> pictures appear and menu Events switch Modes. - Closing help restores those Modes. BACK TO MENU brings the results back to the same remembered choice.
7.3 Set Up
Start with your completed Chapter 6 project or download Chapter 6 finished. Open its project before adding this chapter’s pieces.
Check that it contains Piece Kinds, Choose Panel Choice, Panel Choice and Show When Panel Choice. Its Results Panel and Menus controls are used again here. These inherited resources come from Chapter 6; this chapter changes them rather than rebuilding their earlier work. The Starter Kit already includes this chapter’s logo, key pictures and music.
Add Menu Navigate and Back in the Menus input context. Menu Navigate’s Input Type is 2D Axis, because the menu needs both vertical selection and horizontal level changes. Back uses Input Type Button. Give each direction every key shown on the card. The helper page explains selecting a context before adding its Commands.
Make the new Scenes Main Menu and Title before building Functions that choose them. Use the setup card’s camera, view and sky for each. Leave Start Scene alone until Title exists, then select Title there.
The placement list is long. We’ll return to its Scene headings as each group is ready. Screen UI positions are offsets in pixels; bubbles and drifting crystals use world positions in meters.
Add the listed Globals through a Logic’s Globals block. A Global already present needs no second declaration. The menu remembers menuChoice, while mode and the level choices wait for the game to read them.
Left Arrow, ARight Arrow, DUp Arrow, WDown Arrow, SEscape, BackspaceConfirm, Menu Navigate, Back#1A78C8#1A78C8Title · 2D7.4 The Sky Keeps Moving
The first new pieces need no keys.
Make Rise And Sway Data now, so its rising field exists before the Logic needs to remember that speed. Each bubble keeps its own rising speed in that structure. The sideways direction will change, but that upward speed stays with the bubble.
Object Data of Logic "Rise And Sway" (its state that lasts between Events). rising: how fast this bubble rises, in meters per second.
7.4.1 Rise And Sway
A large bubble passes a smaller one. The same random size chooses how large, how bright and how fast each bubble becomes. Those differences belong together.
Rise And Sway sets velocity once. Its sway timer changes the sideways sign while keeping the stored rising speed. Make both timer Modes first.
Leaving the view sends the same bubble below the screen. It finds another starting X within the same view and begins another trip past the logo. No stream of new bubbles needs cleaning up.
A soap bubble: a random size (bigger ones rise faster and show more), rising and swaying side to side; back to the bottom when it leaves the top.
Any Objectself.riseAndSwayData- Action Name
bubbleSize- Minimum
@self.smallestSize- Maximum
@self.largestSize
- Horizontal Scale
bubbleSize.value- Vertical Scale
bubbleSize.value
- Alpha
0.35 + bubbleSize.value * 0.55
- Component Value
self.riseAndSwayData.rising- Value
@self.riseSpeed + bubbleSize.value * @self.risePerSize
- X Velocity
@self.swaySpeed- Y Velocity
self.riseAndSwayData.rising
- Timer Name
"sway"- Repeat Every (s)
@self.swaySeconds
- Action Name
bubbleX- Minimum
@self.leftmost- Maximum
@self.rightmost
- X
bubbleX.value- Y
@self.bottomStart
- X Velocity
-@self.swaySpeed- Y Velocity
self.riseAndSwayData.rising
- Event
On the Sway Timer- Mode
Swaying Left
- X Velocity
@self.swaySpeed- Y Velocity
self.riseAndSwayData.rising
- Event
On the Sway Timer- Mode
Swaying Right
Make Rising Bubble now. The From Logic component arrives with it. Its negative draw order keeps the bubble behind the glass and text.
-60Soap BubbleX 6, Y 6Rise And SwayRise And Sway Data7.4.2 Drift Down
The crystals travel the other way. Each begins with a color from Piece Kinds and its own scale, alpha and spin. A negative Y velocity carries it downward.
Drift Down returns a departing crystal above the view. This time it chooses a fresh color from Piece Kinds before returning to the passing bubbles. The shape gets another passage through the sky, while its other settings stay with it.
A crystal of a random color, size, see-through and spin, falling; back to the top, as a new color, when it leaves the bottom.
Any Object- Action Name
colorRow- Maximum
dataCount('Piece Kinds') - 1
- Frame
data('Piece Kinds', colorRow.value, 'frame')
- Action Name
crystalScale- Minimum
@self.smallestScale- Maximum
@self.largestScale
- Horizontal Scale
crystalScale.value- Vertical Scale
crystalScale.value
- Action Name
crystalAlpha- Minimum
@self.faintest- Maximum
@self.clearest
- Alpha
crystalAlpha.value
- Action Name
crystalSpin- Minimum
-@self.fastestSpin- Maximum
@self.fastestSpin
- Spin
crystalSpin.value
- Action Name
crystalFall- Minimum
@self.slowestFall- Maximum
@self.fastestFall
- X Velocity
0- Y Velocity
-crystalFall.value
- Action Name
crystalX- Minimum
@self.leftmost- Maximum
@self.rightmost
- X
crystalX.value- Y
@self.topStart
- Action Name
newColorRow- Maximum
dataCount('Piece Kinds') - 1
- Frame
data('Piece Kinds', newColorRow.value, 'frame')
-40Crystal BlocksX 1.5, Y 1.5Place the Gameplay bubbles from the setup’s first Scene list. Leave its BACK TO MENU Objects for later. The Main Menu and Title have their own bubble and crystal lists near their ends. Place those as well, keeping their world positions.
Run Title and watch the rising bubbles pass crystals that are falling toward the bottom of the view. The rest of that Scene is still empty. Its invitation comes next.
7.5 The Invitation
The logo stands still while the words beneath it breathe.
7.5.1 Blink
PRESS, the Enter key picture and TO PLAY share a pulse. Blink starts their fade as soon as they appear, then alternates its timer Modes between dimming and brightening. All three Objects use the same period.
Each Tween’s Value is self.transform.opacity, how much of the Object shows. The ease smooths the change at each end, so the invitation never snaps off. Its pill remains steady behind it.
Pulses this picture or text between dimAlpha and full every period seconds (a fade down, then up).
Any Object- Timer Name
"blink"- Repeat Every (s)
@self.period / 2
- Value
self.transform.opacity- Target
@self.dimAlpha- Duration
@self.period / 2- Ease
Quad in Out
- Value
self.transform.opacity- Target
1- Duration
@self.period / 2- Ease
Quad in Out
- Event
On the Blink Timer- Mode
Brightening
- Value
self.transform.opacity- Target
@self.dimAlpha- Duration
@self.period / 2- Ease
Quad in Out
- Event
On the Blink Timer- Mode
Dimming
Make the Title logo and the pill, then the three pulsing Objects. Their cards attach Blink where it belongs. They are Screen UI, so use the Title placements’ screen offsets, including the text draw orders.
Window / UICenterUIX 128, Y 128110Crystal Cascade LogoX 1140, Y 375Window / UICenterUIX 128, Y 128105Aero ButtonX 720, Y 126Window / UICenterUIX 128, Y 48PRESSNunito48Bold1.5CenterWrap to Width186Window / UICenterUIX 128, Y 128106Key EnterX 114, Y 60Window / UICenterUIX 128, Y 48TO PLAYNunito48Bold1.5CenterWrap to Width2437.5.3 Title Controls
The invitation now answers. Title Controls gives Menus the keys and starts Aurora Glass as the Scene begins. Confirm and a left click share the same Function, so either opens the Main Menu.
The invisible Title Flow carries this Logic. Place it using its Title line; its position has no picture to move. The Main Menu may still look empty when you enter it. We’ll furnish it now.
The Title's keys: the menus have the controls; Confirm or a left click goes to the Main Menu. Starts the Menu Theme.
Any Object- Input Context
Menus
- Input Context
Play- Active
No
- Operation
Crossfade Music- Sound
Aurora Glass (Menu Theme)- Crossfade Seconds
@self.musicFadeSeconds
The invitation pulses against the moving sky, and your press opens the room you are about to furnish.
7.6 A Panel with Several Choices
The Main Menu uses the results panel’s memory.
Add choiceCount to the existing Panel State, beside the field that already remembers the chosen button. Each button will count itself when created, so the panel knows how far the selection can travel. Keep the existing chosen and isOpen fields.
What a panel of choices keeps: chosen, the choice chosen now (0 = the top one); isOpen, the panel is open and its choices can be chosen. choiceCount: how many choices it has (each choice adds itself when created).
7.6.1 Close How To Play
Make the return from help before the Events that call it. The pictures arrive later, but their controls will already have a way home. Close How To Play supplies that shared return.
Closes the How to Play panel with "Menu Back" (howToPlayClosed).
- Sound
Menu Back
- Custom Event
howToPlayClosed
7.6.2 Panel Choices
Up and Down now travel through the choices instead of always returning to PLAY AGAIN. At either end, the next press wraps around. The mod expression wraps it.
Add both navigation Events and their normal Modes first. Give each Event another Mode named While Help Is Open, and leave the Actions inside that Mode empty. The help messages choose between those responses. An empty Mode deliberately leaves the menu still while the player reads the help panel above it.
A panel of choices: opens on its chosen choice when told (panelOpened; the top one unless the Logic that opens it chose another), closes when told (panelClosed), going back to its top choice, and while open Up / Down choose the choice above or below, going round at either end, with Menu Bubble.
Any Objectself.panelState- Component Value
self.panelState.isOpen- Value
true
- panel
self- choice
self.panelState.chosen
- Component Value
self.panelState.isOpen- Value
false
- Component Value
self.panelState.chosen- Value
0
- Custom Event
panelChoiceChanged
self.panelState.isOpen == true- panel
self- choice
mod(self.panelState.chosen - 1 + self.panelState.choiceCount, self.panelState.choiceCount)
- Sound
Menu Bubble
self.panelState.isOpen == true- panel
self- choice
mod(self.panelState.chosen + 1, self.panelState.choiceCount)
- Sound
Menu Bubble
Now let the help messages choose the quiet navigation Modes. Your choice waits.
- Event
When Menu Navigate Up Is Pressed- Mode
While Help Is Open
- Event
When Menu Navigate Down Is Pressed- Mode
While Help Is Open
- Event
When Menu Navigate Up Is Pressed- Mode
Choose The One Above
- Event
When Menu Navigate Down Is Pressed- Mode
Choose The One Below
7.6.3 Panel Choice
Each button registers with its panel when created. Keep the prepared declaration from Chapter 6, including the Object Kind restriction on the panel reference. It accepts Objects with Panel State. It accepts either Results Panel or Main Menu Flow, because both carry that structure.
The prepared declaration includes the panelState slot and its Panel State schema. Keep those names. Later, each button’s Shared Variable value chooses the actual panel resource.
The Confirm Event now has two responses. In Run If Chosen, it announces choiceRun as before. In While Help Is Open, it closes help only for the selected choice. The mouse Events get empty help Modes too.
One press opens help. The next press closes it. Keeping those responses in the same Event prevents the opening press from reaching a separate closing listener.
One choice of a panel: while the panel is open, Confirm runs it when it is the chosen choice; the mouse over it chooses it, and a click on it runs it. Running it plays Menu Select and tells its own button (choiceRun), whose other Logic does the work of the choice. While the How to Play panel covers the Main Menu, the choices do nothing, and Confirm on the chosen one closes it.
Any ObjectObjects with Panel State- Component Value
@self.panel.panelState.choiceCount- Operator
+=- Value
1
@self.panel.panelState.isOpen == true && @self.panel.panelState.chosen == @self.choice- Sound
Menu Select
- Custom Event
choiceRun
@self.panel.panelState.chosen != @self.choice- panel
@self.panel- choice
@self.choice
- Sound
Menu Bubble
- panel
@self.panel- choice
@self.choice
- Sound
Menu Select
- Custom Event
choiceRun
The second part gives help its closing press. Restore the normal Modes when help closes, so these buttons can run their own jobs again.
- Event
When Confirm Is Pressed- Mode
While Help Is Open
- Event
On Mouse Enter- Mode
While Help Is Open
- Event
When Left Is Clicked- Mode
While Help Is Open
- Event
When Confirm Is Pressed- Mode
Run If Chosen
- Event
On Mouse Enter- Mode
Choose This One
- Event
When Left Is Clicked- Mode
Run This One
@self.panel.panelState.chosen == @self.choice7.7 Give Each Choice Its Job
The glow can choose a button before the game knows what that button does.
Make Menu Choices Entry, then Menu Choices. Each row holds the mode number and the words that appear beside that choice when its button glows. The help and quit rows use no playing mode. Keep the rows in the card’s order, because menuChoice is their row number.
One row of the "Menu Choices" Data Table. Its fields are the columns of the table. The Main Menu's choices, top to bottom; the row number is $menuChoice. mode: the way to play it starts (1 Marathon, 2 Sprint 40, 3 Ultra, 4 Zen; 0 for HOW TO PLAY and QUIT). title, line1, line2, line3: what the info panel says about it, a line each.
1MARATHONClear lines to climb 15 levels ofrising speed. Reach 150 lines to win.2SPRINT 40Clear 40 lines as fast as you can.Your best time is saved.3ULTRATwo minutes. Score as much as you can:Cascades, Twists, combos andBack-to-Back chains pay the most.4ZENNo clock, no game over, gentle gravity.Build calmly - a full well simplysparkles clean and play goes on.0HOW TO PLAYControls, scoring and themodern rules this game follows.0QUITLeave Crystal Cascade.See you soon!7.7.1 Start The Chosen Mode
A mode button reads its row into mode before leaving for Gameplay. Each playing button shares this job. Each row holds the mode that distinguishes this button from the other playing choices.
These choices can already enter the well. Their separate finish lines and personal bests arrive in Chapter 8. The descriptions beside those buttons are promises we’ll keep when the well learns what each mode asks for.
What a mode choice (MARATHON, SPRINT 40, ULTRA, ZEN) does: starts a game of the mode of the chosen choice (Menu Choices): keeps it in $mode and goes to the Gameplay Scene.
Any Object- Variable
$mode- Value
data('Menu Choices', $menuChoice, 'mode')
- Scene
Gameplay- Transition
Fade- Transition Seconds
0.5
7.7.2 Open How To Play
HOW TO PLAY stays in this Scene. The selected button opens a controls chart over the menu. Its pictures will arrive below; Open How To Play connects their opening to the controls that must wait underneath.
The supplied menu description mentions scoring and rules, but this help panel shows the controls chart. The scoring rules stay in Chapter 5. You can give this row your own description in the Challenge.
What the HOW TO PLAY choice does: opens the How to Play panel (howToPlayOpened).
Any Object- Custom Event
howToPlayOpened
7.7.3 Quit The Game
QUIT ends play through End Game. A native game can close its window; a browser game stops within its page. The surrounding webpage stays where it is.
What the QUIT choice does: ends the game. End Game closes the window (or stops the published game in a browser).
Any ObjectMake the choice Objects now. The bright picture uses Show When Panel Choice from Chapter 6. Its panel reference names Main Menu Flow, and the choice number identifies which button should receive that glow. The button uses Panel Choice and the listener for its job.
Compare panel, choice, attached job and placement first. Those values distinguish the otherwise familiar cards. Keep Shared Variables on the button separate from Per Instance Variables on its glow.
Window / UICenterUIX 128, Y 128101Aero Button LitX 522.75, Y 91.8Main Menu FlowWindow / UICenterUIX 128, Y 128100Aero ButtonX 522.75, Y 91.8SensorX 498.75, Y 70.8Main Menu FlowWindow / UICenterUIX 128, Y 48MARATHONNunito42Bold1.5CenterWrap to Width522.75Window / UICenterUIX 128, Y 128101Aero Button LitX 522.75, Y 91.8Main Menu Flow1Window / UICenterUIX 128, Y 128100Aero ButtonX 522.75, Y 91.8SensorX 498.75, Y 70.8Main Menu Flow1Window / UICenterUIX 128, Y 48SPRINT 40Nunito42Bold1.5CenterWrap to Width522.75Window / UICenterUIX 128, Y 128101Aero Button LitX 522.75, Y 91.8Main Menu Flow2Window / UICenterUIX 128, Y 128100Aero ButtonX 522.75, Y 91.8SensorX 498.75, Y 70.8Main Menu Flow2Window / UICenterUIX 128, Y 48ULTRANunito42Bold1.5CenterWrap to Width522.75Window / UICenterUIX 128, Y 128101Aero Button LitX 522.75, Y 91.8Main Menu Flow3Window / UICenterUIX 128, Y 128100Aero ButtonX 522.75, Y 91.8SensorX 498.75, Y 70.8Main Menu Flow3Window / UICenterUIX 128, Y 48ZENNunito42Bold1.5CenterWrap to Width522.75Window / UIBottom CenterUIX 128, Y 128101Aero Button LitX 522.75, Y 91.8Main Menu Flow4Window / UIBottom CenterUIX 128, Y 128100Aero ButtonX 522.75, Y 91.8SensorX 498.75, Y 70.8Main Menu Flow4Window / UIBottom CenterUIX 128, Y 48HOW TO PLAYNunito42Bold1.5CenterWrap to Width522.75Window / UIBottom CenterUIX 128, Y 128101Aero Button LitX 522.75, Y 91.8Main Menu Flow5Window / UIBottom CenterUIX 128, Y 128100Aero ButtonX 522.75, Y 91.8SensorX 498.75, Y 70.8Main Menu Flow5Window / UIBottom CenterUIX 128, Y 48QUITNunito42Bold1.5CenterWrap to Width522.75Place these groups in the Main Menu list’s order. The buttons carry the Collider sensors that hear the mouse, while their labels and bright pictures sit above them. Keep those layers together. Move Up and Down and watch one glow travel through the menu.
7.8 Words Beside the Choice
The right-hand panel follows what you choose.
Make Menu Info Text. Each of its text Objects gets one plain Data Structure component, named shown. As with the results record, add and name it before attaching Show Menu Info. Its template reads infoText from that component.
What a text of the info panel shows. infoText: its column of Menu Choices for the chosen choice (its template {infoText} reads it).
7.11 Play It!
- Start on Title. Watch the invitation dim and brighten, with bubbles rising and crystals falling behind the logo.
- Press Enter to enter Main Menu. Use Back to return to Title, then try a left click on the invitation.
- Move through every menu choice. The glow wraps around at both ends, while the info panel changes its words.
- Select MARATHON. Left and Right change START LEVEL within its limits; another choice hides that group.
- Open HOW TO PLAY. Up, Down and mouse movement leave the choice alone underneath it. Confirm, Back and a right click each close help on separate tries.
- Choose MARATHON and play. End the game, then use BACK TO MENU. Your previous menu choice returns.
- Choose a later start level for MARATHON and enter the well again. LEVEL begins there, with faster gravity.
- Try the other mode buttons. They reach Gameplay now; their different goals come next.
- Try QUIT last. The browser game stops within its frame. Reload the page to play again.
7.12 How It Works
The button chooses. Another listener gives that choice its meaning. A shared panel can therefore serve results and the Main Menu without learning every button’s job.
Help changes the response to an Event. It also changes the pictures, but the Modes are what keep hidden choices quiet. Closing help restores the same controls around the same remembered choice.
7.13 If It Didn’t Work
The menu shows but no key moves its glow? Start with the input context: Title Controls and Main Menu Controls must activate Menus before its Commands can be heard. The Commands must belong to that context. Restore the group, then enter the menu again and press Down.
Up and Down skip choices or stop wrapping? Compare Panel Choice’s Create Event and its panel value on every button. Each button counts itself on the same panel. Restore the missing reference and restart the Scene to count again.
Help opens and closes on one press? Keep the opening and closing responses in Modes of the same Confirm Event. A separate closing Event can hear the opening press too. Restore those Modes and try again.
A red self.shown name in Show Menu Info? Each info text needs its Menu Info Text component named shown before the Logic’s expressions read it. Add or rename that single component, attach the Logic, then retype the expression. The words have somewhere to arrive now.
A bubble leaves the view and never comes back up from below the screen? Look at its Leave View Event and bottomStart. Its upward velocity should remain set. Restore those values and wait for another passage through the sky.
The chosen start level disappears in Gameplay? Compare Count Level’s Scene Start branch and firstLevel assignment. Restore that boundary, return to MARATHON and choose the level again.
Still stuck? Search the manual, or ask in the Myth Engine Discord (opens a new tab).
7.14 Challenge
What would your game’s invitation look like? Try a different pulse, another arrangement of the key pictures, or words of your own in Menu Choices. Keep the working controls while you give the menu your own welcome.
The front door opens. Next, each way to play gets its own finish line.