Phaser 是什么

Phaser是一个HTML5游戏框架，它的目的是辅助开发者真正快速地制作强大的、跨浏览器的HTML5游戏。对浏览器的唯一要求是，支持画布（canvas）标签。

现有版本 2.6.2 和 3.70.0 （推荐）

2.6.2：Phaser 2.6.2 API Docs - Learn - Phaser
3.70.0（推荐）：Physics - Phaser 3 API Documentation (beta)

快速学习

需要的工具:

Tiled

瓦片地图编辑工具

Aseprite

像素画绘制工具，也可以用其更开源的版本 LibreSprite

Aseprite 个人打包地址：Gearinger/aseprite: Animated sprite editor & pixel art tool (Windows, macOS, Linux) (github.com)

模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


// 游戏引擎初始化配置
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

// 初始化游戏引擎
var game = new Phaser.Game(config);

// 加载前执行，一般在这里加载所有资源文件
function preload ()
{
}

// 创建游戏后
function create ()
{
}

// 每次更新帧时
function update ()
{
}

资源加载

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function preload ()
{	
    // this.load.image('资源key（用于后续获取该资源的键值）', '资源的相对路径');
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

显示资源

1
2
3
4
5
6
7


function create ()
{
    // 通过键值，将资源加载到指定位置
    // (x, y, '资源key')
    this.add.image(400, 300, 'sky');
    this.add.image(400, 300, 'star');
}