一个H5游戏的开发（四）

游戏地图设计成2层显示（缩略图层，地图块层）
mapContainer.addChild(this._thumbnailBitmap);
mapContainer.addChild(this._blockContainer);

thumbnailBitmap缩略图层

这层比较简单，就是把实际的大地图按比列缩小的图片，加载到这个层，然后按实际地图大小放大显示，达到的效果是在没有加载完地图实际图片时不至于地图背景时黑色的，显示出模糊地图的感觉，因为缩略图都很小，加载很快。

blockContainer地图块容器

用来显示真实的地图，由大地图图片切成一块块的小块，然后把需要显示到屏幕中对应的块显示出来，屏幕外的可以不显示，这样既节省内存又加快了地图显示速度。
地图主要实现的功能是，可以指定地图的一个坐标点，使地图移动到地图的这个点在屏幕的中心，并且在移动变化中实时加载屏幕中的地图块和移除屏幕外的地图块。
要想实现地图根据移动动态加载地图块，就需要用到一些参数

重要的参数理解

基础参数

• renderWidth： 地图显示区域的宽，一般就是屏幕的宽
• renderHeight：地图显示区域的高，一般就是屏幕的高
• mapWidth：真实地图的宽
• mapHeight：真实地图的高
• tileWidth：地图切块的宽
• tileHeight：地图切块的高
  计算获得参数
• minX：地图最小移动坐标X 通过计算renderWidth * 0.5 得出
• minY：地图最小移动坐标Y 通过计算renderHeight * 0.5得出
• maxX：地图最大移动坐标X 通过计算mapWidth - renderWidthHalf得出
• maxY：地图最大移动坐标Y 通过计算mapHeight - renderHeightHalf得出
  解释：最小和最大移动坐标，是在移动地图时判断边界用到。因为超出这个边界移动地图，就会出现无地图的部分显示在屏幕内，产生黑背景。所以要做限制。
• _tileX：屏幕一行需要显示的块数 Math.ceil(renderWidth / tileWidth) + 1
• _tileY：屏幕需要显示块的列数 Math.ceil(_mapVo.renderHeight /_mapVo.tileHeight) + 1
  解释：加1块是因为屏幕边缘附近会有显示不到1块的情况，但是地图是按块显示，所以也要加载1块

重要的函数

有了上面的参数支持，接下来就可以实现地图的重要功能了。

• 设置中心点

    protected setCenter(x:number, y:number) {
   
        this._center.x = MathUtil.rangeLimit(x, this._mapVo.minX, this._mapVo.maxX);
        this._center.y = MathUtil.rangeLimit(y, this._mapVo.minY, this._mapVo.maxY);
        this._topLeft.x = this._center.x - this._mapVo.renderWidthHalf;
        this._topLeft.y = this._center.y - this._mapVo.renderHeightHalf;
    }

• 渲染地图块

    protected render(force:boolean = false) {
   
        var xx:number = this._topLeft.x;
        var yy:number = this._topLeft.y;