Cocos2D Hello World

Discussion in 'iOS Development' started by Chicken, Jul 20, 2009.

  1. Chicken

    Chicken Retired Moderator

    Joined:
    Feb 17, 2008
    Messages:
    2,494
    Likes Received:
    7
    Device:
    iPhone 5S
    OK I've recently been really interested in Cocos2D as you can see by my games engine and Xcode template post (Xcode template may be broken...)

    So today I'll teach you how to make a simple cocos2D "Hello World" application. It's actually really simple, it's just to get you used to cocos2D.

    This is going to be really simple, and I'll explain each step.

    Before we start you're going to need to download the Cocos2D library which I've linked to here.

    OK so first open up Xcode and choose a Window Based Project

    Please Register or Log in to view images



    Now name your project whatever you want I'm just choosing Cocos2D

    Please Register or Log in to view images



    OK so after that open up your Cocos2D-Info.plist and delete "Main nib file base name"

    Please Register or Log in to view images



    Now open up the folder where you saved the Cocos2D library inside you should see a folder called "Cocos2D"

    Please Register or Log in to view images



    Now drag that into your Xcode projects "Resources" folder. It will ask you if you want to add the folder into your project and whether you want to copy files to your project directory, tick the little box.

    Please Register or Log in to view images



    Now click add.

    After that go back to the cocos2D folder you downloaded then go to the resources folder and inside that the images. In that folder you should see a file called fps_images.png drag that into the resources of your Xcode project.

    OK now in the side bar you will see a folder called Other Sources, open that up and click on main.m
    in the last nil of that method replace it with "Cocos2DAppDelegate"

    In the sidebar you'll see a folder called "Classes" open that up and click on "Cocos2DAppDelegate.m"

    Please Register or Log in to view images



    Now delete where it says [OBJC][window makeKeyAndVisible];[/OBJC]
    delete that.

    Please Register or Log in to view images



    Now where you see the imports you need to add
    [OBJC]#import "cocos2D.h"[/OBJC]
    Note to Bgizzle/Skylar import is messed up only #import should be brown, but I bet you knew that

    Please Register or Log in to view images



    Your imports should now look like the above image

    OK so now in [OBJC]- (void)applicationDidFinishLaunching

    Please Register or Log in to view images

    UIApplication *)application[/OBJC]

    add these lines of code

    [OBJC]
    [window setUserInteractionEnabled: YES]; // Allows you to use touch gestures on the screen
    [window setMultipleTouchEnabled: YES]; // Allows you to use mutiple touch gestures on the screen
    [window makeKeyAndVisible]; // Allows you to see the window?
    // Here is where we get into the Cocos2D Director is what manages scenes, and running scenes
    [[Director sharedDirector] attachInWindow: window]; // Attaches the Director to your window
    [/OBJC]

    Your code should now look like this

    Please Register or Log in to view images



    Now go to File > New File. Click on Cocoa Touch Class, then select Objective-C class, then in the drop down menu make sure it says Subclass of NSObject.

    Please Register or Log in to view images



    If it looks like that press Next.

    Because of the 10 image post I'm continuing writing this in another post. I'd appreciate it if you didn’t post until I've finished it.
  2. Chicken

    Chicken Retired Moderator

    Joined:
    Feb 17, 2008
    Messages:
    2,494
    Likes Received:
    7
    Device:
    iPhone 5S
    You'll now be presented with a window that looks like this

    Please Register or Log in to view images



    As in the picture name it "GameScene" and click finish.

    You now get an implementation file and a header file drag them into the "Classes" folder.

    Please Register or Log in to view images



    Now where it says NSObject change it to Scene as show in the picture below.

    Please Register or Log in to view images



    Now that we've set that up go back into "Cocos2DAppDelegate.m"


    OK so now after the line of [OBJC][[Director sharedDirector] attachInWindow: window];[/OBJC]

    Please Register or Log in to view images



    We need to add this code

    [OBJC]
    GameScene *gs = [GameScene node]; // Create a new GameScene node
    [[Director sharedDirector] runWithScene: gs]; // Tell the director to run the game scene
    [/OBJC]

    After that your code should now look like
    [OBJC]
    - (void)applicationDidFinishLaunching

    Please Register or Log in to view images

    UIApplication *)application {
    [window setUserInteractionEnabled:YES];
    [window setMultipleTouchEnabled:YES];

    [window makeKeyAndVisible];

    [[Director sharedDirector] attachInWindow: window];

    GameScene *gs = [GameScene node];
    [[Director sharedDirector] runWithScene: gs];
    }
    [/OBJC]

    Please Register or Log in to view images



    Now go into GameScene.m

    Please Register or Log in to view images



    OK we're going to add a new method called init and we're going to tell it to add a background for us.

    First you need to download this for the background image which I made with my AMAZING photoshop skills. Download Link.

    Now place background.png in your resources folder by dragging it.

    Before we get started into some more coding, in GameScene.m with the imports add
    [OBJC]#import "cocos2d.h"[/OBJC]
    and then in "GameScene.h" add
    [OBJC]#import "cocos2d.h"[/OBJC]

    [OBJC]
    - (id)init {
    self = [super init];
    if (self != nil) {
    Sprite *background = [Sprite spriteWithFile

    Please Register or Log in to view images

    "background.png"]; // Make a sprite that is the background
    background.position = CGPointMake(160, 240); // Set position of background
    [self addChild: background z: 0]; // Adds to the view, z refers to the way sprites are layered on top of each other. z is the bottom "layer"
    }
    return YES;
    }
    [/OBJC]

    Please Register or Log in to view images



    Now we're going to add a layer, to this scene, a layer is basically where all your animations and characters do their stuff.

    OK so go into GameScene.h

    Please Register or Log in to view images



    and after [OBJC]@end[/OBJC]

    Add
    [OBJC]
    @interface GameLayer : Layer {

    }
    @end
    [/OBJC]

    Ok so after that, out GameScene.h should now look like this

    Please Register or Log in to view images



    Now go back into GameScene.m

    Now after [OBJC]@end[/OBJC]

    we're going to add out implementation for the layer. So....

    [OBJC]
    @implementation GameLayer

    @end
    [/OBJC]

    Please Register or Log in to view images



    Now in our GameLayer implementation

    We're again going to add our init method, and this time were going to add a Label, this is coco2d's Label class and not Cocoa's

    [OBJC]
    - (id)init {
    self = [super init];
    if (self != nil) {
    Label *label = [Label labelWithString

    Please Register or Log in to view images

    "O HAI WORLD" fontName

    Please Register or Log in to view images

    "Helvetica" fontSize:30.0f];
    label.position = CGPointMake(160, 240);
    [self addChild:label z: 3];

    }
    return self;
    }
    [/OBJC]
  3. Chicken

    Chicken Retired Moderator

    Joined:
    Feb 17, 2008
    Messages:
    2,494
    Likes Received:
    7
    Device:
    iPhone 5S
    Now what we finally need to do to clean this all up is, open targets on the left hand side, then Cocos2D, and then right click on Link binary with library. The add exisiting frameworks.

    Please Register or Log in to view images



    Now click on the plus button on the left hand side and you'll be presented with

    Please Register or Log in to view images



    Select OpenGLES.framework and QuartzCore.framework and click add. There we go you're done. Build and go and you get a nice little project with a background and some text.

    The finished Xcode project can be downloaded here.

    I hope you liked the tutorial, it took me a while to write everything/screenshot.

    Do you want any more tutorials on Cocos2D like this?

    Please leave your thoughts, and if you have any problems.
  4. Abcmsaj

    Abcmsaj Retired Moderator

    Joined:
    Jan 26, 2008
    Messages:
    5,501
    Likes Received:
    122
    Device:
    iPhone 6 Plus
    Very nice

    Please Register or Log in to view images

    effort gone into this
  5. Radish

    Radish Banned

    Joined:
    May 18, 2009
    Messages:
    971
    Likes Received:
    2
    Device:
    iPod touch
    Uh. I think I got a headache now.

Share This Page