23
2015
01

(六)createjs-Sprite

基础的都学习了,接下来就是中级的了。

学习as的时候,最开始都是用MovieCLip,然后水平提高一点,用的最多的就是Sprite了,为了效率。

createjs里边的Sprite相当于as里边的MovieClip,有stop/play/gotoAndStop/gotoAndPlay等方法。

先看代码:

  1. //创建stage,参数为canvas的id

  2. var stage=new createjs.Stage("gameMain");

  3. createjs.Ticker.setFPS(6);

  4. createjs.Ticker.addEventListener("tick", tick);

  5. function tick(event){

  6.                 stage.update();//需要tick,然后自己update,才能刷新显示。

  7.             }

  8. //Sprite相当于MovieClip,而MovieClip只是作为工具或扩展来用的,步包含在Easejs的主文件里边.所以暂时不研究 。

  9. //测试时一定要在服务器环境,否则可能会报跨域的错误。canvas本身也是如此。

  10. //创建一个spriteSheet;具体参数可以看api,真正用到再学。

  11. var data = {

  12. images: ["1.png"],

  13. frames: {width:50, height:50},

  14. animations: {

  15. stand:0,

  16. run:[6,11,"jump"],

  17. jump:[12,23,"run"]

  18. }

  19. };

  20. var spriteSheet = new createjs.SpriteSheet(data);

  21. //创建一个Sprite

  22. var sp=new createjs.Sprite(spriteSheet,"run");//定义:Sprite(spriteSheet, frameOrAnimation)

  23. //设置显示元件的位置

  24. sp.x=10;

  25. sp.y=10;

  26. //添加到显示列表

  27. stage.addChild(sp);

  28. var isPlaying=true;

  29. stage.addEventListener("click",clickHandler);

  30. function clickHandler(){

  31. isPlaying=!isPlaying;

  32. isPlaying?sp.play():sp.stop();

  33. }

上面的例子用Sprite创建了一个帧动画,可以通过鼠标点击动画区域控制播放暂停。

创建Sprite需要先创建一个SpriteSheet,SpriteSheet不熟悉,可以看看API,一边用一边学就行。

as里边很多时候Sprite都是作为容器来使用的,createjs里边就不是了,有专门的容器。Sprite作为as里的MovieClip来用。


点击查看实例

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。