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

简介: 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图的效果了。。。(据说还有更好的实现方式,但是我也是新手,以后再说吧,先实现,再考虑优化的问题)

目录
相关文章
|
10月前
|
网络协议 自动驾驶 物联网
计算机网络的发展
本文概述了计算机网络从20世纪60年代的雏形到现代互联网的发展历程,包括ARPANET的创建、TCP/IP协议的标准化、DNS系统的引入、万维网的诞生、宽带和无线网络的兴起,以及移动互联网、云计算、物联网、区块链和自动驾驶技术的最新进展。
460 1
|
Web App开发 测试技术 API
Web自动化测试框架(基础篇)--Selenium WebDriver工作原理和环境搭建
本文详细介绍了Selenium WebDriver的工作原理,包括其架构、通信机制及支持的浏览器,并指导读者如何在Python环境下搭建Selenium WebDriver的测试环境,从安装Python和Selenium库到编写并运行第一个自动化测试脚本。
619 0
|
12月前
|
存储 数据可视化 数据挖掘
揭秘!Matplotlib与Seaborn联手,如何让Python数据分析结果一目了然,惊艳全场?
在数据驱动时代,高效直观地展示分析结果至关重要。Python中的Matplotlib与Seaborn是两大可视化工具,结合使用可生成美观且具洞察力的图表。本文通过分析某电商平台的商品销量数据集,展示了如何利用这两个库揭示商品类别与月份间的销售关系及价格对销量的影响。首先使用Matplotlib绘制月份销量分布直方图,再借助Seaborn的箱线图进一步探索不同类别和价格区间下的销量稳定性。
178 10
|
机器学习/深度学习 人工智能 安全
Java 在生活中的 10 大应用
Java 在生活中的 10 大应用
448 0
|
机器学习/深度学习 Java
【数组的使用】
【数组的使用】
80 0
阿里Java高级岗中间件二面:GC+IO+JVM+多线程+Redis+数据库+源码
虽然“钱多、事少、离家近”的工作可能离技术人比较远,但是找到一份合适的工作,其实并不像想象中那么难。但是,有些技术人确实是认真努力工作,但在面试时表现出的能力水平却不足以通过面试,或拿到高薪,其实不外乎以下 2 个原因:
|
6天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1151 3
|
5天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
758 11
|
15天前
|
人工智能 运维 安全