博客
关于我
Egret学习笔记 (Egret打飞机-4.添加主角飞机和实现飞行效果)
阅读量:415 次
发布时间:2019-03-06

本文共 1628 字,大约阅读时间需要 5 分钟。

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

先拆解一下步骤

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的场景里面去

//移除开始界面,然后加入其它的GameObjectthis.removeChild(this.beginScene);//开始加入Herothis._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图的效果了。。。(据说还有更好的实现方式,但是我也是新手,以后再说吧,先实现,再考虑优化的问题)

转载地址:http://ortkz.baihongyu.com/

你可能感兴趣的文章
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>
mysql8.0新特性-自增变量的持久化
查看>>