2048 on swift

Introduction
Kohei Iwasaki
14 years - Game programming (HSP, C/C++, Perl, Direct2D)
20 years - Web applications (Ruby on Rails, Titanium)
22 years - Life is Tech! education (Rails, Objective-C)
23 years - Donuts (PHP, Rails, Swift, Go, etc)
25 years - Antelos Director/CTO
2
< New!

Purpose of this workshop
The main purpose of this workshop is to learn how to create an iOS
application.
・How to use Xcode
・The architecture of iOS Applications
・Professional way of creating apps
Source code: https://github.com/antelosdev/swift2048
3

What’s 2048?
4
You merge similar tiles by moving them in
any of the four directions to make "bigger"
tiles.
After each move, a new tile appears at
random empty position with value of either 2
or 4.
The game is over when all the boxes are
filled and there are no moves that can
merge tiles.

Open Xcode
To create iOS applications, you usually use Xcode. Open Xcode and
start creating a new project as shown in the figures below.
6

Create your project
Create your new project.
Next, create the project to wherever you want.
7

4 Steps to create 2048
1. Layout two screens: Start screen and Game screen.
You’ll learn how to use Interface Builder and Auto Layout.
2. Write code to create Tiles and put them on the board.
You’ll learn how to create and add views with code.
3. Think about the algorithm of 2048.
You’ll learn how to manage the game logics.
4. Handle user swipes and update the game board.
You’ll learn how to handle swipes and to update views.
9

Storyboard
Open Main.storyboard file and put a Button to the view.
11

Design the start button
You can select the attributes as shown in the figure below.
12

Auto Layout
Auto Layout dynamically calculates the size and position of all the
views in your view hierarchy, based on constraints placed on those
views.
Add size and position constraints to the start button.
13

Run on the simulator
Choose iPhone6 (or others will also be ok) and push the Run button or
Command+R.
14

Add the next screen
Add the next screen by putting a View Controller. Then control+drag
from the start button to the new screen and select “Present Modally”.
This makes a transition to the next screen when the user taps the
button. It is called “Segue”.
15

Add Game Board View
In the second screen, we add a View as a game board. Change the
background color to make its position be clear.
16

Add constraints
Add 4 constraints: Leading Space to 20, Trailing Space to 20, Aspect
Ratio to 1:1, Center Horizontal and Center Vertically in Container.
17

Quiz: Fix constraints
For now, the display gets corrupted when you rotate the device. How
can you make it fit within the display?
18

To fix the constraints
You can fix constraints in Size Inspector shown in the figure below.
The sign of inequality and the priority of the constraint also can be
changed.
19

2. Write Code
21
swift tutorial

Event-driven
In GUI applications like iOS/Android apps, the flow of the program is
determined by events such as user actions (taps, swipes), sensor
outputs, or messages from the OS.
22
Some Action
Tap

MVC architecture
Model-View-Controller (MVC) is a software architectural pattern that
divides an application into three components:
Model manages data, logic and rules of the application.
View renders the output to the user.
Controller accepts input and converts it to commands for the Model or
View.
23

Create Groups
Create new groups to make
application structure be as:
Assets: images, sounds, movies
Layouts: storyboard, xib※ files
Models, Views, Controllers: main
application structure based on MVC
Config: Application settings files
24
※ xib is a XML based format used for the UI of view components at design time.

Create GameViewController
First, create a new controller class to Controllers group to handle the
screen you added in the Storyboard.
25

GameViewController
This class has a boardView you put in the Storyboard.
@IBOutlet means that this variable can be referred to in Interface
Builder such as Storyboard.
26
import UIKit
class GameViewController: UIViewController {
@IBOutlet weak var boardView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
}
}

Set the class on the Storyboard
Then set the class of the View Controller in the Storyboard to
GameViewController.
27

Make boardView referred
Create a new referencing outlet to boardView be referred.
28

Create TileLabel
Next, create UILabel named TileLabel to Views group.
The UILabel class implements a read-only text view.
You can use TileLabel to show the tile with the number.
29

TileLabel
TileLabel is a View with the rounded corners of 8px, there is a black
border of 1px. The text will be displayed in the center.
30
import UIKit
class TileLabel: UILabel {
var position : (x:Int, y:Int)!
override init(frame: CGRect) {
super.init(frame: frame)
self.layer.borderWidth = 1.0
self.layer.borderColor = UIColor.blackColor().CGColor
self.layer.cornerRadius = 8.0
self.layer.masksToBounds = true
self.textAlignment = .Center
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}

UIViewController LifeCycle
Put TileLabels here so that boardView’s
size and position must be decided before.
31
ViewWillLayoutSubviews
ViewDidLayoutSubviews
ViewDidAppear
loadView
viewDidLoad
viewWillAppear
ViewWillDisappear
ViewDidDisappear

Add TileLabel
Add a TileLabel to the boardView. The frame indicates the position and
size of the TileLabel.
32
import UIKit
super.viewDidLoad()
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let tileLabel = TileLabel(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
self.boardView.addSubview(tileLabel)
}
}

Quiz: Put 16 tiles to the boardView
The result should be as shown in the figure below. One tile is put on
the boardView. Now, how can you put 4x4=16 tiles on the boardView?
33

Answer
Calculate the position and size of the tile.
34
import UIKit
// ...
let tileSize = self.boardView.frame.size.width / 4
for y in 0..<4 {
for x in 0..<4 {
let tileLabel = TileLabel(frame: CGRect(
x: CGFloat(x)*tileSize,
y: CGFloat(y)*tileSize,
width: tileSize,
height: tileSize
))
tileLabel.position = (x: x, y: y)
}
}
}
}

Create Game model
Now it’s time to create game logic. To manage the game logic, create
Game model.
36

Game model
In this application, Game model exists only one. You can use Singleton
Pattern to ensure that (sharedInstance).
Board status can be represented as a multidimensional array.
37
import UIKit
class Game: NSObject {
static var sharedInstance = Game()
let boardSize = 4
var board = [[Int]]()
dynamic var turn = 0
override init() {
super.init()
for _ in 0..<self.boardSize {
self.board.append([Int](count: self.boardSize, repeatedValue: 0))
}
}
}

Game model methods
1. Get empty tile positions of the board.
2. Generate “2” or “4” at random space of the board.
3. Slide a line of the board.
4. Slide the board.
5. Check if the game is over or not.
38

Get empty tile positions
To generate number on the board, first create a method to get empty
positions of the board. This returns an array of coordinates Tuple.
39
// ...
func getEmptyPositions() -> [(x:Int, y:Int)]{
var results = [(x:Int, y:Int)]()
for y in 0..<self.boardSize {
for x in 0..<self.boardSize {
if(self.board[y][x] == 0){
results.append((x, y))
}
}
}
return results
}
}

Generate “2” or “4"
Then generate “2” or “4” at the random position of the board.
arc4random_uniform makes random number.
ex) arc4random_uniform(5) returns 0-4 randomly.
40
// ...
func generateNumber() {
let empties = self.getEmptyPositions()
let randomNum = arc4random_uniform(UInt32(empties.count))
let randomPos = empties[Int(randomNum)]
// Set 2 or 4
self.board[randomPos.y][randomPos.x] = Int(arc4random_uniform(2)+1) * 2
}
func nextTurn() {
self.generateNumber()
self.turn += 1
}
}

Quiz: How to create slide function?
For example, [2, 0, 4, 4] must be [2, 8, 0, 0] when the board slides to
left.
41

Answer
Create these methods to create slide function.
1. Condense [2, 2, 0, 4] => [2, 2, 4]
2. Merge [2, 2, 4] => [4, 4]
3. Fill blanks [4, 4, 0, 0]
Then, create SlideNumbers method using these methods.
42

Condense
Condense method uses filter method to exclude 0 from the received
numbers.
43
// ...
// [2, 2, 0, 4] => [2, 2, 4]
func condense(numbers: [Int]) -> [Int] {
return numbers.filter { (num) -> Bool in
return num != 0
}
}
}

Merge
Merge method merges two adjacent numbers.
44
// ...
// [2, 2, 4] => [4, 4]
func merge(numbers: [Int]) -> [Int] {
var mergedNumbers = [Int]()
var i = 0
while i < numbers.count {
if i+1 == numbers.count {
mergedNumbers.append(numbers[i])
break
}
if numbers[i] == numbers[i+1] {
mergedNumbers.append(numbers[i] * 2)
i += 2
} else {
mergedNumbers.append(numbers[i])
i += 1
}
}
return mergedNumbers
}
}

Fill Blanks
FillBlanks method fills the blanks with 0.
45
// ...
// [4, 4] => [4, 4, 0, 0]
func fillBlanks(numbers: [Int]) -> [Int] {
return numbers + [Int](count: self.boardSize-numbers.count, repeatedValue: 0)
}
}

Slide Numbers
SlideNumbers method uses the three methods. If the direction is “up”
or “left”, the numbers should be reversed before and after the
processing.
[2, 2, 0, 4] => [4, 0, 2, 2] => [4, 4, 0, 0] => [0, 0, 4, 4]
46
// ...
// reverse=false(up, left) : [2, 2, 0, 4] => [4, 4, 0, 0]
// reverse=true(right, down) : [2, 2, 0, 4] => [0, 0, 4, 4]
func slideNumbers(numbers: [Int], reverse: Bool) -> [Int] {
if reverse {
return fillBlanks(merge(condense(numbers.reverse()))).reverse()
} else {
return fillBlanks(merge(condense(numbers)))
}
}
}
reverse processing reverse again

