用phaser开发2D平台游戏

前言

phaser是一个非常好用的html5游戏开发框架，官网上是这样介绍的：“一个快速、免费并且完全开源的框架，提供Canvas和WebGL两种渲染方式，致力于增强桌面端与移动端浏览器游戏的体验”。使用的过程中，个人确实感觉它的方便与易用性，能够快速实现自己的游戏想法。

phaser.png

目标

为了学习phaser框架，开发了一款简单的平台跳跃游戏。学习了如何在phaser中使用场景（State）,精灵（Sprite）,游戏输入（Input）以及碰撞检测，算是简单的入门而已。这个框架还有更多精彩出众的地方，等着我去发掘。主要的学习手段是参阅框架API文档，不得不说phaser的API文档写得很赞，结构清晰，内容完整准确，让初学者能够快速上手。

platformer.png

开始

一切的一切，从一个platformer目录开始。platformer目录包含一个index.html入口文件以及img和js文件夹。html文件很简单，只是标准的html5文件结构，里面引用了js文件夹中phaser.min.js游戏框架文件和main.js游戏逻辑文件。需要注意的是在html文件中要注意js的引用的顺序，main.js会使用phaser.min.js提供的Phaser全局变量，所以要先引用phaser.min.js文件，接着引用main.js文件，否则会报错。img文件中是游戏的资源文件，一张白色的方块图片，在游戏中会被渲染成不同的颜色，表示不同的游戏对象。

构建游戏世界

html5游戏，世界都构建在标签上面。首先来构建当前的游戏世界，并直接进入主要场景（Main State）。游戏很简单，所以只有一个主场景，如果开发复杂一些的游戏，就要考虑到场景的管理与切换了（从开始场景到游戏场景再到结束场景等等）。

var game = new Phaser.Game(600, 250 , Phaser.AUTO,"");
var main = new Phaser.State();
game.state.add('Main', main);
game.state.start('Main');

Phaser.Game用来构建游戏世界，接受的参数依次是游戏世界的宽、高、渲染模式和标签的id属性，本游戏渲染模式使用Phaser.AUTO，也就是自动检测，在浏览器支持WebGL的时候使用WebGL渲染，不支持的时候回退到Canvas渲染。id参数传入""是让框架在中生成标签。如果需要在特定的

标签内生成，首先应该在html文件中添加带id属性的

标签，然后传入id属性即可。Phaser.Game返回一个游戏对象，这是整个游戏的核心，通过这个游戏对象（用全局变量game引用），就可以快速使用phaser提供的各种方法来开发html5游戏了。
Phaser.State用来创建游戏场景。从名称上来说state应该译为状态，但我觉得称为场景更加妥当。因为Phaser.State中提供的各个方法搭起了一个脚手架，用来展现当前游戏画面。本游戏用到了init方法，preload方法，create方法和update方法，分别管理当前场景的初始化、预加载、生成游戏对象以及更新游戏循环。通过扩展这些方法，就可以实现精彩纷呈的各种游戏了。

mainstate.png

扩展游戏场景

• 初始化方法：启动物理引擎（ARCADE），这是Phaser框架自带的最简单的物理引擎，用于矩形盒的碰撞检测，适于本游戏，设定游戏的背景颜色。

main.init = function(){
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.world.enableBody = true;
    game.stage.backgroundColor = "#489ad8";
}

• 预加载方法：加载本游戏唯一的一张图片资源，关键在于设定每张图片的唯一id，便于在整个游戏中引用。主要用到game.load加载器，用来加载游戏中需要的各种资源，用音乐，图片，精灵图，JSON配置文件等等。

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

• 生成游戏对象方法：添加左右墙壁，地面以及主角、奖励以及障碍物。代码展示如何生成地面，里面用到了phaser中组（Group）的概念。用于管理相同的、游戏中大量出现的游戏对象（比如子弹、道具等，比起用循环来增删对象，使用组更加有效率，性能更高，实现了缓冲池的功能）。向游戏中添加游戏对象主要用到game.add方法，用来快速将对象加入到游戏舞台上，如精灵，文字，声音等。然后开启地面图片的碰撞属性，设置body.immovable=true，防止主角从上方掉下时，将地面也砸下去。主角、奖励和障碍物生成代码类似，不再赘述。最后生成游戏控制按键（键盘中的上、下、左、右方向键）。

main.create = function(){
    this.walls = game.add.group();
    ...
    //ground
    for(var i=1; i<13; i++){
        var wall = game.add.sprite(30*i, 90, 'box','', this.walls);
        wall.scale.setTo(0.6, 0.6);
    }
    ...
    this.walls.x = 90;
    this.walls.y = game.world.centerY-60;
    this.walls.setAll('tint', 0x1a5882);
    this.walls.forEach(game.physics.enable, game.physics);
    this.walls.setAll('body.immovable', true);
    ...
     this.cursor = game.input.keyboard.createCursorKeys();
     }

• 更新循环方法：通过方向键控制主角左右移动和跳跃，当主角撞到障碍时，游戏重新开始，撞到奖励时，销毁奖励物品。

main.update = function(){
    ...
    game.physics.arcade.overlap(this.player, this.lava, this.restart, 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;
}

• 其余方法：重新开始以及销毁奖励物品。奖励物品同地面类似，是用组来管理的，因此默认拥有kill方法来销毁自身。

main.restart = function(){      game.state.start('Main');       }
main.getCoin = function(player, coin){     coin.kill();     }

链接

GitHub

后记

这个游戏虽然简单，但是涉及到了开发一个html5小游戏的各个方面。游戏开发是一条很长远的路，其中每一点都可以进行深入地研究和扩展。就此游戏而言，可以加入记分系统，更改地面及墙壁障碍的位置来生成关卡，还可以给主角添加动画效果，加入音效提升游戏体验等等。这些都是要慢慢扩展出来的。想法是要实现出来的。在实现的过程中，有时会触发更多灵感，但更多的是向现实妥协，舍弃掉一些东西，然而这样才是真正的成长。