基础的都学习了,接下来就是中级的了。
学习as的时候,最开始都是用MovieCLip,然后水平提高一点,用的最多的就是Sprite了,为了效率。
createjs里边的Sprite相当于as里边的MovieClip,有stop/play/gotoAndStop/gotoAndPlay等方法。
先看代码:
//创建stage,参数为canvas的id
var stage=new createjs.Stage("gameMain");
createjs.Ticker.setFPS(6);
createjs.Ticker.addEventListener("tick", tick);
function tick(event){
stage.update();//需要tick,然后自己update,才能刷新显示。
}
//Sprite相当于MovieClip,而MovieClip只是作为工具或扩展来用的,步包含在Easejs的主文件里边.所以暂时不研究 。
//测试时一定要在服务器环境,否则可能会报跨域的错误。canvas本身也是如此。
//创建一个spriteSheet;具体参数可以看api,真正用到再学。
var data = {
images: ["1.png"],
frames: {width:50, height:50},
animations: {
stand:0,
run:[6,11,"jump"],
jump:[12,23,"run"]
}
};
var spriteSheet = new createjs.SpriteSheet(data);
//创建一个Sprite
var sp=new createjs.Sprite(spriteSheet,"run");//定义:Sprite(spriteSheet, frameOrAnimation)
//设置显示元件的位置
sp.x=10;
sp.y=10;
//添加到显示列表
stage.addChild(sp);
var isPlaying=true;
stage.addEventListener("click",clickHandler);
function clickHandler(){
isPlaying=!isPlaying;
isPlaying?sp.play():sp.stop();
}
上面的例子用Sprite创建了一个帧动画,可以通过鼠标点击动画区域控制播放暂停。
创建Sprite需要先创建一个SpriteSheet,SpriteSheet不熟悉,可以看看API,一边用一边学就行。
as里边很多时候Sprite都是作为容器来使用的,createjs里边就不是了,有专门的容器。Sprite作为as里的MovieClip来用。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。