关于提高webgame地图加载速度技术解决方案.docx

1、关于提高webgame地图加载速度技术解决方案关于提高加载速度技术解决方案1、 将包含多个子文件的Flash分解成A、B、C等多个小文件加载A、 导航拆成一级导航和二级地图导航B、 场景边框和聊天菜单分开加载C、 场景内一些元素作为情景物品分层加载，如树木、云朵、小动画2、 将大场景进行分割，分段加载。如旺铺街，如果以后店铺数目过多时应分成几段加载，此方法的缺点是人物行走感官上出现不连贯3、 永久缓存浏览器具有缓存功能，可以把Web应用的一部分保存在内存当中。这样，同一Web应用的不同的浏览器页面就可以共享内存中的内容，而不必从服务器端多次下载这些相同的内容。但随着浏览器窗口的关闭而被清除。因

2、此，我们也可以称浏览器缓存为临时缓存。当你下次访问相同Web应用的时候，你仍然需要下载曾经的缓存内容。Flex3提供了永久缓存的功能：通过在编译Flex程序的时候把Flex Framework和程序的公共部分指定为RSL（Runtime Shared Library），就能够达到永久缓存的效果。此方法需要研究FlashPlayer的内部机制。4、 服务器硬件扩展提高本身服务器的硬件资源和带宽资源，以解决高用户的请求5、 改善加载进度条的友好程度，改善加载上的时间体验6、 开启硬件加速，最新的FlashPlayer已经支持硬件加速功能，但是支持GPU计算开启硬件加速的机器仍不是主流，可在帮助中提

3、示用户可以开启硬件加速7、 过滤不需要的功能 8、 研发浏览器插件，使用C+等语言进行专属插件，工作量较大9、 flash地图图片分块加载将地图场景进行程序上的分块，片要在可见区域里需要显示它的时候，才加载，实现分批加载。本方法需要对程序进行大幅改动，需在二期时执行附：解决方法例子图首先我们确定几个关键点：窗口大小：windowW:Number,windowH:Number; 指的是可视区域的大小 我们可以把他想成客户端的分别率单位地图大小： uintPicW：Number，uintPicH：Number; 指的是你切割的地图图片的单元大小。当前地图坐标：position：point;这里大家

4、就可以想成是你人物的当前所处坐标我们可以很容易的求出窗口的4个点，所占的地图的索引：x0 = position.x - windowW/2;x1 = position.x + windowW/2;y0 = position.y - windowH/2;y1 = position.y + windowH/2;mapIndexX0 = uint(x0/256);mapIndexX1 = uint(x1/256);mapIndexY0 = uint(y0/256);mapIndexY1 = uint(y1/256);源码:1. 2. package com.heptaFmon.game.map.la

5、yers3. 4. import com.heptaFmon.config.Config;5. import com.heptaFmon.core.BaseDisplayObject;6. import com.heptaFmon.game.map.impl.GameMap;7. import com.heptaFmon.hack.HeptaFishGC;8. import com.heptaFmon.loader.impl.ImageLoader;9. import com.heptaFmon.map.impl.HashMap;10. 11. import flash.display.Bit

6、map;12. import flash.events.Event;13. import flash.events.IOErrorEvent;14. import flash.events.ProgressEvent;15. import flash.geom.Point;16. /地图层 图片17. public class MapLayer extends BaseDisplayObject18. 19. /图片读取器20. private var _imageLoader:ImageLoader;21. /地图图片 用于整块加载模式22. private var _image:Bitma

7、p;23. /地图图片数组 用于栅格式加载地图模式24. private var _imageMap:HashMap;25. /小地图图片26. private var _simage:Bitmap;27. /28. private var _map:GameMap;29. private var _loadType:int;/加载类型 0：整块加载 1：栅格加载30. private var _visualWidth:Number;/地图可视宽度31. private var _visualHeight:Number;/地图可视高度32. private var _sliceWidth:Nu

