[Tutorial Series] Use the Cocos2d-x-3.0 game engine. Write a Tile Map Game.(part01)

The second issue: http://www.cocos2d-x.org/forums/6/topics/51024
The third issue: http://www.cocos2d-x.org/forums/6/topics/51141
The fourth issue: http://www.cocos2d-x.org/forums/6/topics/51363
The fifth issue: http://www.cocos2d-x.org/forums/6/topics/51440

    The topic of the game design idea is always making people exciting. In my opinion, an apprentice
of the game design or developers independently should take a small classic case to analyze than
read one hundred article on the pure theory. It will be more practical. In this series, I am going
to show you how to use the Cocos2d-x-3.0 game engine to write a simple Tile Map Game, small Pokemon.
When I say Tile Map Game, probably you already know some of these classic games, or you just simply
couldn’t recognize them. These pictures will help your memory. Both of them are the Tile Map Game.

Image Title
Battle City Pokemon

    In this issue, I going to show you how to use the Tiled Map editor to build and upload the map.
Manage the different layers and the objects. Upload the character. And make it move. Upload your
enemy and make them move, too. Also give you the way to defend yourself.

1.Make arrangement:
Game Engine: Cocos2d-x-3.0: (http://www.cocos2d-x.org/download)
Tile Map Editor-9.1: (http://sourceforge.net/projects/tiled/files/)
VS2012: (http://www.visualstudio.com/zh-cn/visual-studio-homepage-vs.aspx) 

    First thing first, we need a game engine —Cocos2d-x-3.0, written in C++ and OpenGL ES 1.1/2.0,
runs on iOS, Android, BlackBerry, Bada, Marmalade, Windows, Windows Phone, Linux and more.

    Then we still need a edit tool to do the coding and show me the result. (I chose the tool VS2012).

    The Tile Map Editor: the version is 9.1. It can create the map you want.

    The Tile Map picture materials: the pictures that show the effect and create the map.

    The Character/Enemy Sprite: the pictures (use PNG graphics) that represent the character and the
enemy.

    The Music: including the background music and the different effect sounds.

Image Title
    And if everything is done, those music and photographs resources should be put into the file of Resources.

2.Use Tile Map tool to create a map

    The cocos2d-x-3.0 supports the map (use TMX format) which creates by the Tile Map editor.

    After install the tool. Double-click the shortcut on the desktop. Click the File/New. Input the
parameters as shown. Then click on the ‘map’ menu and choose the ‘New Tileset’, you will see:

Image Title
    Use the ‘browser’ button to choose the sample pictures that we already have. And set the
‘Margin’ and ‘Spacing’ to 1. The ‘Margin’ will cut off the picture’s edge. And the ‘Spacing’
will cut off the pixels every pixel between two tiles you had set. For example:
Image Title
Set Margin: 1 & Spacing : 1

Image Title
Set margin: 200
Image Title
Set the Spacing: 50

    Once we have done the drawing. Change the layer’s name. Rename it ‘Background’. It will be
convenient for us to manage those layers. (Don’t mind about other layers and objects in the picture I have shown you. We will do it later.) And click on File/Save button. Save it and name it ’01.tmx’ (or
whatever you like.)
Image Title
Rename the layer

To be continued~~

Next: http://www.cocos2d-x.org/forums/6/topics/51024

The resource I used, is released in 4L


05.png (92.3 KB)


06.png (10.0 KB)


00.png (223.9 KB)


01.png (148.4 KB)


02.png (78.9 KB)


03.png (528.5 KB)


04.png (137.8 KB)

3 Likes

I like what I see here :wink:

I am at this point (for my own RPG game attempt), but from here on the hard part starts since I do not have allot of experience with Cocos2D-X V3.0 nor C++.

So i’m looking forward to this “Tutorial series”!

@DamagedBanana THX~

@suigintou

Your tutorials series is cool, hope there are more coming. But may i ask you for providing resources you’re using for these tutorials?

It will help a lot to keep up with tutorials.

@nbtthief Everything except the background music is here. Find your favorite music and name it “background.mp3” (less than 5MB).

@Suigintou Thank you very much, this will help a lot!

thank you for tutorials :slight_smile:

@Suigintou wrote:

@nbtthief Everything except the background music is here. Find your favorite music and name it “background.mp3” (less than 5MB).

the link is invalid…please help to fix.
thanks.

@zhangyuhangk

Hi, i just clicked on the link and still download it, why dont you try again. Click on resource.rar

@nbtthief I still failed to download it.
The link is http://www.cocos2d-x.org/attachments/4423/Resources.rar, right?
Will it be caused by permission issue?

Any way, I have downloaded the images, and that’s enough to me for now.
Thanks for your response.

@Suigintou Could you please advise how to use this tutorial for multiple resolutions. I am currently making a game using Tiled for level editor but struggling with positioning tiles for Android.

I created my level in Tiled using 320 x 480 as design size. For iOS the scaling is simple but Android devices have so many resolutions. I am struggling with trying to come up with a formula for scaling so tiles are positioned correctly and look relatively same for multiple devices.

I have tried using Cocos2D-X Resolution Policies but have not been able to resolve the issue. Either I end up with stretched graphics (EXACT_FIT resoln policy), or with black spaces horizontally or vertically.

Any help will be much appreciated.

@rram I will try to ask my colleagues to get the solution, since I am also confused with this stretched graphics.

Hi @Suigintou

Please mention as well that the tilemap file which is created, needs to be painted by selecting from the layer.
or else it would come as blank in the screen.

I didn’t find it to be mentioned in this post. :wink:

Also, if the resource folder from which the images are linked is moved somewhere, the link is broken.
so, need to be always referencing from the same folder.
please correct me, If I am wrong at any place.

Thanks

Happy Coding :smile: