company logo
advertisement for deep fried Twinkies


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);

	}

}

效果: