Phaser学习手记
实例化
1 | new Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig); |
例子:1
var game = new Phaser.Game(300, 400, Phaser.AUTO, container);
1 | width //游戏宽度 |
Game对象属性
暂停游戏1
game.Paused = true
运行游戏1
game.Paused = false
其他属性
1 | game.add; //是对游戏对象工厂的一个引用 |
State 场景
创建场景对象 Phaser.State 的两种形式
对象形式1
2
3
4
5{
init: function(){},
preload: function(){},
....
}
函数形式1
2
3
4
5function(){
this.init = function(){},
this.preload = funtion(){},
...
}
preload, create, update, render 至少要存在一个
1 | init(); //场景初始化代码 |
Phaser.StateManager场景管理对象
1 | var game = new Phaser.Game(); |
Phaser.Loader 加载游戏资源
1 | game.load.image(); //加载图片 |
Loader事件
单个资源加载完成事件1
2
3game.load.onFileComlete.add(function(){ //单个资源加载成功后调用该事件
var progress =game.load.progress;//使用game.load.progress 来获取所有资源的加载进度1表示1%
});
所有资源加载完成事件1
2game.load.onLoadComplete.add(function(){
});
Phaser.Stage舞台
1 | var game = new Phaser.Game(); |
Phaser.World 世界
1 | //设置世界边界的大小 |
Phaser.Camera
1 | game.camera.x = 100; //改变摄像机在X轴上的位置 |
游戏的缩放控制
1 | //可以使用game.scale 来引用当前游戏的Phaser.ScaleManager对象 |
缩放模式
EXACT_FIT 缩放到父元素的大小,可能会改变宽高比
SHOW_ALL 保持宽高比缩放到父元素的大小 一般用这个
USER_SCALE 自定义缩放 需要使用 game.scale.setUserScale(0.5, 0.5) 设定
缩放配置可以放到init方法中
水平和垂直居中1
2game.scale.pageAlignHorizontally = true; //水平居中
game.scale.pageAlignVertically = true; //垂直居中
文字
1 | game.add.text(x, y, text, style, group); |
style文字样式设置的3种方法1
2
3
4
5
6
7
8
9var text = game.add.text(0, 0, "Hello", Style); //添加文字时以对象的方式设置 可以直接设置或引用设置
Style ={
font: "bold 24px Arial",
fill: "#fff"
}
text.style.fill = "#fff"; //通过文字的styel对象设置
text.fill = "#fff"; //在文字对象上直接设置
文字样式属性1
2
3
4
5
6
7
8
9text.fill = '#fff'; //文字颜色
text.font = '微软雅黑'; //字体
text.fontSize = 60; //字号
text.fontWeight = 'normal'; //粗细 默认加粗
text.style.backgroundColor = '#0f0'; //背景颜色 必须通过style对象设置
text.stroke = '#f00'; //描边颜色
text.strokeThickness = 10; //描边宽度
text.wordWrap = true; //自动换行
text.wordWrapWidth = 150; //超过设定宽度 自动换行 wordWrap必须为true
特殊字体
3种特殊字体1
2
3
4
5webFont //类似于css的用法 需要先激活(建立一个dom容器 设定该容器的字体为webFont即可激活),因为加载字体需要一定的时间,使用Phaser 时可用setTimeout延迟加载。
BitmapText //图片文字 一般用这个
RetroFont //同BitmapText
BitmapText 文字制作工具
- BMFont (Windows, free): http://www.angelcode.com/products/bmfont/
- Glyph Designer (OS X, commercial): http://www.71squared.com/en/glyphdesigner
- Littera (Web-based, free): http://kvazars.com/littera/
Littera的使用
- 先点击左侧的FONT Select Font 选择一个本地字体进行上传
- 在上方Included glyphs 输入框中输入需要的所有文字
- 使用 Fill Stroke 等进行样式的编辑
- 在上方导出栏里设置导出格式为XML(默认)点击Export导出
BitmapText 的使用
preload方法中1
game.load.bitmapFont('font', 'asset/font.png', 'asset/font.fnt'); //'定义资源名称', '文字图片路径', '文字图片配置文件'
create方法中1
var text = game.add.bitmapText(0, 0, 'font', 'Hello', 30);//x坐标, y坐标, 资源名称, 文字内容, 文字大小
组
Phaser.world 是最顶层的组
创建组
1 | var group = game.add.group(); |
给组添加子元素的几种方法
- 创建图片或精灵时指定组
- group.add(key) 方法直接添加 (资源名称)
- group.create(x, y, ‘key’, frame?, exists?) 方法创建子元素并添加进组 (x坐标, y坐标, 资源名称, 帧, 是否显示)
组的操作
1 | group.alpha = 0.5; //透明度 |
动画
- Phaser.Tween 补间动画
- Phaser.Animation 逐帧动画
补间动画
创建补间动画
1 | var tween = game.add.tween(boject); |
补间动画操作方法
1 | tween.start(); //开始 |
使用方法 在create方法中
1 | var phaser = game.add.image(0, 0, 'phaser'); |
逐帧动画
需要使用game.load.spritesheet 加载雪碧精灵图片且每个精灵大小相同
1 | var sprite = game.add.sprite(); |
1 | //preload方法中 |
Atlas
Atlas每一帧大小可以不固定
使用 http://renderhjs.net/shoebox/ 将图片拖到程序的Sprite Sheet上,生成XML格式的文件
1 | //preload方法中 |
粒子系统
粒子发射器的创建
1 | var emitter = game.add.emitter(x?, y?, maxParticles?); //(x坐标, y坐标, 粒子在屏幕上显示的最大数量) |
创建粒子
1 | emitter.makeParticles(keys, frames?, quantity?, collide?, collideWorldBounds?);//(名称, 帧数, 要产生多少粒子, 粒子之间/粒子跟边界是否碰撞) |
实例
1 | //preload |
Tiled 瓦片地图
- 添加瓦片图集
- 新建图层 设置图块大小
- 构建地图 可使用图章和油漆桶工具,填充错误可使用橡皮擦工具,按ctrl可连续选中图集
- 导出地图 选择json
使用tiled 瓦片地图
1 | //preload |
动态修改瓦片地图
1 | //create |
瓦片地图碰撞检测
1 | tilemap.setCollision(indexes, collides?, layer?); //(可以是一个数组瓦片集合索引, 是否进行碰撞检测, 在哪个层进行碰撞检测) |
实例
1 | //create |
事件系统Phaser.Signal
Signal对象的创建
1 | var signal = new Phaser.Signal(); |
一些重要的系统事件
1 | var game = new Phaser.Game(); |
用户交互管理对象 Phaser.Input
1 | var game = new Phaser.Game(); |
基本属性和方法
1 | game.input.onDown //按下事件 |
Pointer对象
代表一个指针对象,可以是鼠标,手指或其他输入设备。多点触摸会出现多个Pointer对象
1 | var game = new Phaser.Game(); |
鼠标对象
1 | //获取鼠标对象 |
键盘对象
1 | var game = new Phaser.Game(); |
实例 - 画笔
1 | this.create = function(){ |
实例 - 键盘
1 |
|
特定游戏对象的交互事件处理 Phaser.Events
input的为全局 events为特定对象
1 | var game = new Phaser.Game(); |
Phaser.InputHandler对象 拖动对象
1 | var game = new Phaser.Game(); |
音频处理 Phaser.SoundManager
1 | var game = new Phaser.Game(); |
音频资源的加载
1 | game.load.audio(key, urls, autoDecode?); //(资源名称, 资源地址, 是否自动解码(true)); |
audio sprite
1 | game.load.sudiosprite(key, urls, jsonURL?, jsonDate?, autoDecode?);// jsonUrl,jsonDate 二选一 |
audio sprite 数据生成工具
https://github.com/tonistiigi/audiosprite
1 |
|
\preload
\单一音频
game.load.audio(‘sound1’, ‘asset/audio/1.mp3’);
\音频sprite
game.load.audiosprite(‘audiosprite’, [
‘asset/audio/maudiosprite.ogg’,
‘asset/audio/maudiosprite.m4a’,
‘asset/audio/maudiosprite.mp3’,
‘asset/audio/maudiosprite.ac3’],
‘asset/audio/maudiosprite.json’,);
\create
var sound = game.add.audio(‘sound1’);
var audiosprite = game.add.audioSprite(‘audiosprite’);1
2
3
4
## 音频资源的使用和管理
> 播放控制
sound.play(marker?, position?, volume?, loop?, forceRestart?);
//marker 标注名称
//position 播放位置
//volume 音量 0~1
//loop 是否循环
//forceRestart 是否强制重新开始
sound.pause(); //暂停播放
sound.resume(); //恢复播放
sound.stop(); //停止播放
1 |
|
//标注声音
sound.addMarker(name, start, duration, volume?, loop?);
//name 资源名称
//start 开始时间 秒
//duration 持续时间 秒
//volume 音量大小
//loop 循环
sound.play(name); //播放标注的声音
sound.removeMarker(name); //移除标注1
2
> 声音的淡入淡出
//淡入
sound.fadeIn(duration?, loop?, marker?);
//duration 持续时间 毫秒
//替代sound.play
//淡出
sound.fadeOut(duration?);
//自定义
sound.fadeTo(duration?, volume?);
volume 过渡到的音量1
2
> 声音事件相关的Signal对象
sound.onPlay
sound.onPause
sound.onResume
sound.onStop
sound.onFadeComplete //淡入淡出完成时
sound.onMarkerComplete //某一段标注的声音播放完成时
sound.onLoop
sound.onMute //静音时1
ex
sound.onPlay.add(function(){
alert(‘Play’);
})1
2
3
4
## 物理引擎
> 开启物理引擎
\Phaser默认使用ARCADE物理引擎,所以可以不写下面这句
game.physics.startSystem(Phaser.Physics.ARCADE);1
2
> 在游戏精灵上启用物理引擎
game.physics.enable(sprite, Phaser.Physics.ARCADE);1
2
3
4
> 在组中启用物理引起
为组中的没一个子元素启用物理引擎
group.enableBody = true;
//指定物理引擎
group.physicsBodyType = Phaser.Physics.AARCADE;1
2
3
4
> 精灵的body对象
当精灵启用物理引擎后,就会拥有一个body属性,物理属性都是附加在精灵的body对象上的。
sprite.body;1
2
3
4
> body属性
速度
sprite.body.velocity = new Phaser.Point(100, 100); //(x, y) x为横向运动,正值向右,负值向左
//OR
sprite.body.velocity.set(100); //(x,y)如果只传一个参数,说明x和y都是这个值
//OR
sprite.body.velocity.x = 100;
sprite.body.velocity.y = 100;1
加速度
sprite.body.acceleration = new Phaser.Point(100, 100);
//OR
sprite.body.acceleration.set(100);
//OR
sprite.body.acceleration.x = 100;
sprite.body.acceleration.y = 100;1
2
角速度和角速度的加速度
sprite.body.angularVelocity = 90; //正数顺时针旋转,负数为逆时针旋转 单位:度/秒
sprite.body.angularAcceleration = 45;1
2
阻力
sprite.body.drap = new Phaser.Point(100, 100);
//OR
sprite.body.drap.set(100);
//OR
sprite.body.drap.x = 100;
sprite.body.drap.y = 100;
1 |
|
sprite.body.gravity = new Phaser.Point(100, 100);
//OR
sprite.body.gravity.set(100);
//OR
sprite.body.gravity.x = 100;
sprite.body.gravity.y = 100;1
2
弹跳 0~1
sprite.body.bounce = new Phaser.Point(0.5, 0.5);
//OR
sprite.body.bounce.set(0.5);
//OR
sprite.body.bounce.x = 0.5;
sprite.body.bounce.y = 0.5;
1 |
|
sprite.body.friction.set(100); //设置与其他物体接触时的摩擦力
sprite.body.rotation = Math.PI; //设置角度
sprite.body.immovable = true; //设置该物体是否时固定的
sprite.body.mass = 10; //设置物体的相对质量, 默认为1
sprite.body.maxVelocity.set(100, 200); //设置最大速度
sprite.maxAngular = 1000; //设置最大角速度
sprite.body.setSize(width, height, offsetX, offsetY); //设置body范围大小
sprite.body.reset(x, y);//重置所有物理属性
1 |
|
game.physics.arcade.moveToXY(sprite, x, y, speed);
game.physics.arcade.moveToObject(sprite, destination, speed);
game.physics.arcade.moveToPointer(sprite, speed, potinter);1
2
以指定的加速度运动到目的地
game.physics.arcade.accelerateToXY(sprite, x, y, speed);
game.physics.arcade.accelerateToObject(sprite, destination, speed);
game.physics.arcade.accelerateToPointer(sprite, speed, potinter);1
2
一些工具
//计算角度
game.physics.arcade.angleBetween(source, target);
game.physics.arcade.angleToPointer(displayObject, pointer);
game.physics.arcade.angleToXY(displayObject, x, y);
//计算距离
game.physics.arcade.distanceBetween(source, target);
game.physics.arcade.distanceToPointer(displayObject, pointer);
//计算速度
game.physics.arcade.1
2
3
4
## 碰撞检测
overlap方法 只是检测不产生物理效果 需使用在update方法中
game.physics.arcade.overlap(sprite1, sprite2, function(){console.log(‘It is overlap!’)});1
collide方法 产生物理效果 需使用在update方法中,对象可以是精灵或组
game.physics.arcade.collide(sprite1, sprite2, function(){console.log(‘It is collide!’)});
game.physics.arcade.collide(sprite, group);
game.physics.arcade.collide(group); //组内碰撞检测1
与游戏边界进行碰撞检测
sprite.body.collideWorldBounds = true;1
2
3
## debug
显示FPS
//preload
game.time.advancedTiming = true;
//render
game.debug.text(game.time.fps, 32, 320, “#00ff00”);`