Phaser游戏初级教程（三）

作者：TG 日期： 2016-05-30 字数： 7697 阅读： 4071

一个游戏，当然不能只有静态的物体，我们需要让NPC玩家动起来。

Phaser内建了键盘管理器（Phaser.Key），我们可以使用这个便利的函数：

cursors = game.input.keyboard.createCursorKeys();

这将给cursors对象填入四个属性：up，down，left，right，这些属性都是Phaser.Key对象的实例。接下来我们需要的就是在update循环里轮询这些：

    //  重设player运行速率
    player.body.velocity.x = 0;
    if (cursors.left.isDown)
    {
        //  向左移
        player.body.velocity.x = -150;
 
        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  向右移
        player.body.velocity.x = 150;
 
        player.animations.play('right');
    }
    else
    {
        //  不动
        player.animations.stop();
 
        player.frame = 4;
    }
     
    //  如果player底部有接触，并且up按下，执行跳跃
    if (cursors.up.isDown && player.body.touching.down)
    {
         player.body.velocity.y = -350;
    }

虽然我们添加了很多代码不过它应该非常易读。我们做的第一件事是重置子图形的水平速度。然后我们检测左光标键是否被按下。如果是，我们应用一个负的水平速度然后开始播放向左奔跑的动画。如果右光标键被按下则采取相反的措施。通过在每帧清除速度然后再设置它的方法创建了停止—开始式的运动。

角色的子图形只有在一个键被按下的时候移动，没有按下则立即停止。Phaser也允许你使用动量和加速度创建更复杂的运动，但是之前的效果就是我们这个游戏需要的。键检测的最后部分就是如果没有键被按下就把帧设置为4。精灵图的第四帧就是角色看着你，没有运动。

跳跃

代码的最后部分就是添加跳的能力。上光标键就是我们的跳跃键，我们会检测它是否被按下。然而我们也要检测角色是否接触到地面，否则它们可能会在半空中跳跃。如果这些条件都满足我们会应用一个350的竖直速度。角色会自动落回地面因为我们给它应用了重力值。当控制设置好后我们得到了一个我们可以探索的游戏世界。加载part7.html然后玩一玩。你可以尝试调整类似350能使角色跳的更高或更低的值然后看看会有什么效果。

以上的效果图就是NPC向右边跑到壁架并跳上去。

为了增加游戏的乐趣，在这里，我们添加一些星星，让角色去收集它。

我们创建一个新的stars组，然后填充它。

 stars = game.add.group();
 
    stars.enableBody = true;
 
    //  Here we'll create 12 of them evenly spaced apart
    for (var i = 0; i < 12; i++)
    {
        //  Create a star inside of the 'stars' group
        var star = stars.create(i * 70, 0, 'star');
 
        //  Let gravity do its thing
        star.body.gravity.y = 6;
 
        //  This just gives each star a slightly random bounce value
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
    }

流程和我们创建平台组的时候相似。我们使用JavaScript的for循环在游戏里创建了12颗星星。它们拥有i*70的x轴坐标，这意味着它们每隔70像素等距放置。如同角色我们给这些星星一个重力值使得它们能下落，给它们一个反弹值使得它们撞击平台后会反弹几下。反弹是一个介于0（不会反弹）到1（无消耗反弹）的值。我们会设置反弹值在0.7到0.9左右。如果我们运行了代码会发现星星跌下了游戏的底部。

为了防止那样我们需要在update循环里在它们和平台间启用碰撞检测：

game.physics.arcade.collide(stars, platforms);

同时我们也要检测星星是否和角色重叠了：

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

这行代码告诉Phaser去检测角色和星星组里任何星星的重叠。如果发现重叠就把它们传入collectStar函数：

function collectStar (player, star) {
     
    // Removes the star from the screen
    star.kill();
 
}

很简单，当一个星星被清除就不再显示它。运行游戏，现在我们的角色可以左冲右撞，可以跳跃，可以从平台上反弹和收集从天而降的星星。很不错只用了很少的几行代码，大多数非常易读。

最后润色

最后的调整是添加分数。实现这个我们将使用一个Phaser.Text对象。这里我们创建两个新变量，一个保存着实际的分数一个是文本对象本身

var score = 0;
var scoreText;

并在create函数中设置scoreText：

scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

16×16是文本显示位置的坐标。score 0是默认显示的字符串，最后一个对象包含了字体尺寸和填充颜色。没有指定字体我们实际上使用了浏览器的默认字体，在Windows系统是Arial。接下来我们需要修改collectStar函数，以便当角色拾起一颗星星分数会增加而文本会更新以反映分数：

function collectStar (player, star) {
     
    // Removes the star from the screen
    star.kill();
 
    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;

所以每颗星星十分，scoreText会更新以显示新分数。最终的游戏：

结尾

你现在学习了如何创建一个带有物理属性的子图形，如何控制它的运动，如何使它和一个小游戏世界里的其它物体交互。还有很多东西你可以去增强这个游戏，比如说它没有结束或惩罚的概念。为什么不添加一些你必须躲避的钉子？你可以创建一个新的钉子组然后让它和角色检测碰撞，只是这次碰撞将杀死角色而不是钉子。或者做一个非暴力的游戏，你必须快速移动，挑战在尽可能短的时间内收集所有的星星。我们已经在压缩包里放置了额外的图形以帮助激发你的灵感。

在你学习了这篇教程和这250+个例子后，你应该对未来的工程有一个结实的基础。但是只要你有疑问，需要建议或者想分享，随意来Phaser forum。

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

Phaser游戏初级教程（三）

关注”全栈技术杂货铺“

目录