cocos2d-android - 1.地图动态加载原理（世界地图的实现）

1.前言

       最近需要使用cocos2d实现一个小程序，但是由于地图太大，导致在load地图的时候栈被撑爆了，所以只能研究一下怎样能够实现地图的动态加载，从而减小内存压力。 

       在查了很多的资料后发现，其实实现的思路已经很清晰了，所以重新实现了一遍。

2.原理

1.总思路

       原理上，屏幕只占了地图的一小部分，屏幕所占的位置被刷新，而地图的大部分地方不被刷新，当屏幕移动时，前方的区域新增，后方的区域移除。这种是最理想的一种方式。 

2.动态刷新地图思路

       在实际情况中，我们需要将地图栅格化了才能方便的实现地图的动态加载，栅格化就是如下的意思。 


 

将地图分割成多个小格，这样在通过动态加载小格实现动态加载。 


 

                            图3 

蓝色的框体为显示的屏幕。在移动过程中，只要刷新被蓝色框覆盖的小格就可以实现地图的部分加载。

3.实现过程

1.无缝加载地图

在我们拿到n块地图后，如何让地图无缝的拼接在一起是第一个问题。


 

通过上图我们可以得出，当我们的地图行列编码为图上所示时，各瓦片地图的坐标为其行列的的值乘以像素的数量。

2.屏幕边缘检测

1.获得屏幕对角点

通过图3可知，我们必须了解到屏幕的4条边各处在什么位置，这样才能了解到屏幕显示的瓦片地图的区域，通过简化，我们需要知道屏幕对角的两个点所处的位置。即图上这两点的位置。 



2.计算屏幕对角点所处行列 

假设屏幕对角坐标如下所示： 


 

同过这样的计算能够得到他们所处的行列

<code class="hljs perl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">raw = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">y/150;//y</span>坐标除以瓦片的竖向高度取摩
col = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">x</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>;<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//x</span>坐标除以瓦片的横向高度取摩

aRaw = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>;
aCol = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>;

bRaw = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">280</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>;
bCol = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">850</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

A点处在瓦片（0,0）上，B点处在（2，1）上。 

由此可再知道如下的结论：黑色边框所处的内部，是我们需要显示的部分，红色部分是我们不需要的。 

需要的内容加载到地图上，不需要的内容若还在地图上则去掉，若不在地图上则无需理会。 

3.地图加载时机

cocos2d-android支持线程刷新部件，所以启动一个线程并且不断的检测屏幕位置，刷新新的瓦片，移除旧的瓦片即可。