Phaser物理引擎
这部分笔记:
物理引擎有很多,但最简单的是Arcade物理引擎,使用简单,当然功能也简单,只支持矩形对矩形的碰撞检测。其它的有功能更好的,但使用也复杂,并且还有收费的。总之就是学好这个Arcade了
基本使用方法和属性设置
var game = new Phaser.Game(1200, 500, Phaser.AUTO, 'container', state);
function state(){
this.init = function(){
game.scale.pageAlignHorizontally = true; //水平居中
game.scale.pageAlignVertically = true; //垂直居中
}
this.preload = function(){
game.load.image('cat', 'asset/cat.png');
}
var sprite;
this.create = function(){
//使用某个物理引擎前必须要先开启该物理引擎 Arcade物理引擎默认已经开启,所以可以不用这句话,其它引擎必须
game.physics.startSystem(Phaser.Physics.ARCADE);
sprite = game.add.sprite(50, 200, 'cat'); //创建一个sprite
sprite.anchor.setTo(0.5, 0.5); //设置中心点
//让该sprite拥有物理特性 只有精灵对像才能用物理引擎,图片对像是不能开启物理引擎的
game.physics.enable(sprite, Phaser.Physics.ARCADE);
/*
设置属性必须要在 对象的BODY上进行设置
*/
//sprite.body.velocity = new Phaser.Point(100, 0); //设置速度
//sprite.body.acceleration = new Phaser.Point(100, 0); //设置加速度
////sprite.body.angularVelocity = 90; //角速度
//sprite.body.angularAcceleration = 90; //角速度加速度
//sprite.body.drag = new Phaser.Point(50, 0); //阻力 摩托力
//sprite.body.angularDrag = 10;//角速度的阻力
sprite.body.gravity = new Phaser.Point(0, 100); //重力
//sprite.body.bounce = new Phaser.Point(0, 0.5); //设置弹跳
}
this.update = function(){
}
}碰撞例子 overlap方法 (使用overlap方法来检测碰撞,它不会产生碰撞后的物理效应)
var game = new Phaser.Game(1200, 500, Phaser.AUTO, 'container', state);
function state(){
this.init = function(){
game.scale.pageAlignHorizontally = true; //水平居中
game.scale.pageAlignVertically = true; //垂直居中
}
this.preload = function(){
game.load.image('cat', 'asset/cat.png');
}
var sprite, sprite2;
this.create = function(){
//使用某个物理引擎前必须要先开启该物理引擎
game.physics.startSystem(Phaser.Physics.ARCADE);
sprite = game.add.sprite(50, 200, 'cat'); //创建一个sprite
sprite.anchor.setTo(0.5, 0.5); //设置中心点
sprite2 = game.add.sprite(600, 200, 'cat'); //再创建一个sprite
sprite2.anchor.setTo(0.5, 0.5); //设置中心点
//让sprite拥有物理特性
game.physics.enable(sprite, Phaser.Physics.ARCADE);
game.physics.enable(sprite2, Phaser.Physics.ARCADE);
sprite.inputEnabled = true;//启用拖拽
sprite.input.enableDrag();
}
this.update = function(){
//使用overlap方法来检测碰撞,它不会产生碰撞后的物理效应
game.physics.arcade.overlap(sprite, sprite2, function(){
alert('发生碰撞了');
sprite.input.disbleDrag();
});
}
}碰撞例子 collide方法
var game = new Phaser.Game(1200, 500, Phaser.AUTO, 'container', state);
function state(){
this.init = function(){
game.scale.pageAlignHorizontally = true; //水平居中
game.scale.pageAlignVertically = true; //垂直居中
}
this.preload = function(){
game.load.image('cat', 'asset/cat.png');
}
var sprite, sprite2;
this.create = function(){
//使用某个物理引擎前必须要先开启该物理引擎
game.physics.startSystem(Phaser.Physics.ARCADE);
sprite = game.add.sprite(50, 200, 'cat'); //创建一个sprite
sprite.anchor.setTo(0.5, 0.5); //设置中心点
sprite2 = game.add.sprite(500, 200, 'cat'); //再创建一个sprite
sprite2.anchor.setTo(0.5, 0.5); //设置中心点
//让sprite拥有物理特性
game.physics.enable(sprite, Phaser.Physics.ARCADE);
game.physics.enable(sprite2, Phaser.Physics.ARCADE);
//sprite.body.velocity.x = 200; //设置一个速度
//sprite2.body.velocity.y = 200; //设置一个速度
//sprite2.body.mass = 100; //设置质量
//sprite2.body.immovable = true; //固定不动
sprite.body.bounce.x = 0.5; //设置弹跳
sprite2.body.bounce.y = 0.5; //设置弹跳
//与游戏边界进行碰撞检测
sprite.body.collideWorldBounds = true;
sprite2.body.collideWorldBounds = true;
sprite.body.gravity.y = 100;//重力
sprite.body.bounce.y = 0.5;//弹跳
}
this.update = function(){
//使用collide方法来检测碰撞,它会产生碰撞后的物理效应
game.physics.arcade.collide(sprite, sprite2);
}
}与组进行碰撞检测
不但元素可以和组进行碰撞检测,还可以组和组之间进行碰撞检测,另外,还可以开启组内元素之间进行碰撞检测
var game = new Phaser.Game(1200, 500, Phaser.AUTO, 'container', state);
function state(){
this.init = function(){
game.scale.pageAlignHorizontally = true; //水平居中
game.scale.pageAlignVertically = true; //垂直居中
}
this.preload = function(){
game.load.image('cat', 'asset/cat.png');
game.load.image('ball', 'asset/ball.png');
}
var sprite;
var group;
this.create = function(){
//使用某个物理引擎前必须要先开启该物理引擎
game.physics.startSystem(Phaser.Physics.ARCADE);
group = game.add.group();
group.enableBody = true;//这个设为TRUE后,只要往这个组里添加子元素,就为其开启了物理引擎,下面那行
group.physicsBodyType = Phaser.Physics.ARCADE;
//往组里随机添加子元素
for (var i = 0; i < 5; i++){
var c = group.create(game.rnd.integerInRange(100, 1200), game.rnd.integerInRange(0, 400), 'cat');
c.body.immovable = true; //固定不动
}
sprite = game.add.sprite(0, 0, 'ball');
game.physics.enable(sprite, Phaser.Physics.ARCADE);
sprite.body.collideWorldBounds = true;
sprite.body.bounce.set(0.9); //弹跳
sprite.body.gravity.y = 500;//重力
sprite.body.velocity.set(200);//速度200 x=y =200
}
this.update = function(){
//与整个组进行碰撞检测
game.physics.arcade.collide(sprite, group);
}
}效果:
组与组的元素进行碰撞检测 和组内元素间进行碰撞检测
var game = new Phaser.Game(1200, 500, Phaser.AUTO, 'container', state);
function state(){
this.init = function(){
game.scale.pageAlignHorizontally = true; //水平居中
game.scale.pageAlignVertically = true; //垂直居中
}
this.preload = function(){
game.load.image('cat', 'asset/cat.png');
game.load.image('ball', 'asset/ball.png');
}
var group, group2;
this.create = function(){
//使用某个物理引擎前必须要先开启该物理引擎
game.physics.startSystem(Phaser.Physics.ARCADE);
//第一个组
group = game.add.group();
group.enableBody = true;
group.physicsBodyType = Phaser.Physics.ARCADE;
//往组里随机添加子元素
for (var i = 0; i < 5; i++){
var c = group.create(game.rnd.integerInRange(100, 1200), game.rnd.integerInRange(0, 400), 'cat');
c.body.velocity.set(game.rnd.integerInRange(-800, 800), game.rnd.integerInRange(-800, 800))
}
group.setAll('body.collideWorldBounds', true);//设置组内所有元素与边界碰撞
group.setAll('body.bounce', new Phaser.Point(0.9, 0.9));//设置组内所有元素的弹跳
group.setAll('body.gravity.y', 800);//设置组内所有元素的重力
//第二个组
group2 = game.add.group();
group2.enableBody = true;
group2.physicsBodyType = Phaser.Physics.ARCADE;
//往组里随机添加子元素
for (var i = 0; i < 5; i++){
var c = group2.create(game.rnd.integerInRange(100, 1200), game.rnd.integerInRange(0, 400), 'ball');
c.body.velocity.set(game.rnd.integerInRange(-800, 800), game.rnd.integerInRange(-800, 800))
}
group2.setAll('body.collideWorldBounds', true);
group2.setAll('body.bounce', new Phaser.Point(0.9, 0.9));
group2.setAll('body.gravity.y', 800);
}
this.update = function(){
//组与组之间进行碰撞检测
game.physics.arcade.collide(group, group2);
//组内元素之间进行碰撞
game.physics.arcade.collide(group);
game.physics.arcade.collide(group2);
}
}效果: