Citrusengine Series Tutorial Six: Creating a map using tiled map Editor

Author: CLS Sharing station Before Citrusengine Series Tutorial Three, we have explored how to use the Flash CS design level, now we look at how to create a map using tiled map editor, in fact, the two do something similar, see the game needs and developers how to weigh the ~ The tiled map Editor is a general purpose editor that can be used to create maps of 2D and 2.5D. Features are relatively easy to use, style similar to the mini version of Photoshop. It can be used to make multiple types of game engine needs, and it supports the use of plugins to read and write maps, adding the map format for the engine. The most important open source, and the Chinese version, Kazakhstan. There are also a number of related tutorials online, such as: using the tiled editor to create a TMX map import tile and game Add (translation) How to use cocos2d to make a tile map-based game tutorial: Part One tiled map Editor instructions for use Although most of these tutorials are based on cocos2d or other game platforms, the steps to create a map are basically the same, so there is also a good reference value. Therefore, I will focus here on the use of the edited map (. tmx file) in Citrusengine ~ So before we get started, we need a texture atlas and software (download from the website), here's The Texture Atlas (genetica-tiles.png) I got from the citrus website example: http://www.chenlinsheng.com/?p=509 is not with our series of tutorial four mentioned sprite sheet bitmap sequence very much like, in fact, it should also be said to be the same thing, this picture can be used Ps,flash and Texturepackergui tools to generate, specific practices, will be introduced in the following tutorial .... Now let's look at the software interface: http://www.chenlinsheng.com/?p=509 1. First click on 1 to create a new map, and a box will pop up to set the map related information, the following is my settings: http://www.chenlinsheng.com/?p=509 2. Import the texture Atlas, operation steps: Map new tiles. Also eject the Import box: http://www.chenlinsheng.com/?p=509 3. After the import, you can see that on the tile interface, Genetica-tiles.png was cut into pieces by 64*64. http://www.chenlinsheng.com/?p=509 4. Now we drag the picture inside the tile to the different layers on the stage, so we first point to 4 new background layer, platform layer, etc., double-click the name of the layer can be renamed: http://www.chenlinsheng.com/?p=509 5. Edit the map, place the tile on the appropriate layer, and refer to the tutorial above (there is also a source file download at the end of the article): http://www.chenlinsheng.com/?p=509 6. Add the object layer, operation steps: Object 4, and the object layer is named objects. http://www.chenlinsheng.com/?p=509 7. Select the object layer and click on 3 to begin drawing the objects position: http://www.chenlinsheng.com/?p=509 8. Associating an object with Citrusengine, the association method is basically the same as when using Flash CS design level, the name "hero" is added when associating the Hero class, and is also used to access settings in code through name. By the way, the layer can also be set by the name of the layer, and the following code also has an example http://www.chenlinsheng.com/?p=509 9. Save, I'll name it map.tmx. 10. Copy MAP.TMX and Genetica-tiles.png to the Flex project, embedded using [Embed]: public class Tiledmapstate extends state { [Embed (source= "/. /ASSEST/MAP.TMX ", mimetype=" Application/octet-stream ")] Private Const _map:class; [Embed (source= "/. /assest/genetica-tiles.png "] Private Const _imgtiles:class; Public Function Tiledmapstate () { Super (); var objects:array=[hero,platform]; } Override Public Function Initialize (): void{ Super.initialize (); var box2d:box2d=new box2d ("box2d"); Box2d.visible=true; Add (box2d); var bmp:bitmap=new _imgtiles (); Add name to let us know which picture was chosen Bmp.name= "Genetica-tiles.png"; Objectmaker2d.fromtiledmap (XML (New _map ()), [BMP]); var hero:hero=getobjectbyname ("Hero") as hero; View.camera.setUp (Hero, New Mathvector (STAGE.STAGEWIDTH/2, 240), New Rectangle (0, 0, 1280x720, 640), New Mathvector (. 25,.25)); (View.getart (GetObjectByName ("background-elements")) as Spriteart). Alpha = 0.5; } Copy code last source, run when the report can not find the error of the picture, just use text editing tools (such as Notepad) to open map.tmx, modify the source of the image, it is the relative path of flex, such as: <?xml version= "1.0" Encoding= "UTF-8"? ><map version= "1.0" orientation= "orthogonal" width= "ten" height= "Tilewidth=" = "><tileset" firstgid= "1" name= "Genetica-tiles" tilewidth= "Up" tileheight= "><image source=" Genetica-tiles.png "width=" 640 "height=" "/></tileset> Copy Code

= = Original and Web download