Working with isometric maps in cocos2d

Hello to all readers of habrahabr.ru

Recently I decided to start developing games for iOS, the reason was a read post on the site . This lesson helps to not waste your time and I think in the future it will bring a good addition to the salary. At first I read a book on Objective-C and started looking for a good, but free engine for writing a game, since I did not want to use pure OpenGL. The choice fell on cocos2d , and here a friend advised and found a lot of good reviews on the site about him, plus I heard more than once that the developers often answer questions on the forums.

The game will be an economic strategy, since I love this direction of games. Any of these games uses a map on which the player can move and build different buildings or something like that. So I decided to start my game by creating such a map. I began to search for information on the creation of isometric maps, but there is not a lot of it on the Internet and I have not seen a single article in Russian. Therefore, I decided to write my own. I think some novice developers will find it interesting and useful to read it.

Perhaps enough entry. Let's get started!

There are two types of cards, these are isometric and orthogonal. At the moment, I will describe my work with an “isometric” map, as it suits me better for the game.

What are isometric maps and what do they give us?

Using an isometric map, we get the best using 2-dimensional graphics to achieve a 3-dimensional view. It is for this reason that isometric games are so widely popular. They allow you to create believable game worlds that we think have spatial depth with relatively simple graphics. Not to mention the fact that 2D graphics require much less device power than 3D games.



Designing an isometric map.

Isometric maps use axonometric projections to create the impression that we are looking at the scenery from the corner, thereby creating visual depth. Axonometric projection is a technical term for the design, rotation of a three-dimensional object on a two-dimensional plane. The image becomes distorted, but our mind accepts it as a three-dimensional object.

From the point of view of tilemaps, if you look at “Figure 1” you will see concrete actions for creating an isometric projection. The area of ​​the first is rotated 45 degrees and then scales down along its Y axis to give it its typical isometric shape.



“Figure 2” shows several uniformly colored isometric tiles located next to each other, creating a ground floor pattern. The tiles on the ground floor are not impressive, and look very flat. However, they are important as the background layer of the game world.



To add the actual visual depth to the isometric map, we need to have a “tile” object that goes beyond the diamond-shaped shape. The most commonly used approach is to design three-dimensional objects as if they were viewed at a 45-degree angle. As a rule, such objects are no more than one tile higher. It gives a sense of visual depth. Similarly, if you create isometric tile objects that are much higher than the height of the two tiles, then it will be very difficult to create a convincing 3D view if the objects seem very tall because the player will only see part of the tilemap.

It was a small introduction, now let's move on to the most important thing - creating a map.To do this, we need an editor, which will allow us to work with isometric maps. We will use the Tiled Map Editor . It is free and updates often come out, I think it will not be difficult to find it on the developers website, plus there is a version for Windows and Mac.

Let's start creating the map itself. We open the application and make some settings so that the cocos2d parser itself does not swear on our map, find the “Preferences” menu item and put “Store tile layer data as” in Base64 (gzip compressed) , you can see it in the figure below.



We continue . Select File ➤ New. A dialog with the name New Map will open.. Orientation, isometric must be installed and the map size (Map size) is 30 plates wide and 30 plates high, I think this is enough for us. It seems strange here the width of the tile and the height (Tile size). The size of the diamond shape that we need to consider when laying the tiles is 54x27 pixels. Nevertheless, the tile size is set to 52x26 .



The purpose of this offset is (-2, -1) so that later we have straight lines along the edges of the tilemap and avoid the bottom black layer being shown to us. This is necessary because it is impossible to create ideal shapes that are located at the same distance from each other and do not overlap.

If you made a mistake and chose the wrong offset, and you do not want to re-create the tilemap that you just spent a lot of time on, or if you have other reasons and you want to adjust the size of the tilemap or tileset, there is an easy way to do this. Select the TMX file in your project in Xcode and you will see that it is an XML text file . At the beginning of the file you will find the partition map:

You can also edit the tilewidth and tileheight parameters until we find the correct offset for the tilemap. Similarly, if you are having trouble determining the size of the isometric tileset you are using, you can change the parameters of the tileset, such as tilewidth and tileheight:

Then you just need to make sure that the TMX file in Tiled is updated after you have made any changes manually, because Tiled will not automatically update the file.

Creating a new isometric tileset

Next, we need to load into the tileset containing isometric tiles. We will use the dg_iso32.png image . In Tiled , select Map ➤ New Tileset ... and go to the dg_iso32.png file.



Note that Tiled will set the default tile width and height according to the settings in the New Map dialog box.what we put before. For isometric tilemaps, by default it will always need correction due to overlapping isometric tiles. As I mentioned earlier, tileset dg_iso32.png uses tiles with a width of 54 pixels and a height of 49 pixels. Please note that you will have to use the entire height of the canvas of the isometric tile, and not the height of the rhombus which is 27 pixels. The figure above shows how to configure everything.

I want to say about some rules that you should not forget about.

The most important rule for designing isometric maps is that you need at least two layers so that game characters can walk after certain objects (tiles). One layer for flat objects, earth, and earth-like tiles, and another layer for other objects that either overlap other tiles or which are not completely opaque. The first layer we will have land and it should be placed on the first floor, then we will place the second layer on this layer, on which there will be mountains, trees, houses, etc. Objects that the player will not be able to pass.

In the past version of cocos2d there were problems with the correct display of game characters and other sprites behind partially transparent tiles. Part of the solution is to add special properties with the namecc_vertexz to our layers. To do this, we need to select the ground layer and add “Layer Properties” to it. Press another key or use Ctrl on the Mac. Add a new property named cc_vertexz and set its value to -1000. Do the same with the “Objects” layer but enter the line “automatic” (without the quotes), as shown in the figure below.



You can place any objects on the map and build any map. Since this is an example, I sketched a simple map, which consists of a couple of trees and a small number of mountains.

Then we save everything that we have done, the name of which we will give isometric.tmx.

Loading isometric Tilemap in Cocos2d

Next, open our Xcodeand create a new project.



We call it whatever you like. I named my NewTileMap.



Next, drag our map into our project that we just created.



Do not forget to tick that we only copy objects.

Go to the HelloWorldLayer.m file and start coding, today it’s not much, then there will be more.



in the init method we erase everything that is there and add our code.

self.map = [CCTMXTiledMap tiledMapWithTMXFile:@"isometric.tmx"];
self.background = [_map layerNamed:@"Background"];
[self addChild:_map z:-1];
_map.position = CGPointMake(-500, -500);

Since we placed our objects in the upper right corner, we immediately need to go there, for this we are changing the position.

Well, perhaps you can run our game. And what do we see?



This is not what we wanted to see! I don’t know for what reasons, but cocos2d somehow doesn’t correctly display isometric maps with a standard project creation template. Well, nothing, fix it. Smart people said it’s worth a little fix CC_DIRECTOR_INIT which is defined in ccMacros.h. I did just that, but it didn’t help me, I had to completely replace the folder in the project \ libs \ cocos2d and then I still need to edit the AppDelegate.m file a little.

If anyone solved this problem differently, I will be glad to know how.



All corrected and try to run our little game.



Now everything is as it should be! Everything is correctly displayed.
I think this is enough for now, in the next chapter we will continue to work with the map.

The book Steffen Itterheim - Learn iPhone and iPad Cocos2D Game Development helped in writing the article.
To whom the source code will be gentle, write, I will send.