tiledmap1

可以在一个tiledmap当中添加两个图片，

文章如下： 文章

可以对一个层添加一个property

接下来是as3的代码将会讲述一下几个问题。

1.Read in the TMX file.
2.Parse the TMX file as an XML file.
3.Load all the tileset images.
4.Arrange the tileset images into our map layout, layer by layer.
5.Read map object.

1 Read in the TMX file.

下面是一个tiledmap的样例。

<map version="1.0" orientation="orthogonal" width="20" height="20" tilewidth="32" tileheight="32">
 <tileset firstgid="1" name="grass-tiles-2-small" tilewidth="32" tileheight="32">
  <image source="grass-tiles-2-small.png" width="384" height="192"/>
 </tileset>
 <tileset firstgid="73" name="tree2-final" tilewidth="32" tileheight="32">
  <image source="tree2-final.png" width="256" height="256"/>
 </tileset>
 <layer name="Background" width="20" height="20">
  <data>
   <tile gid="13"/>
   <tile gid="2"/>
   <tile gid="1"/>
   ...
  </data>
 </layer>
 <layer name="Top" width="20" height="20">
  <data>
   <tile gid="0"/>
   ...
  </data>
 </layer>
 <objectgroup name="Collision" width="20" height="20">
  <object x="287" y="354" width="127" height="60"/>
 </objectgroup>
</map>

首先载入xml文件

xmlLoader=new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadComplete);
xmlLoader.load(new URLRequest("../assets/example.tmx"));

然后读出所有的信息

private function xmlLoadComplete(e:Event):void {
   xml = new XML(e.target.data);
   mapWidth = xml.attribute("width");
   mapHeight = xml.attribute("height");
   tileWidth = xml.attribute("tilewidth");
   tileHeight = xml.attribute("tileheight");
   var xmlCounter:uint = 0;
 
   for each (var tileset:XML in xml.tileset) {
      var imageWidth:uint = xml.tileset.image.attribute("width")[xmlCounter];
      var imageHeight:uint = xml.tileset.image.attribute("height")[xmlCounter];
      var firstGid:uint = xml.tileset.attribute("firstgid")[xmlCounter];
      var tilesetName:String = xml.tileset.attribute("name")[xmlCounter];
      var tilesetTileWidth:uint = xml.tileset.attribute("tilewidth")[xmlCounter];
      var tilesetTileHeight:uint = xml.tileset.attribute("tileheight")[xmlCounter];
      var tilesetImagePath:String = xml.tileset.image.attribute("source")[xmlCounter];
      tileSets.push(new TileSet(firstGid, tilesetName, tilesetTileWidth, tilesetTileHeight, tilesetImagePath, imageWidth, imageHeight));
      xmlCounter++;
   }
   totalTileSets = xmlCounter;
}

定义一个class涌来存储TileSet，也就是元图片。

public class TileSet
{
   public var firstgid:uint;
   public var lastgid:uint;
   public var name:String;
   public var tileWidth:uint;
   public var source:String;
   public var tileHeight:uint;
   public var imageWidth:uint;
   public var imageHeight:uint;
   public var bitmapData:BitmapData;
   public var tileAmountWidth:uint;
 
   public function TileSet(firstgid, name, tileWidth, tileHeight, source, imageWidth, imageHeight)
   {
      this.firstgid = firstgid;
      this.name = name;
      this.tileWidth = tileWidth;
      this.tileHeight = tileHeight;
      this.source = source;
      this.imageWidth = imageWidth;
      this.imageHeight = imageHeight;
      tileAmountWidth = Math.floor(imageWidth / tileWidth);
      lastgid = tileAmountWidth * Math.floor(imageHeight / tileHeight) + firstgid - 1;
   }
}

2 Loading the Tilesets

和明显这里是说载入多张图片

// load images for tileset
for (var i = 0; i < totalTileSets; i++) {
   var loader = new TileCodeEventLoader();
   loader.contentLoaderInfo.addEventListener(Event.COMPLETE, tilesLoadComplete);
   loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
   loader.tileSet = tileSets[i];
   loader.load(new URLRequest("../assets/" + tileSets[i].source));
   eventLoaders.push(loader);
}

如果添加了1.png和2.png，在1.png的最后一个gid是12，那么2.png将会以13开始，gid是唯一的。

下面我将会把图片的描述类 TileSet和创建的地图做一个大地图图片显示出来。

screenBitmap = new Bitmap(new BitmapData(mapWidth * tileWidth, mapHeight * tileHeight, false, 0x22ffff));
screenBitmapTopLayer = new Bitmap(new BitmapData(mapWidth*tileWidth,mapHeight*tileHeight,true,0));

在这里我创建了两个图片，一个在上面一个在下面，为了显示出来，图片必须有一个alpha通道。
载入图片

private function tilesLoadComplete (e:Event):void {
   var currentTileset = e.target.loader.tileSet;
   currentTileset.bitmapData = Bitmap(e.target.content).bitmapData;
   tileSetsLoaded++;
   // wait until all the tileset images are loaded before we combine them layer by layer into one bitmap
   if (tileSetsLoaded == totalTileSets)
   {
      addTileBitmapData();
   }
}

3.Combining the Tiles
合并这些图片

private function addTileBitmapData():void {
// load each layer
for each (var layer:XML in xml.layer) {
   var tiles:Array = new Array();
   var tileLength:uint = 0;
   // assign the gid to each location in the layer
   for each (var tile:XML in layer.data.tile) {
      var gid:Number = tile.attribute("gid");
      // if gid > 0
      if (gid > 0) {
         tiles[tileLength] = gid;
      }
      tileLength++;
   }
   // outer for loop continues in next snippets

添加地图信息