Teach you how to use TileMap map editor in cocos2d-x (1)

I haven't updated my blog for a while. I have been busy with projects recently. I will share my latest achievements with you.

Recently, we have been combining research and development tools with game production. We all know that we must first sharpen the tool for good work. A good and convenient development tool can greatly improve the game development efficiency, this is why there are so many development engine tools abroad, especially 3d, such as unity3d, unreal, cryEngine and so on are developed based on this requirement.

My new blog series will teach you how to use the TileMap map editor to improve your efficiency in creating 2d maps.

Here I may mainly introduce some advanced usage. If you are not clear about some basic usage of the 2d map editor, go to Baidu and check the information.

Next, let's go to the topic. First, provide the TileMap

Http://www.mapeditor.org/

TileMap is an open-source map editor developed using qt. Therefore, it can be cross-platform. Because it is open-source, you can also process and modify it as needed. This is very important.

The following is a question for those who are new to game development. Why do we need to develop a map editor? Can we just use the whole map for map?

Here is a simple answer. There are two advantages:

The first one is to greatly reduce the area of the image, which reduces the memory occupied by the system during runtime. The specific principle is to ask your boss or du Niang.

The second advantage is that you can easily make a lot of events in the grid through a scattered map to facilitate judgment. For example, you can make a map obstacle judgment and trigger event judgment.

After the download and installation, open the editor as follows.

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://img1.51cto.com/attachment/201210/143333553.jpg "/>

Click Create map. The following box is displayed.

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/16400434W-1.jpg "/>

You can select "normal" or "45 degrees" for the map direction of the editor. This is a feature not available in many other editors. Most editors only support single-direction map editing, this is why I chose TileMap editor for development.

The map size indicates the number of map grids. If the value is 30*30, a total of 900 grids are displayed.

The block size on the right indicates the size of a single grid. Here it is 64*32. Generally, the size of the square map block is the same. Here we use 32*32.

After confirming, as shown in figure

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640045041-2.jpg "/>

Next we will add image resources

Click "map"-> New Graph block. The following dialog box is displayed.

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640045933-3.jpg "/>

Click "Browse" button to select a picture, here we use the cocos2d-x inside the representative picture, the path is as follows

Cocos2d-2.0-x-2.0.2 \ samples \ TestCpp \ Resources \ TileMaps \ tmw_desert_spacing.png

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/16400411C-4.jpg "/>

Here, the block width and height are 32, indicating the margin and spacing,

Margin refers to the horizontal interval between two blocks.

Spacing refers to the vertical interval between two blocks.

We can see that there are a lot of black lines on the image. Generally, the blocks we made earlier do not have these intervals, but there may be special circumstances, so now we have met, so now, if we do not add any margin or spacing, the cut block will be faulty.

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640044022-5.jpg "/>

As you can see, I have not set the margin and margin to cut out the image blocks, and there will be more and more pixels with obvious deviations,

Next, we will delete this image block and then add it again.

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640043051-6.jpg "/> click the" recycle bin "button below the block to delete the block.

Next let's take a look at setting the margin spacing. Here we set it to 1 pixel.

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640041159-7.jpg "/>

Now, we can see that the white lines separated by the block have completely covered the black lines on the image. This shows that our settings are correct. We can use the block to splice a map.

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640045314-8.jpg "/>

This row is a tool button. The first three buttons are usually used for map creation.

The first is the image stamp, a single brush, or a rectangular image block. Use this tool.

The second is filling,

The third is the eraser.

When you try it, you will know how to use it. Remember, you can use the mouse to select a rectangular graph block at a time on the block layer, then, you can easily and quickly use the first stamp.

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640043564-9.jpg "/>

All right, let's practice it all.

Click "file"> "Save as" to export the file.

Here are some tips:

Select the image block and press the keyboard's "X" shortcut key to flip the block horizontally, while "Y" is vertical,

The "Z" key can be rotated 90 degrees. Very practical.

There is also a random button

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640042115-10.jpg "/>

This button is used after being elected

Then select a large map in the map block box. At this time, when you draw a map, you will randomly select a map from many of the selected map blocks. The effect is as follows:

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1640041951-11.jpg "/>

In addition, all commands in TileMap can be found here.

Https://github.com/bjorn/tiled/wiki/Keyboard-Shortcuts

Now you should know the importance of learning English well.

 

This article is from the "Dairy" blog, please be sure to keep this source http://8287044.blog.51cto.com/5179921/1045274