phaser常用API總結

看風景就發表於2018-08-02
API
1. 遊戲畫布的尺寸
var width = game.width,
height = game.height;
 
2. 中心點座標
var game = new Phaser.Game(...);
var centerX = game.world.centerX,
centerY = game.world.centerY;
 
3. 隨機座標
var randomX = game.world.randomX,
randomY = game.world.randomY;
 
4. 精靈物件常用方法
var player = game.add.sprite(...);
//動畫
player.animations.add(...);
player.animations.play('');
//傾斜
player.angle = 45;
 
5. 基本圖形
var line = new Phaser.Line(0,0,120,120);
var circle = new Phaser.Circle(game.world.centerX,100,64);
var rect = new Phaser.Rectangle(x,y,width,height);
 

6. 判斷PC或手機

if(game.device.desktop){
//desktop
}
else{
//mobile
}
 
7. 判斷橫屏還是豎屏
if(game.scale.isLandscape){
//橫屏
game.scale.correct = true;
}
else{
//豎屏
game.scale.correct = false;
}

 

8. 設定全屏世界
var width = window.innerWidth 或 100%,
height = window.innerHeight 或 100%;

 

9. 定時器
game.time.events.loop(300,callback,this);
 
10. 拖曳
方法一 
player.inputEnabled = true;
//只能水平方向上拖動
player.input.allowVerticalDrag = false;
//限制主角只能在世界中移動，不能超出螢幕
var dragRect = new Phaser.Rectangle(0,0,gWidth,gHeight);
player.input.enableDrag(false,false,false,255,dragRect);
 
方法二
var playerW = this.player.width;
//是否正在觸控
var touching = false;
//監聽按下事件
game.input.onDown.add(function(pointer){
    //palyer.x是主角的橫向中心，判斷是指觸控點在主角的最左側到最右側的座標範圍內，
    //就是點選的是小人本身，未判斷y座標
    if(Math.abs(pointer.x - player.x) < player.width/2){
        touching = true;
    }
});
//監聽離開事件
game.input.onUp.add(function(){
    touching = false;
});
//監聽滑動事件
game.input.addMoveCallback(function(pointer,x,y,isTap){
    if(!isTap && touching){
        x = mid(x, playerW/2, gWidth - playerW/2);
        player.x = x;
    }
});

function mid(mid,min,max){
    if(typeof min === undefined || min == null){
        min = Number.NEGATIVE_INFINITY;
    }
    if(typeof max == undefined || max == null){
        max = Number.POSITIVE_INFINITY;
    }
    return Math.min(Math.max(min,mid),max);
}
 
11. 物件池
//定時器新增紅包
var redgroup = this.add.group();
this.redgroup = redgroup;
//全組開啟body
redgroup.enableBody = true;
//預先建立8個精靈物件
redgroup.createMultiple(8,'redpack');
//紅包組全體新增邊界檢測和邊界銷燬
redgroup.setAll('outOfBoundsKill',true);
redgroup.setAll('checkWorldBounds',true);
//定時新增紅包
game.time.events.loop(300,this.fBuildRedpack,this);

//生成紅包的函式
this.fBuildRedpack = function(){
    //沒有自動建立，getFirstDead和getFistExists此處等價
    // var item = this.redgroup.getFirstDead(true);
    var item = this.redgroup.getFirstExists(false,true);
    var left = this.rnd.between(60,gWidth - 60);
    if(item){
        //由於有超出邊界檢測，所以不能設定y為負值
        item.reset(left,0);
        item.scale.set(0.5);
        item.body.velocity.y = 300;
        item.checkWorldBounds = true;
        item.outOfBoundsKill = true;
    }
}
12. 用圖形繪製大地
//大地
var land = game.add.graphics(0,gHeight-127/2);
land.beginFill(0xce9424);
land.moveTo(0,0);
land.lineTo(gWidth, 0);
land.lineTo(gWidth, gHeight);
land.lineTo(0,gHeight);

13. 開啟物理引擎

//全域性開啟物理引擎
this.physics.startSystem(Phaser.Physics.ARCADE);
//單個物件開啟物理引擎
this.physics.arcade.enable(obj);

14. 碰撞檢測

//arcade的兩種碰撞檢測
//碰撞後的物件的消失，一般在update週期中使用overlap方法，碰撞後的回彈效果一般使用collide方法(通常在create週期中)，兩種方法可以同時使用，不衝突

//有反彈碰撞
game.physics.arcade.collide(this.bird,Chimney);

//無反彈碰撞，碰撞回撥中有參與碰撞的物件，可以在回撥中將物件kill掉
game.physics.arcade.overlap(this.redgroup,this.player,function(player,redpack){
    redpack.kill();
},null,null,this);

15. 新增按鈕註冊點選事件

//圖片按鈕可以使用精靈來做，精靈可以新增點選事件
this.startButton = this.add.sprite(0,0,'ui','button.png');
this.startButton.anchor.set(0.5);
this.startButton.x = game.world.centerX;
this.startButton.y = game.height - 100;
this.startButton.inputEnabled = true;
this.startButton.input.useHandCursor = true;
this.startButton.events.onInputDown.add(this.startGame,this); 
16. 顯示載入進度條

