arpg网页游戏之地图（三）

2024-03-14 10:44:46

地图分块加载类MapEngine，主要包含以下属性：

1. g 地图层graphics，地图将画在上面
2. buffPixelRange 地图加载范围矩形
3. viewPort 屏幕视窗
4. currZoneArr 已经加载过的地图块
5. waitLoadZone 待加载地图块
6. showZone 加载完成即将显示的地图块
7. preLoaderNmu 预加载块数

单独说下地图层graphics，Graphics实际上为一个shape对象，我把所有的加载的地图块，draw到graphics上，也有很多创建多个bitmap对象或者shape对象堆叠到地图层，或者创建和屏幕视窗一样的大的bitmap每次都draw到这个上面，我一开始接触网页的游戏的时候，就是这种方法。尝试过后，发后面的方式，在推图的时候，斗的较厉害，直接画在graphics上，可能给玩具啊最好的体验，这也是破解了多款网页游戏代码之后，参考大部分网页游戏推图算法，最后加以总结归纳，形成了我现在现在所用的。另外说下预加载块数，preLoaderNmu 我设置为1，就是相对屏幕视窗，实际计算出来的地图块，我上下左右都多加载一块，以此来提供玩家体验。具体的加载算法如下：

public function calcLoadZone() : void

        {

            var rect:Rectangle = viewPort.viewRect;

            var tileSize:int = SceneConfig.TILE_SIZE;

            var scale:Number = 1 / tileSize;

            var leftX:int = int(rect.x * scale) - preLoaderNmu;

            var leftY:int = int(rect.y * scale) - preLoaderNmu;

            var rightX:int = int(rect.x + rect.width) * scale + preLoaderNmu;

            var rightY:int = int(rect.y + rect.height) * scale + preLoaderNmu;

            leftX = max(0, leftX);

            leftY = max(0, leftY);

            rightX = min(rightX, maxMapCountX);

            rightY = min(rightY, maxMapCountY);

            buffPixelRange.x = leftX * tileSize;

            buffPixelRange.y = leftY * tileSize;

            buffPixelRange.width = (rightX - leftX + 1) * tileSize;

            buffPixelRange.height = (rightY - leftY + 1) * tileSize;

            var centerX:int = (leftX + rightX) * 0.5;

            var centerY:int = (leftY + rightY) * 0.5;

            var temp:int = 0;

            var key:int = 0;

            var zone:Zone = null;

            while (leftY <= rightY)

            {

                temp = leftX;

                while (temp <= rightX)

                {

                    key = temp + leftY * titleX;

                    zone = currZoneArr[key];　　// 判断是否加载过此地图块

                    if (zone == null)

                    {

                        zone = new Zone();

                        zone.xpos = temp;

                        zone.ypos = leftY;

                        currZoneArr[key] = zone;

                        zone.dis = pow(temp - centerX, 2) + pow(leftY - centerY, 2); //计算离加载范围中心的距离

                        waitLoadZone[waitLoadZone.length] = zone; // 添加到加载队列

                    }

                    temp++;

                }

                leftY++;

            }

            waitLoadZone.sort(sortByDis); // 对要即在的地图块进行排序

        }

上面的代码，重要的部分已经注释。那个sort函数，单独说下，有很多加载地图的效果，会有一个动画效果，就是地图块的显示，是从中心开始显示，然后逐步扩展到四周。所以离加载范围中心进的地图块优先加载，这样就会保证离中心近的，先加载，也就会优先显示出来。

玩家进入地图之前，会优先下载小地图，所以在所有地图块加载之前，把小地图放大后，直接画在graphics上，这样就实现马赛克效果。为了提高玩家的体验，在每帧的循环里，只加载一张地图块，并且只显示有给地图块。一般网页的帧率是没秒30帧，理论上一针显示一张地图块。代码如下

public function render(param1:int, param2:Number) : void

        {

            var zone2:Zone;

            var zone:Zone;

            var loadInfo:ILoadInfo;

            var size:int;

            var stepFrame:int = param1;

            var stepTime:Number = param2;

            if (waitLoadZone.length > 0) // 只加载一张地图块

            {

                zone = waitLoadZone.shift();

                loadInfo = api.loadCenter.getNewLoadInfo();

                loadInfo.url = getPath(getMapId(), zone.xpos + "_" + zone.ypos);

                loadInfo.completeHanlder = function (param1:Bitmap) : void

                {

                    var key:int = zone.xpos + zone.ypos * titleX;

                    if (loadingDic[key] != undefined)

                    {

                        loadingDic[key] = null;

                        delete loadingDic[key];

                    }

                    if (!zone.isComplete)

                    {

                        zone.bpd = param1.bitmapData;

                        showZone.push(zone);

                    }

                    loadedDic.push(loadInfo.url);

                    return;

                }

                api.loadCenter.addLoadInfo(loadInfo);

            }

            while (showZone.length) // 只显示一张已经加载过的地图块

            {

                zone2 = showZone.shift();

                size = SceneConfig.TILE_SIZE;

                g.beginBitmapFill(zone2.bpd);

                g.drawRect(zone2.xpos * size, zone2.ypos * size, size, size);

                break;

            }

            return;

        }

可能会有人疑惑，为什么每帧加载一块，而且只显示一块地图块？为什么不根据，一下在都加载完，或者加载完，为什么不直接画在地图层。我们都知道AS3.0 渲染机制，即跑道模型。如果AS每帧处理的事情太多，就会出现卡帧的情况。这样做的目的，就是尽量把一些运算平均分摊到这个帧上，尽量以平稳流畅为主，算是一种优化策略。可能有的人机器配置高，或者网速快，他的体验就会更好，的确是这样。但是人眼能识别出的最低频率24帧，一些电影就是以24帧的频率动画播放，所以把一些运算分摊到各个帧上，对于玩家来说，体验并不会差多少，范围提高了平稳性和流畅性。

码农公寓

相关文章