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

  转载请表明出处

  

  

时间: 2024-10-24 20:35:07

arpg网页游戏之地图(三)的相关文章

arpg网页游戏之地图(一)

开发arpg网页游戏一项比较重要的难点是游戏推图.游戏中主城的地图比较大,我遇到到最大的是8000*6000的地图,比较小的就是副本地图,有可能还占不了一屏.像这种比较大的地图,一般都是分块加载的,游戏中不可能一次将整个地图添加到舞台上,得根据角色的移动视窗来加载地图.这个时候会碰到三种情况:人动,地图动:人不动,地图动:人动,地图不动.我试过前两周情况,人动,地图动,这种情况画面看着比较流畅,人不动,地图动,不太流畅.所以选择了前者. 什么是人动,什么是地图动?开发网页游戏都是分层的,一般分为

arpg网页游戏之地图(二)

这一节说说视窗,这个视窗,也就是游戏的视角.现在的网页游戏分为2D游戏,2.5D游戏和3D游戏,2D游戏基本是一些横板的,2.5D基本都是arpg的,可以说游戏画面投影的角度略有不同,3D网页游戏,现在也有不少,效果做的不错的,都是带微端的,不带微端同屏人数过多就会出现卡顿的情况.个人感觉网页还不太适合做3D的,一是效率问题,二是表现效果不如端游炫.端游开发周期较长,世界观比较宏大,玩家呢,要适应游戏世界,并在里面找到自己的定位,这样玩家的忠诚度比较高:而网页游戏的目的不恰恰相反,它主要是迎合玩

arpg网页游戏之地图(四)

这一节主要是针对上一节的补充,关于地图的优化策略上一节中已经涉及了一些,这一节具体说下. 地图块加载队列:就拿1280*800的屏幕分辨率来讲,大约需要加载的地图块为30~35块之间,如果这个时候一下子加载这么多地图块,占用的网络带宽会比较多,因为IE加载资源也是有限制的,如果多余限制就会加入排队机制.所以这个时候,就需要一个地图加载队列,来限制同时加载地图块的数量,比如可以同时加载两个,当两个当中哪个Loader加载完,此对象回收,然后重新下一个. 渲染策略优化,实际就是分帧运算的远离.即没帧

arpg网页游戏特效播放(一)

网页游戏中的特效,主要包括:场景特效,攻击特效和UI特效三种.场景特效是在地图层上播放的特效,攻击特效主要是技能触发的一些特效,UI特效是面板上的一些特效,还有一些在人物身上播放的特效,例如脚底光圈特效等.特效的播放方式有两种,一种是直接播放swf,二种是根据图片序列,直接绘画到Bitmap上,对于两种方式,我比较倾向于直接绘画到Bitmap上.一般我们我们处理程序的逻辑是,显示和逻辑分开.对于特效显示逻辑,就是特效的绘画逻辑,以及资源的整理方式,逻辑就是特效的播放位置和播放时机不一样而已.所以

AS3.0网页游戏优化一

有道无术,术尚可求,有术无道,止于术.神即道,道法自然,如来! 借用上面的一句话,来开启AS3.0网页优化的一些策略,在从事大约两年多的网页游戏行业,对于AS3.0性能优化,有一些自己的见解和想法,及此分享给大家,仅供抛砖引玉,鄙人拙见,愿给从事网页游戏的人以启迪. 我认为AS3.0的性能分两部分,第一部分是技术性优化,就是在理解flash 弹性跑道模型渲染原理和AVM本身一些垃圾回收原则等,对自己的程序进行一系列的性能优化.第二部分是游戏逻辑性优化.我只从事过2.5D arpg网页游戏的制作,

网页游戏

网页游戏_百度百科http://baike.baidu.com/link?url=__mxqeSPiqAO_TGydqkd7M8BGmboUrei_rqfDzv59uOS9GxVe1UdbsClJgg2l5qCuFy4qzFWgaQo9GeZeaBpeiTo2npMjlMvFD6Wb-QNY8D1iT_phwtSVuq1RFOUAocv 页游 即 网页游戏 . 网页游戏又称Web游戏,无端网游,简称页游.是基于Web浏览器的网络在线多人互动游戏,无需下载客户端,只需打开IE网页,10秒钟即可进入

网页游戏服务端-人物移动广播优化

[本文转自网络http://janeky.iteye.com/blog/1614175] 这段时间在处理服务端人物移动广播遇到了问题,记录一下. 1.问题 现在的页游都朝着客户端的方向靠齐了,大地图,千人同屏.因此,也给页游的服务端开发带来了不少的挑战.假设一个场景地图是8000*8000大小,同时有1000人在.1秒钟内,每个玩家移动一次.按照最原始的做法,就是给同一个场景的用户广播消息.简单计算一下广播量:1000*1000=1000000的广播量,有点恐怖. 2.方案 优化的目标肯定是减少

网页游戏运营模式研究

网页游戏的定义   网页游戏的英文名称为又称无客户端网络游戏,它是基于浏览器的网络在线多人互动的游戏,也是网络游戏的一种.这种游戏的特点是玩家无需下载游戏客户端及安装,只需短短的几秒钟就可打开网页用浏览器加载就能玩的网络游戏.尤其适合上班及没有时间休闲娱乐的人群,只要花一点点时间并且消费成本比较低,而且游戏内具有自动成长功能,玩家即使关掉电脑也可心满意足的去工作,如果想随时了解游戏内的具体情况,还有一些游戏具有短信提醒功能. 中国网页游戏从发展初期,再到如今的爆发式发展,中国网页游戏规模不断的扩

Qt之WebKit学习之QWebView显示网页与google地图

目录 一:Qt通过地址显示网页 二:Qt调用setHtml方法加载html格式的网页,以加载google地图插件为例. 一.Qt显示网页只要三步 1) 新建QWebView对象:QWebView *view = new QWebView(this); 2) 调用setUrl或load函数设置要显示的网页地址,如load("http://www.baidu.com"); 必须以http://开头: 3)调用show函数显示. 完整代码: webview.h中: #ifndef WEBVI