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;
