By Richard Davey on 20th February 2018 @photonstorm

英文原文地址 中文译文官网原发地址(黄复雄译)

该给我们的小游戏定个目标了。让我们撒几颗星星到场景中，让玩家来收集。要做到这一点，我们会生成一个新的组，叫'stars'，再充实它。在生成函数中，我们加入如下代码（这些可以在part8.html中看到）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
});

stars.children.iterate(function (child) {

    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));

});

这个过程跟我们生成平台组近似。因为需要星星移动、反弹，我们生成动态物理组，而不是静态的。

组可以接收配置对象，以便于设置。在本例中，组配置对象有3个部分：首先，它设置纹理key（键值）为星星图像。这意味着配置对象生成的所有子项，都将被默认地赋予星星纹理。然后，它设置重复值为11。因为它自动生成一个子项，重复11次就意味着我们总共将得到12颗，这正好是我们的游戏所需要的。

最后的部分是setXY——这用来设置组的12个子项的位置。每个子项都将如此放置：初始是x: 12，y: 0，然后x步进70。这意味着第一个子项将位于12 x 0；第二个离开70像素，位于82 x 0；第三个在152 x 0，依次类推。'step'（步进）值用于组生成子项时加以排布，真是很方便的手段。选用值70是因为，这意味着所有12个子项将完美地横跨着布满画面。

下一段代码遍历组中所有子项，给它们的bounce.y赋予0.4到0.8之间的随机值，反弹范围在0（不反弹）到1之间（完全反弹）。因为星星都是在y等于0的位置产出的，重力将把它们往下拉，直到与平台或地面碰撞为止。反弹值意味着它们将随机地反弹上来，直到最终恢复安定为止。

如果现在我们这样就运行代码，星星会落下并穿过游戏底边，消失不见了。要防止这个问题，我们就要检测它们与平台的碰撞。我们可以再使用一个碰撞器对象来做这件事：

this.physics.add.collider(stars, platforms);

与此类似，我们也将检测玩家是否与星星重叠：

this.physics.add.overlap(player, stars, collectStar, null, this);

这会告诉Phaser，要检查玩家与组中任何一颗星星的重叠。如果检测到，他们就会被传递到'collectStar'函数：

1
2
3
4
function collectStar (player, star)
{
    star.disableBody(true, true);
}

简单来说，星星带着个已关闭的物体，其父级游戏对象被设置为不活动、不可见，即将它从显示中移除。现在运行一下游戏，我们得到一个玩家，它左冲右突的，跳起，从平台反弹，收集头顶上落下的星星。不错，毕竟就这么几行、多半看起来还很好理解的代码:)

image

评论