Phaser 游戏引擎

简单、直接、高效的混合开发游戏引擎

vue中初始化框架

定义全局变量(避免使用this指向)

1
2
import Phaser from 'phaser'
let game, player, cursors, stars, score, scoreText, bombs, bomb, gameOver

初始化配置

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
init(){
let self = this
game = new Phaser.Game({
type:Phaser.AUTO,
parent:'engine',
width:800,
height:600,
backgroundColor: '#efefef',
physics:{
default:'arcade',
arcade:{
gravity:{y:300},
debug:false
}
},
scene:{
preload:function (){
self.preload(this)
},
create:function (){
self.create(this)
},
update:function (){
self.update(this)
}
}
})
}

处理函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
method:{
preload(e){
e.load.image('item','...')
},
create(e){
e.add.image(0,0,'item')
},
upload(e){
console.log('xixi')
}
}
```
```JavaScript
// 解析bug特殊处理

接口文档

布局

矩阵布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//矩阵排列
var group = e.add.group({
key: 'dude',
frame: [0, 1, 2],
frameQuantity: 30
});
Phaser.Actions.GridAlign(group.getChildren(), {
width: 12,
height: 10,
cellWidth: 48,
cellHeight: 48,
x: 100,
y: 100
})

环形布局

1
2
3
let circle = new Phaser.Geom.Circle(400, 300, 120)
let group = e.add.group({ key: 'bomb', repeat: 20 })
Phaser.Actions.PlaceOnCircle(group.getChildren(), circle)

线段布局

1
2
3
let line = new Phaser.Geom.Circle(400, 300, 600,400)
let group = e.add.group({ key: 'bomb', repeat: 20 })
Phaser.Actions.PlaceOnLine(group.getChildren(), line)

补间

对象补间

1
2
3
4
5
6
7
8
9
10
this.tweens.add({
targets: ellipse,
width: 500,
height: 200,
delay: 1000,
duration: 2000,
ease: 'Sine.easeInOut',
repeat: -1,
yoyo: true
});

数值补间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
create(e){
tween = e.tweens.addCounter({
from: 300,
to: 10,
duration: 3000,
delay: 200,
ease: 'Sine.easeInOut',
repeat: -1,
yoyo: true
});
}
update(e){
console.log(tween.getValue())
}

事件

悬浮

1
2
3
4
5
6
item.on('pointerover',()=>{
item.setTint(0x000)
})
item.on('pointerout',()=>{
item.clearTint()
})

拖拽

1
2
3
4
5
6
7
8
9
10
11
12
let item = player.setInteractive()
e.input.setDraggable(item)
e.input.on('dragstart',(pointer,gameObject)=>{
gameObject.setTint(0x3f3f)
})
e.input.on('drag',(pointer,gameObject,dragX,dragY)=>{
gameObject.x = dragX
gameObject.y = dragY
})
e.input.on('dragstart',(pointer,gameObject)=>{
gameObject.clearTint()
})

动画

逐帧动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
create(e){
e.anims.create({
key: 'demo',
frames: [
{ key: 'img1' },
{ key: 'img2' },
{ key: 'img3' },
{ key: 'img4' }
],
frameRate: 8,
repeat: -1
})
e.add.sprite(400, 300, 'img1').play('demo')
}

适配

方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
config={
scale:{
mode:Phaser.Scale.xxx,
parent:'dom',
width:800,
height:600,
// min:{
// width:800,
// height:600
// },
// max:{
// width:1600,
// height:1200
// }
}
}

模式

FIT

保持纵横比,在范围内缩放,相当于contain

1
2
3
4
5
6
7
8
9
10
11
// 居中
autoCenter:Phaser.Scale.CENTER_BOTH
// 设限
min:{
width:800,
height:600
},
max:{
width:1600,
height:1200
}

ENVELOP

保持纵横比,在范围内填充,相当于cover

1
2
3
4
5
* `FIT`
保持纵横比,在范围内缩放,相当于contain
* `ENVELOP`
保持纵横比,在范围内填充,相当于cover
* `center`

其他

群体位移旋转

1
2
3
4
let group = e.add.group()
group.create(100, 100, 'dude')
Phaser.Actions.IncX(group.getChildren(), 100)
Phaser.Actions.Rotate(group.getChildren(), 2)

添加音效

1
2
3
4
5
6
preload(e){
e.load.audioSprite('audio', 'http://labs.phaser.io/assets/audio/SoundEffects/fx_mixdown.json', 'http://labs.phaser.io/assets/audio/SoundEffects/fx_mixdown.ogg')
},
create(e){
e.sound.playAudioSprite('audio', 'ping');
}

用例

发光线条

1
2
3
4
5
6
线条本身只有坐标属性,其他视图属性挂载在图形引擎上
create(e){
let graphics = e.add.graphics({lineStyle{width:2,color:0xfff,alpha: 0.5}})
graphics.blendMode = 1
let line = new Phaser.Geom.Line(0,0,100,100)
}

示例库