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.

Spin the bottle – with a slight twist

The folks at Frivolous Entertainment teamed up with Gizbitz to produce a spin the bottle game for the iPhone and iPad to help promote their site SexIsFun.Net. While working on the iPhone app, Apple opened up the development gates for the iPad and we switched gears to get the iPad version out first. We did it in time for the iPad app store grand opening and we were very excited to be among the first with an iPad application. Today (actually last night) marks  the day that the iPhone version is now available on the app store.

While spin the bottle as a game has been around for a long time…I guess ever since their were bottles, the Sex Is Fun version adds the ability of player avoidance and kissing preferences. Now we all know there are no ugly people in the world, but if you do happen to stumble across one AND happen to be playing this game, you can safely avoid kissing them as a truth or dare question is brought up instead of a “Kiss”. The game play appears random and no one will ever know the difference. Whew!

Working with the folks at SexIsFun was a pleasure and if it wasn’t for the great teamwork, we would not have made the short deadline for the iPad app.

They have other games as well as a popular podcast on rational discussions of human sexuality and education. More information for the iPad version or iPhone version can be found in the iTunes App Store.

Putting SEO (Search Engine Optimization) to work on your Web Site. Part 1

Recently, I gave a presentation on Search Engine Optimization (SEO) for a local Business Networking International chapter. My time limit was set at 10 minutes to give a presentation on SEO. What! Wait! Ten minutes? I could go on and on about SEO and how to apply various techniques to your current web site and design to improve your visibility on the web. How was I going to cram all of what I know, as well as cover some of the tools available, in such a short amount of time? Well, truthfully, I wasn’t able to. I did design a Keynote presentation to cover most of the basics in 17 slides, but that left me to present a little over 30 seconds per slide. I am very excited about my profession and love talking about it, so I still went for it. What I am giving you here is just an excerpt, but if you want your web site to be found in search engines and increase your user traffic, you should find some of this information beneficial. You can also download my slides on “Search Engine Optimization – What it is and what you can do to help your page rank in search engines such as Google, Yahoo! and MSN Live Search” I will put up a section on the main site related to SEO as well as record my presentation to go along with the slides.

What is SEO? According to Wikipedia – “SEO is the process of improving the volume and quality of traffic to a web site from search engines” Ok, simple enough. But what the heck do they mean by “process”? I could quote another Wikipedia quote on the word process, but in this instance it means time, effort and more than likely, lots of it. I’ll break up this so called process into 6 elements but keep in mind that SEO is not an exact science. If would be if you had the secrets to Googles search engine algorithm, but they are pretty tight lipped about exactly how they rank and rate sites. Besides that, the major search engines are always refining their techniques in order to provide the most valuable search returns possible. SEO is not a sure fire way to get your site at the top of search pages. However, in this and in subsequent posts I’ll briefly layout 5 areas that you should concentrate your efforts on and could very well increase your odds.

Keywords. Keywords are the foundation of your search engine strategy. After all, keywords are what someone places into a search box to get back results related to…you guessed it…their keywords. In essence, if your site has references to their typed in keyword(s), you move into their returned search results. (Provided that your site is in their directory of searches to begin with. I’ll cover this in another post) Picking your web site keywords are very critical. Also, think of keyword phrases. For example, keywords for a web designer might be…uh….web and design. However, to help in search results local to the web designer, the keyword phrase would be something like “Web Design in St. Louis”. Jot down on a sheet of paper (you could use an application such as Excel, Numbers, Word or Pages as well) all the keywords and phrases that you think others would use to find your site. Is it the products that you sell? How about the services that you provide?  Then think about variations on those keywords. Next, talk to your friends, co-workers and others to get an idea on what keywords they would use to search for your web site. I might think everyone uses the search phrase “Web Design” but it could be that others use the phrase “Web Site Creation”.  In the end, you will choose your keywords carefully. However, if this is your first time going through this exercise, just give some thought to them as the next step may change your keyword thinking.

Ok. You are all finished with your keyword selection. Your next step is to use some online tools to more or less validate your keyword selection and possibly eliminate some of your choices. One such tool is the Google keyword tool. It helps to have a Google Adword account (I’ll post something on that down the road) but you can access it for free at www.google.com/sktool. With this keyword tool, you can type in your keyword or phrase and get a number of the monthly searches for that keyword. You will also see variations or the keyword phrase as well as the search number. As a test, I type in the word jewelry which had 350,000 searches per month. Jewelry Stores has 100,000 per month. Jewelry Television has 18,000 with a mix of others in between. This whole process gives you a good indicator on how well your keyword is used. I’m not saying that you have to use the top searched keyword. In the above example for jewelry, I see that handmade jewelry has about 23,000 searches per month and if I did indeed sell handmade jewelry, I might concentrate on this particular keyword phrase and go after those 23,000 searches. You may even find some other ideas for keywords along with their searches/month. The keyword tool from Goolge is just one of many keyword tools out there. Probably one of the best tools is at www.wordtracker.com. However there is a fee (ie: $$$) to use it. In part 2 of SEO, I will discuss what you should do with these keyword phrases that will help your page rank. I will give you a hint though….Content.

Big Nerd Ranch and iPhone Development!

The iPhone is all the rage these days and yes…I am one of the many that waited in line for the original iPhone and the new 3G iPhone at our local Apple store. Since I am of the software development mindset (aka – geek), I have had the iPhone software development kit (SDK) for some time now. To help put some of the development pieces together, I signed up for a week long in depth course in iPhone programming at the Big Nerd Ranch in Atlanta GA. I spoke with Aaron Hillegass (author of Cocoa Programming for Mac OS X (3rd Edition)
and founder of Big Nerd Ranch) and even though the class was held at the beautiful Banning Mills Lodge, Aaron told me that they are building a permanent facility for their many class offerings. Each day of the 5 day class was filled with lectures, examples and lotsa coding. Our instructor, Joe Conway was with us the whole day teaching, answering questions and on our daily walks. Even though the class technically ending around 6:00 pm, Joe was there late at night with the rest of us. The materials, lodging, meals and the whole bit were awesome. I highly recommend their class and the end result was not only my ability to develop on the iPhone greatly increased, the end result was what you see below. Oh, and a t-shirt. No propeller beanie though.