Tutorial: Creating a tank battle style game with Cocos Creator (Part 1)

Tutorial: Creating a tank battle style game with Cocos Creator (Part 1)
0

Creating a tank battle style game with Cocos Creator (Part 1)

Note: Part 2 of this tutorial is located here.

Introduction and getting help

You are welcome to post to the Cocos Creator category on the Cocos forums to talk about any issues you encounter during the development process. This tutorial does not teach how to code. Everyone will learn to make TiledMap resources. Please prepare your development environment before starting this tutorial. If you are having trouble with our tutorial, please take a look at the following documentation:

Preparing the development environment


Let’s begin

Tiled is a 2D level editor. Currently, the latest version of Cocos Creator only supports TiledMap v1.0.0 and below, this is why we provide a custom version of the Tiled map editor software.

1. Understanding and using the Tiled Map Editor

Once you have downloaded and unzipped the Tiled Map Editor installation package from above, find the Tiled application and double-click it. The following interface will appear:

Select the File menu and select New:

1568103350497

The following window appears:

1568103544022

Let’s take a moment and explain the various properties of this interface:

Map
Orientation:
1568103811813

Orthogonal: (90-degree angle map) can be used for RPG game maps, but also for horizontal
version of the game like Super Mario.

Isometric: (45-degree angle) can be used for RPG game maps, also consider war chess games.

Isometric (Staggered): (45-degree interlaced) map is rendered as a quadrilateral, and the
boundary position is rendered using 1/2 triangle map block

Tile layer format:
1568104166126
Layer save format: XML, Base64 (uncompressed, gzip, zlib), CSV

Tile render order:
1568104441230
Map coordinate direction: the default is right down (lower right), that is, the upper left corner is the
vertex to the right is the x-axis, the downward is the y-axis

Map size:
1568104592244
Map size, which is the map created with Width * Height map tiles

Tile size:
1568104613897.
Block size, here corresponds to the pixel point, which is the width and height of each block

After understanding the role of each attribute, click OK to create a TMX map resource. Hold down Ctrl + S to save the resource, and name it tankWarMap0.

We can continue to add tile resources to the map. Click on Tilesets to enter the Atlas Management window:

1568105273056

Click New Tileset and the following window will appear:

1568106338745

Name:

  • Atlas name

Type:

  • Based on Tileset Image
  • Pattern based on the size of the atlas itself
  • Collection of Images
  • Can import any image

Source:

  • Atlas path

Use transparent color:

  • Replace the transparent area on the atlas with the specified color

Tile width / Tile height:

  • Block size

Margin

  • Tile edge pixel fill

Spacing:

  • Tile interval pixel padding

Once all the settings have been set, click on OK to import the gallery.

1568107080376

Each tile has its corresponding Tile ID, which is very useful for judging the type of tile:

1568108838000

Next, we have to add the Tile Layer and Object Layer to the map. We now find the Tile Layers area:

1568107440350

Add the Tile Layer and Object Layer as shown below (note the upper and lower levels of each Layer, it is recommended to be consistent with the following figure):

1568107563592

Why should we pay attention to the relationship between the upper and lower levels? Because when the TiledMap resource is imported into the Cocos Creator editor and added to the scene, its hierarchy will be reversed:

1568108084038

In the Cocos Creator UI system, the lower nodes will mask the upper nodes. This means special attention needs to be paid to this to avoid problems.

Select the area shown below, then click the left mouse button on the layer canvas, then drag a distance, then release. This completes the first mapping:

1568109324979

In the end, the finished product will look similar to this:

1568109516700

1568109550756

This completes an introduction of the basic operations of the Tiled Map Editor. There is still
plenty to learn, continue to explore its features on your own.


2. Using a Tiled Map resource in Cocos Creator

This section will demonstrate importing a Tiled Map resource into Cocos Creator, as well as demonstrate the CCTiledMap component.

2.1. Import a Tiled Map resources into Cocos Creator

Find the TileMap resource that has been saved locally:

1568111157524

Select them all and drag them into the assets/res/maps directory in the Cocos Creator editor:

1568111496212

This will successfully import the resources.

2.2. Displaying a Tiled Map resource in the scene

There are two ways to display a Tiled Map resource in a scene:

  1. Add the Tiled Map component and drag the .tmx resource of the Tiled Map resource into the
    Tmx Asset property box:
    1568113927803

  2. Drag the .tmx resource from the Tiled Map resource into the scene.

The above two methods can load and display the Tiled Map resource correctly, the effect is as follows:

1568114022613

Finally, we need to resize the Canvas to match the size of the Tiled Map component, which will make the game look better.

1568114187166


3. Conclusion

This tutorial is a warm-up tutorial for creating a battle style tank game. As you become more familiar with the Tiled Map Editor you can create a lot of interesting maps.

The game effects may look something like this:

GIF


A full version of this demo can be found on our GitHub. Please open it with Cocos Creator v2.1.2.

2 Likes