现在开始写具体实现代码
1.加载TiledMap
1 /** 2 * 创建游戏场景 3 * Create a game scene 4 */ 5 private createGameScene() { 6 let sky = this.createBitmapByName("bg_jpg"); 7 this.addChild(sky); 8 9 /*加载地图*/ 10 /*初始化资源加载路径*/ 11 this.url = "resource/640bg.tmx"; 12 /*初始化请求*/ 13 this.request = new egret.HttpRequest(); 14 /*监听资源加载完成事件*/ 15 this.request.once( egret.Event.COMPLETE,this.onMapComplete,this); 16 /*发送请求*/ 17 this.request.open(this.url,egret.HttpMethod.GET); 18 this.request.send(); 19 }
2.在加载完成后将地图添加到游戏
/*地图加载完成*/ private onMapComplete(event:egret.Event) { /*获取到地图数据*/ var data:any = egret.XML.parse(event.currentTarget.response); /*初始化地图*/ this.tmxTileMap = new tiled.TMXTilemap(640, 640, data, this.url); this.tmxTileMap.render(); this.tmxTileMap.once(egret.Event.ADDED_TO_STAGE, this.onMapAddToStage, this); /*将地图添加到显示列表*/ this.addChild(this.tmxTileMap); }
3.地图显示后,还要添加一些初始的游戏角色,玩家坦克,敌方坦克
1 let groups = this.tmxTileMap.getObjects(); 2 let group0 = groups[0]; 3 group0.draw(); 4 // 3为tiledmap中的对象Id 5 let pl1:tiled.TMXObject = group0.getObjectById(3); 6 // 创建玩家坦克 7 let tank1 = new Tank('player1', 'up', 'player'); 8 tank1.x = pl1.x + 17.5; 9 tank1.y = pl1.y + 17.5; 10 this.tmxTileMap.addChild(tank1);
4.需要创建坦克类,封装一些基本的操作
1)基本的属性,
图片前缀player,坦克图片名称类似player_up_png,一个方向一个,共四个方向
方向,当前坦克的方向
阵营,玩家,敌方
2)基本方法
转向
代码如下
1 class Tank extends egret.DisplayObjectContainer { 2 3 /* 图片前缀 */ 4 private name_prefix:string; 5 /* 方向 */ 6 private dir:string; 7 /* 阵营 */ 8 private camp:string; 9 10 private img:egret.Bitmap; 11 12 public constructor(prefix:string, dir:string, camp:string) { 13 super(); 14 this.name_prefix = prefix; 15 this.dir = dir; 16 this.camp = camp; 17 this.anchorOffsetX = 17.5; 18 this.anchorOffsetY = 17.5; 19 this.once(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); 20 } 21 22 private onAddToStage() { 23 this.img = new egret.Bitmap(); 24 this.img.texture = RES.getRes(this.name_prefix + '_' + this.dir + '_png'); 25 this.addChild(this.img); 26 } 27 28 /** 转向 */ 29 public turn(dir) { 30 if(this.dir === dir) { 31 return; 32 } 33 this.dir = dir 34 this.img.texture = RES.getRes(this.name_prefix + '_' + this.dir + '_png'); 35 } 36 }