Egret学习笔记 (Egret打飞机-4.添加主角飞机和实现飞行效果)

时间：2023-12-20 23:47:26

今天继续写点击了开始之后，添加一个飞机到场景中，然后这个飞机的尾巴还在冒火的那种感觉

Egret学习笔记 (Egret打飞机-4.添加主角飞机和实现飞行效果)

先拆解一下步骤

1.首先完成飞机容器的图片加载

2.然后把容器添加到场景中

3.然后实现动画

*

-首先，我们新建一个TypeScript的类叫做HeroObject，英雄对象，哈哈，我命名水平不怎么高。然后继承自egret.DisplayObjectContainer

class HeroObject extends egret.DisplayObjectContainer {

	_textures: egret.Texture[] = [];

	_hero: egret.Bitmap;

	public constructor() {

		super();

		this.addEventListener(egret.Event.ADDED_TO_STAGE, () => {

			this._textures[0] = RES.getRes("hero1_png");

			this._textures[1] = RES.getRes("hero2_png");

			this._hero = new egret.Bitmap();

			this._hero.texture = this._textures[0];

			this.width = 100;

			this.height = 122;

			this.addChild(this._hero)

		}, this)

	}

变量_textures是用来保存两张贴图，在ADDED_TO_STAGE里面，加载两张图到_texture数组里面，然后new一个图片对象。再设置当前容器的宽高，这里的宽高我们用飞机的图片的宽高就行了，然后把图片装到当前容器里面

-然后把编写好的飞机对象添加到Main的场景里面去

//移除开始界面，然后加入其它的GameObject

this.removeChild(this.beginScene);

//开始加入Hero

this._Hero = new HeroObject();

this._Hero.Fly(100, 100)

this.addChildAt(this._Hero, 10)

上边这段代码是处理 点击开始 的点击事件，然后从Main场景中移除开始界面，并且添加飞机到界面上。

这时候，飞机就出现在Main场景的左上角了，但是上面的GIF图片是飞机的后边在喷气，看起来飞机像是在动一样，那这是怎么做到呢？

看到ADDED_TO_STAGE方法里面的加载了两张图，有机智的小伙伴肯定会想到是不是切换图片？没错，就是切换图片的视觉效果，才让飞机看起来像是在喷气飞一样。

我们先分析一下，Egret的Index.html里面的div中的data-frame-rate属性，默认是30，从官方文档中知道，egret默认是每秒30帧，我理解的意思是在理想的环境下面，每秒刷新界面30次（我也是半吊子，说错了请大家指正一下）

然后我们两张图，我们就让它大致每秒切换两次算了

_tag: number = 0;

	public frame(e: egret.Event) {

		if (this._tag >= 30) this._tag = 0;

		if (this._tag >= 15) {

			this._hero.texture = this._textures[0];

		}

		else {

			this._hero.texture = this._textures[1];

		}

		this._tag += 1;

	}

我的思路是先放一个tag计数器，每一帧，加1个数，然后小于15的话，就把第一张图给飞机显示，大于15的话，就给第二张图显示。这样大致就做到了运行起来，上边的gif图的效果了。。。（据说还有更好的实现方式，但是我也是新手，以后再说吧，先实现，再考虑优化的问题）

相关文章