首页 专题 H5案例 前端导航 UI框架

Phaser游戏初级教程(三)

作者:TG 日期: 2016-05-30 阅读: 696
一个游戏,当然不能只有静态的物体,我们需要让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



关注”全栈技术杂货铺“

全栈技术杂货铺