Slide Board
SlideBoard method slides all lines of the board considering the
direction.
47
// ...
func slideBoard(dir: UISwipeGestureRecognizerDirection, virtual: Bool) -> [[Int]] {
var slidBoard = self.board
for i in 0..<self.boardSize {
switch dir {
case UISwipeGestureRecognizerDirection.Up:
let slid = slideNumbers(board.map({ (line) -> Int in return line[i] }), reverse: false)
for t in 0..<self.boardSize {
slidBoard[t][i] = slid[t]
}
case UISwipeGestureRecognizerDirection.Left:
slidBoard[i] = slideNumbers(board[i], reverse: false)
case UISwipeGestureRecognizerDirection.Right:
slidBoard[i] = slideNumbers(board[i], reverse: true)
case UISwipeGestureRecognizerDirection.Down:
let slid = slideNumbers(board.map({ (line) -> Int in return line[i] }), reverse: true)
for t in 0..<self.boardSize {
slidBoard[t][i] = slid[t]
}
default:
print("unexpected direction")
}
}
if !virtual{
self.board = slidBoard
self.nextTurn()
}
return slidBoard
}
}

Check if the game is over
To check if the game is over or not, create a method to get swipable
directions.
48
// ...
func swipableDirections() -> [UISwipeGestureRecognizerDirection]{
var results = [UISwipeGestureRecognizerDirection]()
for dir:UISwipeGestureRecognizerDirection in [.Left, .Down, .Right, .Up]{
let slidBoard = slideBoard(dir, virtual:true)
for i in 0..<self.boardSize {
if !self.board[i].elementsEqual(slidBoard[i]) {
results.append(dir)
break
}
}
}
return results
}
func isGameOver() -> Bool {
return self.swipableDirections().count == 0
}
}

4. Handle Swipes
& Update Views
49

Fix viewDidLayoutSubviews
Fix viewDidLayoutSubviews method to handle the difference board
size and call nextTurn() to start first turn of the game.
50
// ...
let tileSize = self.boardView.frame.size.width / CGFloat(Game.sharedInstance.boardSize)
for y in 0..<Game.sharedInstance.boardSize {
for x in 0..<Game.sharedInstance.boardSize {
let tileLabel = TileLabel(frame: CGRect(
x: CGFloat(x)*tileSize,
y: CGFloat(y)*tileSize,
width: tileSize,
height: tileSize
))
tileLabel.position = (x: x, y: y)
}
}
Game.sharedInstance.nextTurn()
}
}

Handle swipes
Use SwipeGestureRecognizer to handle swipes.
51
super.viewDidLoad()
for dir:UISwipeGestureRecognizerDirection in [.Up, .Left, .Right, .Down] {
let sgr = UISwipeGestureRecognizer(target: self, action: #selector(GameViewController.swiped(_:)))
sgr.direction = dir
self.view.addGestureRecognizer(sgr)
}
}
func swiped(sender: UISwipeGestureRecognizer) {
if Game.sharedInstance.swipableDirections().contains(sender.direction) {
Game.sharedInstance.slideBoard(sender.direction, virtual: false)
}
if Game.sharedInstance.isGameOver() {
print("Game Over.")
}
}
// ...
}

Update Views
Use KVO(key-value observing) to update TileLabel’s number.
Using KVO, when the specified variable (Game turn) changed, the
registered observers (TileLabels) receive an notification.
52
Game model
dynamic var turn = 0
TileLabel
Observe
Fire event when
turn changed

KVO
Call addObserver and removeObserver method to use KVO.
Forgetting to remove observer causes a memory issue.
53
var position : (x:Int, y:Int)!
override init(frame: CGRect) {
super.init(frame: frame)
// ...
Game.sharedInstance.addObserver(self, forKeyPath: "turn", options: NSKeyValueObservingOptions(), context: nil)
}
// When the turn of the Game changed, this method is called
override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context:
UnsafeMutablePointer<Void>) {
// Update the text here.
}
// Do not forget to removeObserver here
deinit {
Game.sharedInstance.removeObserver(self, forKeyPath: "turn")
}
}

Set text and background color
Decide the background color and set the text.
54
// ...
// When the turn of the Game changed, this method is called
override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context:
UnsafeMutablePointer<Void>) {
self.setNumber(Game.sharedInstance.board[self.position.y][self.position.x])
}
// Decide the color
func getHue(num:Int, hue:CGFloat = 60) -> CGFloat{
if(num < 2){ return hue }
if(hue == 360){ return getHue(num / 2, hue: 24 ) }
return getHue(num / 2, hue: hue + 24 )
}
func setNumber(num:Int){
if num == 0 {
self.text = ""
self.backgroundColor = UIColor.clearColor()
} else {
self.text = "(num)"
self.backgroundColor = UIColor(hue: getHue(num)/360, saturation: 1.0, brightness: 1.0, alpha: 1.0)
}
}
}

Congratulation!
55
Now, your 2048 application is complete!
Run the simulator and play the game ;)
You can change the boardSize to 5.
If you have any question, ask me anytime.
https://www.facebook.com/kohei.iwasaki.1

2048 on swift

In this document

2048 on swift

Editor's Notes

2048 on swift

More Related Content

What's hot

Similar to 2048 on swift

Recently uploaded

In this document

2048 on swift

Editor's Notes