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

先拆解一下步骤

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

Egret学习笔记 (Egret打飞机-4.添加主角飞机和实现飞行效果)的更多相关文章

  1. Egret学习笔记 (Egret打飞机-5.实现子弹对象)

    上一章把飞机添加到屏幕上,但是飞机要发射子弹对吧?那么这一章我们就来实现一下发射子弹,并实现一个简单的子弹对象池 先来捋一捋思路 1.创建一个子弹对象 2.然后添加一个bitmap,显示子弹贴图 3. ...

  2. Egret学习笔记 (Egret打飞机-6.实现敌机飞起来)

    有了子弹,总得有敌人来打吧,不然游戏有啥意思呢?今天我们来实现敌机从屏幕上边往下飞 参考微信打飞机游戏里面,敌机分为3种 1是特小飞机,2是小飞机,还有一种就是大飞机 面向对象编程提倡抽象,实现代码复 ...

  3. Egret学习笔记 (Egret打飞机-3.实现背景循环滚动)

    游戏背景里面的猪脚飞机看起来是一直在向前飞,但是实际上只是一个视觉差而已. 猪脚是出于不动的状态,背景从上到下滚动,然后让玩家觉得飞机在不停的往前飞.(当然这只是其中一种实现思路) 差不多就是这样,然 ...

  4. Egret学习笔记 (Egret打飞机-9.子弹对敌机和主角的碰撞)

    运行起来,虽然主角飞机和敌机都在互相发射子弹,但是子弹打中了就和没打中效果是一样的.. 这一章我们就来处理子弹和飞机的碰撞问题. 我们所有的操作都是基于Main这个容器来做的.所以我就把这个处理放到M ...

  5. Egret学习笔记 (Egret打飞机-8.敌机和主角飞机发射子弹)

    经过前面几章的准备,我们差不多已经具备了一个基本的框架,这一章我们就开始添砖加瓦了. 敌机定时发射一个子弹,子弹的方向是从上到下,但是发射子弹的代码应该放在哪儿呢? 从面向对象编程的思想来说,子弹是敌 ...

  6. Egret学习笔记 (Egret打飞机-7.实现敌机工厂)

    在游戏过程之,敌机是源源不断的冲屏幕上方往下飞,如果我们每一架敌机都直接new的话,在飞机很多的情况下,也许有性能问题. 就像前面子弹对象池一样,我们也要实现一个飞机对象池,也就是标题说的敌机工厂(之 ...

  7. Egret学习笔记 (Egret打飞机-2.开始游戏)

    打开 Egret Wing,新建一个Egret游戏项目,然后删掉默认生成的createGameScene方法里面的东西 然后新建一个BeginScene.ts的文件,作为我们的游戏的第一个场景 cla ...

  8. Egret学习笔记 (Egret打飞机-1.大致思路)

    大致看了一遍Egret的官方文档,就开始打算使用Egret来开发一个打飞机游戏. 首先来捋一捋思路,先来看一看一个打飞机游戏的图片 基本上一个打飞机游戏分为 开始游戏   ----------进入游戏 ...

  9. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

随机推荐

  1. int指令

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  2. Javascript学习--时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. Docker部署Elasticsearch集群

    http://blog.sina.com.cn/s/blog_8ea8e9d50102wwik.html Docker部署Elasticsearch集群 参考文档: https://hub.docke ...

  4. 关于今天esp8266运行失控问题和oled与串口共存尝试成功的总结

    今天2017-12-1720:24:22下午esp8266再次无法刷入固件,导致我一度崩溃,本来已经认为esp8266已经相当稳定了,没想到今天又运行出错,总结如下 今天2017-12-17esp无法 ...

  5. python_如何修改装饰器中参数?

    案例: 为分析程序内哪些函数执行时间开销较大,我们需定义一个带timeout参数的装饰器 需求: 统计被装饰函数的运行时间 时间大于timeout时,将此次函数调用记录到log日志中 运行时可以修改t ...

  6. Java虚拟机栈和本地方法栈

    Java虚拟机栈的特征 线程私有 后进先出(LIFO)栈 存储栈帧,支持Java方法的调用.执行和退出 可能出现OutOfMemoryError异常和StackOverflowError异常 Java ...

  7. 错误:Unsupported major.minor version 51.0的解决

    问题: 在电脑上双击打开一个可执行的jar时报错:Unsupported major.minor version 51.0.原因是版本问题,该jar使用jdk1.7编译,而我电脑装的是jdk1.6. ...

  8. rpm命令的使用

    如果服务器配置了本地yum源,大部分的常用软件包都是有的.如果差了头文件或者什么so文件,可以按如下方式找:#以memory.h为例 [root@sz-cdn-centos7-1 tmp]# wher ...

  9. disptch_after 自递归

    NSArray *arr = @[@"1", @"2", @"3", @"4", @"5"];    ...

  10. Win和Linux查看端口和杀死进程

    title: Win和Linux查看端口和杀死进程 date: 2017-7-30 tags: null categories: Linux --- 本文介绍Windows和Linux下查看端口和杀死 ...