HTML5游戏制作之路_04_来做个动画吧

原创 2015年11月19日 02:51:30

/*

使用的egret版本:2.5

编辑器采用webstrom

*/

通过上一篇03成功可以加载资源,这一篇我们在上一篇的基础上,通过位图来搞一个动画。

如果想参看注释请回到上一篇。

直接上代码,新内容的注释在里面:

/**
 * Created by 13641 on 2015/11/19.
 */
/**
 * Created by 13641 on 2015/11/19.
 */
class BitmapAnimation extends egret.DisplayObjectContainer{
    private logo:egret.Bitmap;
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.MainClass, this);
    }
    public MainClass():void{
        //调用
        this.loadResources();
    }

    /**
     * 资源加载方法,只是加载,并不会显示
     * 就像把豆子放进盒子里管理,我们想看到要从盒子里吧豆子拿出来
     */
    private loadResources():void{
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onRemoveFromStage,this);
        RES.loadConfig("resource/default.res.json","resource/");
        RES.loadGroup("bitmap");
    }


    /**
     * 定义回调函数,资源加载完成后加载图片
     * @param event :回调函数事件
     */
    private onRemoveFromStage(event:RES.ResourceEvent):void{
        this.logo = new egret.Bitmap();
        this.logo.texture = RES.getRes("egretIcon");
        this.addChild(this.logo);

        //调用动画函数
        this.bitmapAnimaiton();
    }

    private bitmapAnimaiton():void{
        //Tween这个类有大量的动画,继承自事件分发
        var mytween = egret.Tween.get(this.logo);
        //位图在500毫秒内,移动到(280,0)的位置
        mytween.to({x:280,y:0},500).to({x:280,y:300},500).to({x:0,y:300},500).to({x:0,y:0},500);
        //当上面动画全部结束,我们会再次执行这个动画,当然我们也可以调用别的动画函数
        mytween.call(this.bitmapAnimaiton,this);
    }
}
tween让我想起了unity中的各种tween插件,效果远比egret动画api强大,呵呵。
改变index.html指定类

编译

结果成功。因为是动图,不发了。
对于2d游戏,主要是对于图像的操作,希望看客们能花几分钟看下tween这个类的api大致的功能。

下一节说下位图的属性和操作。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Tv开发初体验 焦点移动

开发tv项目 与传统app项目的差别其中之一是焦点问题控制,今天就错略说下焦点控制问题,传统app 项目 在做事件触发一般是通过点击和触摸。但是Tv开发由于一般的电视都是要通过遥控器来控制,所以tv项...

号外,号外,《React Native移动开发实战》出版啦

对不起,我来晚了首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助。感谢,再次感谢!!! ...

HTML5游戏制作之路_09_2D骨骼动画工具DragonBone

/* 我目前使用的egret版本为2.5 */ DragonBone是制作动画或骨骼动画的工具,具体使用教程地址:DragonBone 很简单很暴力,省去了大量的时间。 我在这里主要介绍如何使用Dra...

HTML5游戏制作之路_08_egret对于声音的控制

/* egret版本:2.5 */ 一.点击发声 /** * 这是使用RES方法加载。 * Created by 13641 on 2015/11/19. */ class So...

HTML5游戏制作之路_07_egret的声音播放的三种方式

/* 我目前使用的版本是egret2.5 */ egret支持的声音格式是mp3.获取资源的方式和之前的一样。 1. 使用URLLoader方式加载 /** * 这是使用URL方法加载...

HTML5游戏制作之路_06_egret关于精灵表单spritesheet

/* 采用位图的版本:2.5 采用的编辑器webstrom */ 精灵表单就是将很多图片合成在一张图片中,然后 我们可以获取其中的任何一张图,这样做可以加快游戏的图片加载,类似于unity‘中的图集,...

HTML5游戏制作之路_03_egret的资源加载机制

/* 前一篇的链接: 使用的egret版本为2.5 */ h5支持矢量图(目测),自带的那个例子可以自由缩放,可以自适应(这让我很爽)。在egret里面叫bitmap(位图)实际上这个名称并不...

HTML5游戏制作之路_02_剖析项目目录结构&&在浏览器中输出helloworld

/* 上一篇:h5游戏制作之路1 声明: 使用的egret游戏引擎版本为2.5. 编辑器用的webstrom */ 复习一下新建一个工程: 1.打开node.js的cmd 2....

HTML5游戏制作之路_06_egret文本及相关属性

一.创建文本 显示结果: 二.添加一些属性 三.绘制矩形并添加文字描边 /** * Created by 13641 on 2015/11/19. */ class Textt...

HTML5游戏制作之路_01_白鹭引擎&&相关必要的配置安装&&创建第一个H5项目

/* html5相关的信息我都不想说了,没写过网页,新接触,搞游戏直接从引擎入手吧,也有兴趣,以后有机会慢慢往底层走。 */ 一. 白鹭引擎官网:http://www.egret-labs.org/ ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏制作之路_04_来做个动画吧
举报原因:
原因补充:

(最多只允许输入30个字)