In this tutorial, you will learn to develop Conway’s Game of Life using the new iOS programming language, Swift, and the SpriteKit game engine. This is a Swift version of the Game of Life tutorial, which can be found at https://www.makegameswith.us/curriculum/game-of-life-spritebuilder/. If you are unfamiliar with the game check out the Wikipedia article to learn more.
Set up the project
First, setup a new Xcode 6 project, by going to File —> New Project —> iOS Application —> Game. Make sure you set the “Language” to “Swift,” the “Game Technology” to “SpriteKit,” and “Devices” to “iPhone,” then create the project. (While the original Objective-C tutorial provides a screen resolution independent user interface, for simplicity we will only be developing for a single platform in this tutorial, the iPhone.)
First things first, change the default orientation to Landscape by clicking on the project file and under "Deployment Info" on the "General" tab, uncheck the Portrait option on "Device Orientation" and make sure the landscape options are checked instead.
Run the project to make sure you don't get any compiler errors.
Now open GameScene.sks, and go to View —> Utilities —> “Show SKNode Inspector” to edit the properties of the scene. Set the size to X:568, Y:320, so that the scene fits perfectly on an iPhone 5 device. Save the file.
Add the static user interface
Get started by downloading our art pack for this game.
After you unpacked it, drag the GameOfLifeAssets folder into your Xcode project onto the left panel to add the resources to your project. Make sure you check “Add to targets.”
Now open GameScene.swift. This is where the bulk of your code will go. Notice that there is only one file per class, as opposed to Objective-C which requires a .h and a .m file for each.
Delete the bodies of the didMoveToView and touchesBegan methods, so you can start from an empty scene.
Define a few constants at the class scope (add these outside any of the methods, but after the line “class GameScene: SKScene {“ )
let is the syntax for creating a constant. Notice we don’t need to declare a data type for each variable, as they can be inferred from the initial value. We also don’t need semicolons. You may explicitly provide the type of a variable by adding it with a colon after the name of the variable, as we did with _gridLowerLeftCorner
Add a background image to the screen — this will be a SKSpriteNode. Add this code to the top of didMoveToView:
Note how Swift uses dot syntax to access properties and call methods of objects. Whereas Objective-C would say [self addChild:background], in Swift we say self.addChild(background)
Also note how we initialize a new SKSpriteNode simply by writing SKSpriteNode(imageNamed: “background.png”), rather than the Objective-C [SKSpriteNode spriteNodeWithImageNamed:”background.png”]. You can follow this pattern in general to access Objective-C APIs in Swift (read more: Interacting With Objective-C APIs).
If you run the project on an iPhone 5 simulator, you should see:
Now add another background image to appear behind the grid. Add this code to didMoveToView:
Run the project to see:
We’re going to finish up the user interface by adding a few more sprites and some labels on the left side of the screen.
First, define these constants and variables in the class, where we defined the constants earlier:
Now add to didMoveToView:
Your project should now display a full user interface, although you can’t interact with it yet:
Add the creature tiles
We need to store a grid of tiles to represent the creatures in our Game of Life. To do so, store the tiles in a 2-dimensional array of SKSpriteNodes. Define a new _tiles variable in the class (directly beneath the constants we defined earlier). Also add a variable for the margin between tiles.
Notice the the simplified syntax for initializing a 2-dimensional array.
Now, before we can add each of the tiles we need to know at what position to add them, and the dimensions of each tile. First lets calculate how big each tile should be, based on the total grid size and the number of tiles in the grid. Define this new method inside the GameScene class:
We declare new methods with func, the parameters are specified inside the pair of parentheses, and the return type is specified after the -> return arrow.
Now lets add a function which tells us the x-y coordinates of a tile based on its row and column. We can use this to position the tiles on the screen. Add this method to the class:
Important: Notice that we can’t directly perform operations (such as addition) between an Int and a CGFloat in Swift — in order to do so, we must explicitly cast one datatype so that it matches the other, using Int( … ) or CGFloat( … )
Also notice how we specify parameters in Swift. In this case, r and c are the parameters, which are of type Int. We also chose to provide human-readable names “row” and “column” that will appear in code autocompletion and make the method signature easier to read and understand.
Now lets add two for-loops to initialize the 2-D tiles array and add each of the 80 tiles to the scene in the appropriate locations. Add this code to didMoveToView:
Note that our for-loops only use two periods in the ellipses ( 0.._numRows ), which means that we don’t include the upper bound of the range (if you want to include it, use three periods … )
Run the project now. You should see creature tiles on every grid location.
Implement the player interactions
We need to add interactivity to the tiles. To do this, let’s create a new Tile class to store additional information.
Go to File —> New File… —> Cocoa Touch Class —> set “Class:” to “Tile” and “Subclass of:” to “SKSpriteNode” and make sure “Language” is “Swift”
Now open Tile.swift and import SpriteKit at the top of the file:
Define a new property inside the class to keep track of whether the Tile is alive or dead. Add a custom setter to the property so that the tile hides when it isn’t alive, and shows back up when it is alive.
Notice how different it is to create property setters is different in Swift as compared to Objective-C.
Also, create a property to keep track of the number of living neighbors of a Tile. We don’t need a custom setter for this.
Now save the file and return to GameScene.swift. We don’t even need to import the Tile class to use it.
Replace each of the following instances of “SKSpriteNode” in GameScene with “Tile”, to use the new class where we need it:
Change the class variable:
- var _tiles:Tile[][] = []
Change the for-loop code in didMoveToView:
- var tileRow:Tile[] = []
- let tile = Tile(imageNamed: “bubble.png")
Also, add the following line immediately after “let tile = Tile(imageNamed: “bubble.png”)"
Great! Your code should run just like it did before, except all tiles start out hidden and each tile has additional information that we can manipulate. We want to change the state of a tile by tapping on it, so let’s implement the touchesBegan method in GameScene.swift.
First, we need to make sure that a given row and column corresponds with a valid tile on the grid, so add the following method:
Now, let’s use isValidTile in an implementation of a new method to get a tile object, given an (x, y) location of where you tapped:
Pay attention here to a feature of Swift unique from Objective-C: optionals. Notice that the method returns an optional Tile object (denoted by the ? in the return type). By default in Swift, variables cannot have a nil value. But in this method, we want to have the option to return nil if we did not tap on a valid tile. So we must explicitly tell the compiler that our variable might be nil. To do so, we add a ? after the datatype, so "Tile" becomes "Tile?"
Now we have everything we need to implement the touchesBegan method. Add the following code to touchesBegan:
We get the selected tile (which may or may not be nil) by calling the method we defined earlier. To make sure it’s not nil, we use the conditional: “if let tile = selectedTile { “ to assign our optional variable, selectedTile, to a non-optional variable, tile. The assignment will only be successful if selectedTile was non-nil, so in that case we are safe to update its isAlive state.
Run the program. Tapping a tile will cause it to appear or disappear with each touch:
We already added static button sprites to the scene at the beginning of the tutorial, but right now they don’t have any player interactions enabled. Let’s modify the touchesBegan method again to check for button taps.
Add the following two conditionals to the bottom of touchesBegan:
Game Logic
To finish implementing the Game of Life, we must add the core game logic to evolve the game state to the next iteration. First things first, implement the two methods we call from tapping on the play and pause buttons:
Define a new boolean variable _isPlaying with the rest of the class variables at the top of the file:
And now add the play and pause methods, which simply toggle the value of _isPlaying:
Now we know if the game should be playing or not. While the game is playing, we would like to evolve the game state every 0.5 seconds. We will do so by implementing the update method to repeatedly call a new method every 0.5 seconds. The update method gives us the current time in seconds as a parameter, so we can use this to wait 0.5 seconds after the previous evolution before we take another evolution step. To do this, first add two new variables to the class:
Now replace the update method with the following:
This new timeStep method is being called every 0.5 seconds while _isPlaying is true, so the last thing we need to do to finish the game is to implement timeStep. Add the following method:
As you can see, this just calls two other methods. The first, countLivingNeighbors, will iterate through each tile in the tiles array and count how many of its 8 surrounding tiles are currently alive, and sets the numLivingNeighbors property of each Tile.
Finally, add the updateCreatures method, which will determine which tiles are dead or alive depending on their number of living neighbors. A tile with less than 2 or more than 4 living neighbors will die, and a tile with exactly 3 living neighbors will become alive:
Run your project, and it should work!
One last thing: let’s update the Population and Generation labels on the user interface to keep track of the game state. There’s an easy way to do so, using setters. Define two new variables in your class, each with a custom setter that updates its corresponding label each time its value is updated:
Notice the shorthand way to create formatted strings with values of properties. Putting a variable inside “\ (…)” will format it without needing to deal with format specifiers (like %i or %@ in Objective-C).
Now you just need to update those two properties in the appropriate locations. Generation should just increase by one with each timeStep, so change timeStep to the following:
Population can change in two places. The first is in updateCreatures. Just add to the bottom of the method:
The only other place the number of living tiles changes is when you tap a tile. Modify your touchesBegan to match the following:
The important lines are:
Finish
Run your project, set up some creatures, and press play. Congratulations, you have successfully programmed your first Swift game!
If you get stuck, you can find the full source code on GitHub, and if you have any questions, feel free to comment here or contact benjamin@makegameswith.us
No comments:
Post a Comment