2D Platform Game IOS Port – Part 1

Introduction

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 project I have posted is a port of the FREE! source code offered by Paul here, with added support for the FREE! Tiled map editor, and a few other tweaks.

Tiled Map Editor Screen Shot

Tiled Map Editor Screen Shot

cocos2d Logo

cocos2d Logo

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”.

collisionLayer

Layers Box

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. 

tileset

New Tileset Form

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.

tilesetWindow

Tileset Box

In the tile set window, right click on the tile that you want to make collidable, then click “Tile Properties”.

tileProperties

Tile Properties Form

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. ir

Click anywhere in the editor window to create a new object in your objectGroup layer.

og

After you’ve gotten it to look like the photo above, right click on the new object and click “object properties”.
op

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.

mapping

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:

source="2dPlatformer_Port/2dPlatformer_Port/tileSet.png"

depending where you imported your tile set from. What we want is for the path to look like this:

source="tileSet.png"

otherwise the layer containing that tile set will not show up in the game. The picture below shows what it should look like.

fix

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.

Advertisements

One thought on “2D Platform Game IOS Port – Part 1

  1. Pingback: DevCrews GameStudio » Fruits Jelly Arcade!

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