Build a GameCreating Chess

1  The Board and the Pieces

Goal

By the end of this chapter, a walnut Board lies on a page the color of paper, with thirty-two Pieces waiting on their starting Squares. Small numbers and letters mark its left and bottom edges.

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.

Chess, Chapter 1 finishedMyth project · 15.4 MB

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

1.1 The Idea

The page is empty. It’s the color of paper, a warm off-white, and nothing lies on it yet.

By the end of this chapter, a walnut Board fills its top. It has sixty-four Squares of pale maple and dark walnut, with a dark one in the bottom-left corner. Thirty-two carved Pieces wait on their starting Squares, pale wood at the bottom and dark wood at the top. Small numbers and letters sit in the corners along its left and bottom edges. Nothing moves yet. It only looks ready.

Chess players read the Board like a map. The Files are the lines of Squares that run up the Board, lettered a to h from the left. The Ranks run across it, numbered 1 to 8 from the bottom. Every Square is named by its File and its Rank, so a1 is the bottom-left corner and h8 the top-right.

Each Piece is one of six Kinds: King, Queen, Rook, Bishop, Knight or Pawn. And each belongs to a Side, White or Black.

So here’s the first real question of chess, the one the game must answer before anyone moves. How does the game know what stands where? There are thirty-two Pieces on sixty-four Squares, and in Chapter 2 every one of them starts to move.

The game keeps the answer in one place, a table called Position. It’s a Data Table, a spreadsheet the game reads while it plays, with one row for each Square, a1 to h8. Each row says which Kind and which Side stands on its Square, or nothing at all. Think of it as the Board’s seating chart: sixty-four seats, and who sits in each.

The Pieces you see follow the chart. When the game starts, the Board reads it from the first row to the last and puts a Piece on every Square. Then each Piece looks up its own seat and shows whoever sits there. A Piece on an empty Square is there too. It’s fully see-through, waiting.

The picture follows the table, never the other way round. That one idea is under this whole chapter, and under every chapter after it.

1.2 The Plan

Here’s how this chapter’s pieces work together. Read each line from left to right, and know that a name in bold is a piece you’ll make yourself.

  • The Scene starts -> the Board’s Lay Out The Board makes a Piece on each of the 64 Squares, and labels along its left and bottom edges. Each one is told its Square’s name, and keeps it in its Square Info.
  • Every Square is ready -> Lay Out The Board sends boardLaidOut, a message every Piece and label can hear.
  • A Piece hears it -> Show Piece shows what Position says stands on its Square.
  • A label hears it -> Show Label writes its Square’s Rank number or File letter.

You’ll build them in the other order. The Board comes first, then the tables, then the Pieces and the labels. Lay Out The Board comes last, and until it’s in, nothing new shows when you run the game. That’s the quiet stretch of this chapter. It ends all at once, with thirty-two Pieces. Along the way, the editor gives a few small signs that you’re on track, and the chapter points each one out.

1.3 Set Up

Every game starts as an empty project, and the first time, an empty project is a strange thing to look at. There’s a dark Scene, a lot of buttons, and no game anywhere. It fills up faster than you’d think.

If you came straight here, read the first passage of Making what a card shows, Before your first card. It shows where things are in the editor. This chapter goes down its own Set up card line by line. When a card first needs another passage, the chapter sends you there.

In Myth, choose File > New Project…. The window that opens asks you to Choose a Starter. Pick Blank 2D. On the right, under Project Settings, the Project Name box offers a name of its own, such as Blank 2D - 3. Type Chess over it. Myth makes a folder of that name for your project, inside the Location below it, and Browse… picks another place. Press Create Project. Your new project opens, with its one Scene in a tab.

Next comes the Starter Kit. Download it with this button.

Chess Starter KitMyth Pack · 11758 KB · every picture

To install it, open Myth Engine, choose File › Install Myth Pack... and pick the downloaded file.

Install it the way the line under the button says. Myth shows the Chess Starter Kit and what it adds, with Add to This Project already chosen: Adds 15 resources to this project. Press Install. Every picture in Chess is in your project now. There are four Boards, three Piece Sets, and eight more pictures for the marks and panels of later chapters, so there’s nothing to draw.

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.

Here’s the whole card. The paragraphs after it go down it from the top.

