Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
-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:
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
“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:
Image may be NSFW.
Clik here to view.
And your spaceship game now should look like this:
Image may be NSFW.
Clik here to view.
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. ;)
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
