游戏物理引擎开发 pdf_前端图形学（完结篇）——没有物理引擎的游戏是没有灵魂的...

欢迎来到【畅哥聊技术】前端图形学系列技术文章，本章节将会是最终的章节，感谢大家！

上章节回顾

1. 在phaser.js中的适配
2. 精灵图片的加载和渲染
3. 动画的添加和使用

---

本章目标

1. 精灵动画的深入
2. phaser中的物理引擎的基本使用
3. phaser中的事件使用方法
4. 碰撞检测

先来看我一下我们今天要实现的一个效果吧！

下面详细来分析一下这个示例的制作步骤：

加载我们所需要的资源并创建大背景和三个挡板

因为背景图大小 是800*600，所以我的先来创建游戏对象

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'canvas', ZmitiStar);

接着创建ZmitiStar类，并在preload方法中加载我们需要的资源

我们看下dude1.png

第五帧才是我们的默认显示帧哦

创建游戏对象

this.bg = game.add.tileSprite(0, 0, game.width, game.height, 'bg');

创建图中的三块的挡板，我们可以将它们放在一个组中去。然后通过create的方式去创建挡板。这样使得每一个挡板都具有碰撞属性

效果：

创建戏的主人公以及添加动画

this.player = game.add.sprite(game.width / 2, 122, 'dude');

默认向下运动，并且有碰撞检测。所以我们给它设置一个向下的重力和一个反弹系数并且要设置开启物理碰撞

game.physics.arcade.enable(this.player);this.player.body.bounce.y = .2;this.player.body.gravity.y = 100;

给主人公开始物理碰撞检测，设置完了以后，player对象下就会有一个Body属性，用来去设置重力，反弹系数这些物理属性。

设置与世界边界的碰撞

this.player.body.collideWorldBounds = true;

添加向左右运动的动画

this.player.animations.add('left', [0, 1, 2, 3], 20, true);this.player.animations.add('right', [5, 6, 7, 8], 20, true);

注意。向左运动时，精灵图只用到了前4帧[0,1,2,3]。向右用到了后四帧[5,6,7,8],最中间的那一帧停止的帧。

主人公被创建出来啦^_^

添加星星

创建一个星星组并开启物理碰撞属性，然后再循环创建12个星星，并给每个星星一个向下的重力以及随机的反弹系数

创建星星

效果：

星星出来了

碰撞检测

在phaser框架已经为我们封装好一套碰撞检测算法。我们只需要调用即可。有必要提到的是，在碰撞检测之前，一定要先开启phaser的物理系统

game.physics.startSystem(Phaser.Physics.ARCADE);//使用Phaser.Physics.ARCADE物理引擎。

前面说到了，update方法是整个游戏的循环函数，接下来我们就在这里面做碰撞检测。

会发生碰撞的对象分别有：

1、主人公和星星(发生碰撞的时候，需要将星星移除)

2、主人公和三块挡板

3、星星和三块档板

game.physics.arcade.collide(obj1,obj2);//obj1和obj2为两个等检测碰撞的元素。

所以在update方法中：

添加事件处理

phaser中我们可以

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

来创建一个游标对象

this.cursors.left.isDown 表示的是方向左键被按下，其它方向的按键同理。

当按下左键时，我们设置主人公向左移动，并且执行向左的动画，向右同理，当我们按下向上的键的时候，主人公具有跳越的动作。我们把y轴的重力设置为负值即可

完整的代码请私信我^_^

整个小案例的全部代码都将分享完~

总结：

1. 在phaser中，在做碰撞检测之前，一定要记得开始物理引擎。
2. 通过创建组的方式，可以让组内的所有元素具有物理属性。而不用单独设置 。
3. 碰撞检测和键盘事件都应该在update循环函数中完成。

---

写在最后

前端图形学系列的文章更新到这就算是结束了,但是我分享的仅仅是整个前端体系中的冰山一角，还有很多内容等着我们去挖掘。

我的系列文章，《前端图形学》 我是从canvas基础分享到canvas高级应用，再将高中的物理数学相关知识应用其中。紧接写我们进入了原生的webgl的相关知识的分享，再到threejs的源码级的分享，到最后游戏框架phaser的分享，一路走来，感谢各位粉丝朋友的支持。

下一专题，讲什么？

你们说了不算，我来定。。。。(因为你们说的我可能不会 :( )