Set upWhat this chapter adds
ART (sprites, from the starter kit)
Walnut Board
Carved Walnut Pieces
GAME SETTINGS > Display > Window
TitleChess
Initial Width960
Initial Height1100
GAME SETTINGS > Display > Reference Resolution
Reference Width960
Reference Height1100
GAME SETTINGS > Display > Rendering
Texture FilteringSmooth Textures
Anti AliasingMSAA (Hardware)
SCENEChess Table (new)
Background Color#F4F1E9
GAME SETTINGS > General > Startup
Start SceneChess Table · 2D
SCENE Chess Table: PLACE THESE
ObjectXY
Board1519.375

ART names the two pictures this chapter uses, the Walnut Board and the Carved Walnut Pieces. Both came with the kit.

The Game Settings come next. Press Game Settings, the button at the top of the Resources panel, and they open in a tab of their own. Choose Display in the list on their left.

In the Window group, the Title says My Game, so type Chess over it. That’s the name on your game’s window. Initial Width and Initial Height say Automatic, so type the card’s 960 and 1100 over them. Chess is played on a tall screen. The Board fills its top 960 by 960 pixels, and the 140 pixels under it wait for the words and buttons of later chapters.

Below them, Reference Width and Reference Height show Default · 1024 logical px and Default · 768 logical px. Type 960 and 1100 there too. That’s the screen your game is laid out on, in pixels. Myth scales it to fit whatever window shows it.

Under Rendering, Texture Filtering starts on Pixel-Art (Crisp), which keeps every pixel of a picture sharp and square. Pick Smooth Textures. The wood’s picture has more pixels than the Board is drawn with, and smooth filtering keeps its grain soft as it shrinks. Anti Aliasing starts Off. Pick MSAA (Hardware), and the graphics card smooths jagged edges.

There’s no OK to press here: each change holds the moment you make it.

The SCENE block is next. Your project already has one Scene, named Scene. The card calls it Chess Table and marks it new, but you don’t need a second one. In the Resources panel, open Scenes, right-click Scene and choose Rename “Scene”. Type Chess Table and press Enter, and its tab takes the new name too.

Now the Scene’s own setting. Click its tab, the one New Project opened. Pick Select, the arrow above the preview, and click an empty spot in the preview. The Scene’s Properties appear on the left. Click the Background Color swatch, the small square of color, and type the card’s code into the HEX box. The # is there already, so F4F1E9 is enough. Press Enter. The blue turns to paper, and a second click on the swatch closes the picker.

Start Scene is back in the Game Settings, under General. It says Chess Table · 2D already, because it followed the rename by itself. PLACE THESE waits until the Board exists.

Run the game once now. Press Play, the triangle at the top of the editor. A window of its own opens, called Chess. Paper fills the middle of it, and Myth’s blue fills the sides wherever the window is wider than the game. Press Stop, the square to the right of Play, and the window closes.

1.4 The Board

First comes the Board itself.

Like every Object in this chapter, it’s an Empty Object. Make it with Add > Object. In the Create Object window, type Board as its Name, pick Empty Object as its Object Type, and press Create. The Board opens in a tab of its own, with a Transform and nothing else.

Here’s its card. Everything from its Data Structure down comes with its Logic, at the end of the chapter, so leave it for now.

ObjectBoard
Transform
Bounding Box > SizeX 30, Y 30
Sprite
SpriteWalnut Board
Transform > SizeX 30, Y 30
Data Structure
From LogicLay Out The Board
Data StructureLay Out The Board Data
Logic
Lay Out The Board
Shared Variables
pieceObjectPiece
rankLabelObjectRank Label
fileLabelObjectFile Label

The Transform is selected already in Attached Components, the list at the top right, and its Properties are open on the left. Their last section is the Bounding Box, which starts at 1 by 1. Type 30 and 30 into its Size.

Now the picture. In the Component Toolbox, at the bottom right, open Rendering and click Sprite. The Add Sprite Component window opens with its Sprite list on the Walnut Board, the kit’s first picture. Press Add Sprite.

The Sprite’s Properties open on the left, in a section named Walnut Board, after its picture, and the preview draws the wood.

Further down, the section has a Transform of its own. Its Size is the picture’s size, and it starts at 1 by 1. Type 30 and 30. The Board grows to its full width, 30 meters. At Myth’s 32 pixels to the meter, that’s all 960 pixels of the screen’s width.