8、mber;/地图切割单元宽度33. private var _sliceHeight:Number;/地图切割单元高度34. private var _preloadX:Number;/横向预加载屏数35. private var _preloadY:Number;/纵向预加载屏数36. private var _loadingMap:HashMap;/正在加载的屏map37. private var _waitLoadingArr:Array;/等待加载的loadermap38. 39. private var _loadingNo:int = Config.getInt(concurren

9、cyImageLoader);40. 41. private var _screenImageRow:int;/一屏需要加载的横向图片数42. private var _screenImageCol:int;/一屏需要加载的纵向图片数43. private var _row:int;/总横向节点数44. private var _col:int;/总纵向节点数45. 46. private var _nowPlayerPointoint;/当前人物所处的屏47. 48. public function MapLayer(map:GameMap)49. 50. _map = map; 51. _

10、loadType = parseInt(_map.mapXML.loadType);52. 53. /读取地图图片54. public function load():void55. /加载小地图56. var imageLoader:ImageLoader = new ImageLoader();57. var fileName:String =Config.getValue(mapLib) + _map.name + /map_s.jpg;58. imageLoader.load(fileName);59. imageLoader.addEventListener(Event.COMPLE

11、TE,loadSmallSuccess);60. imageLoader.addEventListener(ProgressEvent.PROGRESS,loadingHandler);61. imageLoader.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);62. 63. 64. /读取大地图成功65. private function loadBigSuccess(evet:Event):void66. var imageLoader:ImageLoader = ImageLoader(evet.target);67. v

12、ar image:Bitmap = new Bitmap(imageLoader._data);68. addChild(image);69. if(_simage != null & _simage.parent = this)70. removeChild(_simage);71. _simage = null;72. 73. this.width = image.width;74. this.height = image.height;75. imageLoader.removeEventListener(Event.COMPLETE,loadBigSuccess);76. imageL

13、oader.removeEventListener(ProgressEvent.PROGRESS,loadingHandler);77. imageLoader.removeEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);78. imageLoader = null;79. dispatchEvent(evet);80. HeptaFishGC.gc();81. 82. /读取小地图成功83. private function loadSmallSuccess(evet:Event):void84. var imageLoader:Ima

14、geLoader = ImageLoader(evet.target);85. var image:Bitmap = new Bitmap(imageLoader._data);86. image.width = _map.mapWidth;87. image.height = _map.mapHeight;88. addChild(image);89. this.width = image.width;90. this.height = image.height;91. imageLoader.removeEventListener(Event.COMPLETE,loadSmallSucce

15、ss);92. imageLoader.removeEventListener(ProgressEvent.PROGRESS,loadingHandler);93. imageLoader.removeEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);94. imageLoader = null;95. dispatchEvent(evet);96. HeptaFishGC.gc(); 97. switch(_loadType)98. case 0:/整块加载 99. /加载大地图100. var bfileName:String =Con

16、fig.getValue(mapLib) + _map.name + /map.jpg;101. var bLoader:ImageLoader = new ImageLoader(); 102. bLoader.load(bfileName);103. bLoader.addEventListener(Event.COMPLETE,loadBigSuccess);104. bLoader.addEventListener(ProgressEvent.PROGRESS,loadingHandler);105. bLoader.addEventListener(IOErrorEvent.IO_E

17、RROR,ioErrorHandler);106. break;107. case 1:108. _loadingMap = new HashMap();109. _imageMap = new HashMap();110. _waitLoadingArr = new Array();111. _visualWidth = _map.app.screen.size.x;112. _visualHeight = _map.app.screen.size.y;113. _sliceWidth = parseFloat(_map.mapXML.sliceWidth);114. _sliceHeigh

