Tutorial Cocos2d Create Your Simple Game – 3: Adding a Joystick to your iPad/iPhone Game

Screen Shot 2013-02-04 at 5.38.40 PM

Hello Guys, sorry for the lack of updates here, I’m working a lot on the My Project”s Sprites, it is really a GREAT problem, and takes a long time, but today, We are just following my last Tutorial HERE.

And today we are going to work over the Game Play and Add a Simple Joystick Pad for our Game.

Open your XCode and load “our” project from the first tutorial. πŸ™‚

First of All let’s head for our Game.h and Add a global variable to manager our joystick.

Inside of “@interface Game : CCLayer {“ Add:

Joystick* joystick;

CCSprite* player;

“Oh fugkΒ  goshiness wyl, it have a red alert icon at the left side of this code!”

Calm down, you are right, and let’s add the cocos2d UI Controls before the things get worse. πŸ™‚

And was posted by “adunsmoor” in this forum “over here“. I modified the code a little bit from the first version that I found to stay more like the way I need. So, download HERE the files with the Joystick Code. πŸ™‚

Well, now that you have downloaded the codes for joystick:

-Unpack this zip

-Drag that “dpad.png” and joystick.png to the “Resources” folder inside of your project in the XCode.

This dpad.png is a simple image of a base for your joystick, and the joystick.pngΒ  is a image of a “joystick“. O_o

Now let’s create a group to put inside our code of the joystick:

-Right Click over the folder(group) with your Project’s Name

-Select “New Group” like the image bellow.

Screen Shot 2013-02-04 at 6.43.14 AM

-Rename this “New Group” to “Joystick“.

-Drag the files: “CCNodeAdornments.h”, “CCNodeAdornments.h“, “CCNodeExtensions.h“, “CCNodeExtensions.m“, “Joystick.m“, “Joystick.h” to inside this group “Joystick”.Β (And click finish on the screen that will pop up)

-Back to your Game.h

-Add this 3 imports:

#import “joystick.h”
#import “CCNodeAdornments.h”
#import “CCNodeExtensions.h”

The Code should look something like this:

Screen Shot 2013-02-04 at 5.15.21 PM

Now let’s head to the Game.m.

Bellow of ourΒ  “+(id) firstScene{ }” Add the:

-(id) init{
if((self=[super init])){

CCSprite* jsThumb = [CCSprite spriteWithFile: @”joystick.png”];
CCSprite* jsBackdrop = [CCSprite spriteWithFile: @”dpad.png”];
joystick = [Joystick joystickWithThumb: jsThumb
andBackdrop: jsBackdrop];
joystick.position = ccp(20, 20);
[self addChild: joystick z:1000 tag:tagJoystick];
}
return self;
}

Okay, this code is really simple, it will create our Joystick to the Game Screen, so, if you want test, do it, open your game, click inΒ  “New Game” and you should see our “Joystick” over there smiling for you. πŸ˜‰

Well, for now, let’s add a spaceship in our game, for us to control it with the joystick. πŸ˜‰

Save As, over the image bellow, with the name “spaceship.png”, drag it to the “Resources” Group/Folder and click over the finish button.

spaceship

“Oh x$$ but you said spaceshift! it is the damn nyan cat!”

Oh well, sorry guys, that was the first pixel image that I found in the internet. :/

Now Add this code bellow of “[self addChild: joystick z:1000];” Well, in trully any place inside of this “if((self=[super init])){” it would be ok.

player = [CCSprite spriteWithFile:@”spaceship.png”];
player.position = ccp(240, 160);
[self addChild:player z:200];

If you test the code, you can see that our ship but it don’t move, to make it move is really simple and have a lot of ways to do it.

In my opinion the better way to make this spaceship moves is make it follow the joystick direction and that is the code I ‘m posting here:

Before we create our next function/method, add this code bellow, after the “[self addChild:player z:200];“:

[self schedule:@selector(tick:) interval:1.0f/60.0f];

This code will call our next function called “tick“.

YET inside of the “Game.m“, bellow of the “-(id) init{}“, NOT INSIDE and ABOVE of the “@end” Let’s create our function called “tick” if you have some experience making games with other languages, this “tick” will work just like the”Draw” function.

After the game start to run, this “tick” is checked every 1/60 seconds. πŸ™‚

That mean, this code will be verified constantly while our game is running.

-(void) tick: (ccTime) dt{
CCLOG(@”JoyVel x %f”, joystick.velocity.x);
if (joystick.velocity.x!=0 || joystick.velocity.y!=0 ){
player.position=ccp(player.position.x+100*joystick.velocity.x*dt,player.position.y+100*joystick.velocity.y*dt);
}
}

Now our Cat… I mean our ship is now moving. πŸ™‚

Your code of “Game.m” should look like this:

Screen Shot 2013-02-04 at 5.42.51 PM

And your spaceship game now should look like this:

Screen Shot 2013-02-04 at 5.38.40 PM

Well, that is all for today guys, thanks for read this tutorial, any questions, problems, just make a comment bellow and I will TRY answer and help ya. πŸ˜‰

Our next tutorial will be a really very simple collision system and it already available HERE.

Cya. πŸ˜‰

11 thoughts on “Tutorial Cocos2d Create Your Simple Game – 3: Adding a Joystick to your iPad/iPhone Game

  1. Nice tutorial, works great when alone. I’ve put this into a cocos2d with storyboard project. I’ve diagnosed it down to when I call on the joystickWithThumb command I get the errors: _OBJC_CLASS_$_Joystick …. Symbol(s) not found for architecture i386, and Linker command failed with exit code 1. Can you tell me what I’m doing wrong? Thanks

    1. Hello DKUSH, this tagJoystick don’t do nothing in this code, you may erase it, but answering you “what it could do” using tag when u add a Child can be very usefull for your project, the tag is something like an id for your Sprite or Node Object, for example anytime in your project you could use “getChildByTag” to get an specific object.

  2. You could certainly see your enthusiasm in the article you write.
    The world hopes for even more passionate writers such as you who aren’t afraid to mention how they believe.
    At all times go after your heart.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s