Now place it. Click the Chess Table tab and pick Place, the button beside Select. Your Board waits under Predefined Objects, near the bottom of the panel on the left. Press it. Now click once in the preview, and the Board lands right where you clicked. Pick Select, click the Board, and type X 15 and Y 19.375 into its World Position.

Those two numbers are the Board’s middle. X 15 is half its width, so its left edge meets the left edge of the screen. Y 19.375 lifts it until its top edge meets the top of the screen, and a strip of paper stays empty below it.

Run the game. The walnut Board fills the top of the window, eight Squares by eight, with a dark Square in its bottom-left corner. A strip of paper waits under it.

1.5 What Stands Where

Next comes the game’s memory of the Board: which Piece stands on which Square. None of this part shows when you run the game, because the Pieces only read it at the end of the chapter.

Start with the one fact every Piece will carry. A Piece on e2 needs to know it’s on e2. That’s its Square Info, a Data Structure: a small form of named fields, and every Piece carries one filled-in copy. Square Info has one field, name.

Data StructureSquare Info

Which Square of the Board an Object stands on. name: the Square's name, a1 to h8, which is its row in the Position table.

nameTextdefault (empty)

Make it with Add > Data Structure, named Square Info. Press Add Field. The new field comes named localVariable, a Number, with 0 in its Value. Type name over its Name, and pick Text in its Type list. The Value keeps its 0. The card says default (empty), so clear it. The card’s sentence is the Description, and A Data Structure card shows where it goes, if you’d like to type it.

Now the seating chart. Position has a row for every Square, in the order a1, b1, c1 and on to h8. Each row keeps its Square’s File twice: as a number, file, for counting, and as a letter, fileLetter, for the labels to write. Then come its rank, and what stands there: a kind and a side. On an empty Square, those two are empty.

A table comes with two cards. The first is the shape of one row, a Data Structure called Position Entry, and each of its fields is a column. The second is the table itself.

Data StructurePosition Entry

One row of the "Position" Data Table, which follows it. Where every Piece stands: one row per Square, named a1 to h8, in order a1, b1, ... h1, a2, ... h8 (so the row index is (rank - 1) x 8 + (file - 1)). file: the File, 1 (a) to 8 (h). fileLetter: the same File as a letter, a to h, as the labels along the Board write it. rank: the Rank, 1 to 8. kind: the Kind of the Piece on the Square (King, Queen, Rook, Bishop, Knight, or Pawn), empty when the Square is empty. side: the Side it belongs to (White or Black), empty when the Square is empty. The rows as written here are the starting position.

fileNumberdefault 0
fileLetterTextdefault (empty)
rankNumberdefault 0
kindTextdefault (empty)
sideTextdefault (empty)
Data TablePositionData Structure: Position Entry
IMPORT CSV64 rows, from a file
FIRST ROWS3 of 64, to compare
Row 0a1
file1
fileLettera
rank1
kindRook
sideWhite
Row 1b1
file2
fileLetterb
rank1
kindKnight
sideWhite
Row 2c1
file3
fileLetterc
rank1
kindBishop
sideWhite

Make the table with Add > Data Table, named Position, and it starts empty, with no columns and no rows. At the same moment, Myth makes Position Entry, under Data in the Resources. Open it, and press Add Field for each of the card’s lines, as you did for Square Info. The table shows the same columns at once. Its Entry Type names Position Entry, so leave it where it is.

You won’t type the sixty-four rows, because the card gives them as a file. Download chess-position.csv from the card’s File line. Press Import CSV, beside Add Row, and pick that file. Myth Engine asks first, Import CSV Into Position?, and says the file brings 64 new rows. Press Import CSV again. Your first three rows should match the card’s FIRST ROWS. The card counts its rows from Row 0, and the editor numbers them from 1, so the card’s Row 0, a1, is your first row.

The last table says which picture shows each Kind. The Carved Walnut Pieces picture holds all twelve Pieces, each in a frame of its own, numbered from 0. White’s King, Queen, Bishop, Knight, Rook and Pawn come first, then Black’s, in the same order. Kinds has a row for each Kind and a column for each Side, and each cell holds a frame number. So the Pawn’s row says 5 for White and 11 for Black.

