Phaser 飞机大战学习-第二课

Phaser 飞机大战学习-第二课

图片加载

背景图片科技使用game.add.image(0,0,'backgroud')，也可以使用game.add.sprite(0,0,'background')。

帧动画加载

帧动画加载就必须用game.add.sprite函数
帧动画在加载资源的时候就已经处理好了，使用的是game.load.spritesheet函数
但是现在加载出来是没有动画的，让他动起来的步骤如下：

var myplane = game.add.sprite(100, 100, 'myplane');
myplane.animations.add('fly');
myplane.animations.play('fly');

但是逐帧动画默认不循环，所以应该这样写：

myplane.animations.play('fly', 12,  true);
//第一个参数是动画的名称，第二个参数是帧动画播放的快慢，第三个参数指定是否循环播放

添加一个开始按钮

使用了一个button函数，函数定义如下

new Button(game, x, y, callback, callbackContext, overFrame, outFrame, downFrame, upFrame);//Phaser.Button
//回调函数，回调函数上下文，鼠标放上去的帧，移开的帧，按下的帧，抬起的帧

添加开始按钮的代码如下：

game.MyStates.start = {
	create: function() {
		//背景，飞机动画的加载
		game.add.button(70, 200, 'startbutton', this.onStartClick, this, 1, 1, 0);
	},
	
	onStartClick: function() {
		console.log('click');
	}
}

下面添加一个游戏中的场景

game.MyStates.play= {
	create: function() {
		game.add.tileSprite(0, 0, game.width, game.height, 'backgound');		//里面的资源会平铺
	}
}

上面的背景需要滚动，所以选用了tileSprite。但是上面的代码实现的是平铺的效果，如果要实现滚动效果，需要这样写：

var bg = game.add.tileSprite(0, 0, game.width, game.height, 'backgound');
bg.autoScoll(0, 20);	//水平方向不滚动，竖直方向滚动速度20

渐变动画

初始状态给飞机添加一个渐变动画

game.MyStates.play= {
	create: function() {
		game.add.tileSprite(0, 0, game.width, game.height, 'backgound');		//里面的资源会平铺
		bg.autoScoll(0, 20);	//水平方向不滚动，竖直方向滚动速度20
		var myplane = game.add.sprite(100, 100, 'myplane');
		myplane.animations.add('fly');
		myplane.animations.play('fly');
		game.add.tween(myplane).to({y: game.height - 40}, 1000, null, true);		//函数用法参考Phaser.Tween。动画效果、动画时间，简便类型（null表示默认 Phaser.Easing），自动播放
	}
}

可以给渐变动画加上一个回调函数，上述代码改写如下：

create: function() {
	//省略代码
	var tween = game.add.tween(myplane).to({y: game.height - 40}, 1000, null, true);
	tween.onComplete.add(this.onStart, this);
}

onStart: function() {
	console.log('onStart');
}

添加分数

飞机渐变动画结束之后在左上角添加分数。

onStart: function() {
	//console.log('onStart');
	var style = {font: "16px Arial", fill: "#ff0000"};
	var text = game.add.text(0, 0, "Scroe: 0", style);
}

飞机拖拽

前面加载飞机场景的时候使用的是var myplane = game.add.sprite(100, 100, 'myplane');这样是不能实现拖拽的，要改成this.myplane = game.add.sprite(100, 100, 'myplane');之后和myplane相关的语句都要加上this。然后使用phaser自带的一些函数来实现飞机的拖拽效果。

onStart: function() {
	this.myplane.inputEnabled = true;	//允许输入
	this.myplane.input.enableDrag(false);	//允许拖动
}

实现子弹

一个方法就是使用定时器实现，还可以使用粒子发射器实现。这里直接在update里面实现子弹。

onStart: function() {
	//省略
	this.myplane.myStartFire = true;	//先定义一个开火的标记。
},
update: function() {
	if(this.myplane.myStartFire) {
		var myBullet = game.add.sprite(this.myplane.x, this.myplane.y, 'mybullet');	//后面要进行物理碰撞，所以使用sprite
	}
}

接下来给整个游戏加上物理引擎

game.MyStates.play = {
	create: function() {
		game.physics.startSystem(Phaser.Phsics.ARCADE);
	},
	update: function() {
		game.physics.enable(myBullet, Phaser.Physics.ARCADE);
		myBullet.body.velocity.y = -200;
	}
}

上面的子弹发射的特别快

update:
	var now = new Date().getTime();
	if(this.myplane.myStartFire && now - this.lastBulletTime > 500) {
		//发射子弹
		this.lastBulletTime = now;
	}
onStart: function() {
	this.lastBulletTime = 0;
}

上面给子弹加物理引擎的game.physics.enable(myBullet, Phaser.Physics.ARCADE);这一句可以换成game.physics.arcade.enable(this.myBullet)
下面让飞机不超出画面

game.physics.arcade.enable(this.myplane);
this.myplane.body.collideWorldBounds= true;		//只有打开物理引擎之后才有body属性

添加敌机

this.enemy = game.add.sprite(100,10,'enemy1');
game.physics.arcade.enable(this.enemy);

给子弹创建group

onStart: function() {
	this.myBullets = game.add.group();
	this.myBullets.enableBody = true;	//给group开始物理引擎
}
update: function() {
	if(this.myplane.myStartFire && now - this.lastBulletTime > 500) {
		//发射子弹
		this.myBullets.add(myBullet);
	}
	game.physics.arcade.overlap(this.myBullets, this.enemy, this.collisionHandle, null, this);	//碰撞检测
	//game.physics.arcade.collide();可以实现碰撞效果，设置质量可以看见
}
collisionHandle: function() {
	//碰撞的回调函数
	console.log('collisionHandle');
}

击杀敌机

collisionHandle: function(enemy, bullet) {
	enemy.kill();
	bullet.kill();
}

---

以上是phaser小站的教程的第二课内容。