Hi everyone, welcome to my new blog. For my first article, I decided to write about a 2d platform game example I first read about here. The technical details relating to the example can be read on Paul’s blog in the link above, so I won’t go over them again.
The framework i chose to use for this project is cocos2d, a popular open source framework with a large community. More info on the framework can be found here.
Tile Map Design
The biggest deviation from the original source code is the addition of support for the Tiled map editor. With support for Tiled, it becomes very easy to design and insert new maps into your project. but before you go off and start creating all those maps, there are a few things you must know.
You will need a tile layer named “collisionLayer”.
You can do this by clicking on the “Layer->add tile layer” in the menu bar.
This is the layer that will hold the tiles that represent collidable tiles in the game.
Once you have your collisionLayer, you will need a tile set to accompany it. Note: you can only use one tile set per layer.
To add a tile set to your map, click”Map->New Tileset”. A form will popup allowing you to browse your hard disk for your tile set. Click ok once you are done loading in your tiles.
Now that you have your tile set loaded into the editor, your going to need to add some properties to your tiles in order for the game to recognize them as collidable objects.
In the tile set window, right click on the tile that you want to make collidable, then click “Tile Properties”.
You will be presented with a popup window, shown above, and from there you will be able to add the property with Name: “Type” and value: “Solid”.
This will make it so that the player cannot pass through this type of tile.
Wow, thats a lot! But theres still one more thing we need to do before we can get to the fun part. We need to add an object layer so we can store the players spawn point.
Click on the “Layer->add object layer” and name it “objectGroup” like we did with the collision layer. Now make sure the object group is highlighted in the Layers window and click on the “inset rectangle” button in the toolbar.
Click anywhere in the editor window to create a new object in your objectGroup layer.
Name the object “PlayerSpawn” and click “ok”.
Once you are done with all that you are ready to start drawing your map. Make sure the collision layer is highlighted and select the tile that you made “Solid”. Use this tile to fill the map areas that you don’t want the player to be able to move through.
Now that you have created your masterpiece, its time to save it and upload it into the project. Click “File->Save As” and name the map “testMap”.
Loading Your Map Into The Project
So, I’ve got my new map… what now?
Fire up Xcode, with the project you can download from the Downloads page. Delete the map I built for you :”( and copy yours in. Next view the map file in Xcode and fix the tile set file extension as shown below.
Update: Tiled exports the map with a path that looks something like this:
depending where you imported your tile set from. What we want is for the path to look like this:
otherwise the layer containing that tile set will not show up in the game. The picture below shows what it should look like.
After you have done that, you are ready to build and run the project with your map!!!
Well, that concludes the first part of my blog post. I didn’t expect it to be this long, so I will continue with a part two including detailed information about the code side of the project soon.
The project source can be downloaded from my Downloads page. Thanks for taking the time to read through my blog. If you have any questions or suggestions, please leave a comment below. If you enjoyed reading my blog and wish to help support my work, please go to the Donate page
Note: donations, although greatly appreciated, are never required.