Setting up the user interface

Setting up the user interface

April 12, 2017
Expand

Project: Learn to buid Conway's Game of Life with SpriteKit and Swift 3

The "game" is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by touching the grid to setup the initial configuration. Unlike the previous tutorials there are no in-game controls as such. Let's build the scene.

Setting the scene

The game assets were designed to work with the iPhone, let's modify the scene size to work with this design resolution.

Open GameScene.sks, Zoom Out the scene, set the Size to (568,320), set the Anchor Point to (0,0), click on the "Hello, World!" label, and remove it by pressing the delete key.

Xcode scene resize

Adding the background

Drag background.png onto the scene and snap to the center of the GameScene. Set Z-Position to -1 to ensure the background is always at the back.

Adding the grid

Drag grid.png onto the scene, set Anchor Point to (0,0) bottom-left. Set Position to (181,6) and set Name to gridNode

The core simulation will happen inside the grid and you will be creating your own SKSpriteNode subclass to handle this later on.

Set the Custom Class to Grid Xcode grid custom class

User Interface buttons

Adding the play button

Drag play.png onto the scene and set Position to (88,283) Set Name to playButton and set Custom Class to MSButtonNode

Adding the pause button

Drag pause.png onto the scene and set Position to (88,241) Set Name to pauseButton and set Custom Class to MSButtonNode

Adding the step button

This button will serve as a handy way to test the game, allowing you to step through the simulation one iteration at a time. We're going to use the microscope asset, consider it an easter egg for the player.

Drag microscope.png onto the scene and set Position to (81,60) Set Name to stepButton and set Custom Class to MSButtonNode

Simulation information

Typically in Conway's game of life you want to display the population and generation of the creatures. The generation refers to the number of times the simulation has ran so far.

Adding the backdrop

Drag balloon.png onto the scene and set Position to (87,172)

Population label

Drag a Label onto the scene and set Position to (87,189) Set Z-Position to 1 as you want to ensure the label sits on top of the backdrop Set Text to Population

The default label doesn't look right, you want to select a font that fits in with the overall aesthetic.

Click on Font to bring up the font selection dialog. I went with Courier New Bold 12, feel free to use whatever you think looks good. Click on Color, I used the color picker to pick out the dark green, RGB 21,93,53

Xcode SpriteKit label setup

Generation label

You have the population label, now add the Generation label.

Add a Generation label, Set the Position to (87,158)

Dynamic label counters

Next you will need two labels to display the values for population and generation respectively.

Population

Copy/Paste the Population label, set Position to (90,173) and set Text to 0. You will need a code connection for this population counter, set Name to populationLabel

Generation

See if you can repeat this process and add a generationLabel at (90,144)

Your finished UI should hopefully look like this:

Xcode GameScene UI

Summary

You've set the stage for the game and built the user interface, in the next chapter you will work on the Grid custom class which will perform the heavy lifting in this simulation.

Feedback

If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more