ActionScript
TypeScript
JavaScript

tiledmap在LayaAir的使用

发布时间:2017-01-03

tiledMapEditor使用说明

 

        tiledMapEditor是网上一个免费使用的地图编辑器,对于编辑大部分2D游戏地图,都很适用。

 

1.从官网下载tileMapEditor

         http://www.mapeditor.org/download.html

 

 

        图片1.png 

        从红框中选择自己的开发环境,在接下来的版本选择中,选择最新的版本下载安装。(注:如果64位的版本运行不成功,试试32位的版本)这里我们选择是tiled-v0.15.0-25-g7043246-win32-setup.exe

 

2.生成JSON文件

2.1打开Tiled 编辑器

        点击 文件-> 打开 -> 在官方提供的例子中,选择需要编辑的地图。

        图片1.png 

 

2.2最新版本的,数据默认是压缩格式的,所以我们要改成XML("地图“->"Map Property")。

        图片1.png 

 

2.3本步骤特别注意,如果项目中使用了图块文件(.tsx),把图块文件(.tsx)导入到项目中。

        点击红色框中的按钮。

        图片1.png 

 

2.4最后选择导出 文件->Export(ctrl+E)。

        保存类型选择Json map files(*.json) 保存为json.文件

        图片1.png 

        

3.tiled地图文件在LayaAir的使用

3.1把生成的文件和对应的图像资源,复制到 LayaAir 项目的bin/H5目录下。

        1463539627310177.png 

 

3.2创建工程文档。

 

        图片1.png 

 

        代码如下:

package 
{
    import laya.display.Stage;
    import laya.events.Event;
    import laya.map.TiledMap;
    import laya.maths.Rectangle;
    import laya.utils.Browser;
    import laya.utils.Handler;
    import laya.utils.Stat;
    /**
     * ...
     * @author ...
     */
    public class simpleTiledMap 
    {
        private var mTiledMap:TiledMap;
        private var mCompleteKey:Boolean = false;
        private var mLastMouseX:Number = 0;
        private var mLastMouseY:Number = 0;
    
        private var mX:Number = 0;
        private var mY:Number = 0;
        public function simpleTiledMap() 
        {
            Laya.init(Browser.width, Browser.height);
            Laya.stage.bgColor = "#666666";
            Stat.show( 10, 10 );
            Laya.stage.sizeMode = Stage.SIZE_FULL;
            createMap();
            Laya.stage.on(Event.MOUSE_DOWN, this, this.mouseDown);//注册鼠标事件
            Laya.stage.on(Event.MOUSE_UP, this, this.mouseUp);
            Laya.stage.on(Event.RESIZE, this, this.resize);
        }
        //创建地图
        private function createMap()
        {
            //创建地图对象
            if (mTiledMap == null)
            {
                mTiledMap = new TiledMap();
            }else {
                destoryMap();
            }
            mX = mY = 0;
            //创建地图
            mTiledMap.createMap("desert.json", new Rectangle(0,0,Browser.width,Browser.height), new Handler(this,completeHandler));
        }
        //销毁地图
        private function destoryMap()
        {
            mCompleteKey = false;
            mTiledMap.destory();
        }
        /**
         * 地图加载完成的回调
         */
        private function completeHandler():void
        {
            trace("地图创建完成");
            trace("ClientW:" + Browser.clientWidth + " ClientH:" + Browser.clientHeight);
            mCompleteKey = true;
            resize();
        }
/*****************************************鼠标按下拖动地图***************************************/
        private function mouseDown():void
        {
            mLastMouseX = Laya.stage.mouseX;
            mLastMouseY = Laya.stage.mouseY;
            Laya.stage.on(Event.MOUSE_MOVE, this, this.mouseMove);
        }
        private function mouseMove():void
        {
            //移动地图视口
            mTiledMap.moveViewPort(mX - (Laya.stage.mouseX - mLastMouseX),mY - (Laya.stage.mouseY - mLastMouseY));
        }
        private function mouseUp():void
        {
            mX = mX - (Laya.stage.mouseX - mLastMouseX);
            mY = mY - (Laya.stage.mouseY - mLastMouseY);
            Laya.stage.off(Event.MOUSE_MOVE, this, this.mouseMove);
        }
        /**
         * 窗口大小改变,把地图的视口区域重设下
         */
        private function resize():void
        {
            if (mCompleteKey)
            {
                //改变地图视口大小
                mTiledMap.changeViewPort(mX, mY, Browser.width,Browser.height);
            }
        }
    }
}

 

3.3完成以上步骤运行编译即可,效果如下。

1463539872471028.png 

 

        注意事项:Tiedmap官方例子中的45度地图(isometric_grass_and_water.tmx)是采用严格渲染顺序,即必须一次性把地图渲染好或者用一个TILE一个显示对象来实现,与 LayaAir 中优化策略以块渲染冲突,如果想正确看到渲染效果,可以把gridSize设置为整 个地图大小。(建议使用标准格子大小的45度地图,这样可以以块进行渲染,加快渲染效率)。

 

 

 

createMap () 方法  

 public function createMap(mapName:String, viewRect:Rectangle, completeHandler:Handler, viewRectPadding:Rectangle = null, gridSize:Point = null):void


创建地图

 参数

     mapName:String — JSON文件名字。  
     viewRect:Rectangle — 视口区域。  
     completeHandler:Handler — 地图创建完成的回调函数。  
     viewRectPadding:Rectangle (default = null) — 视口扩充区域,把视口区域上、下、左、右扩充一下,防止视口移动时的穿帮。
     gridSize:Point (default = null) — grid大小