Occurro! – game design 101 with Cocos2D iPhone

I was recently asked on the Cocos2D iPhone forum some details about Occurro!. People were interested in the game architecture, special effects & touch controls. I could definitely write a book about all the design decisions, architecture, and other aspects of creating the game. Unfortunately, I’m still spending time adding things to the game & making it better – so, there isn’t a book yet.

Occurro! The Game of Stellar Combat was released on July 11, 2009.  A week later it was featured by Apple & it quickly rose into the top 50 paid apps in the App Store.  Take a minute & check out the trailer:

I shared some thoughts and ideas in a couple threads at the Cocos2D forum about little parts of the game, but never the overall design …or detail on things like explosions. This is some big-picture info on those topics.

Game Structure/Architecture
I started with one of the Cocos game skeletons in February ’09. I stripped it down to the core and built Occurro! on top of it. Since then, I moved it from Cocos 0.5 to 0.6, then 0.7. A stripped down version of what I use currently is here: http://www.acceleroto.com/share/MultiTest.zip That file includes Cocos2D 0.7.3, so it really should be updated to the latest before you get going on a project with it. Otherwise, feel free to use it how you’d like.  (Caveat: if you compile that sample code & try to publish it in the App Store as a game, the entire world will make fun of you.)

Occurro! currently has 15 different Cocos layers that it can switch between, all in their own class. Each new “screen” that the user sees is a layer.  The game launches into a layer that does some pre-processing (is there a saved game?  what are the default options? etc.). From there it decides to go to the main menu or the resume menu. The main menu has several submenus that allow the user to do all the typical game setup stuff, see credits, and view high scores.

Occurro!’s high scores are handled by Geocade’s service. I display a UIWebView within a Cocos layer (just like in the above sample code). That layer handles all the location services, web requests, and keeps track of scores the user still needs to submit.

The main game is structured much the same as the above sample code – just much more complex. I set up a series of timers to handle various things in the game. My main game loop (called “step” in the code) is fired at 60Hz. I also use a gun firing timer, an enemy spawn generator timer, and a couple other housekeeping timers – all get fired at different rates.

When I start the game layer, all the initialization stuff is done. To speed things up during gameplay, I create a fairly big pile of each enemy, weapon & power up type and keep them around for the entire duration of the game.

After the initialization, I jump into the game loop & do this stuff:

  • update the player ship based on player inputs & its physics
  • update enemy positions based on each of their AI & physics
  • update laser positions
  • update and/or remove power ups
  • check for collisions (lasers, enemies, power ups, etc)
  • handle player death or other status changes if required
  • kill enemies if required & generate explosions
  • add points
  • check for level ups and extra lives
  • update the score board (if the player got any points)
  • update other HUD indicators (if the player got any power ups or used weapons)
  • update control indicators based on user inputs
  • position & start sounds as required
  • update the camera position

At the end of each game loop step, Cocos updates all the actual pixels on the screen using OpenGL.  After that, the game loop starts over again.

I tried to keep everything fairly compartmentalized in their own classes. I subclassed CocosNode to make the player, enemy, power up, and weapon classes.

Special Effects
My explosions are new classes that I made by copying and modifying Cocos2D’s ParticleExplosion class. Each one of my enemy explosions is made up of 2 different classes each with their own custom artwork. The first is the “flash” class – it shows a couple of initial flashes & picks between about 6 different art files for the flashes. The second is the flying particles of the explosion. When an enemy is killed, I start both of these particle systems at the same time. To make them look like I wanted, I just modified individual parameters within each class until they matched what I was thinking.

Touch Controls
The touch control system is fairly complicated & would take a couple pages to explain properly. In a nutshell, whenever a new touch is detected in a control zone (for example, one control zone is the area that I designate do control the lasers) it removes any old control on that control zone & sets the center of a new one at the touch location. After that, the touch location is compared to the initial position, some trig is done along with some other input shaping/calculations to determine what actual command is passed to the ship’s motion or laser system. When that touch ends, the corresponding input is stopped & that control indicator is removed from the screen.

This really just scratches the surface, but hopefully it helps get you thinking on the right track (or at least one of the right tracks).

For more information on Cocos2D iPhone, please visit http://www.cocos2d-iphone.org/

Also, please check out Occurro! in the App Store: http://bit.ly/occurro – just $0.99

This entry was posted in Occurro! and tagged , , , , . Bookmark the permalink.

12 Responses to Occurro! – game design 101 with Cocos2D iPhone

  1. gpyles says:

    Great overview and thanks for the sample code! Starting to take a more serious look at Cocos2D.

    Any specific reason why you decided to use Geocade over some of the other similar services?

    -greg

  2. admin says:

    @gpyles I chose Geocade because at the time, they were the easiest to implement of the free high score services and they had all the location & time options I wanted in my high scores. There are many more free options now. Open Feint is a newly-free one that’s worth a look.

  3. Kent says:

    I am looking at the architecture of the framework and am interested in your choice to use layers basically as your control flow object instead of creating multiple scene class instances. I am not presuming in anyway that you are wrong in your decision I am just taking an unofficial survey of Cocos2d usage styles. I am assuming you only have 1 scene and that in that scene you are using multiplex layers.

  4. admin says:

    @Kent I do actually use scenes. Multiplex layers didn’t let me use transitions between scenes. Multiplex layers are a little easier to use, but I think you have more flexibility if you don’t use them.

    If you look through the code, when I switch between layers, I’m actually creating a new scene & attaching the layer to the scene, then calling replaceScene. There are certainly different ways to do it, but that works best for me.

  5. Kent says:

    I see thanks for the explanation.

  6. shigmiya says:

    Thanks so much for this! Its very helpful for beginners.

  7. shigmiya says:

    Thanks so much for this! Its very helpful for beginners.

  8. Andy says:

    I'm trying your code in Multitest.zip and I see that in menuCallback2 it's supposed to be a timed transition, however the webview instead appears instantly. Have you found any way to solve that?

    • Bryan Duke says:

      Andy-

      I just tried to compile MultiTest in the latest SDK (iOS4 release SDK #1) and I get about 20 errors. So, I can't check on the problem you're seeing. Sorry.

      If you're using the web view for online scores, I really recommend ditching my method here & using OpenFeint or Plus+. They're both very easy to use & widely loved by users. Game Center is coming this fall, so that's something to think about too.

  9. James27121 says:

    thank you. Your multi-test skeleton taught my Cocos2D in a little under 1 hour. =) I not understand the critical concepts =)

    • James27121 says:

      Er… late night typing idiotic…. corrected. Thank you! You multi-test skeleton taught me core Cocos2D concepts in a little under 1 hour. =) I now… understand these critical concepts and I’ve moving forward in my dream. =)

      • Bryan Duke says:

        You’re welcome, James!  I’m glad it helped.  Cocos2d has changed quite a bit from when I started Occurro!  Even the difference between the MultiTest sample and the current version of Cocos2d is pretty big.  I highly recommend grabbing the latest copy of Cocos2d from their website.  Once you do, install the templates and start playing!

        I just re-released Occurro! with a big update.  It incorporates the latest version of Cocos2d (version 1.0rc3).

        Have fun

Leave a Reply

Your email address will not be published. Required fields are marked *