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); } }
效果: