前言

Phaser是一个非常好用的html5游戏开发框架,官网上是这样介绍的:“一个快速、免费并且完全开源的框架,提供Canvas和WebGL两种渲染方式,致力于增强桌面端与移动端浏览器游戏的体验”。

开始

开始游戏的场景

html5标准新加了一个 canvas标签,在canvas上我们可以通过js绘制各种各样的内容,游戏内包含着场景,精灵等要素。我们绘制了宽度600高度250,的一个canvas画布。游戏渲染模式使用Phaser.AUTO,也就是自动检测,在浏览器支持WebGL的时候使用WebGL渲染,不支持的时候回退到Canvas渲染。。并且加载了Splash场景,通过start,进入了Splash场景。等Splash场景结束后,我们可以通过game.state.start('Main');来加载Main场景实现场景之前的切换。在场景中有各种各样的方法来控制场景的展示,init方法,preload方法,create方法和update方法,分别管理当前场景的初始化、预加载、生成游戏对象以及更新游戏循环。

1
2
3
4
5
const game = new Phaser.Game(600, 250 , Phaser.AUTO,"");
const main = new Phaser.State();
game.state.add('Splash', Splash);
game.state.add('Main', Main);
game.state.start('Splash');

通过这些方法,就可以完成一个非常炫酷的Phaser游戏了

丰富我们的游戏

初始化Init方法:启动物理引擎(ARCADE),这是Phaser框架自带的最简单的物理引擎,用于矩形盒的碰撞检测。。

1
2
3
4
main.init = function(){
game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.enableBody = true;
}

预加载方法:加载各类游戏资源,并设置唯一id,被精灵引用。

1
game.load.image('floor', 'img/floor.png');

生成游戏对象方法:生成游戏地图

1
2
3
4
5
6
7
8
main.create = function(){
this.floors = game.add.group();
...
//floor
for(var i=1; i < n; i++){
var floor = game.add.sprite(30*i, 90, 'box','', this.floors);
}
}

更新循环方法:通过方向键控制主角左右移动和跳跃,当主角撞到地板,做销毁处理,并且重新开始游戏。这样我们就完成一个简单的跳跃障碍物游戏。

1
2
3
4
5
6
7
8
9
main.update = function(){
game.physics.arcade.overlap(this.player, this.floor, this.kill, null, this);
...
if (this.cursor.left.isDown)
this.player.body.velocity.x = -200;
...
if (this.cursor.up.isDown && this.player.body.touching.down)
this.player.body.velocity.y = -250;
}

Phaser开发游戏问题总结

iPhone下游戏显示模糊

这是因为iPhone现在都是retina屏幕,在retina屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在retina屏幕上实际会占据200x200像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。所以我们在初始化canvas大小不应该是屏幕的 大小去渲染,使用屏幕大小俩倍做渲染,同时通过css来讲canvas缩小,就可以解决问题。也可以通过dpi来做渲染相应大小。

1
2
3
4
5
6
7
8
9
const dpi = window.devicePixelRatio || 2;
const width = document.documentElement.clientWidth * dpi;
const height = document.documentElement.clientHeight * dpi;

class Game extends Phaser.Game {
constructor() {
super(width, height, Phaser.CANVAS, 'content', null);
}
}

资源问题

Phaser社区版本提供了 grunt打包工具,可以自行缩减比如常用 wap端游戏不需要的按键控制,多余的物理引擎,来缩小资源大小。
整个资源打包也可以通过webpack内置的压缩进行优化。
游戏的图片其实对于整个资源占比很大,对一些按钮,icon,标志图片等较小图片可以进行合图操作,减少大量的http请求,对一些超过1024*1024大小的图片进行些许压缩。

内存优化

  • 减少不必要的计算
    • 图片阴影,发光效果,添加mask效果,可以直接用图片替代
    • 复杂文字效果使用图片
  • 游戏内不直接使用setTimeout setInterVal
  • 精灵数量的控制和注意及时的销毁,保证内存不泄露
  • 在主循环update逻辑做到精简,避免大片业务逻辑放到上面
  • 动画不放到update里 比如位置移动,可以使用补间动画(tween)
1
2
3
update() {
sprite.x += 1;
}

Phaser 学习资源

Phaser插件合集
Phaser官网
Phaser中文官网
Phaser小游戏合集
Phaser webpack配置