2015年2月6日
欢迎!
在连续几周讨论了平台跳跃游戏的机制之后，我们也应该休息一下了。因此，本周的教程将基于论坛上经常谈论的特性：网格运动，或者可以说得更加明确一点：如何像Pacman（译者注：在红白机上叫做吃豆子，或者小精灵）那样在网格中移动。
我们本周讨论的代码可以让玩家优雅地在瓦片地图中移动，在很小的空间中转弯。我们还将构建Pacman游戏的核心代码。
获取源代码
在这里我只会着重高亮最重要的部分代码。所以请先浏览一下代码。如果你对一些代码有疑问，你可以去论坛询问。
运行/编辑汽车游戏代码可以到 jsbin 或者 codepen （译者：国内用户可访问runjs）
运行/编辑Pacman代码可以到jsbin or codepen （译者：国内用户可访问runjs）
克隆Phaser编程技巧代码可以到git repo。
基础设施的构建
我们需要一个玩家精灵和一张瓦片地图。瓦片地图包含来了关卡的布局。在这里，我们在Tiled（译者注：Tiled官网 http://www.mapeditor.org/）中画了一个简单的关卡：
这个软件导出了一个JSON文件，然后和tileset一起导入游戏中。在 create 方法中我们生成了所有的对象：
this.map = this.add.tilemap(‘map‘); this.map.addTilesetImage(‘tiles‘, ‘tiles‘); this.layer = this.map.createLayer(‘Tile Layer 1‘); this.map.setCollision(20, true, this.layer); this.car = this.add.sprite(48, 48, ‘car‘); this.car.anchor.set(0.5); this.physics.arcade.enable(this.car); this.cursors = this.input.keyboard.createCursorKeys(); this.move(Phaser.DOWN);
我们创建了地图和图层。碰撞被设置到20号瓦片上（暗灰色的砖块）。汽车摆放在地图的左上角，并且一开始就向下移动。.
在 update 函数中，我们检测与瓦片地图的碰撞：
this.physics.arcade.collide(this.car, this.layer);
当前的问题
玩家的地图中的移动是一件需要解决的游戏的挑战。 尽管表面上这个看起来很简单，但是实际上这需要玩家对象对周边的情况有一个基本的了解。
玩家通过上下左右方向键来控制，当按键按下的时候，玩家开始向着对应的方向不停的移动，直到撞到墙壁或者按下其他方向键转到其他方向。
在上面这个截图中，汽车即将接近一个交叉路口。如果用户不按任何键，它将继续向下移动。然而，如果正好在到达墙的右边的空隙时按下右键，汽车就会向右开。
你被包围了
所以，汽车如何知道他是否可以转弯，什么时候它应该转弯呢？为了弄清楚这个，我们在汽车四周创建了4块临时瓦片。
在 update 函数中，我们将使用Phaser Tilemap类中内建的特性，此特性可用于扫描特殊的瓦片：
this.marker.x = this.math.snapToFloor(Math.floor(this.car.x), 32) / 32; this.marker.y = this.math.snapToFloor(Math.floor(this.car.y), 32) / 32; var i = this.layer.index; var x = this.marker.x; var y = this.marker.y; this.directions[Phaser.LEFT] = this.map.getTileLeft(i, x, y); this.directions[Phaser.RIGHT] = this.map.getTileRight(i, x, y); this.directions[Phaser.UP] = this.map.getTileAbove(i, x, y); this.directions[Phaser.DOWN] = this.map.getTileBelow(i, x, y);
Tilemap.getTileLeft 及其同类函数正是用于实现我们上面所说的功能：返回给定坐标左边的瓦片（如果没有找到，则范围null）。
因为这些函数是基于瓦片坐标而不是像素的，所以我们首先要找出我们的汽车的地图中的确切位置。我们对汽车的x和y值调用 Math.floor 函数，然后使用 Phaser.Math.snapToFloor 转换为网格坐标。这几步就会得到汽车所在的确切瓦片。我们把结果存放在 marker 变量中。
周围四块瓦片存放在 directions 数组中。启用渲染调试开关，我们能够看到汽车知道他四周的相关信息：
绿色的瓦片表示汽车可以安全的移动过去。红色的表示是障碍物，白色的表示当前的移动方向。
放置一个转弯标识
确认汽车是否可以转弯是第一个要解决的事情。第二个要解决的是要告诉它什么时候转弯，因为我们想要它在快达到地图合适的位置的时候转弯，否则，它就会撞到墙上停止向前。
可以利用 checkDirection 函数来实现这个。
这个函数需要传入一个参数：汽车将要转弯的方向。这是一个Phaser方向常量，例如Phaser.LEFT 或 Phaser.DOWN。
这个函数做的第一件事就判断是否满足以下任意一个条件：
- 汽车的运动方向就是要转向的那个方向
- 那个方向上没有瓦片
- 那个方向上的瓦片不是一个“安全瓦片”（例如是一堵墙）
如果不满足上面任意一个条件，接下来就会设置一个转向标志。这个标志保存在 turnPoint 中，这是个 Phaser.Point 对象，保存了我们要汽车改变方向时所在的点的坐标。
if (this.current === this.opposites[turnTo])
{
this.move(turnTo);
}
else
{
this.turning = turnTo;
this.turnPoint.x = (this.marker.x * this.gridsize) + (this.gridsize / 2);
this.turnPoint.y = (this.marker.y * this.gridsize) + (this.gridsize / 2);
}
理想的转弯点就是汽车当前正驶入的那个方块的中心。在图中可以看到一个黄点：
Warm and Fuzzy Inside
当 car.x 和 car.y 与转弯点的值匹配时，汽车将转向新的方向。如果汽车以每帧一个像素的速度移动的话，那没问题。但是如果我们想要应用加速效果，或者其他改变汽车速度的方法，就会出问题。因为汽车的x/y坐标将只会是与转弯点接近而不是正好相等。
为了解决这个问题，我们使用了 Phaser.Math.fuzzyEqual 这个函数。它接受两个值和一个阈值。它将比较两个值，如果他们在差在阈值范围内，他们被认为是相等：
this.math.fuzzyEqual(a, b, threshold)
这正满足我们的需求。对于速度为150，我们的阈值可以设置为3。这个值足够可以保证汽车不会跳过转弯点。在 update 函数中，我们将检查汽车是否已经到达了转弯点。
当汽车到达时，我们将重新设置它的坐标，同时重新设置汽车的刚体的坐标，然后转向新的方向：
this.car.x = this.turnPoint.x; this.car.y = this.turnPoint.y; this.car.body.reset(this.turnPoint.x, this.turnPoint.y); this.move(this.turning); this.turning = Phaser.NONE;
通过增加上面的这最后一部分代码，你现在可以自由的在地图上行驶，在拐角转弯，随意的的撞墙。
进入Pacman
让我们来用上面的工作机制去克隆一个Pacman。一开始的构建是一样的：一个玩家精灵和一幅瓦片地图。不同的在于我们的Pacman精灵是动态的：
动画由 Phaser Animation Manager 来处理:
this.pacman.animations.add(‘munch‘, [0, 1, 2, 1], 20, true); this.pacman.play(‘munch‘);
然而，在 move 函数中，我们需要将它的脸转向新的方向：
this.pacman.scale.x = 1;
this.pacman.angle = 0;
if (direction === Phaser.LEFT)
{
this.pacman.scale.x = -1;
}
else if (direction === Phaser.UP)
{
this.pacman.angle = 270;
}
else if (direction === Phaser.DOWN)
{
this.pacman.angle = 90;
}
我们重设了它的水平缩放和角度，然后基于它的方向进行调整。它的脸默认是朝右的，所以我们可以通过调整 scale.x 来让它朝左。要让它朝上或者朝下，就要进行旋转。
另外一个重要的部分就是：Pacman实际上比网格要大，所以我们需要调整它的刚体以网格大小：
this.pacman.body.setSize(16, 16, 0, 0);
这一句是在精灵（32x32大小）的中心位置设置了一个16x16大小的刚体，这就完美的适应了16x16大小的网格。
豆子
Pacman 需要一些豆子来吃。豆子已经使用了7号瓦片画到了瓦片地图上。所以我们将使用Phaser特性来将所有的7号瓦片转变为精灵。
this.dots = this.add.physicsGroup(); this.map.createFromTiles(7, this.safetile, ‘dot‘, this.layer, this.dots); this.dots.setAll(‘x‘, 6, false, false, 1); this.dots.setAll(‘y‘, 6, false, false, 1);
这里首先获取豆子瓦片，用空白瓦片（安全瓦片）来代替，然后为每一个空白瓦片在 dots 组中添加一个精灵。 setAll 函数用来调整豆子精灵的位置，添加6个像素的偏移，因为他们只有4x4大小，这可以让他们处于瓦片的中心。
Pacman与豆子之间的碰撞检测在 update 函数中：
this.physics.arcade.overlap(this.pacman, this.dots, this.eatDot, null, this);
如果他们重叠了，就调用：
eatDot: function (pacman, dot) {
dot.kill();
if (this.dots.total === 0)
{
this.dots.callAll(‘revive‘);
}
},
豆子被销毁了。如果豆子组中的豆子数量变为零，我们要让豆子重生。所以你可以重新把豆子吃光！
希望你可以看到，我们只用很少的代码，我们现在实现了一个最基本的吃豆子游戏。
Star Bug
基于上面这些代码，我们利用这些概念将游戏进一步演变。增加更多的关卡、会飞的敌人和大量的收藏品。最终的结果就是Star Bug游戏：
这个游戏将会出现在我们即将面世的 Phaser Book of Games 这本书中。