Build a GameCreating Chess

6  New Game, Side and Flip

Goal

By the end of this chapter, a row of buttons sits under the Board. New Game asks which Side you’ll play and how strong the other Side should be. Flip turns the Board around.

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

Chess, Chapter 6 finishedMyth project · 15.8 MB

To open it, start Myth Engine, choose File › Open Project... and pick the downloaded file.

6.1 The Idea

Play your game from Chapter 5 to its end, a Checkmate or a Draw. The words under the Board say how it went, and the Board stops answering. Now what? The only way to play again is to close the game and press Play once more. And White always sits at the bottom, nearest you.

This chapter puts a row of buttons under the Board. Two of them come now. New Game opens a panel that asks two questions: which Side will you play, and how strong should the other Side be? That second one is the Strength, and it runs from Gentle, the kindest, up to Expert. Flip turns the Board around, so Black sits at the bottom.

Turning the Board is the chapter’s one hard idea. Picture it as walking round the table and sitting down in the other chair. The Pieces don’t move. You do. In your game, the Position table stays exactly as it is, and a1 is still a1. Only the drawing changes. Every Piece, Square, mark and label moves to where its Square is drawn now.

The panel has a small job of its own. Your choices should still be there next time, even after the game is closed. Myth Engine keeps a few words for that on your computer, each under a name of its own. They’re called Persistent Values.

One promise for later: the Strength does nothing yet. You’ll choose it in this chapter, and Chapter 7’s Computer will play at it.

6.2 The Plan

Here’s how the pieces work together, in a chain of messages. Read each line from left to right, once now for the shape, and again after the panel works.

  • A button is pressed -> the Logic on its Object variant answers.
  • Flip is pressed -> Report Flip sends flipPressed -> Flip Board turns isFlipped over and sends boardFlipped.
  • The Board turns -> Place On Board moves each Piece, Square, Move Mark and label, and Show Label shows only the labels on the edge.
  • New Game is pressed -> Report New Game sends newGamePressed -> New Game opens the panel.
  • A Side or a Strength is pressed -> Report Side or Report Strength sends sideChosen or strengthChosen -> New Game notes it and sends newGameChoiceChanged -> Show Option turns the chosen one green.
  • Play is pressed -> New Game saves the choices and restarts the game. Cancel closes the panel.

You’ll teach the Board to turn first, and see it turn when the Flip button arrives. The panel comes last.

6.3 Set Up

Set upWhat this chapter adds
SCENE Chess Table: PLACE THESE
ObjectXY
Flip Button13040
with Text / UI > Text = Flip (Edit Object Locally)
New Game Button-39040
with Text / UI > Text = New Game (Edit Object Locally)
Panel Backdrop00hidden
with Z-Index = 29
with UI Interaction > Group = New Game (Edit Object Locally)
New Game Panel070hidden
Replace Question0195hidden
with Z-Index = 32
Panel Label0155hidden
with Z-Index = 32
with Text / UI > Text = Play as (Edit Object Locally)
Side Option-58115hidden
with Data Structure > Values > Option = White
Side Option58115hidden
with Data Structure > Values > Option = Black
Panel Label060hidden
with Z-Index = 32
Strength Option-23220hidden
with Data Structure > Values > Option = Gentle
Strength Option-11620hidden
with Data Structure > Values > Option = Casual
Strength Option020hidden
with Data Structure > Values > Option = Club
Strength Option11620hidden
with Data Structure > Values > Option = Strong
Strength Option23220hidden
with Data Structure > Values > Option = Expert
Close New Game Button-80-70hidden
with Text / UI > Text = Cancel (Edit Object Locally)
Play Button80-70hidden
SCENE Chess Table: CHANGE THESE PLACEMENTS
Status Linemove to X 0, Y 105

Nothing new goes into the game’s settings in this chapter. The Set up card is all placements, and most belong to the panel, which you’ll build in the last part. Make its Objects first, then come back here to place them.

One line is about the Status Line, which moves up to make room for the buttons. It’s under CHANGE THESE PLACEMENTS, and the page’s passage on the Set up card shows how. Change its Screen Offset (px) Y to 105.

6.4 What the Game Rules Remember Now

Board State gets four more fields.

Data StructureBoard StateAddDelete

What the Game Rules remember about the game besides the Position table. sideToMove: the Side whose Turn it is (White moves first). selected: the Square of the selected Piece (empty when none is selected). lastFrom and lastTo: the two Squares of the last Move (empty before the first Move). checkSquare: the Square of the King in Check (empty when the Side to move is not in Check). enPassantSquare: the Square a Pawn has just passed over with a two-Square Move, where an enemy Pawn may take it en passant on the very next Move (empty otherwise). promotionSquare: while the Promotion choice is open, the Square the selected Pawn will be promoted on (empty otherwise). playerSide: the Side the Player plays (White unless chosen otherwise), so the end of the game can say who won. fiftyMoveCount: the Moves made since the last Capture or Pawn Move, both Sides counted, for the fifty-move rule. isFlipped: whether the Board is drawn turned over, Black at the bottom (false: White at the bottom, a1 at the bottom-left). strength: the Strength the Computer plays at (Gentle, Casual, Club, Strong, or Expert; Casual unless chosen otherwise). chosenSide and chosenStrength: while the New Game panel is open, the Side and the Strength it shows as chosen.

