phaser常用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;