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

/*

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

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