当前位置: 首页 > 工具软件 > Phaser > 使用案例 >

phaser常用API总结

田普松
2023-12-01

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
}

  1. 判断横屏还是竖屏
    if(game.scale.isLandscape){
    //横屏
    game.scale.correct = true;
    }
    else{
    //竖屏
    game.scale.correct = false;
    }

  2. 设置全屏世界
    var width = window.innerWidth 或 100%,
    height = window.innerHeight 或 100%;

  3. 定时器
    game.time.events.loop(300,callback,this);

  4. 拖曳
    方法一

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);
}
  1. 对象池
//定时器添加红包
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;
    }
}
  1. 用图形绘制大地
//大地
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);
  1. 开启物理引擎
//全局开启物理引擎
this.physics.startSystem(Phaser.Physics.ARCADE);
//单个对象开启物理引擎
this.physics.arcade.enable(obj);
  1. 碰撞检测
//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);
  1. 添加按钮注册点击事件
//图片按钮可以使用精灵来做,精灵可以添加点击事件
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); 
  1. 显示加载进度条
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');
    }
}
  1. 执行补间动画
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动画,让它不停的上下移动
  1. 设置物体不出边界
ground.body.allowGravity = false; //没有重力,不会下沉
// ground.body.immovable = true; //不可移动
// ground.body.collideWorldBounds = true; //如果设置为true,那么这个对象在撞到世界的边界时会被反弹回这个世界。设置为false的话,对象在撞到世界边界时会离开这个世界
  1. 调试相关
//在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);
}
  1. 对组中的元素进行统一操作
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);
  1. 修改物理轮廓,即碰撞的区域
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);
}
  1. 物体超出边界监测
1. checkWorldBounds

设置超出边界检测

sprite.checkWorldBounds = true;
//对精灵进入边界进行处理
sprite.events.onEnterOfBounds.add(callback,this);
//对精灵离开边界进行处理
sprite.events.onOutOfBounds.add(callback,this);
  1. outOfBoundsKill
//必须开启checkWorldBound为true
//超出边界后自动kill,包括上下左右任意边界
sprite.checkWorldBounds = true;
sprite.outOfBoundsKill = true;
 类似资料: