关闭

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

标签: html5egret游戏制作
407人阅读 评论(0) 收藏 举报
分类:

/*

使用的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大致的功能。

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:39666次
    • 积分:1063
    • 等级:
    • 排名:千里之外
    • 原创:67篇
    • 转载:8篇
    • 译文:0篇
    • 评论:9条
    最新评论