一扩淀、Phaser初始化:
var game = new Phaser.Game(config);
//其中config完成各種配置
var config = {
type : Phaser.AUTO,
width : 800,
height : 600,
scene : {
preload : preload,
create : create,
update : update
}
}
function preload(){}
function create(){}
function update(){}
其中屬性type有3種计露,Phaser.CANVAS/Phaser.WEBGL/Phaser.AUTO。
二添履、加載資源
需要在preload時屁倔,將資源加載好。
調(diào)用load方法暮胧,加載資源锐借。
function preload(){
//加載圖片
this.load.image('sky','assets/sky.png');
//加載圖片表單
this.load.spritesheet('dude','assets/dude.png',
{frameWidth:32,frameHeight:48});
}
資源加載完成后问麸,就可以在create函數(shù)里,將圖片顯示出來瞎饲。
this.add.image(400,300,'sky');
顯示圖片方法image()口叙,前面400,300是放置圖片的位置嗅战。
因為默認(rèn)坐標(biāo)系是以圖片中心點為0妄田,0點。
三驮捍、物理系統(tǒng)
要使用物理系統(tǒng)疟呐,需要配置使用的物理系統(tǒng)。我們采用Arcade物理系統(tǒng)东且。
var config = {
...
physics:{
default:'arcade',
arcade:{
gravity:{y:300},
debug:false
}
}
...
}
在Arcade物理系統(tǒng)中启具,分為靜態(tài)和動態(tài)物體body。
動態(tài)物體可以動珊泳,會跟其他物體發(fā)生碰撞鲁冯,反彈。
靜態(tài)物體不能用色查,不受重力/碰撞影響薯演。
“組”可以把近似對象組織在一起。
//生成靜態(tài)物理組
var platforms = this.physics.add.staticGroup();
platforms.create(400,568,'ground');
四秧了、物理精靈
通過物理系統(tǒng)生成一個動態(tài)物體跨扮,物理精靈。
var player;
player = this.physics.add.sprite(100,450,'dude');
//設(shè)置物體碰撞反彈
player.setBounce(0.2);
//設(shè)置物體不能跑出屏幕
player.setCollideWorldBounds(true);
五验毡、動畫
自定義動畫:
this.anims.create({
key:'left',
frames:this.anims.generateFrameNumbers('dude',{start:0,end:3}),
frameRate:10,
repeat:-1
});
this.anims.create({
key:'turn',
frames:[{
key:'dude',
frame:4
}],
frameRate:20
})
碰撞
需要檢測物體間的碰撞衡创。
this.physics.add.collider(player,platforms);
六、鍵盤監(jiān)控
提供了鍵盤監(jiān)控方法晶通。
var cursors = this.input.keyboard.createCursorKeys();
function update(){
if(cursors.left.isDown){
player.setVelocityX(-160);
player.anims.play('left',true);
}
else if(cursors.right.isDown){
player.setVelocityX(160);
player.anims.play('right',true);
}
else{
player.setVelocityX(0);
player.anims.play('turn');
}
//按鍵方向鍵up按下璃氢,則起跳。并且還要檢測player的下面是否在地面
if(cursors.up.isDown && player.body.touching.down){
player.setVelocityY(-330);
}
設(shè)置動態(tài)組
stars = this.physics.add.group({
key:'star',
repeat:11,
setXY:{
x:12,
y:0,
stepX:70
}
});
stars.children.iterate(function (child){
child.setBounceY(Phaser.Math.FloatBetween(0.4,0.6));
});
//檢測碰撞
this.physics.add.collider(stars,platforms);
添加文本顯示
var scoreText = this.add.text(16,16,'score:0',
{
fontSize:'32px',
fill: '#000'
});