Data StructureKinds Entry

One row of the "Kinds" Data Table, which follows it. One row per Kind of Piece, one column per Side. White and Black: the frame of the Piece Set art that shows this Kind for that Side (every Piece Set art keeps the same frame order). The columns are named for the Sides, so the Side of a Piece picks its column.

WhiteNumberdefault 0
BlackNumberdefault 0
Data TableKindsData Structure: Kinds Entry
Row 0King
White0
Black6
Row 1Queen
White1
Black7
Row 2Rook
White4
Black10
Row 3Bishop
White2
Black8
Row 4Knight
White3
Black9
Row 5Pawn
White5
Black11

Make it with Add > Data Table, named Kinds. Then open Kinds Entry and add its two fields, White and Black. Each comes as a Number with 0 in its Value, so type the name and leave the rest.

Now the six rows. Press Add Row, under the grid. The new row’s name, Row, sits in the grid’s Entry column, selected and ready. Type King over it and press Enter. Double-click its White cell, type 0 and press Enter, then its Black cell, 6. A single click on a cell doesn’t open it, so double-click each one. As in Position, the card’s Row 0 is your first row.

The rows don’t follow the picture’s order, and they don’t need to. The game finds a row by its name, King or Pawn, never by its place in the table. Type them in the card’s order all the same, so you can check yours against it row by row.

1.6 The Pieces

Now the Pieces themselves. One Piece stands on every Square of the Board, even an empty one, so this one Object becomes sixty-four. You won’t place them in the Scene. The Board makes all sixty-four when the game starts.

ObjectPiece
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
Data Structure
From LogicShow Piece
Data StructureShow Piece Data
Logic
Show Piece

It’s an Empty Object too. Its Bounding Box and its picture are both 3.4765 meters across, a little smaller than a Square, so neighbors never touch. The two Size boxes keep three decimals, so they’ll show 3.477. That’s all right.

Give it its picture the way you gave the Board its own. In the Add Sprite Component window, pick the Carved Walnut Pieces in the Sprite list, and press Add Sprite. The preview shows a pale King. It’s the picture’s first frame, until Show Piece picks the right one for each Square. Type 10 into the Sprite’s Scene Depth Draw Order. The Board’s is 0, and the higher number is drawn in front, so the Pieces always stand on the wood. Then type the Sprite’s own Size.

Then its Square Info. In the Component Toolbox, open Data and click Data Structure. It starts on the first Data Structure in your project, so pick Square Info in its Data Structure list. The second Data Structure on the card comes with Show Piece, so leave it for now.

1.6.1 Show Piece

Here’s the moment it waits for. The Board has made a Piece on every Square and given each one its Square’s name. Then it sends boardLaidOut. Every Piece hears it at once, and each one does one small job for its own Square.

It looks up its Square’s row in the Position table and reads the kind. If the kind is empty, nothing stands there. The Piece turns fully see-through, an Alpha of 0, and stays. It doesn’t leave the Board. It waits, invisible, for something to stand on its Square.

Otherwise it makes itself solid again, reads the side as well, and shows the right frame. Which frame is the Kinds table’s job. The kind picks the row and the side picks the column, so data('Kinds', kind, side) is one cell, one frame. Nothing has to choose between White and Black. The Side’s name does it.

Why solid again, when every Piece starts out solid? In this chapter, that step changes nothing you can see. It’s there for Chapter 2, when a Piece moves onto an empty Square and the see-through Piece waiting there has to appear.

Look on the card for kind and side. The kind is needed only for this one moment, so Show Piece declares it fresh each time. The side it keeps in Show Piece Data, a small Data Structure of its own, so it reads as self.showPieceData.side. Look for self.squareInfo.name too, the Piece’s own Square name, read from its Square Info. And look at the If. Its condition, kind == "", asks whether the kind is an empty word. The "" is two quote marks with nothing between them, a word with no letters.

Data StructureShow Piece Data

Object Data of Logic "Show Piece" (its state that lasts between Events).

sideTextdefault (empty)
Logic ComponentShow PieceAttach to: Piece

Shows the Piece that stands on one Square of the Board. The Square's name (in Square Info) is its row in the Position table. It shows the frame of the Piece Set art that the Kinds table gives for that Kind and Side, or nothing (fully transparent) when the Square is empty.

Attach toAny Object
DATA STRUCTURES
Square Infoself.squareInfo
Show Piece Dataself.showPieceData
On Board Laid Out
WhenboardLaidOutCustom Event
1Declare Variable
Type
Text
Name
kind
2Change Variable
Variable
kind
Value
data('Position', self.squareInfo.name, 'kind')
3Ifkind == ""
Then
4Set Alpha
Alpha
0
5Otherwise
6Set Alpha
7Change Component Value
Component Value
self.showPieceData.side
Value
data('Position', self.squareInfo.name, 'side')
8Set Frame
Frame
data('Kinds', kind, self.showPieceData.side)

Make Show Piece Data first, with Add > Data Structure, the way you made Square Info. Its one field, side, is Text, and its Value is cleared.

Show Piece is your first Logic Component. Make it with Add > Logic Component, and leave its Starter on Empty Logic Component. It opens on a big canvas, and its card has three parts, each built in a place of its own. Keep Making what a card shows open beside the editor, and when you reach a part, read the passage it links to. Each passage takes its examples from this chapter’s cards.

  • DATA STRUCTURES go on the small Data Structures card at the left of the canvas. Press its +. Pick Square Info under Existing Data Structures, and do the same for Show Piece Data. Each row shows the name Myth gives it, as on the card. A Logic Component card shows how. Leave Attach to at Any Object.
  • The Event comes from Add Event, the + in the canvas’s toolbar. It’s a Custom Event, boardLaidOut. Nothing sends it yet, so make it with Add Custom Event…, then its name. Events: the When bars shows where.
  • The steps hang below it. Read Actions, one at a time as far as Change Component Value. Then read all of Values, quote marks and all, and If, Else, Repeat and While as far as the Repeat. The paragraphs after those come with Lay Out The Board, at the end of the chapter. Step 1’s Declare is Text with nothing after its =, so kind starts empty. The second Set Alpha has no lines on the card. Its Alpha starts at 1, fully solid, so add it, join it, and leave it as it is.

The sentence at the top of the card is its Description. As with Square Info, it’s yours to type or skip, in the Logic Component card at the top left of the canvas.

When the whole card is in, look at the canvas. Every block has an arrow into it, and no Errors bar shows under it. That’s the sign a piece of Logic is whole.

Attach Show Piece to the Piece. Open the Piece, and switch the list at the top right of its preview from Components to Logic. Show Piece waits under Compatible Logic, on the right. Click it. Show Piece Data joins the Piece by itself, the card’s second Data Structure, From Logic Show Piece.

Nothing shows yet, because nothing makes a Piece. That comes last.

1.7 The Labels

Small numbers and letters on the edges tell a1 from h8. Two Objects write them: a Rank Label on each Square of the left edge, and a File Label on each Square of the bottom edge. Like the Pieces, they’re never placed by hand. The Board makes them.

ObjectRank Label
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
ObjectFile Label
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
Shared Variables
showsfileLetter

Each is an Empty Object, with a Bounding Box of 0.375 by 0.375 and a Text / UI, the component that shows words. In the Component Toolbox, it’s under Rendering.

Go down the Text / UI’s lines in the card’s order. The Text is 1 on the Rank Label and a on the File Label. It’s only a stand-in for the preview. When the game runs, Show Label writes each label’s own number or letter. Enter starts a second line in this box, so leave it with a click.

Then type 1 into Font Size, big enough to read at a glance. Pick Extra Bold in the Emphasis list. Click the Color swatch, type 503A2B into its HEX box and press Enter, a walnut brown. Click the swatch again to close it.

The File Label’s words are aligned to the Right, the last of the three choices under Alignment. Further down, the Text / UI has a Transform of its own, as the Sprite did on the Board. Leave its Positioning on Independent, and type the card’s Position there. A label stands in the middle of its Square, but its words don’t: the Position tucks them into a corner. A Rank Label’s number sits in the top-left corner, and a File Label’s letter in the bottom-right.

Each label needs its Square Info too, added the way you added the Piece’s.

1.7.1 Show Label

