网站地图    收藏   

主页 > canvas引擎 > Phaser游戏引擎 >

Phaser飞机大战讲义(二)

来源:未知    时间:2020-01-27 20:53 作者:xxadmin 阅读:

[导读] 作者:channingbreeze 日期:2017-03-12 Phaser实战系列教程第二课,以飞机大战为素材,讲述了Phaser中精灵的使用,定位技巧,逐帧动画和渐变动画的使用技巧,介绍了Phaser中的物理引擎,详...


作者:channingbreeze

日期:2017-03-12

Phaser实战系列教程第二课,以飞机大战为素材,讲述了Phaser中精灵的使用,定位技巧,逐帧动画和渐变动画的使用技巧,介绍了Phaser中的物理引擎,详细讲述了Arcade,最后介绍了Group的用法和技巧!






目录:

l  精灵、按钮、定位、拖动

l  逐帧动画和渐变动画

l  Arcade物理引擎

l  Group的用法

 

Phaser游戏中的精灵

Imagegame.add.image,可以旋转,缩放,裁剪,响应输入,但是没有物理属性和动画效果。

Spritegame.add.sprite,可以旋转,缩放,裁剪,有物理属性,可以响应输入,添加动画以及和相机之间交互。

TileSpritegame.add.tileSprite,纹理平铺,主要用来做背景,背景滚动等。

调用原型:game.add.tileSprite(x, y, width, height, key)

Buttongame.add.button,按钮。

调用原型:game.add.button(x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame)

最后四个参数分别是,hover时,鼠标在button外时,鼠标按下button时,鼠标抬起时的帧索引,例如:

game.add.button(30, 300, 'replaybutton', this.onReplayClick, this, 0, 0, 1);

精灵定位,我们推荐尽量使用相对定位,比如:

game.add.image(12, game.height - 16, 'copyright');

位于游戏区域底部,我们用game.height – 16,是相对于整个游戏进行定位。

飞机的拖动处理,十分简单,只需要两句代码:

this.myplane.inputEnabled = true;

this.myplane.input.enableDrag(false);

 

逐帧动画和渐变动画

逐帧动画的使用示例:

this.myplane = game.add.sprite(100, 100, 'myplane');

this.myplane.animations.add('fly');

this.myplane.animations.play('fly', 12, true);

注意,这里我的飞机资源是下图

image.png

而且加载的时候,用的是spritesheet

game.load.spritesheet('myplane', 'assets/myplane.png', 40, 40, 4);

所以在制作逐帧动画的时候就非常简单。

如果要让精灵停在某一帧,只需要设置它的frameplayer.frame = 4;

animations.add还有一些其他参数,可以参考文档

渐变动画的使用示例:

game.add.tween(this.myplane).to({y: game.height - 40}, 1000, Phaser.Easing.Sinusoidal.InOut, true);

tween动画的本质,其实是用某一个函数去改变一个数值,先看文档:

例子中,它改变的就是this.myplane.y的值,把它以一种渐变的方式变成了game.height – 40

还可以在动画完成之后,去执行自己的回调,比如:

anim.onComplete.add(this.gotoOver, this);

 

物理引擎

Arcade:最简单,只能进行矩形碰撞,效率最高

Ninja:比Arcade好点,比P2差点

P2:可以实现复杂碰撞,功能全面

这次我们先介绍Arcade

首先,开启物理系统,game.physics.startSystem(Phaser.Physics.ARCADE);

然后,开启一个精灵的物理属性,game.physics.arcade.enable(this.myplane);

或者开启一个组的物理属性:

this.mybullets = game.add.group();

this.mybullets.enableBody = true;

最后,我们在update中进行碰撞检测:

只检测不进行碰撞

game.physics.arcade.overlap(this.mybullets, this.enemy1.enemys, this.enemy1.hitEnemy, null, this.enemy1);

或者进行碰撞

game.physics.arcade.collide(stars, platforms);

可以精灵与精灵碰,可以精灵与组碰,可以组与组碰,还可以组内碰撞。

 

Group的使用

为什么要用组?在这个案例中,我们是为了方便我们的碰撞检测,更是为了使用对象池的思想进行资源的重复利用。

创建组,game.add.group();

批量设置组内元素属性:

this.mybullets.setAll('outOfBoundsKill', true);

this.mybullets.setAll('checkWorldBounds', true);

饿汉式:一次创建足够多的元素

this.mybullets.createMultiple(50, 'mybullet');

懒汉式:用的时候从group中取,如果取不到,再新建一个,放入group

var enemy = this.groups["enemy"].getFirstExists(false);
if(!enemy) {
  enemy = new GameTank.Enemy(this, position, 'enemy', 'enemy', {
    speed: (tankType == 1) ? 200 : 100,
    award: award,
    type: tankType
  });
} else {
  enemy.rebirth(position, {
    speed: (tankType == 1) ? 200 : 100,
    award: award,
    type: tankType
  });
}


转载请注明出处:http://www.phaser-china.com/tutorial-detail-11.html

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论