Phaser系列课程初步分成《基础篇上》、《基础篇下》、《动画篇》、《交互篇》、《物理引擎篇》、《图形绘制篇》、《场景篇》。

引用资源

1
2
<!-- 完整版，包含Arcade、P2、Ninja三个物理引擎 -->
<script src="https://static.360buyimg.com/jdcopr/lib/phaser.min.js"></script>

初始化画布

1
new Phaser.Game(width, height, renderer, parent, state, transparent, antialias)
参数 类型 默认值 说明
width number或string 800 游戏画布宽度
height number或string 600 游戏画布高度
renderer number Phaser.AUTO 渲染方式，Phaser.AUTO、Phaser.CANVAS、Phaser.WEBGL
parent string或者HTMLElement ‘’ 游戏canvas挂载的DOM ID或者DOM节点
state object null 游戏场景(按执行顺序：init、preload、create、update、render)
transparent boolean false 游戏画布背景是否透明
antialias boolean true 贴图是否抗锯齿 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-container', { 
  init: init,
  preload: preload, 
  create: create, 
  update: update,
  render: render
}, false, true);

// 初始化
function init() {}

// 预加载
function preload() {}

// 场景创建
function create() {}

// 画布更新
function update() {}

// 渲染设置
function render(){}

* 窍门：控制台打印查看对象可以非常直观清楚地了解到其可能包含到的属性和方法，具体解决某个问题结合官方API深入了解。

初始化Init

写在init函数中

1、屏幕适配

以750宽度设计稿为准。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
1
var game = new Phaser.Game(750, 750 / window.innerWidth * window.innerHeight)
1
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
适配类型 值 说明
EXACT_FIT 0 重新设置渲染宽度不算高度，比例变化，缩放会变形
NO_SCALE 1 无任何缩放，任何设定放缩无效，不缩放不变形
SHOW_ALL 2 重新设置渲染宽高，比例不变，缩放不变形，通常使用该类型
RESIZE 3 重新设置画布宽度不算高度，不缩放不变形
USER_SCALE 4 画布渲染大小以用户设置的画布宽高为准，不缩放不变形

2、设置画布颜色

1
game.stage.backgroundColor = '#0f0';

3、设置游戏世界范围

不设默认为canvas画布大小

1
game.world.setBounds(x, y, width, height);
参数 说明
x 游戏世界左上角x坐标
y 游戏世界坐上角y坐标
width 游戏世界宽度
height 游戏世界高度
world对象重要属性 说明
centerX 游戏世界x坐标中心值
centerY 游戏世界y坐标中心值

4、引用物理系统

单独一课讲解

资源预加载Preload

写在preload函数中

1、game.load.资源方法()

image(key, url, overwrite)

参数 类型 是否必选 默认值 说明
key string 必选 资源名字
url string 必选 资源地址
overwrite boolean 可选 false 是否重写已存在该名字的资源

audio(key, urls, autoDecode)

参数 类型 是否必须 默认值 说明
key string 必选 资源名字
urls string 或 Array 必选 资源地址
autoDecode boolean 可选 true 是否重写已存在该名字的资源

video(key, urls, loadEvent, asBlob)

参数 类型 是否必须 默认值 说明
key string 必选 资源名字
urls string 或 Array 必选 资源地址
loadEvent boolean 可选 ‘canplaythrough’ canplaythrough可以无断续播放，canplay可以开始播放，loadeddata第一帧加载完
asBlob boolean 可选 false 是否存储为二进制数据对象，以便不同地方调用节省内存

spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing)

参数 类型 是否必须 默认值 说明
key string 必选 资源名字
url string 或 Array 必选 资源地址
frameWidth boolean 必选 每一帧的宽度
frameHeight boolean 必选 每一帧的高度
frameMax boolean 可选 -1 读取的帧数
margin boolean 可选 0 帧外边距
spacing boolean 可选 0 帧内边距

atlas(key, textureURL, atlasURL, atlasData, format)

参数 类型 是否必须 说明
key string 必选 资源名字
textureURL string 可选 图片地址
atlasURL string 可选 图片数据文件地址
atlasData object 可选 图片数据json或xml对象，如果已经引用数据文件链接，则不需要这个参数
format number 可选 Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY (the default), …JSON_HASH, …JSON_XML_STARLING

atlasJSONArray(key, textureURL, atlasURL, atlasData)

参数 类型 是否必须 说明
key string 必选 资源名字
textureURL string 可选 图片地址
atlasURL string 可选 图片数据文件地址
atlasData object 可选 图片数据json或xml对象，如果已经引用数据文件链接，则不需要这个参数

atlasJSONHash(key, textureURL, atlasURL, atlasData)

参数 类型 是否必须 说明
key string 必选 资源名字
textureURL string 可选 图片地址
atlasURL string 可选 图片数据文件地址
atlasData object 可选 图片数据json或xml对象，如果已经引用数据文件链接，则不需要这个参数 
1
2
3
4
5
6
7
8
9
image(key, url, overwrite)
audio(key, urls, autoDecode)
video(key, urls, loadEvent, asBlob)

spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing)

atlas(key, textureURL, atlasURL, atlasData, format)
atlasJSONArray(key, textureURL, atlasURL, atlasData) 
atlasJSONHash(key, textureURL, atlasURL, atlasData)

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
// 加载图片资源
game.load.image('bg', 'img/bg.jpg');
// 加载音频资源
game.load.audio('bgmusic', 'audio/bgmusic.mp3');
game.load.audio('bgmusic', ['audio/bgmusic.mp3', 'audio/bgmusic.ogg']);

// 加载等宽等高逐帧雪碧图
game.load.spritesheet('mummy', 'img/mummy37x45.png', 37, 45, 18);

// 加载雪碧图+图json信息
game.load.atlas('sprite_game', 'img/sprite_game.png', 'json/sprite_game.json', Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);
game.load.atlas('sprite_game', 'img/sprite_game.png', 'json/sprite_game.json', Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY);
game.load.atlasJSONHash('sprite_game', 'img/sprite_game.png', 'json/sprite_game.json');

2、监听加载事件

事件 回调函数参数 说明
onLoadStart 所有资源加载开始时
onLoadComplete 所有资源加载完成时
onFileStart (progress, file key, file url) 单个资源加载开始时
onFileError (file key, file) 单个资源加载失败
onFileComplete (progress, cacheKey, success?, totalLoaded, totalFiles) 单个资源加载完成时

添加监听回调add、addOnce(只执行一次)。

示例代码

1
2
3
4
5
6
7
8
9
game.load.onFileComplete.add(loadProgress, this);
game.load.onLoadComplete.addOnce(loadComplete, this);

function loadProgress(progress, cacheKey, success, totalLoaded, totalFiles) {
  console.log(progress)
}
function loadComplete() {
  console.log('complete')
}

创建物体

1
2
3
4
5
var bg, box;
function create() {
  bg = game.add.image(0, 0, 'bg');
  box = game.add.sprite(0, 0, 'box');
}

更新画布

1
2
3
4
function update() {
  box.x += 1;
  box.y += 2;
}

调试

1
2
3
function render() {
  game.debug.spriteBounds(box);
}

Homework

素材:游戏背景图、箱子

  • 创建移动端游戏画布，设置背景色为#0c276e；
  • 加载背景图片资源、箱子图片资源
  • 监听加载进度，控制台打印进度
  • 在画布中创建背景和箱子