Both labels share one Logic Component. When boardLaidOut arrives, a label writes its Square’s Rank number or File letter, read from Position. Which one? A Shared Variable named shows names the column. That’s a value the Logic keeps on each Object it’s attached to, and each Object can set its own. It’s rank on a Rank Label, where it starts. On a File Label it’s fileLetter, set on the File Label’s own card.

Then the label picks a color that stands out on its Square. Walnut brown on a pale Square is labelOnLight, and pale maple on a dark one is labelOnDark.

How does it know the shade? It adds the Square’s file and rank: on a1 that’s 1 and 1, an even 2, and a1 is dark. On a2 it’s 1 and 2, an odd 3, and a2 is pale. The whole Board follows that pattern: even is dark, odd is pale. squareShade keeps what’s left over when the sum is divided by 2. That’s 0 on a dark Square and 1 on a pale one, and % is the sign for that remainder.

Look on the card for self.text.text, the label’s own words. The label’s Text / UI goes by the name self.text, and the words are that component’s field named text, so the name comes twice. In the Logic, each Shared Variable reads with an @ in front, as @self.shows.

Logic ComponentShow LabelAttach to: Rank Label, File Label

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).

Attach toAny Object
DATA STRUCTURES
Square Infoself.squareInfo
COMPONENTS
self.textText / UI
SHARED VARIABLES
NameTypeKindStarting Value
showsTextConstantrank
labelOnLightColorConstant#503a2b
labelOnDarkColorConstant#dfc69b
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

Make it with Add > Logic Component, as you made Show Piece. Its DATA STRUCTURES row is Square Info again. COMPONENTS is new. Press the + on the canvas’s Components card and pick Text / UI under Component types, and its row reads self.text. The three SHARED VARIABLES come from the + on the Shared Variables card, and every one of them is Constant. The shows value is Text, and it starts at rank, typed bare. Each Color is a swatch with a HEX box for the card’s code. Capitals don’t matter in a color code, so the card’s #503a2b is the labels’ #503A2B. Its Event is the same boardLaidOut. It’s on the list already, because Show Piece listens for it.

Attach Show Label to both labels, in Logic mode, as you did Show Piece. Now the File Label’s own value. Switch it back to Components, and look at the top of its Properties, under Variables. Show Label has given it a row for shows, with rank in its Value. Type fileLetter over it, with no quote marks.

1.8 Laying Out the Board

Now the piece that makes all of it appear.

1.8.1 Square Position

Before the Board can make a Piece on a Square, it needs that Square’s middle, in meters. Square Position answers that one question. It takes a Square’s name and hands back x and y.

It looks up the Square’s file and rank in Position, each counted 1 to 8 from a1. Every Square is squareMeters wide, so (file - 0.5) * squareMeters is how far the Square’s middle sits from the Board’s left edge. Take a1. Its file is 1, and 1 - 0.5 leaves a half, so its middle is half a Square in. On b1, the next Square along, it’s one and a half Squares in. Then boardLeft adds where the Board’s left edge is. The y works the same way, with rank and boardBottom.

The sums look long. They’re only counting Squares from the corner.

A Function hands back one thing, and here that’s two numbers. So they travel together in Square Position Result, a Data Structure with an x and a y, the way two cups ride on one tray.

Data StructureSquare Position Result

What Square Position returns: x and y, the center of the Square in the world, in meters.

xNumberdefault 0
yNumberdefault 0
FunctionSquare Position

Answers where the center of a Square is in the world, in meters. square: the Square's name (a1 to h8). squareMeters: how wide one Square is. boardLeft and boardBottom: where the Board's bottom-left corner (a1's corner) is. x and y (Outputs): the center.

PARAMETERS
NameTypeStarts at
squareText
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')
7Change Variable
Variable
x
Value
boardLeft + (file - 0.5) * squareMeters
8Change Variable
Variable
y
Value
boardBottom + (rank - 0.5) * squareMeters
9Return
x
x
y
y

Make Square Position Result first, from its card, like Square Info. Make the Function itself with Add > Function, and A Function card shows where each of its parts goes. Its PARAMETERS go on its Start block. The first, square, is Text, with nothing after its type, so it starts empty. Its RETURN TYPE is Square Position Result, picked in the Function’s own card at the top left of the canvas.

Its first four steps are Declares, four Numbers that start at 0. The last is a Return. It hands back the x and the y.

1.8.2 Lay Out The Board

When the Scene starts, the Board does its own setting up.

First it finds its bottom-left corner. Its middle is four Squares from each edge, so the corner is 4 * squareMeters left of its middle, and the same distance below. Those are boardLeft and boardBottom.

Then it goes down Position, one row at a time. A Repeat runs once for each row, because dataCount('Position') is the number of rows, 64. Each time round, local.index counts up from 0, and dataRow('Position', local.index) is that row’s name: a1, then b1, and on to h8. That’s the Square’s name, squareName. The Board keeps it in Lay Out The Board Data, a small Data Structure of the Logic’s own, so every step after can read it as self.layOutTheBoardData.squareName.

Each time round, it does what you’d do setting up a real Board. It finds the Square’s middle, sets a Piece down there, and tells the Piece which Square it’s on. On the card, the middle is spot, the new Piece is piece, and the Square’s name goes into piece.name.

You’ll see two spellings of one field. Show Piece reads it as self.squareInfo.name, and step 9 writes it as piece.name. A Variable box names a field by its own name. A formula goes through squareInfo.

Step 9 is worth a slow look, because it works somewhere else. A Change Variable has no Applies to list. The name before the dot in its Variable box is the Object it works on. Step 9’s piece.name names the new Piece, so step 9 works on the Piece, not the Board. Its Value still reads the Board’s own squareName, through self.layOutTheBoardData. The Board hands the Piece its name.

Then come the labels. On the left edge, where the file is 1, it makes a Rank Label too. On the bottom edge, where the rank is 1, it makes a File Label. Each one gets its Square’s name the same way. When all 64 Squares are done, it sends boardLaidOut, and every Piece and every label shows itself at once.

Look on the card for its four Shared Variables. Three of them are the Objects it makes: pieceObject, rankLabelObject and fileLabelObject, one for each kind of thing it sets down. The fourth, squareMeters, is how wide a Square is, 3.75 meters, and steps 3 and 4 read it as @self.squareMeters.

Data StructureLay Out The Board Data

What Lay Out The Board remembers on the Board while it makes the Squares' Objects. squareName: the Square whose Objects are being made (a1 to h8).

squareNameTextdefault (empty)
Logic ComponentLay Out The BoardAttach to: Board

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 is made on that Square (Square Position) and given the Square's name (its Square Info); a Square in the left column also gets a Rank Label, and one in the bottom row a File Label. Then it says "boardLaidOut". pieceObject, rankLabelObject, fileLabelObject: the Objects made. 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
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
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
10Ifdata('Position', self.layOutTheBoardData.squareName, 'file') == 1
Then
11Create Instance
Object to Create
@self.rankLabelObject
X
spot.x
Y
spot.y
Created As
rankLabel
12Change Variable
Variable
rankLabel.name
Value
self.layOutTheBoardData.squareName
13Ifdata('Position', self.layOutTheBoardData.squareName, 'rank') == 1
Then
14Create Instance
Object to Create
@self.fileLabelObject
X
spot.x
Y
spot.y
Created As
fileLabel
15Change Variable
Variable
fileLabel.name
Value
self.layOutTheBoardData.squareName
16Trigger Custom Event
Custom Event
boardLaidOut

Make Lay Out The Board Data first, from its card. Then make Lay Out The Board with Add > Logic Component, like the other two, and add the Data Structure with the + on its Data Structures card. Its four Shared Variables are Constant. The three Objects start at None, and the Board picks its own once the Logic is attached. Its Create Instance, Action Name and Repeat are new. They’re in the paragraphs you left for now in Actions, one at a time and If, Else, Repeat and While.

The indents show where each step goes. Steps 6 to 10 and step 13 are in the Repeat’s panel, so add each one with the Repeat’s own Add Inside Repeat. Steps 11 and 12 go on the first If’s True line, and steps 14 and 15 on the second’s. Step 16 comes last, after the whole Repeat. It’s back on the line that runs down from the Event, so add it from the Action List, and Connect to Sequence joins it there.

Attach Lay Out The Board to the Board, in Logic mode, and Lay Out The Board Data joins the Board by itself. Switch back to Components. Under Variables, the Board now has a row for each Shared Variable, and each Object’s Value is a button that says None. Press each one and pick the card’s: Piece, Rank Label and File Label. The squareMeters row keeps its 3.75.

Run the game. The Board fills with Pieces, Rank after Rank of carved wood, and the numbers and letters appear along its edges. Every one of them was made by the Board, a moment after the game began.

Your Board is set.

Play it!

Watch for each of these.

  • The game opens in a window called Chess. The walnut Board fills its top, with a strip of paper under it.
  • The bottom-left Square, a1, is dark walnut. The bottom-right one, h1, is pale maple.
  • White’s pale Pieces fill the bottom two Ranks, and Black’s dark ones the top two. That’s thirty-two Pieces.
  • Along the bottom, from the left: Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook. White’s Queen stands on d1, a pale Square. Black’s stands on d8, a dark one.
  • The Rank numbers, 1 to 8, sit in the top-left corners of the left edge’s Squares. The File letters, a to h, sit in the bottom-right corners along the bottom.
  • On a pale Square a label is walnut brown, and on a dark Square it’s pale maple, so each one stands out from its wood.
  • Click anything. Nothing answers yet.
How it works

The Board makes sixty-four Pieces and sixteen labels, and tells each one its Square. One message goes out. Every Piece reads its Square’s row and shows what stands there, or nothing. Every label writes its Rank or its File.

Underneath it all is the seating chart. The Position table knows what stands where, and the screen only shows it, so nothing on the Board is placed by hand but the Board itself. In Chapter 2, a Move changes the table, and the Pieces follow.

1.9 If It Didn’t Work

Something may be a little off the first time. That’s normal, and it’s how everyone learns where things live in the editor. Run the game, watch what it does, and think it through, one piece at a time.

A block drawn in red, with a number on the Errors bar? Open the bar. It names the block, and what it misses. Hold that block’s boxes up to the card, character by character, and look hardest at the quote marks, the @ signs and the dots.

A White King on every Square? Every Piece was made, but Show Piece never ran for any of them. Perhaps it isn’t attached to the Piece. Or its When bar says something a letter off from boardLaidOut. It must match Lay Out The Board’s Trigger Custom Event exactly, capital L and capital O.

The bottom Rank right, but White Kings on every Rank above it, and every Rank number a 1? Then boardLaidOut went out too early, from inside the second If. Most of the Pieces hadn’t been made yet. Step 16 belongs after the whole Repeat, so right-click it and choose Cut. Right-click the Repeat and choose Paste, and it lands right after the Repeat. Join it with Connect to Sequence.

Only one File letter, the a in the corner? The second If went inside the first one, so it runs only on a1. Right-click the second If and choose Cut. Right-click the first If and choose Paste. It lands right after the first If, and Connect to Sequence joins it there.

The Board and its labels, but no Pieces on it? Look at the Board’s Shared Variables first. If pieceObject still says None, the Board has nothing to make. Press it and pick Piece. Or look below the Board, in the bottom-left corner, where a pile of Pieces means they were all made in one spot. Create Instance’s X and Y should be spot.x and spot.y.

Only the Board, and no labels either? Perhaps nothing made them. Open the Board in Logic mode, and look for Lay Out The Board in its Attached Logic. Then look in Lay Out The Board for a block with no arrow into it, and join it with Connect to Sequence.

The right Squares, but the wrong Pieces? Look at the Kinds table, at each row’s two numbers, and at Set Frame’s Frame.

Every File Label says 1? Its shows still starts at rank. Open the File Label, and type fileLetter over it, under Variables.

Rank numbers 3 to 6 in the middle of their Squares, and no File letters? The rest are there, under the Pieces. The labels’ Position went into the Object’s own Transform, at the top. Put that back to 0 and 0. The card’s Position goes further down, in the Text / UI’s Transform.

Each of these is one small fix. Make it, run the game again, and you’re back with the chapter. And if you’d like to compare, the catch-up download in the Goal is this chapter’s game, finished.

Challenge

The kit holds three more Boards: the Tournament Board, the Slate Board and the Marble Board. Open the Board and pick one in its Sprite box. Run the game. The labels’ colors were chosen for walnut, so watch how each new Board treats them. Try them all, then put the Walnut Board back before Chapter 2, which starts from it. In Chapter 11, the labels’ colors change with the Board.

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

A walnut Board, thirty-two Pieces, and not one of them can move. In Chapter 2, they learn how.