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

上一课我们着重讲到了Phaser五个重要的时间钩子init、preload、create、update、render中的前两个，这一节我们将专门讲create中如何创建各种物体以及介绍物体的一些基本属性，了解这些，方面我们掌握如何对物体进行定位、做动画。

组Group

通常把相同类型或者一个整体的东西划分为一个组是非常良好的习惯，也方便整体进行操作，我们称之为Group。

1
var boxes = game.add.group();

物体\对象Display

一个游戏画面由各种各样的物体构成，多个物体构成一个group，游戏中最核心最重要的这个元素我们称之为Display，而物体是分成多种类型的，我们根据需要创建不一样的物体。

image(x, y, key, frame, group)

不需要物理特性、不需要动画，仍然可以进行旋转、缩放、裁剪和响应用户点击等输入操作。

参数 类型 是否必选 默认值 说明
x number 0 x坐标
y number 0 y坐标
key string 资源名
frame string或number 可选 用到的雪碧图帧索引或者帧名字
group string 可选 添加到的分组

1、不引用雪碧图

1
2
3
4
5
// 不添加到分组
var box = game.add.image(0, 0, 'box');

// 添加到分组
var box = game.add.image(0, 0, 'box', null, boxes);

2、引用雪碧图

通过TexturePacker工具将图片1和图片2生成雪碧图、导出适合Phaser使用的雪碧图对应的json信息数据。

1
game.load.atlasJSONHash('sprite', 'img/sprite.png', json/sprite.json');
1
var btnMusic = game.add.image(0, 0, 'sprite', 'btn_music.png');

建议安装browser-sync或者http-server搭建本地服务器，避免跨域问题。

*拓展阅读：使用PhysicsEditor导出带物体真实边界信息的json

3、重要属性

属性 类型 说明
alpha number 透明度0～1
anchor object 定位中心，anchor.x = 0.5、anchor.set(0.5)、anchor.set(0.2, 0.5)
data object 自定义存储一些本物体有关的信息
frame number 帧索引，可用于对物体换图
frameName string 帧名，可用于对物体换图
height number 物体高度
key string 物体资源名字
position object 坐标位置，position.x = 100, position.set(100,100)
rotation number 旋转角度
scale object 缩放比例，scale.x = 0.5, scale.set(0.2, 0.5);
width number 物体宽度
x number x坐标
y number y坐标

sprite(x, y, key, frame, group)

通常用于需要设置物理特性、动画的物体，和image基本相同，不同的是其提供了更多的属性可用于设置物理特性等复杂的表现。其中最重要也通常只会用到的就是body属性。物理系统下的Sprite物体，body属性下才有东西，基本所有常用到的物理特性都在body中进行设置，具体将在物理引擎篇中详细讲解。

1
var box = game.add.sprite(0, 0, 'box');

tileSprite(x, y, width, height, key, frame, group)

参数 类型 是否必选 说明
x number 必选 x坐标
y number 必选 y坐标
width number 必选 物体宽度
height number 必选 物体高度
key string 必选 资源名
frame string或number 可选 帧索引
group string 可选 组名

audio(key, volume, loop)

参数 类型 是否必选 默认值 说明
key string 必选 音频资源名
volume string 可选 1 音量
loop string 可选 false 是否循环

重要属性和方法

参数 类型 默认值或参数 说明
mute string false 是否静音
volumn number 1 音量
paused boolean false 是否暂停
play function 播放
pause function 暂停
fadeIn function (duration, loop) 淡入，如果循环也只有第一次是淡入
fadeOut function (duration) 淡出
fadeTo function (duration, volume) 淡入
onDecoded Phaser.Signal 监听解码
onFadeComplete Phaser.Signal 监听音频淡入或淡出完成
onLoop Phaser.Signal 监听音频每次循环时
onMute Phaser.Signal 监听音频静音时
onPause Phaser.Signal 监听音频暂停时
onPlay Phaser.Signal 监听音频播放完成
onResume Phaser.Signal 监听音频继续播放时
onStop Phaser.Signal 监听音频结束时 
1
2
3
4
var bgmusic = game.add.audio('bgmusic', 1, true);
bgmusic.onDecoded.add(function(){
  bgmusic.fadeIn(200);
}, this);

button(x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group)

按钮对象，具体在交互篇介绍

tween(target)

动画对象，具体在动画篇介绍

1
game.add.tween(box).to({y: 600}, 2400, Phaser.Easing.Bounce.Out, true);

Homework

在上一节课作业的基础上：

  • 把箱子图片和另外一张音频按钮图片使用TexturePacker进行合并，并输出phaser使用的雪碧图json文件
  • 用这个课的方法重新居中创建箱子、右上角创建音频按钮
  • 加载背景音频资源，创建背景音乐并播放