Phaser 简单入门

2010jing.png

首先，到github下载 Phaser

准备一些材料如图片。

基本结构

part1.html

首先实例化一个Phaser.Game的对象，赋值给变量 game.
参数说明
第一二个参数 800,600，分别是canvas的宽，高。
第三个参数 Phaser.AUTO 用于渲染上下文，这里默认会选择WebGL,如果浏览器不支持，会选择Canvas。
第四个参数 空字符串， 这里可以写入 DOM的 id值， 表示可以将canvas 插入到指定的位置。 填空字符串 ' ' 表示canvas 会追加在body。
最后一个参数，是一个对象，可以包含Phaser的基础功能，这个参数是可选。

更多的 Game() 构造函数 资料

加载资源

function preload() {
    game.load.image('sky','assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}

预加载 外部资源，如图片，音频， json, xml, txt到缓存。
game.load.image 加载 image 到当前加载队列，
sky- 指定唯一的资源key
assets/sky.png - 资源路径

game.load.spritesheet 加载 Sprite Sheet 到当前加载队列，
dude - 指定唯一的资源key
assets/dude.png - 资源路径
32 - frameWidth
48 - frameHeight

更多的 Phaser.Loader 资料

添加Sprite

function create(){

     game.add.sprite(100,100,'star');

}

在 坐标（x,y）=(100,100)的位置 添加 star

2010jing.png

添加一个整体的环境

function create(){

            //  We're going to be using physics, so enable the Arcade Physics system
            game.physics.startSystem(Phaser.Physics.ARCADE);

            //  A simple background for our game
            game.add.sprite(0, 0, 'sky');

            //  The platforms group contains the ground and the 2 ledges we can jump on
            platforms = game.add.group();

            //  We will enable physics for any object that is created in this group
            platforms.enableBody = true;

            // Here we create the ground.
            var ground = platforms.create(0, game.world.height - 64, 'ground');

            //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
            ground.scale.setTo(2, 2);

            //  This stops it from falling away when you jump on it
            ground.body.immovable = true;

            //  Now let's create two ledges
            var ledge = platforms.create(400, 400, 'ground');

            ledge.body.immovable = true;

            ledge = platforms.create(-150, 250, 'ground');

            ledge.body.immovable = true;
            
            game.add.sprite(100,100,'star');

        }

首先激活 Arcade Physics system
添加 sky 背景
创建一个group 来包含 一个地板 和 两个横条
在添加对象到group之前 需要先enableBody = true
接下来就是添加 地板和横条，并且对大小 和位置分别设置。

2010jing.png

添加人物和设定

            // The player and its settings
            player = game.add.sprite(32, game.world.height - 150, 'dude');

            //  We need to enable physics on the player
            game.physics.arcade.enable(player);

            //  Player physics properties. Give the little guy a slight bounce.
            player.body.bounce.y = 0.2;
            player.body.gravity.y = 300;
            player.body.collideWorldBounds = true;

            //  Our two animations, walking left and right.
            player.animations.add('left', [0, 1, 2, 3], 10, true);
            player.animations.add('right', [5, 6, 7, 8], 10, true);

人物是这样的

2010jing.png

player.body.bounce.y = 0.2
设置y轴方向的反弹值
player.body.gravity.y = 300
设置y轴方向的重力的值
player.body.collideWorldBounds = true
设置碰撞边界为true, 否则 小人物就会掉下去，消失在canvas。
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
定义两个动画效果分别为 left 和 right
left frame 从 0，1, 2，3 向左奔跑 10秒每贞， true 表示 循环
right frame 从 5，6, 7，8 向右奔跑 10秒每贞， true 表示 循环
中间第四frame是个正面。