sideToMoveTextdefault White
selectedTextdefault (empty)
lastFromTextdefault (empty)
lastToTextdefault (empty)
checkSquareTextdefault (empty)
enPassantSquareTextdefault (empty)
promotionSquareTextdefault (empty)
playerSideTextdefault White
fiftyMoveCountNumberdefault 0
isFlippedBooleandefault false
strengthTextdefault Casual
chosenSideTextdefault (empty)
chosenStrengthTextdefault (empty)

isFlipped says how the Board is drawn. The card starts it at false, which is No. That’s White at the bottom, the way it’s always been. strength is the Strength the next Computer will play at, Casual to start. The last two, chosenSide and chosenStrength, are the panel’s own notes. While it’s open, they hold what you’ve picked so far. Nothing is final until you press Play.

6.5 Turning the Board Around

Now the Board learns to turn. You won’t see it yet, because nothing presses Flip until the next part. Keep going.

6.5.1 Square Position

Square Position is Chapter 1’s Function that answers where a Square’s middle is. Now it answers for a turned Board too.

FunctionSquare PositionAddDelete

Answers where the center of a Square is in the world, in meters, for the Board as it is drawn. square: the Square's name (a1 to h8). isFlipped: whether the Board is drawn turned over (Black at the bottom). squareMeters: how wide one Square is. boardLeft and boardBottom: where the Board's bottom-left corner is in the world. It returns x and y: the Square's center.

PARAMETERS
NameTypeStarts at
squareText
isFlippedBooleanNo
squareMetersNumber3.75
boardLeftNumber0
boardBottomNumber0
RETURN TYPESquare Position Result (a Data Structure)
ACTIONS
1Declare Variable
Name
file
Value
0
2Declare Variable
Name
rank
Value
0
3Declare Variable
Name
x
Value
0
4Declare Variable
Name
y
Value
0
5Change Variable
Variable
file
Value
data('Position', square, 'file')
6Change Variable
Variable
rank
Value
data('Position', square, 'rank')
7IfisFlipped == true
Then
8Change Variable
Variable
file
Value
9 - file
9Change Variable
Variable
rank
Value
9 - rank
10Change Variable
Variable
x
Value
boardLeft + (file - 0.5) * squareMeters
11Change Variable
Variable
y
Value
boardBottom + (rank - 0.5) * squareMeters
12Return
x
x
y
y

Add the Parameter isFlipped with the + on the Start block, a Boolean that starts at false. Yours sits at the bottom of the list. That’s fine.

The new If is steps 7 to 9, between reading the Rank and working out x. It goes in the middle of the line. Step 10 is the one that works out x. Add the If apart from the line, then join it after step 6 with the round handles. Its Then gets steps 8 and 9, with Add Inside Then.

Steps 10 and 11 stay on the line from Start, after the If, with Return behind them. They belong outside its Then. So x and y are worked out on every Board, turned or not.

How does turning work, in numbers? Files and Ranks run from 1 to 8. Turned over, the first becomes the last, so 1 becomes 8 and 8 becomes 1. Taking each one from 9 does exactly that. On a turned Board, h8 is drawn in the bottom-left corner, where a1 used to be.

6.5.2 Lay Out The Board

Lay Out The Board makes everything at the start, the plain way round. It gets two small changes.

Logic ComponentLay Out The BoardAttach to: BoardAddDelete

Makes the Objects that show each Square of the Board when the Scene starts: for every row of the Position table (one Square, a1 to h8), a Piece Object, a Square and a Move Mark are made on that Square (Square Position), and each is given the Square's name (its Square Info); a Square in the left or right column also gets a Rank Label, and one in the bottom or top row a File Label (turned over, the h-File is on the left and Rank 8 at the bottom). Then it says "boardLaidOut". pieceObject, squareObject, moveMarkObject: the Objects made on each Square; rankLabelObject, fileLabelObject: the labels. squareMeters: how wide one Square is.

Attach toAny Object
DATA STRUCTURES
Lay Out The Board Dataself.layOutTheBoardData
SHARED VARIABLES
NameTypeKindStarting Value
pieceObjectObjectConstantNone
rankLabelObjectObjectConstantNone
fileLabelObjectObjectConstantNone
squareMetersNumberConstant3.75
squareObjectObjectConstantNone
moveMarkObjectObjectConstantNone
When the Scene Starts
WhenScene Start
1Declare Variable
Name
boardBottom
Value
0
2Declare Variable
Name
boardLeft
Value
0
3Change Variable
Variable
boardLeft
Value
self.transform.position.x - 4 * @self.squareMeters
4Change Variable
Variable
boardBottom
Value
self.transform.position.y - 4 * @self.squareMeters
5RepeatdataCount('Position')times
Each time
6Change Component Value
Component Value
self.layOutTheBoardData.squareName
Value
dataRow('Position', local.index)
7Square PositionFunction
Action Name
spot
square
self.layOutTheBoardData.squareName
isFlipped
No
squareMeters
@self.squareMeters
boardLeft
boardLeft
boardBottom
boardBottom
8Create Instance
Object to Create
@self.pieceObject
X
spot.x
Y
spot.y
Created As
piece
9Change Variable
Variable
piece.name
Value
self.layOutTheBoardData.squareName
10Create Instance
Object to Create
@self.squareObject
X
spot.x
Y
spot.y
Created As
square
11Change Variable
Variable
square.name
Value
self.layOutTheBoardData.squareName
12Create Instance
Object to Create
@self.moveMarkObject
X
spot.x
Y
spot.y
Created As
moveMark
13Change Variable
Variable
moveMark.name
Value
self.layOutTheBoardData.squareName
14Ifdata('Position', self.layOutTheBoardData.squareName, 'file') == 1 || data('Position', self.layOutTheBoardData.squareName, 'file') == 8comparedata('Position', self.layOutTheBoardData.squareName, 'file') == 1
Then
15Create Instance
Object to Create
@self.rankLabelObject
X
spot.x
Y
spot.y
Created As
rankLabel
16Change Variable
Variable
rankLabel.name
Value
self.layOutTheBoardData.squareName
17Ifdata('Position', self.layOutTheBoardData.squareName, 'rank') == 1 || data('Position', self.layOutTheBoardData.squareName, 'rank') == 8comparedata('Position', self.layOutTheBoardData.squareName, 'rank') == 1
Then
18Create Instance
Object to Create
@self.fileLabelObject
X
spot.x
Y
spot.y
Created As
fileLabel
19Change Variable
Variable
fileLabel.name
Value
self.layOutTheBoardData.squareName
20Trigger Custom Event
Custom Event
boardLaidOut

First, its call to Square Position has a new box now, isFlipped. Leave it on No. The Board is always laid out with White at the bottom, and it’s turned afterward, if it needs to be.

Second, the labels. A turned Board puts its Rank numbers down the h-File and its File letters along Rank 8. So the labels go on both edges now. Each of the two Ifs gets one more test, joined with ||. It reads the same column as the first test, and asks for 8 instead of 1. Type each condition whole, as the card spells it. Half of the labels will always be hidden. Show Label decides which half.

6.5.3 Show Label

Logic ComponentShow LabelAttach to: Rank Label, File LabelAddDelete

Writes the Rank number or the File letter of the Square this label stands on (its Square Info), read from the Position table: shows names the column (rank, or fileLetter). It writes it in a color that stands out on that Square: labelOnLight on a light Square, labelOnDark on a dark one (a Square is dark when its File and Rank add up to an even number, as a1). It shows only while its Square is drawn on the edge of the Board where labels go, the left column or the bottom row, whichever way round the Board is drawn (Flip Board, on the Game Rules, its Other, sends "boardFlipped"). edge: the Position table's column that counts from that edge, file for a Rank Label (the left column) and rank for a File Label (the bottom row).

Attach toAny Object
DATA STRUCTURES
Square Infoself.squareInfo
COMPONENTS
self.textText / UI
SHARED VARIABLES
NameTypeKindStarting Value
showsTextConstantrank
labelOnLightColorConstant#503a2b
labelOnDarkColorConstant#dfc69b
edgeTextConstantfile
On Board Laid Out
WhenboardLaidOutCustom Event
1Declare Variable
Name
squareShade
Value
0
2Declare Variable
Name
rank
Value
0
3Declare Variable
Name
file
Value
0
4Change Component Value
Component Value
self.text.text
Value
data('Position', self.squareInfo.name, @self.shows)
5Change Variable
Variable
file
Value
data('Position', self.squareInfo.name, 'file')
6Change Variable
Variable
rank
Value
data('Position', self.squareInfo.name, 'rank')
7Change Variable
Variable
squareShade
Value
(file + rank) % 2
8IfsquareShade == 1
Then
9Change Component Value
Component Value
self.text.color
Value
@self.labelOnLight
10Otherwise
11Change Component Value
Component Value
self.text.color
Value
@self.labelOnDark
On Board Flipped
WhenboardFlippedCustom Event
1Declare Variable
Name
edgeLine
Value
0
2Change Variable
Variable
edgeLine
Value
data('Position', self.squareInfo.name, @self.edge)
3Ifother.boardState.isFlipped == true
Then
4Change Variable
Variable
edgeLine
Value
9 - edgeLine
5IfedgeLine == 1
Then
6Set Visible
Visible
Yes
7Otherwise
8Set Visible
Visible
No

Show Label reads the Game Rules as Other, the Object that sends boardFlipped. It also gets a Text Shared Variable, edge, a Constant starting at file. Why file? A Rank Label stands in the a-File, where file is 1. So its edge is file, the name of the Position column it counts by. The File Label will set its own edge to rank.

The new Event hears boardFlipped. It reads how far its Square is from that edge, as edgeLine. On a turned Board it takes that from 9, as Square Position does. Is edgeLine 1? Then the label is on the edge where labels go, and it shows. Otherwise Set Visible hides it. Its Visible goes false.

6.5.4 Place On Board

Every Piece, Square, Move Mark and label needs to move when the Board turns. One Logic Component does it for all of them.

Logic ComponentPlace On BoardAttach to: Piece, Rank Label, File Label, Square, Move Mark

Keeps this Object on its Square (Square Info) when the Board is turned over: when the Game Rules say "boardFlipped" (they are its Other), it moves to where its Square is now drawn (Square Position). The Piece, the Square, and the Move Mark of each Square all use it. squareMeters: how wide one Square is (3.75 m: the Board art is 30 m across). boardLeft and boardBottom: where the Board's bottom-left corner is in the world (0 and 4.375 m: the game window is 140 px taller than the Board, for the status line and the buttons under it).

Attach toAny Object
DATA STRUCTURES
Square Infoself.squareInfo
SHARED VARIABLES
NameTypeKindStarting Value
squareMetersNumberConstant3.75
boardLeftNumberConstant0
boardBottomNumberConstant4.375
On Board Flipped
WhenboardFlippedCustom Event
1Declare Variable
Type
Boolean
Name
isFlipped
Value
false
2Change Variable
Variable
isFlipped
Value
other.boardState.isFlipped
3Square PositionFunction
Action Name
mySquare
square
self.squareInfo.name
isFlipped
isFlipped
squareMeters
@self.squareMeters
boardLeft
@self.boardLeft
boardBottom
@self.boardBottom
4Set Position
X
mySquare.x
Y
mySquare.y

Place On Board hears boardFlipped. It reads isFlipped from the Game Rules, asks Square Position where its own Square is drawn now, and goes there with Set Position.

Its Shared Variables are three constant Numbers. squareMeters is 3.75, as everywhere else. boardLeft and boardBottom are the Board’s bottom-left corner in the world. Why is boardBottom 4.375 and not 0? The game window is taller than the Board, and the extra strip at the bottom holds the Status Line and the buttons. Lay Out The Board works its corner out from the Board itself. Place On Board can’t reach the Board. So its corner is typed in, and if you ever move the Board, change these two numbers with it.

Now attach it to the five Objects that stand on a Square. Each card below is the whole Object, and its one new line, Place On Board, is green.

ObjectPieceAddDelete
Transform
Bounding Box > SizeX 3.4765, Y 3.4765
Sprite
Scene Depth Draw Order10
SpriteCarved Walnut Pieces
Transform > SizeX 3.4765, Y 3.4765
Data Structure
Data StructureSquare Info
Logic
Show Piece
Place On Board
ObjectSquareAddDelete
Transform
Bounding Box > SizeX 3.75, Y 3.75
Sprite
Scene Depth Draw Order5
SpriteSquare Highlight
Transform > SizeX 3.75, Y 3.75
Data Structure
Data StructureSquare Info
Logic
Report Click
Square Marks
Place On Board
ObjectMove MarkAddDelete
Transform
Bounding Box > SizeX 3.75, Y 3.75
Sprite
Scene Depth Draw Order7
SpriteMove Marks
Transform > SizeX 3.75, Y 3.75
Data Structure
Data StructureSquare Info
Logic
Show Move Mark
Place On Board
ObjectRank LabelAddDelete
Transform
Bounding Box > SizeX 0.375, Y 0.375
Text / UI
Text1
Font Size1
EmphasisExtra Bold
Color#503A2B
Transform > PositionX -1.575, Y 1.388
Data Structure
Data StructureSquare Info
Logic
Show Label
Place On Board
ObjectFile LabelAddDelete
Transform
Bounding Box > SizeX 0.375, Y 0.375
Text / UI
Texta
Font Size1
EmphasisExtra Bold
Color#503A2B
AlignmentRight
Transform > PositionX 1.575, Y -1.388
Data Structure
Data StructureSquare Info
Logic
Show Label
Place On Board
Shared Variables
showsfileLetter
edgerank

The File Label sets two Shared Variables of Show Label now. Its shows is fileLetter, as before. Its new edge is rank. Both are Text Values on its Shared Variables card, so type them bare.

6.5.5 Flip Board

Flip Board lives on the Game Rules, where it turns isFlipped over and tells everyone about it.

Logic ComponentFlip BoardAttach to: Game Rules

Turns the Board over for viewing when the Player presses Flip ("flipPressed"), or back again. Only the way the Board is drawn changes (Board State's isFlipped): the position, the Turn, and the Player's Side stay as they are. Then it tells everyone "boardFlipped", so every Piece, Square, Move Mark, and label shows itself the new way round. When the Board has been laid out ("boardLaidOut"), it tells everyone "boardFlipped" too, so everything is shown the way round the Board is drawn.

Attach toAny Object
DATA STRUCTURES
Board Stateself.boardState
On Flip Pressed
WhenflipPressedCustom Event
1Ifself.boardState.isFlipped == true
Then
2Change Component Value
Component Value
self.boardState.isFlipped
Value
false
3Otherwise
4Change Component Value
Component Value
self.boardState.isFlipped
Value
true
5Trigger Custom Event
Custom Event
boardFlipped
On Board Laid Out
WhenboardLaidOutCustom Event
1Trigger Custom Event
Custom Event
boardFlipped

When flipPressed arrives, Flip Board turns isFlipped over, like a coin. Then it sends boardFlipped to everyone, and every Piece, Square and label on the Board hears it at once.

The second Event is quieter. When the Board has been laid out, Flip Board sends boardFlipped too. That’s how everything lands in the right place at the start, and the labels on the far edges hide.

Attach Flip Board to the Game Rules now. The Game Rules’ own card comes at the end of the chapter, once New Game is there too.

Run the game. It looks exactly as it did. That’s right. The Board is laid out, then every Object is placed again, on the same spot, and the new labels on the right and the top hide at once. Nothing else has happened yet, because nothing sends flipPressed.

6.6 A Row of Buttons

Now the buttons. They share a shape, but each has its own job. An Object variant starts from another Object, then adds what makes it different. The Tool Button gives both buttons their shape. Each variant adds the Logic that answers a press.

6.6.1 Report Flip and Report New Game

Each button’s job is a Logic Component of one step, which rings a bell and lets the Game Rules decide.

Logic ComponentReport Flip

What the Flip button does: it tells whoever listens (the Game Rules) with "flipPressed".

Attach toAny Object
On Hud Activated
WhenUI Activated
1Trigger Custom Event
Custom Event
flipPressed
Logic ComponentReport New Game

What the New Game button does: it tells whoever listens (the Game Rules) with "newGamePressed".

Attach toAny Object
On Hud Activated
WhenUI Activated
1Trigger Custom Event
Custom Event
newGamePressed

Both hear UI Activated, as Report Choice did in Chapter 4. The heading On Hud Activated is the name Myth gives that Event by itself. Report Flip sends flipPressed, and Flip Board is already listening. Report New Game sends newGamePressed. Nothing listens for that one yet. The New Game panel will, at the end of this chapter.

6.6.2 Tool Button

ObjectTool Button
Transform
Presentation > SpaceWindow / UI
Presentation > Screen AnchorBottom Center
Presentation > Render LayerUI
Bounding Box > SizeX 120, Y 44
UI Interaction(as it is added)
Sprite
Scene Depth Draw Order1
SpriteSquare Highlight
Tint#E2D5B4
Transform > SizeX 120, Y 44
Text / UI
Font Size18
EmphasisSemibold
Color#503A2B
AlignmentCenter

The Tool Button is a Screen UI Object, anchored to the bottom middle of the screen. Its picture is the plain white square from Chapter 2, 120 pixels wide and 44 high, and its Tint makes it a soft tan. Its UI Interaction stays a Button, as it comes. Its Text / UI has no words of its own, because each placement writes its own.

Now make the two variants, each from Tool Button. An Object variant shows where Add Variant… is, and how the new variant gets its Logic.

Object variantFlip ButtonVariant of: Tool Button
Logic
Report Flip
Object variantNew Game ButtonVariant of: Tool Button
Logic
Report New Game

Flip Button gets Report Flip, and New Game Button gets Report New Game. Both keep the base Object’s tan and its shape. Now go to the Set up card and place its first two lines. Pick the variant in the placement’s Object list. The Text goes in with Edit Object Locally: Flip on one, New Game on the other.

They sit 40 pixels above the bottom edge, with a wide gap between them. The gap isn’t a mistake. Later chapters fill it with Undo, Hint and Threats, and more buttons come after Flip.

Run the game. Two tan buttons wait under the Board, and the Status Line sits a little higher. Press Flip.

The whole Board turns at once. Black’s Pieces are at the bottom, nearest you, and White’s are across the Board. The numbers run 1 to 8 down the left side now, and the letters h to a along the bottom. Press it again, and the Board is back.

6.7 The New Game Panel

The last part is the panel. Like the Promotion choice, it’s a set of Screen UI Objects that show and hide together, over the Backdrop.

6.7.1 New Game Option

Each button on the panel stands for something.

Data StructureNew Game Option

What one button of the New Game panel stands for. option: a Side (a row of the Sides table: White or Black) or a Strength (Gentle, Casual, Club, Strong, or Expert).

optionTextdefault (empty)

New Game Option has one Text field, option, empty to start. On the White button it will say White, and on the Strong button, Strong.

6.7.2 Show Option

The chosen Side and the chosen Strength turn green. The others stay tan.

Logic ComponentShow OptionAttach to: Option Button

Marks this option of the New Game panel when it is the Side or the Strength chosen, whenever the choice changes (the Game Rules send "newGameChoiceChanged" and are its Other). chosenColor: the color of a chosen option. plainColor: the color of the others.

Attach toAny Object
DATA STRUCTURES
New Game Optionself.newGameOption
SHARED VARIABLES
NameTypeKindStarting Value
chosenColorColorConstant#a9c79b
plainColorColorConstant#e2d5b4
On New Game Choice Changed
WhennewGameChoiceChangedCustom Event
1Declare Variable
Type
Text
Name
myOption
2Change Variable
Variable
myOption
Value
self.newGameOption.option
3IfmyOption == other.boardState.chosenSide || myOption == other.boardState.chosenStrength
Then
4Change Sprite Tint Property
Value
@self.chosenColor
5Otherwise
6Change Sprite Tint Property
Value
@self.plainColor

Show Option hears newGameChoiceChanged from the Game Rules, and copies its own option into myOption. Then it asks one question with two tests. Is it the chosen Side, or the chosen Strength? Either one will do. So || joins the tests.

The answer picks a color with Change Sprite Tint Property. Its Property list starts on Color. Leave it there. Its Value reads @self.chosenColor, a sage green, or @self.plainColor, the same tan as every button. Both are constant Color Shared Variables. Its Other is the Game Rules, which sends newGameChoiceChanged.

6.7.3 The Buttons’ Logic

Four more jobs need Logic. Each hears UI Activated, as Report Flip does.

Logic ComponentReport Side

What a Side button of the New Game panel does (White or Black): it tells whoever listens (the Game Rules) with "sideChosen"; the listener reads the button's New Game Option as Other.

Attach toAny Object
On Hud Activated
WhenUI Activated
1Trigger Custom Event
Custom Event
sideChosen
Logic ComponentReport Strength

What a Strength button of the New Game panel does (Gentle to Expert): it tells whoever listens (the Game Rules) with "strengthChosen"; the listener reads the button's New Game Option as Other.

Attach toAny Object
On Hud Activated
WhenUI Activated
1Trigger Custom Event
Custom Event
strengthChosen
Logic ComponentReport Play

What the Play button of the New Game panel does: it tells whoever listens (the Game Rules) with "playPressed".

Attach toAny Object
On Hud Activated
WhenUI Activated
1Trigger Custom Event
Custom Event
playPressed

Report Side, Report Strength and Report Play each send one message, as Report Flip does. Each Logic runs on its button, so the message comes from the button that was pressed. New Game reads that button through other.

Logic ComponentClose New Game

What the Cancel button of the New Game panel does: it closes the panel and the game goes on as it was.

Attach toAny Object
On Hud Activated
WhenUI Activated
1Control Menu
Operation
Hide
Menu Element
New Game Panel

Close New Game is Cancel’s, and it’s the only one that does the job itself. Control Menu with its Operation on Hide closes the panel, and the game goes on as it was. Its Menu Element is New Game Panel, picked from the list.

6.7.4 The Panel’s Objects

Now the five Objects. All five are Screen UI Objects in the UI Group New Game.

ObjectNew Game Panel
Transform
Presentation > SpaceWindow / UI
Presentation > Screen AnchorCenter
Presentation > Render LayerUI
Bounding Box > SizeX 600, Y 420
UI Interaction
Element TypeText
GroupNew Game
Sprite
Scene Depth Draw Order30
SpriteSquare Highlight
Tint#EFE6CF
Transform > SizeX 600, Y 420
Text / UI
TextNew game
Font Size26
EmphasisSemibold
Color#503A2B
AlignmentCenter
Transform > PositionX 0, Y 170

The New Game Panel is the cream card, 600 pixels wide and 420 high, with New game written near its top. Nobody presses it, so its Element Type is Text.

ObjectReplace Question
Transform
Presentation > SpaceWindow / UI
Presentation > Screen AnchorCenter
Presentation > Render LayerUI
Bounding Box > SizeX 460, Y 26
UI Interaction
Element TypeText
GroupNew Game
Text / UI
TextReplace the current game?
Font Size17
EmphasisSemibold
Color#503A2B
AlignmentCenter

The Replace Question is one line of words and nothing else: Replace the current game? It shows only when you have a game going.

ObjectPanel Label
Transform
Presentation > SpaceWindow / UI
Presentation > Screen AnchorCenter
Presentation > Render LayerUI
Bounding Box > SizeX 300, Y 22
UI Interaction
Element TypeText
GroupNew Game
Text / UI
TextStrength
Font Size14
EmphasisExtra Bold
Color#503A2B
AlignmentCenter

The Panel Label is a small heading over a row of buttons. Its own words are Strength. Its first placement writes Play as over them, the way a Tool Button’s placement does.

ObjectOption Button
Transform
Presentation > SpaceWindow / UI
Presentation > Screen AnchorCenter
Presentation > Render LayerUI
Bounding Box > SizeX 104, Y 44
UI Interaction
GroupNew Game
Sprite
Scene Depth Draw Order31
SpriteSquare Highlight
Tint#E2D5B4
Transform > SizeX 104, Y 44
Text / UI
Text{option}
Font Size16
EmphasisSemibold
Color#503A2B
AlignmentCenter
Data Structure
Data StructureNew Game Option
Logic
Show Option

The Option Button is one Side or one Strength. Its Text {option} shows its own New Game Option, so the White button says White. Give it a New Game Option, and the Logic Component Show Option.

ObjectPanel Button
Transform
Presentation > SpaceWindow / UI
Presentation > Screen AnchorCenter
Presentation > Render LayerUI
Bounding Box > SizeX 140, Y 44
UI Interaction
GroupNew Game
Sprite
Scene Depth Draw Order31
SpriteSquare Highlight
Tint#E2D5B4
Transform > SizeX 140, Y 44
Text / UI
TextPlay
Font Size18
EmphasisSemibold
Color#503A2B
AlignmentCenter

The Panel Button is a little wider, for Cancel and Play. Its own word is Play. The Cancel button will write Cancel over it.

Look at the Sprites’ Scene Depth Draw Order: 30 for the panel, 31 for the buttons. The buttons sit on the card. The Replace Question and the Panel Label have no Sprite, only words, so their placements get a Z-Index instead.

Now make their variants. Side Option and Strength Option both start from Option Button. Their Logic differs, so a press says which kind of choice was made.

Object variantSide OptionVariant of: Option Button
Logic
Report Side
Object variantStrength OptionVariant of: Option Button
Logic
Report Strength

The last two start from Panel Button. Close New Game Button adds Close New Game, and Play Button adds Report Play. The base keeps their shape.

Object variantClose New Game ButtonVariant of: Panel Button
Logic
Close New Game
Object variantPlay ButtonVariant of: Panel Button
Logic
Report Play

6.7.5 New Game

Now the Game Rules answer the panel. New Game is the longest card in the chapter, with five Events. Take them one at a time.

Logic ComponentNew GameAttach to: Game Rules

Starts every game with the Side and the Strength the Player chose last, and lets the Player start a new game. When the game begins (Game Start, before the first Turn), it takes the choices saved on this device (Persistent Values; the first time, Board State's own playerSide and strength) and turns the Board over for a Player who plays Black. When the Player presses New Game ("newGamePressed"), it opens the New Game panel, a menu that holds the game while it is open, showing the current choices as chosen and asking "Replace the current game?" when a game is in progress and has Moves. Each Side or Strength pressed ("sideChosen", "strengthChosen"; the button is its Other) becomes the chosen one. Play ("playPressed") saves the choices and restarts the game, which starts again from the beginning with them.

Attach toAny Object
DATA STRUCTURES
Board Stateself.boardState
When the Game Starts
WhenGame Start
1Load Persistent Value
Action Name
savedSide
Key
"playerSide"
Default
self.boardState.playerSide
2Load Persistent Value
Action Name
savedStrength
Key
"strength"
Default
self.boardState.strength
3Change Component Value
Component Value
self.boardState.playerSide
Value
savedSide.value
4Change Component Value
Component Value
self.boardState.strength
Value
savedStrength.value
5Ifself.boardState.playerSide == "Black"
Then
6Change Component Value
Component Value
self.boardState.isFlipped
Value
true
On New Game Pressed
WhennewGamePressedCustom Event
1Change Component Value
Component Value
self.boardState.chosenSide
Value
self.boardState.playerSide
2Change Component Value
Component Value
self.boardState.chosenStrength
Value
self.boardState.strength
3Control Menu
Menu Element
New Game Panel
4Set Menu Pause State
Menu Element
New Game Panel
5Check Game State
Action Name
isOver
Game State
Game Over
6Ifself.boardState.lastFrom != "" && isOver.value == false
Then
7Set UI Element Visibility
Element
Replace Question
8Otherwise
9Set UI Element Visibility
Element
Replace Question
Visible
No
10Trigger Custom Event
Custom Event
newGameChoiceChanged
On Side Chosen
WhensideChosenCustom Event
1Change Component Value
Component Value
self.boardState.chosenSide
Value
other.newGameOption.option
2Trigger Custom Event
Custom Event
newGameChoiceChanged
On Strength Chosen
WhenstrengthChosenCustom Event
1Change Component Value
Component Value
self.boardState.chosenStrength
Value
other.newGameOption.option
2Trigger Custom Event
Custom Event
newGameChoiceChanged
On Play Pressed
WhenplayPressedCustom Event
1Save Persistent Value
Action Name
persistentWriteResult
Key
"playerSide"
Value
self.boardState.chosenSide
2Save Persistent Value
Action Name
persistentWriteResult2
Key
"strength"
Value
self.boardState.chosenStrength
3Restart Game

When the Game Starts runs once, before anything else in the game, even before the Board is laid out. It reads the two choices you made last time, with Load Persistent Value. Each one’s Key is the name the value is kept under, 'playerSide' or 'strength', in quote marks. Its Default is what to use when nothing is kept yet, the very first time: Board State’s own White and Casual. Steps 3 and 4 copy the answers into Board State, read as savedSide.value and savedStrength.value. Last, a Player who plays Black gets the Board turned before it’s even laid out.

On New Game Pressed opens the panel. First the panel’s notes, chosenSide and chosenStrength, take the real choices, so those are marked when it opens. Control Menu opens the panel. Its Operation starts on Show, so leave it, and every piece in the UI Group New Game opens with it. Set Menu Pause State holds the game still while it’s open. Its Pause the World starts on Yes. The hold lasts only while the panel is open, so closing it lets the game go on.

Then a question. Is there a game worth asking about? Step 5, Check Game State, asks whether the game is at Game Over, Chapter 5’s last Game State, and names its answer isOver. Step 6 says yes when the game has a last Move, and isOver is false. Only then does Set UI Element Visibility show Replace the current game?. Its Visible starts on Yes, so leave it. Otherwise it hides it, with Visible on No. Last, newGameChoiceChanged goes out, and every Option Button marks itself green or tan.

On Side Chosen and On Strength Chosen are short. Each copies the pressed button’s option into the panel’s notes, and sends newGameChoiceChanged again. The green moves.

On Play Pressed keeps the choices for good, each under its Key, with Save Persistent Value. Type their Action Names as the card has them, persistentWriteResult and persistentWriteResult2. Nothing reads them. Then Restart Game starts the whole game over. When the Game Starts runs again, and finds your new choices waiting.

ObjectGame RulesAddDelete
Data Structure
Data StructureBoard State
Data Structure
From LogicSelect and Move
Data StructureSelect and Move Data
Data Structure
From LogicChoose Promotion
Data StructureChoose Promotion Data
Logic
Select and Move
Start Turn
Choose Promotion
Look For Game End
Flip Board
New Game

Attach New Game to the Game Rules, beside Flip Board.

Now go back to the Set up card and place the panel’s pieces, each hidden. The Panel Backdrop from Chapter 4 is placed once more. Its line with UI Interaction > Group = New Game puts this placement in the panel’s group, with Edit Object Locally, and its Z-Index of 29 keeps it under the panel. Each Side Option or Strength Option gets its option in its placement’s Values. The Close New Game Button’s Text becomes Cancel, and Play Button keeps Play. The Replace Question and both Panel Labels have a Z-Index of 32, so their words sit in front of the card.

The panel’s colors come from its Object cards. New Game Panel’s Tint is cream, #EFE6CF. Option Button and Panel Button take the tan of Tool Button, #E2D5B4. Their variants keep those colors. There’s no Tint to set on each placement now.

Run the game. Play e2 to e4, and press New Game.

The game dims, and a cream panel opens over the middle of the Board. Replace the current game? sits under its title. White and Casual are already green. Press Black, and the green jumps across to it, off White. Press Strong. Then Play.

The game starts again from the beginning, with Black at the bottom. White still moves first. You play both Sides for now, so move a White Pawn, from the top.

Play it!

Watch for each of these.

  • Press Flip. Black is at the bottom, with 1 at the top of the left column and h at the left end of the bottom row. Press Flip again, and White is back.
  • Flip the Board, then click a Piece. Its dots land where its Moves are, on the turned Board.
  • In a new game, press New Game before you move anything. No question shows. White and Casual are green.
  • Play e2 to e4, then press New Game. Replace the current game? shows under the title, because now there’s a game to lose. Press Cancel, and your Pawn is still on e4.
  • Press New Game, then Black, then Play. The game starts over from the beginning, with Black’s Pieces at the bottom, nearest you. Press New Game again. Black is green, and no question shows.
  • Close the game window, and press Play in the editor again. Black is still at the bottom. Your choice was kept.
How it works

The Board turns now, and nothing on it moved. Flip Board turns one Yes/No over. Place On Board moves every Object to where its Square is drawn, and Show Label hides the labels that are off the edge. Each button’s variant adds the Logic that answers a press. New Game opens the panel, notes each choice, and keeps the two that matter for next time.

Underneath, there are two ways to see a game. One is what’s true: Position, the Board State, whose Turn it is. The other is how it’s drawn. Flip changes only the drawing, so it can never change the game.

6.8 If It Didn’t Work

This chapter has many small pieces, and a few of them only show when you press something. Watch what the game does, and think it through.

A block drawn in red, with a number on the Errors bar? Open the bar. It names the block and what it misses. Compare that one block with its card, including the quote marks around every text.

Flip does nothing at all? Perhaps its placement still picks Tool Button instead of Flip Button. Or Report Flip’s step has no arrow into it. Join it to its Mode.

The Board turns, but the Pieces stay where they were? Place On Board may not be attached to the Piece. Or Flip Board’s boardFlipped is spelled differently, so Place On Board never hears it.

Every Piece and Square piles up in one spot as the game starts? Look at Square Position’s steps 10 and 11. Do they still have arrows into them, after the If on the line from Start? If not, join step 10 after the If with the round handles. The Function works out x and y again, then returns them.

Labels show on all four edges? Look at Show Label’s new Event, and its If, edgeLine == 1. Perhaps the File Label’s edge is still file, when it should be rank, bare.

The panel opens, but nothing turns green? Show Option may be missing from the Option Button. Or a placement’s option is empty, so that button stands for nothing at all.

The panel won’t close? Cancel’s placement needs Close New Game Button as its Object. That variant adds Close New Game, whose Menu Element names the New Game Panel.

The panel opens white, not cream? Its Object’s Tint is still white. Give New Game Panel #EFE6CF, and Option Button and Panel Button #E2D5B4.

Each of these is one 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’s game, finished, if you’d like to compare.

Challenge

A new button can share Tool Button’s shape. Its variant carries the Logic that gives your new button a job. Then place it. What button would your game have? Perhaps one that turns the Board after every Move, so two people at one computer each play from their own side. Or a Swap button, that starts a new game with the Sides changed. The row has room. What goes in it is up to you.

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

Your game can begin again now, from either side of the table. In Chapter 7, the other Side starts to think for itself.