setPreloadSprite(sprite, direction)

sprite：在載入過程中會出現的精靈或影象。
direction：等於0精靈將被水平裁剪，等於1精靈將被垂直裁剪

Loader物件提供了一個 setPreloadSprite 方法，只要把一個sprite物件指定給這個方法，那麼這個sprite物件的寬度或高度就會根據當前載入的百分比自動調整，達到一個動態的進度條的效果。

示例程式碼如下：

var game = new Phaser.Game('100%', '100%', Phaser.AUTO, 'game');
 
game.States = {};

game.States.boot = function() {
    this.preload = function() {
        game.load.image('loading', 'img/loading.gif');
    }
    this.create = function() {
        game.state.start('preload');
    }
}

game.States.preload = function() {
    this.preload = function() {
        var preloadSprite = game.add.sprite(game.width / 2, game.height / 2, 'loading');
        preloadSprite.anchor.setTo(0.5, 0.5);
        //用setPreloadSprite方法來實現動態進度條的效果，preloadSprite為load的精靈
        game.load.setPreloadSprite(preloadSprite);

        game.load.image('pipe', 'img/pipe.png');
        game.load.image('startBtn', 'img/start.jpg');
        game.load.image('helpBtn', 'img/help.jpg');
    }
    this.create = function() {
        game.state.start('menu');
    }
}

17. 執行補間動畫

Tween物件，是專門用來實現補間動畫的。通過game.add的tween方法得到一個Tween物件,這個方法的引數是需要進行補間動畫的物體。然後我們可以使用Tween物件的to方法來實現補間動畫。

to(properties, duration, ease, autoStart, delay, repeat, yoyo)

properties : 一個js物件，裡面包含著需要進行動畫的屬性，如上面程式碼中的 {y:120}

duration : 補間動畫持續的時間，單位為毫秒

ease : 緩動函式，預設為勻速動畫

autoStart : 是否自動開始

delay : 動畫開始前的延遲時間，單位為毫秒

repeat : 動畫重複的次數，如果需要動畫永遠迴圈，則把該值設為 Number.MAX_VALUE

yoyo : 如果該值為true,則動畫會自動反轉

示例：

game.add.tween(titleGroup).to({ y:120 },1000,null,true,0,Number.MAX_VALUE,true); //對這個組新增一個tween動畫，讓它不停的上下移動
18. 設定物體不出邊界
ground.body.allowGravity = false; //沒有重力，不會下沉
// ground.body.immovable = true; //不可移動
// ground.body.collideWorldBounds = true; //如果設定為true，那麼這個物件在撞到世界的邊界時會被反彈回這個世界。設定為false的話，物件在撞到世界邊界時會離開這個世界
19. 除錯相關
//在render週期中寫除錯程式碼
this.render = function(){
    //game.debug.body用來顯示每個物體的物理輪廓，具體顯示為綠色的形狀
    //對組中的每個物體開啟物理輪廓
    this.redgroup.forEach(function(item){
        game.debug.body(item);
    });
    //對單個物體開啟物理輪廓
    game.debug.body(this.player);
    
    //螢幕上顯示一些除錯文字
    game.debug.text('CodeCaptain Shooting Demo', 10, 30);
    game.debug.text('Click or press space / enter to shoot', 10, 55);
}

20. 對組中的元素進行統一操作

var redgroup = this.add.group();
//對組中的物體全部設定屬性
redgroup.setAll('checkWorldBounds',true);
//對組中的物體全部呼叫函式
redgroup.callAll('events.onOutOfBounds.add', 'events.onOutOfBounds', this.fRemoveRedpack);
//設定組中所有物體的anchor為0.5,1.0
redgroup.callAll('anchor.setTo', 'anchor', 0.5, 1.0);

21. 修改物理輪廓，即碰撞的區域

this.update = function(){
    //設定小人的物理體積為高度的一半
    var playerW = this.player.width,
        playerH = this.player.height;
    //由於scale 0.5的緣故，寬高設定要加倍
    this.player.body.setSize(playerW*2,playerH,0,playerH);
    
    //設定方形物理輪廓,前面兩個是寬高，後面兩個是偏移
    this.dragon.body.setSize(this.dragon.width, this.dragon.height / 2, 0, this.dragon.height / 2);

    //設定圓形物理輪廓
    this.dragon.body.setCircle(this.dragon.width / 2);
    //恢復一下偏移為0
    this.dragon.body.offset.set(0, 0);
}

 22. 物體超出邊界監測

1. checkWorldBounds

設定超出邊界檢測
sprite.checkWorldBounds = true;
//對精靈進入邊界進行處理
sprite.events.onEnterOfBounds.add(callback,this);
//對精靈離開邊界進行處理
sprite.events.onOutOfBounds.add(callback,this);

2. outOfBoundsKill

//必須開啟checkWorldBound為true
//超出邊界後自動kill，包括上下左右任意邊界
sprite.checkWorldBounds = true;
sprite.outOfBoundsKill = true;

 

相關文章