Cocos2d-x learning notes (16) -------- & gt; grid map in Cocos2d-x engine, cocos2d-x learning notes

Cocos2d-x learning notes (16) --------> grid map in Cocos2d-x engine, cocos2d-x learning notes
Grid map
Introduction to 2D game grid map: In a grid map game, a map is composed of a group of images called "tiles. These images are placed in a whole grid. Get a convincing game scenario. Grid map technology provides developers with a lot of convenience. With a few grid image elements, they can form a very large scene map, and these big scenarios do not waste hardware resources. In addition, maps of various scenarios can be obtained based on different grid elements. Grid maps are mainly divided into two categories:Category 1Yes90-degree grid map(Orthogonal Tilemap), These maps use square or rectangular tiles (Tile), Usually from top to bottom to show the game world.
Category 2Yesoblique45-degree grid map(Isometric), This type of map uses a pyramid tile, so that the displayed content achieves a perspective effect, and can be introduced in the game to the left and right, the top left, bottom left, top right, and bottom right are in 8 directions, which is similar3DEffect grid map.

For the two mainstream grid map types,XThe engine can be perfectly supported.Cocos2d-xThe engine supports standardTMXFormat grid map file, which is a file created using the grid map editor, readTMXFormat file,XThe engine can display the entire grid map in the scene, and operate on the hierarchy information and various map attributes in the grid map. In this case, the grid map isXAn"Extra Large.
Use grid map editor(Tiled Map Editor):Tiled Map EditorYou can easily edit various90-degree grid mapAnd45-degree grid mapAnd save the edited contentTMXFormat fileCocos2d-xThe engine reads the parsing and displays it in game scenarios.TiledThe edited grid map supports multiple layers. You can add trigger areas and objects to the map, add type attributes for each tile, and then useCocos2d-xIn the program, use code to access the attribute value of the tile.

Use Tiled to create a 45-degree Map:

Use Tiled to create a 90-degree Map:


Use grid maps in the Cocos2d-x Engine:

CCTMXTiledMap* map = CCTMXTiledMap::create("iso-test1.tmx");addChild(map, 0);

This code loads the GRID file. In the x engine, the grid map corresponds to the CCTMXTiledMap type. This type of object can be used to perform various operations on the grid map. The following code adds the grid map object as a subnode of the scenario to the game scenario. Effect:

Center the map and set an anchor for the map object.

CCTMXTiledMap* map = CCTMXTiledMap::create("iso-test1.tmx");map->setAnchorPoint(ccp(0.5f,0.5f));map->setPosition(ccp(visibleSize.width/2, visibleSize.height/2));addChild(map, 0);

Effect:

Hierarchical Control of grid maps: In Cocos2d-xEngine, you can use CCTMXLayerType LayerObject, including display Hide, Zoom. In the specific operation LayerBefore using CCTMXTiledMapType MapObject LayerObject before you can LayerObject.

CCTMXTiledMap* map = CCTMXTiledMap::create("iso-test1.tmx");map->setPosition(ccp(visibleSize.width/2, visibleSize.height/2));map->setAnchorPoint(ccp(0.5f, 0.5f));CCTMXLayer* layer1 = map->layerNamed("layer1");CCTMXLayer* layer2 = map->layerNamed("layer2");CCTMXLayer* layer3 = map->layerNamed("layer3");layer2->setVisible(false);addChild(map, 0);

First CCTMXTiledMapType object LayerNameMethod and the name of each layer as the parameter. CCTMXLayerType LayerObject, then we can use LayerObject Hide, Zoom outAnd Zoom inOperation.
Besides LayerIn addition to overall control, we can further obtain LayerA specific grid Unit obtains an independent genie object. After obtaining the object, you can perform various genie operations on it, such as changing colors, in this way, you can finally control each grid unit of the grid map.

CCSprite* sprite;sprite = layer3->tileAt(ccp(8,7));sprite->setColor(ccc3(200,0,0));

You can also modify a level in real time. LayerSpecify the content of a cell.

layer3->setTileGID(32, ccp(8,7));

The above code has been modified Layer3The coordinates in the hierarchy are (12, 12)Image of this cell IDWhen the new IDSpecified 32The corresponding image is 32.
Effect:
Grid map Movement Control: The grid map object is in Cocos2d-xEngine is essentially a special type of node in the scenario. Therefore, all operations on nodes can be performed on grid map objects. Grid maps are usually relatively large and contain a lot of content. The overall size of all maps is usually several or even dozens of times that of game screens, if you want to traverse the entire map in the game, you must move the map to control the main camera of the game screen (that is, the current screen window) moving from one point on the map to another is actually a fixed camera position, allowing the grid map to move from one point to another in the scene. This reverse operation can also achieve the same effect. Run the following code to move a map by touch:: In HelloWorldScene. hAdd the header file:

virtual void ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent);

Then HelloWorldScene. cppAdd:

void HelloWorld::ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent){CCTouch* touch = (CCTouch *)pTouches->anyObject();CCPoint diff = touch->getDelta();CCNode* node = getChildByTag(1);CCPoint currentPos = node->getPosition();node->setPosition(ccpAdd(currentPos, diff));}

In this function, the user's touch point is obtained first. XUsed in the engine CCTouchType indicates the touch point information. Next, use the touch point object. TouchOf GetDeltaMethod to get the current touch point within two frames X axisAnd Y axisThe moving distance in the direction. After obtaining the distance from each finger sliding, update the coordinates of the map based on the location change. Use GetChildByTag (1)This method is used to obtain a grid map node. The reason why a grid map object can be obtained is that when a grid map is added to a scenario AddChild (map, 0, 1)The third parameter specifies TagLabel is 1. You can use tags to retrieve a grid map object. In this case, the object type is a scene node. GetPosition ()Obtain the coordinates of the node SetPosition ()You can set its new coordinates. Effect:

Block operations on a grid map: When designing a game that uses a big map, in addition to the element content on the map, we usually need to join the game Main Character, NPC. When walking on a map, you must note the effect of hiding an object on the map. For example, when a person walks in the desert, the person is on the upper layer of the earth's surface. When the task goes into the forest, the number should be on the upper layer of the person, indicating that the person is blocked by trees. First, set the display order of each layer in the grid map -- ZOrderUse the following code to set a lower display level for the first and second layers, which will be blocked by the main character genie. The level of display for the forest layer on the third layer is much higher and will not be blocked by the main character genie.

layer1->setZOrder(1);layer2->setZOrder(2);layer3->setZOrder(10);

Parameters 1, 2, and 10 represent the display level of each layer. A greater value indicates a higher level, which blocks lower-level objects.

CCSprite* sprite = CCSprite::create("iso-test.png", CCRectMake(274,0,48,114));sprite->setPosition(ccp(350, 300));sprite->setAnchorPoint(ccp(0.5f,0.5f));map->addChild(sprite, 3);CCActionInterval* move =  CCMoveBy::create(3, ccp(200, -200));CCActionInterval* back = move->reverse();CCActionInterval* seq = CCSequence::create(move, back, NULL);sprite->runAction(CCRepeatForever::create(seq));

Effect: