CreateJS自学教程基础 - 位图与位图动画

时间：2024-03-12 18:37:25

 HTML5游戏引擎开发- CreateJS自学教程 - 位图与位图动画

   在游戏的开发过程中，我们经常需要进行贴图，比如场景、人物、甚至特效等等，都有可能要用到位图，标准的Canvas接口中有提供贴图功能（drawImage），CreateJS对它进行了一些简单的封装，下面我们从一些简单的例子中了解它的用法：

  1. // 加载图片
  2. var img = new Image();
  3. img.onload = handleImageLoad;
  4. img.src = "http://xc.uc.cn/bbs/static/image/xcstyle/logo.png";

  6. function handleImageLoad() {
  7.    //云软件：www.misoft.com.cn
  8.     var canvas = new Canvas();
  9.     var stage = new createjs.Stage(canvas);
  10.     // 创建位图示例
  11.     var bmp = new createjs.Bitmap(img);
  12.    
  13.     // 把位图添加到场景
  14.     stage.addChild(bmp);
  15.     // 渲染位图
  16.     stage.update();
  17. }
复制代码

上面的例子比较简单，就不做详述了。

    我们这里主要介绍位图的另一个主要使用场景——位图动画，在这里，需要先解释另一个概念——图片精灵/精灵表单（SpriteSheet），什么是精灵表单？

    通俗点来讲，一个精灵表单就是一系列的图片（通常是动画帧），组合到一张大图片中（或许多张图片）。例如，一个动画由 8 张 100x100 的图片组成，就会组合成一个 400 x 200 的精灵表单。用一张图片来表示或者会更好理解：



    上面就是一张精灵表单，如果你需要在CreateJS上播放这个表单，你还需要一段数据：

  1. {"images": ["Smoke.png"], "animations": {"jump": [10, 19], "boom": [0, 9]}, "frames": {"height": 94, "regX": 0, "count": 20, "regY": 0, "width": 96}}
复制代码

CreateJS提供了一个很方便的工具——（下载地址），它可以把swf转为你所需要的精灵表单，并生成以上这段JSON数据，让你可以很方便地在你的代码中进行调用。下面我们来了解一下它的具体操作：

    假设我们已经下载并安装好Zoë，并且已经在Flash上导出了一份swf文件



    点击蓝色圈圈这个按钮，导入你所输出的swf文件



    在图中“Output”的地方选择好精灵表单和JSON数据的输出位置，然后点击右上角的“Export”按钮，这样就大功告成了，如果你还有不明白，请查看具体的官方教程。

    待我们生成好表单和数据之后，我们需要在代码里面运行起来：

  1. var canvas = new Canvas();
  2. var stage = new createjs.Stage(canvas);

  4. // 定义一个图片精灵，注：这个数据是Zoë导出的。
  5. //云软件：www.misoft.com.cn
  6. var ss = new createjs.SpriteSheet({
  7.     "images": ["Smoke.png"],
  8.     "animations": {
  9.         "jump": [10, 19],
  10.         "boom": [0, 9]
  11.     },
  12.     "frames": {
  13.         "height": 94,
  14.         "regX": 0,
  15.         "count": 20,
  16.         "regY": 0,
  17.         "width": 96
  18.     }
  19. });

  21. // 创建一个位图动画的实例
  22. var grant = new createjs.BitmapAnimation(ss);
  23. grant.x = 50;
  24. grant.y = 50;
  25. grant.gotoAndPlay("jump");
  26. // 把它添加到场景上
  27. stage.addChild(grant);
  28. stage.update();
复制代码

这样就完成位图动画的创建和播放了。

相关文章