18、t = parseFloat(_map.mapXML.sliceHeight);115. _preloadX = parseFloat(_map.mapXML.preloadX);116. _preloadY = parseFloat(_map.mapXML.preloadY);117. _screenImageRow = Math.round(_visualWidth/_sliceWidth);118. _screenImageCol = Math.round(_visualHeight/_sliceHeight);119. _row = Math.ceil(_map.mapWidth/_s

19、liceWidth);120. _col = Math.ceil(_map.mapHeight/_sliceHeight);121. loadSliceImage(_map.initPlayerPoint);122. break;123. default:124. break;125. 126. 127. 128. 129. /根据player坐标读取周边指定屏数地图130. private function loadSliceImage(playerPointoint):void131. var nowX:int = Math.floor(playerPoint.x/_sliceWidth)

20、;/现在所处的索引X132. var nowY:int = Math.floor(playerPoint.y/_sliceHeight);/现在所处的索引Y133. var nowScreenX:int = Math.floor(nowX/_screenImageRow);/现在所处的屏索引X134. var nowScreenY:int = Math.floor(nowY/_screenImageCol);/现在所处的屏索引Y135. / trace(nowScreenX: + nowScreenX);136. / trace(nowScreenY: + nowScreenY);137. _

21、nowPlayerPoint = new Point(nowScreenX,nowScreenY);138. loadScreenImage(nowScreenX,nowScreenY);139. / removeScreenImage(nowScreenX,nowScreenY);140. var startX:int = (nowScreenX - _preloadX 0 ? 0 : nowScreenX - _preloadX);141. var startY:int = (nowScreenY - _preloadY _row ? _row : nowScreenX + _preloa

22、dX);144. var endY:int = (nowScreenY + _preloadY _col ? _col : nowScreenY + _preloadY);145. 146. for(var xx:int = startX; xx endX;xx+)147. for(var yy:int = startY; yy endY;yy+)148. if(xx = nowScreenX & yy = nowScreenY)149. continue;150. else151. loadScreenImage(xx,yy);152. 153. 154. 155. 156. /加载指定屏的

23、地图图片157. private function loadScreenImage(screenX:int,screenY:int):void158. var starX:int = _screenImageRow*screenX 0 ? 0 : _screenImageRow*screenX;159. var starY:int = _screenImageCol*screenY _row - 1 ? _row -1 : _screenImageRow*(screenX+1);161. var endY:int = _screenImageCol*(screenY+1) _col-1? _c

24、ol-1 : _screenImageCol*(screenY+1);162. for(var yy:int=starY;yyendY+1;yy+)163. for(var xx:int = starX;xx 0)176. for(var i:int = 0;i_loadingNo - _loadingMap.size();i+)177. var key:String = _waitLoadingArr.pop();178. var imageLoader:ImageLoader = new ImageLoader();179. var fileName:String = Config.get

25、Value(mapLib) + _map.name +/ + key+ .jpg;180. / trace(fileName: + fileName);181. _loadingMap.put(imageLoader,key);182. imageLoader.addEventListener(Event.COMPLETE,loadScreenImageSuccess);183. imageLoader.addEventListener(ProgressEvent.PROGRESS,loadingHandler);184. imageLoader.addEventListener(IOErro

26、rEvent.IO_ERROR,ioErrorHandler);185. imageLoader.load(fileName);186. 187. 188. 189. 190. /成功加载某屏的图片191. private function loadScreenImageSuccess(evet:Event):void192. var imageLoader:ImageLoader = ImageLoader(evet.target);193. var tempStr:String = String(_loadingMap.getValue(imageLoader);194. var temp

27、StrArr:Array = tempStr.split(_);195. var yy:int = tempStrArr0;196. var xx:int = tempStrArr1;197. _loadingMap.remove(imageLoader);198. var image:Bitmap = new Bitmap(imageLoader._data);199. image.x = _sliceWidth*xx;200. image.y = _sliceHeight*yy;201. this.addChild(image);202. _imageMap.put(yy+_+xx,image);203. imageLoader.removeEventListener(Event.COMPLETE,loadScreenImageSuccess);204. imageLoader.removeEventListener(ProgressEvent.PROGRESS,loadingH