Flash游戏开发(20) - 更多关于卷屏

如果英雄一直处于地图中央，一切都OK。但是当英雄移动到临近地图边界时，麻烦出来了，我们就看到超出地图之外的背景区块。如果你想解决这个问题，可以在地图里设立墙壁的区块来阻止英雄到达边界。但这样需要对地图进行额外的设定，在周围增加不必要的空白区。更好的解决办法是：当英雄没有靠近边界时，对背景进行卷屏。就象下面这样：

多长的距离就算超长了？

在英雄移动的过程中，当他到达边界时，我们就不让背景区块进行移动了。下面左图中，英雄离左边边界有“halfvisx”的距离，如果英雄继续向左移动，地图将卷屏至超出地图范围。

在右图中英雄离底部边界有“halfvisy”的距离，当英雄到达底部时就不再卷屏。我们在设计地图时就不得不考虑英雄所处位置的问题，当他靠近边缘时，就不能把他的位置放在地图中间。实际的情况是，我们在移动区块时会考虑英雄所在坐标，所以把这个理念贯彻到buildMap函数中。
计算halfvisx/halfvisy的值后，buildMap函数中加入以下代码：

game.mapwidth=map[0].length;
game.mapheight=map.length;

game.mapwidth代表当前地图的水平区块，而game.mapheight则是垂直方向的区块。我们用此来决定英雄是否到达了边界。现在我们就来计算当英雄临近边界时，我们需要移动多少区块：

if(game.halfvisx>char.xtile){
  var fixx=char.xtile-game.halfvisx;
  var fixx1=0;
}else if(char.xtile>game.mapwidth-game.halfvisx-1){
  var fixx=char.xtile-game.mapwidth game.halfvisx 1;
  var fixx1=1;
}
if(game.halfvisy>char.ytile){
  var fixy=char.ytile-game.halfvisy;
  var fixy1=0;
}else if(char.ytile>game.mapheight-game.halfvisy-1){
  var fixy=char.ytile-game.mapheight game.halfvisy 1;
  var fixy1=1;
}

为了保证英雄居中，用fixx和fixy代表所需要移动的全部区块的数量。第1行检查英雄是否临近左边界，只有在xtile小于halfvisx的时候发生，我们所需要移动的数量就是xtile-halfvisx。在右边的情形则是，xtile大于mapwidth-halfvisx。
另外两个变量fixx1和fixy1用在英雄穿越区块时执行循环计算。如果不加这些代码，当英雄临近右边或底端时就会移动到地图之外的区块。
现在我们把fixx/fixy加入到区块坐标里：

game.clip._x = game.centerx-((char.xtile-fixx)*game.tileW)-game.tileW/2;
game.clip._y = game.centery-((char.ytile-fixy)*game.tileH)-game.tileH/2;

同样我们需要修正循环运算的变量，以便使得区块可见。
为了确保能够计算右边的区块，修正xstep和ystep的变量如下：

char.xstep=char.x-(fixx fixx1)*game.tileW;
char.ystep=char.y-(fixy fixy1)*game.tileH;

以上是修改地图的代码，下面我们就来让英雄动起来。

移动到边界

在moveChar函数里，我们先是采用buildMap函数同样的方式来计算fixx和fixx1。然后当英雄离边界有足够的距离时，我们就把卷屏部分的代码加入。垂直方向同样如此。
有时候改变区块的函数—changeTile并不一定存在，我们可以直接解决这个问题。当要替代的区块不存在就返回空值，不执行任何操作：

if(game[nameold].walkable==undefined){
  return;
}

上面就是卷屏的全部介绍，下面的章节就要介绍MC的深度，以及叫”z-sorting”（z轴纵深）的概念。