Cocos2d-x beginner's Guide (5): Use of Tiled Map (angle movement, collision detection)

In this tutorial, we will explain how to use cocos2d and Tiled Map Editor to create a tiled map-based game. as an example, we will make a small game. the main content of the game is a ninja searching for delicious watermelon in the desert.
The main content of this tutorial is:
How to Create a Tiled Map.
How to load a map into the game.
How to make the map scroll with the player; how to use the Object layer.
How to Create collision (non-cross) areas in a map.
How to Use the tile attribute.
How to Use collision objects and dynamic map modification.
How to determine if your protagonist does not generate a Traversal
If you are A beginner in iphone development and are preparing for basic knowledge, I suggest you read How To Make A Simple iPhone Game with Cocos2D Tutorial Series first.

Create a game skeleton
Next we will create a game skeleton. Prepare the required resource files, open XCode, File \ New Project, and select cocos2d Application to create a New Project.
Next, download the zip file, which contains the resources required by the game:

Protagonist genie
Some game sound effects (made using the cxfr tool)
Game background sound (produced using Garage Band, details)
Components used to construct a tiled map
Some special components will be explained in detail later
Drag the downloaded resource package to the resources group of xcode. Select Copy items into destination group's folder (if needed )".
In this way, everything is ready.

Create a game map
Cocos2d supports the use of the open-source software Tiled Map Editor (seemingly blocked by the Great Wall, tianchao users can directly access it on the sourceforge project homepage, cup !) The created TMX format map. If you access the above link, you will find two versions available.
One is written using the Qt application framework and the other is written in Java. this is because Tiled Map Editor was originally written in Java and then transplanted to the Qt framework. which version can be used. in this tutorial, we use the Qt version as an example because it will serve as the main line for future development.
Some people prefer to use the java version because some of the functions of the old version have not been migrated to the Qt framework.

Run Tiled Map Editor to create a Map. Enter the following dialog box:

Click OK. The tiled component is displayed in the Tilesets window. now you can start to draw a map. click the Stamp icon on the toolbar, select a tiled component, and click place map component at the desired position in the map.

Draw a map using the above method. At least draw several buildings on the map, because we will use them later.

Some quick tips are best remembered:
You can add multiple tiled components to the map at a time ).
You can use the paint cartridge button to fill the map background.
You can zoom in and out the map in the view menu.
After drawing the map, double-click the layer in the Layers window (usually named Layer1) and change it to Background. Select Save in the File menu, Save the map to the xcode project, and name it tiledmap. tmx
Add the Tiled Map to Cocos2d Scene, drag the created tmx file into the project resources, open the HelloWorldLayer. h file, and add some code:
# Import "cocos2d. h"

// HelloWorld Layer
@ Interface HelloWorld: CCLayer
{
CCTMXTiledMap * _ tileMap;
CCTMXLayer * _ background;

}
@ Property (nonatomic, retain) CCTMXTiledMap * tileMap;
@ Property (nonatomic, retain) CCTMXLayer * background;
// Returns a Scene that contains the HelloWorld as the only child
+ (Id) scene;

@ End
Add code in HelloWorldLayer. m:
// Import the interfaces
# Import "HelloWorldScene. h"

// HelloWorld implementation
@ Implementation HelloWorld

// Right after the implementation section
@ Synthesize tileMap = _ tileMap;
@ Synthesize background = _ background;

// Replace the init method with the following
-(Id) init
{
If (self = [super init]) {

Self. tileMap = [CCTMXTiledMap tiledMapWithTMXFile: @ "TileMap. tmx"];
Self. background = [_ tileMap layerNamed: @ "Background"];

[Self addChild: _ tileMap z:-1];

}
Return self;
}

+ (Id) scene
{
// 'Scene 'is an autorelisted object.
CCScene * scene = [CCScene node];

// 'Player' is an autorelisted object.
HelloWorld * layer = [HelloWorld node];

// Add layer as a child to scene
[Scene addChild: layer];

// Return the scene
Return scene;
}

// On "dealloc" you need to release all your retained objects
-(Void) dealloc
{
Self. tileMap = nil;
Self. background = nil;
[Super dealloc];
}
@ End

Here we call CCTMXTiledMap to create a map from the map file.

Brief Introduction to CCTMXTiledMap
It is a subclass of CCNode, so we can set position, scale, and so on.
This node contains the map layer and some functions so that you can find them by name.
To improve performance, each layer uses the CCSpriteSheet sub-class, which also means that each tiled element has only one instance at each layer.
Next, we need to add the map to the HelloWorld layer by referencing the map and layer, compile and run the code, and you will be able to see the lower left corner of the map.

Looks good! However, as a game, we still need to do three things:
A game leader;
A starting point for placing the main character;
Move the view so that our perspective will always follow the main character.
These are the key tasks for developing this game. We will solve them one by one.

Object layer and Tiled Map location.
Tiled Map Editor supports two layers: tile layers (spreading layer, which we used earlier) and object layers (object layer ).
Object layers allows you to define an area on the map with a single point as the center. some events can be triggered in this region. for example, you can create an area to generate a monster, or create an area to die. in our example, we create a region as the main character.

Open TiledMapEditor and select Add Object Layer from the Layer menu. the new layer name is objects. note that tiled elements are not drawn in the object layer, and some gray rounded corners are drawn. you can expand or move these shapes.
We want to select a tile component as the main character's entry point. Therefore, if you click a tiled component in the map, the size of the generated shape does not matter. We will use the x and y coordinates to specify it.

Next, right-click the added gray shape and click Properties. Set the name to "SpawnPoint"

Maybe you can set the Type of this object to the class name of Cocos2D. and it will create an object (such as CCSprite), but I have not found how to do this in the source code. regardless of it, we leave the type area empty. It will create an NSMutableDictionary to access various parameters of the object, such as the x and y coordinates. save the map and return to xcode.