Iphone Cocos2d Day 2 – Scrolling TileMap & JoyPad

Well its the second day programming for the Iphone using Cocos2d and I am very pleased with what I have gotten done so far. Even though there are not a ton of tutorials for Cocos2d I have been getting lucky with some great information to get me going.

Today I spent the first bit working on a scrollable tilemap background. This is a very important part of any side “scroller” game so I wanted to get a jump on it early. Cocos2d makes it very easy!!!!

First I will mention the program to use for making your tilemaps. Tiled. You simply upload a tile sheet which we learned how to create on day 1 (animating sprites) and place your tiles in a pattern to create your ‘level’. Then save it and you have yourself a tilemap. Very basic at this point but works for now. In the future I will be looking at how to take that and create the ground for Box2d and any boundaries for use with collision.

The code to implement it was very easy as well:

// Add TileMap For Background

CCTMXTiledMap *map = [CCTMXTiledMap tiledMapWithTMXFile:@”orthogonal-test2.tmx”];

[self addChild:map z:-1 tag:kTagTileMap];

CGSize s = map.contentSize;

for( CCSpriteSheet* child in [map children] ) {

[[child texture] setAntiAliasTexParameters];


Please watch the video for full implementation of this code to get it to work.

Tutorial 1 on this website Is a better example of what you can do with tilemap!!

The next thing I did was to place a JoyPad on the screen which controls moving the player. Again I kept this simple for now and made it only move the player left or right, but I worked beautifuly. I got the concept for the code from a great tutorial website 71squared. The tutorial 11 on that website talks about creating a joypad. I had to modify it a fair bit to get it to work with Cocos2d but for the most part I followed what he said to do.

For Day 3 I am going to look at placing a button on the screen for making the player jump. I think this will take some time.

Here is the videos for Day 2:

13 Responses to Iphone Cocos2d Day 2 – Scrolling TileMap & JoyPad

  1. Atlus says:

    This is great. I am new as well to the language and the mac environment. I was left a little bit confused though by your controller modifications. The controller from the website at 71 doesn’t seem to work correctly. Also that tutorial is a bit misleading. It looks like you made a decent amount of mods to the controller. If you don’t mind emailing me the source for the controller modifications that would be great or posting them here.

    Thanks Again and look forward to learning more from you

    • paulsondev says:

      I am going to make some more detailed tutorials with source code very soon…similar to 71squared but for Cocos2d users. I am just working on finishing a working tilemap for a 2d side scroller, but after that I will make the tut for the joypad with source code.

      Thank you for your comment and I promise to make things more clear when I get a better hang of it. I should have some better tuts in the next few weeks.

  2. Steve says:

    Hey this is a great tutorial i am building the same type of game but i cant figure out out animating the sprites and i am also trying to figure how to define where the ground is so the player wont just fall to the bottom of the screen
    Here is the link to my test project i was just wondering if you could let know know what I’m doing:

    http://www.mediafire.com/?mk3mfiitogy (cocos2d)
    http://www.mediafire.com/?mk3mfiitogy (cocos2d + box2d)

    thx 4 any help in advance

    • paulsondev says:

      I will look at your code. As for the sprite animation I use a sprite sheet and a pList file. Then I use the built in methods cocos2d supplies for cached sprites. I will be doing more detailed tutorials very soon.

      For the moving the sprite around I have changed the way I do that. I show it in Day 5. BUT I will be modifying it once more and using the tilemap properties to tell the sprite where the bottom is. This will allow me to have multi-level bottom as well as a “pit” for the player to fall into and die. Once I have this done I will create a tutorial for that as well.

  3. TruffleApps says:

    Nice post.

    Keep with the tutorials.


  4. TruffleApps says:

    Quick question. Can you provide the joypad with cocos2d?


  5. Stephen says:

    This is a great read and i am learning loads but I am new as well to the language. I am little bit confused by your controller modifications. I have tried to folloe the controller from the website at 71 doesn’t seem to work correctly/ or I am doing something wrong.If you don’t mind Please could you emailing me or post the source for the controller modifications.


    • paulsondev says:

      I have changed m controller again to accommodate my new game but controllers are not that hard to do. First you need an understanding of touches. Then you create images to represent you controller…like buttons or the d-pad or whatever you want. When you have you controller images you place them on the screen using CCSprite. Now to make those images functional you just see if the touch is within a controller sprite (you could use rects for that, and see if the touch is within the rect) and assign something to do once the controller area is touched. For example if a touch is within one of my buttons I simply call a method to make the player jump. If the touch is within my d-pad, I figure out what part of the d-pad is being touched by relating it to the center of the d-pad, then I call a method for move with the attribute of the direction.

      Try to keep things very basic like that and it makes the world easier. I hope that helped a bit.

  6. Yash Patel says:

    great post.

    Keep it up. Looking for more of this kind.

    Yash Patel

  7. Michael says:

    Hi, I must say that your tutorials and videos have helped me tremendously in creating my own iPhone games. I am following your method of making a platform game; but I am having some trouble: I have two errors, one is probably easy to fix, the other I’m pretty much at a total loss for.
    1) how and where did you declare the “node” variable that you use in the end of your ccTouchMoved method? I’m supposing its in the header, but I am unsure what type it should be declared as.

    2) I keep getting a strange error when I use the line:
    if( (self = [super init] )) {

    Its in the init method of your GameScene.mm; the error produced is this:

    ld: duplicate symbol .objc_class_name_GameScene in /Users/rootadmin/Documents/iHelloWorld/Pineapple Rescue/build/Debug-iphonesimulator/libcocos2d libraries.a(GameScene.o) and /Users/rootadmin/Documents/iHelloWorld/Pineapple Rescue/build/Pineapple Rescue.build/Debug-iphonesimulator/Pineapple Rescue.build/Objects-normal/i386/GameScene.o

    collect2: ld returned 1 exit status

    I suspect its because I had a lot of trouble figuring out what you did to make the .mm files work, and I wound up deleting my original GameScene; and starting over. It seems like its looking for a .o file; but I’ve run a search and cannot find any .o files!

    any help would be greatly appreciated!

    • PaulsonApps says:

      for your first question;

      node would be found in the “.h” file and it would be a CCTMXTiledMap. Eg: CCTMXTiledMap *node;

      This was perhaps not a good name for it, a little confusing.

      For your second question:

      It sounds like you have two of the same files in your project..thus the duplicate warning. Make sure you don’t have two files named the same.
      You don’t need to do anything to make the .mm files work, just name the file that way.
      It is not looking for the .o file..this is produced on compile, what it is saying is that it has found a duplicated file in those two locations…so you just need to delete one of the files.

      I hope this helps solve the problem.

  8. San says:

    It’s too bad that there is no program code

  9. Alex says:

    Hey great job on the joypad… I have a question about the characters. In “Planet One” your main character is this blue guy (kinda like kirby.) Which program did u use to draw it. Like the tongue on this video, where did you drew him? All this games, like angry birds and stuff, the characters are kids oriented. Where do you think they created them???

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: