Vertical Scrolling games were introduced back when the caveman was still running away from the dinosaurs. With the passage of time dinosaurs were gone but vertical scrolling games are still part of the fabric of modern games. In this article we are going to implement a vertical scrolling tile map based car game.

Downloading Tiled:

The best way to get started with creating a tiled based game is to download Tiled. Tiled is a FREE tiled map editor which allows to create orthogonal and isometric maps. Tiled is available Windows, Mac and Ubuntu. In this article we will be using Tiled Qt 0.6.2 for Mac OS X which can be downloaded here.

Creating a Tilemap Using Tiled:

After downloading and installing Tiled, open the application and you will see the following screen:



The next step is to create a new project in Tiled. Simply select File->New and it will give you a dialog box to enter the dimensions of your map. Enter the information as shown below:



The Map size represents the total size of your map. We have selected 40X40 which means the map will consist of 40 vertical tiles and 40 horizontal tiles. The Tile size represents the dimensions of the tile. We have set the dimensions to be 32X32. This means that when the app is run in portrait mode there will be 10 tiles in horizontal and 15 tiles in vertical. The calculation is shown below:

iPhone Portrait Size = 320 X 480
Number of Horizontal Tiles = iPhone Screen Width / Width of the tile = 320/32 = 10
Number of Vertical Tiles = iPhone Screen Height / Height of the tile = 480/32 = 15

NOTE: We do understand that we can make a tilemap which is 10 X 40 and it would perfectly fit with our requirement. The reason we choose 40 X 40 is to give an extra buffer if the developer wants to move the car in an area that is not covered by a map of size 10 X 40.

In the next section we are going to load tilesets into our tilemap and make it look pretty!

Loading Tileset(s):

A TileSet is represented by an image sheet which contains many small images. These images can be of beautiful scenery, underwater adventure, a dark dungeon or simply anything you can dream of. There are several tilesets included in the Tiled download folder. For this article we are using free tilemap from David Gervais.

In order to load a tileset from Tiled select Map->New Tileset. This next screen will ask for the location of the tileset. Browse in your drive wherever you have stored the tileset and load it in your Tiled editor. After loading the tileset into Tiled you can simply drag and drop different tiles on your map to create a scenery. The recommended way of building the map is to first paint the whole map with a particular tile and the add different entities to the map. You can use the bucket tool to quickly paint the complete map with a the selected tile.

We have created a very simple map which represents a forest which a road in between. The screenshot is shown below:



Nice!

Save your newly created awesome map because in the next section we will load the map in our Cocos2d application.

Loading Tilemap in Cocos2d:

Tilemaps can easily be loaded in Cocos2d application using only few lines of code. First make sure you copy the tilemap (TMX) file and the tileset into the Resources folder of your Cocos2d application. Add the following lines in your init method which will load the tilemap:



The screenshot is shown below:



Looks awesome right!

Scrolling the Tilemap:

We got our tilemap to be displayed on the screen but currently it is just a static map which does not scroll. Scrolling can be easily achieved using the CCActions available in Cocos2d framework. Check out the implementation below:



The above code runs the CCRepeatForever action on the tiledmap instance. The CCRepeatForever actions invokes the CCMoveBy action which moves the tiledmap in the negative y-axis while keeping the x-axis unchanged.

Run the code and you will notice that the map will start scrolling vertically. But wait!! it seems that after scrolling for only few seconds the map runs out and the black background takes over. At this point we have couple of options that can help us solve this issue:

Option 1: Make the game over or level over after you have run out of map. This will require you to create larger maps.

Option 2: Restart the map after it is over.

For this article we will use Option 2. In order to make the restart of map seamless a great care must be taken to ensure that the start of the map is similar or identical to the end of the map. This reset of map will be performed within the schedule method. First, let's schedule a selector to be fired inside the init method of your app.

 

And here is the implementation of the step method:



The only thing hairy about the step method is the magic number -800. The -800 is achieved using the following formula:



Now, if you run the app you will notice that when the map runs out it starts from the beginning hence giving the user an illusion that the map is infinite in nature.

Source Code:

The source code is available on Github using the following URL of the repository:

git@github.com:azamsharp/Desert-Race.git

Conclusion:

In this first part of creating a vertically scrolling game we learned about Tiled application which can be used to create tiled maps. We also learned how to load the map into our Cocos2d app and make it scrollable infinitely. In the next article we will demonstrate how to add our car into the map and make is callable with objects.