arpg网页游戏之地图

Posted Siegel的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了arpg网页游戏之地图相关的知识,希望对你有一定的参考价值。

地图分块加载类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帧的频率动画播放,所以把一些运算分摊到各个帧上,对于玩家来说,体验并不会差多少,范围提高了平稳性和流畅性。

以上是关于arpg网页游戏之地图的主要内容,如果未能解决你的问题,请参考以下文章

arpg网页游戏之地图

arpg网页游戏之地图

《大天使之剑》是奇迹MU正版授权的,是啥公司研发的?

关于Unity中ARPG游戏人物移动

UE官网ARPG游戏学习笔记1

同时开发两款H5的ARPG游戏的设计和实践