Day 10- Tic Tac Flop

Sep 09, 2015 at 11:05 am, by Pierre Liard

I was kind of annoyed today with Rob's video on building a Tic Tac Toe app. It happened already before, but not to this extent. To gain some time when recording his videos, Rob reused several shot from iOS 8.3. It's legitimate except when the content is somehow obsolete. It makes things more complicated to follow, and it is a total waste of time. It happened right at the beginning of a video dedicated to this child game that almost everybody knows. To refresh your memory, this game is (also known as Noughts and crosses or Xs and Os) is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.(Wikipedia)

The first thing to do is of course to set up the game board. I would advise to download Rob's project (coming always after each video) and to copy the images of the board, cross and noughts (zeros) into Xcode's left panel. The board's image needs to be resized in the storyboard in order for each square not to be stretched and not to look like rectangles! As explained in post 5, it is necessary to preview the board's layout in order to see if it fits any screen size and orientation. It is at this point I started to get a bit "antsy", because Rob repeated almost word for word what he explained in lecture 37 about constraints and auto-layout. This part should have been removed or, at least, modified to match the new Swift 2. Unfortunately it wasn't and this overlook was quickly patent when I tried to add the first zero to the top left square of the board game.

To make the zero interactive when pressed, a button is dragged at first into the square and then replaced by an image of a zero (the right part of the picture represents the layout's preview):

first zero into the board game

After having resized the zero to fit into the first box, the preview shows that the naught is not at all in the right place:

zero doesn't fit preview

To align it correctly, it has to be positioned relative to the image of the board game. To do that, control + drag horizontally from the button into the board, choose then in the menu that opens after the control is released, Horizontal Spacing and not Top. Control + dragged again, but this time vertically from the button to the board. Choose then in the menu Vertical Spacing and not left not found in Xcode 7 beta 6, or Leading. The height and the width of the zero need also to be fixed, because its size is again different in the board and in the preview. After having added these two constraints, the result is now similar in both views:

zro fits preview

All the board's boxes need to be filled with the same zero. This operation is pretty difficult to realize if you follow Rob's instructions. After almost one hour of trial and error, I believe the best way to do it is at first to copy and paste the first zero outside of the board's image and then to move it where you want it to be. Apply then the same process as above, except there is no need for constraints. Repeat this operation seven more times until your grid looks about the same as mine:

grid completed

I have to be honest: I was really annoyed. Looking at the discussion forum for this lecture helped me solve this riddle, but one of Rob's response made me almost blow a gasket: Looks like you've clicked on the wrong constraint button - try the others(...). After about one hour of trying and retrying, it was almost if I were smacked in the face! This feeling was even more exacerbated when I saw the Apple special event was about to start.

Anyway, this little fit of mine was temporary and, after a few minutes of watching the presentation, I became pretty excited when I saw the new iPad Pro (12.9 inches of display, man!) and the enormous possibility for developers. In any case, it was a very welcomed break from this lengthy video (52 mins). I would like to conclude this post by showing how the first zero, when clicked, can be replaced by a cross. When the usual process of creating an outlet and an action for this button is done, it is pretty easy to code the substitution:

@IBAction func buttonPressed(sender: AnyObject) {
         var image = UIImage(named: "cross.png")
         button.setImage(image, forState: .Normal)

UIImage is a new type that sets an image variable with a name of "cross.png". When the button (zero) is pressed, it is updated to the new image variable:

crosses replace zeroes

You may wondering at this stage if the creation of an outlet and of an action has to be repeated eight more times. It exists fortunately a very convenient shortcut avoiding this: by pressing control + dragging from the desired button to the "buttomPressed" function, it will map that button to the already created action. When running the app and pressing any of the zeros, only the top left one will be modified. It is of course not the expected result: each zero should be changed to a cross when tapped upon. To modify this behavior, the code needs to be updated. The "buttonPressed" function has a parameter sender: AnyObject. A sender is the object that called the action. If for example there are two buttons in the View Controller calling the same function "buttonPressed", the sender parameter can be used to find out which button was pressed. In our game, by simply replacing in the last line of code "button" by "sender", Swift is able to determine which button in the board was called and to change it consequently:

@IBAction func buttonPressed(sender: AnyObject) {
          var image = UIImage(named: "cross.png")
          sender.setImage(image, forState: .Normal)

That's all for today. When watching Apple's event, I checked if Xcode has been released. I noticed in the contrary that there are two releases: one is a GM (=Gold Master) or a final copy of Xcode 7 before final release and, already, a Xcode 7.1 beta that contains all the tools to build apps for iOS, watchOS, OS X and, brand new, tvOS. This new platform has been just revealed this morning in San Francisco and is intended for apps with the Apple TV Human Interface. The concept seems really promising because Apple sees the future of TV in apps: Our vision for TV is simple and perhaps a little provocative. We believe the future of television is apps.(Tim Cook) A lot of food for thoughts indeed!

Leave a comment

Login to comment a post