A Game, Cocos2D and Hexagons

Over the past year, I had just dabbled using the Cocos2D framework but had not used it in any of my projects. What was stopping me was the thought that I would have to learn a whole new way to program and language syntax. I am very proficient with Objective C and have a few apps in the app store, and they are totally written using the standard foundations provided by Apple with the iOS SDK. Over time, I noticed that more and more developers were using Cocos2D for their published games. My wife was also begging me to develop a game for her. A game that is similar to one that she plays all the time at a local arcade/dinner establishment and that she could play on her iPhone. So, I decided to use Cocos2D in earnest for my new client (wife) and started reading up on using it. I browsed the Cocos2D web site and forums as well as the learn-cocos2d site run by Steffen Itterheim. (Is it just me, or does he look like Seth Rogen?) It was there that I saw that he was publishing a book on using Cocos2D call “Learn iPhone and iPad Cocos2D Game Development” I jumped on purchasing the alpha book (pre-release chapters. The book is now published) and then started the journey into really learning the Cocos2D framework and Orbs Away! – the game.

Orbs Away! is your standard match 3+ color game. However, unlike other color matching games, the game board is laid out in a hexagon pattern of columns and rows.

In the image above, you will notice each tile is a hexagon shape and also that each tile can be surrounded by 6 other tiles. In contrast, a typical square grid will have a tile that is surrounded by 4 other tiles. Working with square tiles is pretty straight forward in determining if a tile has the same color as an adjacent tile. Hexagons…not so much. At least for me anyway. As with probably most developers out there, you search the internet to see if anyone else has developed a solution or tutorial that relates to your development challenge. Now, here is where I will give credit where credit is due. While I did not find much related to a hexagon game layout, I did find an excellent reference to hex coordinate systems at http://jemgine.omnisu.com/?page_id=412. The author even had a C#  Hex Class written for Windows XNA game development. This class is usually  used as a game board tile map to determine which hexagon is selected upon mouse click or direction for movement of a game piece. I rewrote the class in Objective-C with emphasis on placing falling Orbs in the correct hexagon (with box2d collision detection) and to recursively determine if there are any 3 or more adjacent Orbs with the same color.

The screenshot above is from the beta version of the game with the Orbs laid out using the reworked Hex Class. I’ll go over the the high-level basics for the HexGrid Class and how I use it in the game. I’ll put up the source for new HexGrid Class in another post at a later date. Right now, I am hurrying to get the game finished!

High Level Game Play

Firstly we need to initialize the class with the radius of each Orb by calling the HexGrid initWithRadius. All the computations (tile center, tile coordinate, etc) are based upon the radius of an Orb. In the game, I slightly increase the radius to give a little empty space (padding) between other Orbs.

(id) initWithRadius:(float)orbRadius

Even though the Orb sprites are round, I set up a box2d body that is hexagon shaped and surrounds the sprite with vertices for each point on the hexagon. I may have been able to just use a circle box2d shape, but I wanted to see exactly how the hexagons laid out using box2d debugDraw. I also do not use physics in the game as I merely want to detect collisions using a contact listener.

When an Orb is released from the “Claw” it will drop towards the floor. Using box2d collision detection, when an Orb either contacts the floor or another Orb, the class method getHexTileAtPoint is called using the center point of the Orb. The method then returns the column and row for the hex tile that center point of the Orb falls in. I should also mention that each Orb is a member of an Orb class that I set up and has an instance variable hexColRow which I then store the returned CGPoint. I then call the getHexTileCenter  method and I simply move the Orb to the returned coordinates. Did that make sense?

-(CGPoint) getHexTileAtPoint:(CGPoint) orbCenter

-(CGPoint) getHexTileCenter:(CGPoint) tileCoordinate

Checking for matching colors

Using a Cocos2d scheduler that runs every 1/30 of a second, I check every Orb to see if  it has 3 or more matching/adjacent colors. I mentioned that each Orb is a member of an Orb class that I set up and has an instance variable hexColRow. Well, here is where I use that. I set up a recursive method that uses the hexColRow and will populate an array of Orbs and their hexColRow coordinates that have 3 or more matching adjacent colors.

-(void) getHexTileMatchesWithTile:(int)col Row:(int)row Color:(NSString *)color

Now it’s just a simple matter of going through the matching array and destroy the Orb sprites and their box2d bodies.

Lastly, I use some of the same HexGrid methods to determine if any Orbs should begin falling due to their not having any Orbs under them. I then put my simulated physics in effect and set the Orb dropping again. Of course the scheduler will run again and see if these newly dropping Orbs set up another match 3+.

Here is a video of the game play and the Orb placement.

Closing

Using a hex grid can be used in many ways to enhance game play and it’s not too difficult to put into your own game play. For further understanding, visit the reference site at http://jemgine.omnisu.com/?page_id=412 I was hoping to have Orbs Away! finished by the time I posted this, but I still have some finishing work to do on the game. I’m really bummed that I didn’t get it done in time to be released for Christmas. I could have had a Christmas version as well! If you would like to be informed of updates related to Orbs Away! or to become a beta tester, you can sign up here.