Introduction to physics on the iPhone Part 2: Create a Cocos2D project

Figure 1: Creating a new project in XCode












Now that we have Cocos2D installed we need to create a new project. To do this open XCode and choose "Create New Project". Next navigate to "iOS" -> "cocos2d v2.x" and choose "cocos2D iOS with Box2d". Call the project Introduction to Physics and set the company identifier to "co.deluge" (this can be anything but it's standard practice to use a web domain that you own i.e. if the domain is bread.com use com.bread as the company identifier). Choose a location for the and click "Create".

Figure 2: Installing Cocos2D using the Terminal
Figure 3: Cocos2D example Box2D scene

Run the project

Click "Run" in the top left hand corner and wait for the project to build. The iPhone simulator should popup with a Cocos2D demo scene as shown in figure 3.

Right click on the screen to create boxes which will fall with gravity. This shows that Box2D and Cocos2D are correctly configured.

Now I'll give a brief overview of the files in your project and what they do.

AppDelegate.mm

The app delegate manages the life cycle of the application. It contains methods like:

  • didFinishLaunchingWithOptions: Called when the application is ready to be launched
  • shouldAutorotateToInterfaceOrientation: Lets the iPhone know which orientations (Portrait/Landscape) are supported
  • applicationWillResignActive: Called when the App stops being active i.e. when the user receives an incoming call
  • applicationDidBecomeActive: When the call ended
  • applicationDidEnterBackground: The home button was pressed
  • applicationWillEnterForeground: When the app was opened up again
  • applicationWillTerminate: Called before the app closes
  • applicationDidReceiveMemoryWarning: When the app gets a warning because it's using too much memory

As you can see the app deligate allows us to respond to a whole number of events which may affect the running of our app. Now I'm going to look more closely at the contents of the did finish starting function:

  1. window_ = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

This line creates the main window for the application.

  1. CCGLView *glView = [CCGLView viewWithFrame:[window_ bounds]
  2. pixelFormat:kEAGLColorFormatRGB565
  3. depthFormat:0
  4. preserveBackbuffer:NO
  5. sharegroup:nil
  6. multiSampling:NO
  7. numberOfSamples:0];

Sets up an OpenGL view. OpenGL is a low level library which allows Cocos2D communicate with the graphics card. You don't need to worry much about OpenGL because Cocos2D shields us from having to deal with it.

  1. director_ = (CCDirectorIOS*) [CCDirector sharedDirector];

Creates a new director. The directory is a singleton class which controls the presentation of our game. The director controls the frame rate, allows us to change scenes and change the state of our game by playing, pausing or stopping.

  1. [director_ pushScene: [HelloWorldLayer scene]];

This is the final line of interest. This line tells the director to load a new scene. This is the first scene which will be displayed. As you can see it's called HelloWorldLayer and I'll explain what it does next.

HelloWorldLayer.mm

Figure 4: Example of a scene with layering

To understand this function it helps to have some idea of the Cocos2D hierarchy. Cocos2D organises your game into three levels:

  • Scene: A scene is the highest level of content in Cocos2D. A scene may contain Layers and Nodes but only one scene can be shown at a time. One scene might represent the opening screen of your game. Another scene would represent the level select screen and another would represent the game itself.
  • Layer: A layer is a way of arranging the content of your game in the z-direction. You might to have a background layer which displays a static image, and then a foreground layer which sits in front where the game action takes place.
  • Node: A node is the lowest level in the hierarchy. A node is something which is drawn to the screen. It could be a sprite (an image) or a geometric shape (a rectangle). For example, in figure 4, the background image would be a CCSprite which is a subclass of CCNode. The sonic character would be an animated sprite also contained in a node.

Knowing this, it's obvious that HelloWorldLayer is a layer. To setup the layer we've called the scene method from the application delegate. The scene method looks like this:

  1. +(CCScene *) scene
  2. {
  3. // Create a new scene
  4. CCScene *scene = [CCScene node];
  5.  
  6. // Create a new layer
  7. HelloWorldLayer *layer = [HelloWorldLayer node];
  8.  
  9. // Add the layer to the scene
  10. [scene addChild: layer];
  11.  
  12. // Return the scene
  13. return scene;
  14. }

In this method we create a new scene then we create a new layer and add the layer to the scene. So where do the objects we saw in the simulator come from? The answer is that they are setup in the init method. When we call  HelloWorldLayer *layer = [HelloWorldLayer node] this will automatically call the -(id) init method.

In the init method other methods are called which setup the physics and the menu. Since we're going to be making our own scene I'm not going to talk about these methods.

So, now we have a working scene and in the next part we're going to start creating our own physics Part 3: Creating a realistic physics scene.

Tweet: 

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.