了解 createjs

一款HTML5游戏开发的引擎
createjs是一套可以构建丰富交互体验的HTML5游戏的开源工具包，旨在降低HTML5项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。

Createjs中包含四款工具

EaseIjs：用来处理HTML5的Canvas https://github.com/CreateJS/EaselJS
TweenJS：用来处理HTML5动画调整和javascript属性 https://github.com/CreateJS/TweenJS
SoundJS：用来帮助简化处理音频相关API https://github.com/CreateJS/SoundJS
PreloadJS：管理和协调程序加载项的类库 https://github.com/CreateJS/PreloadJS

Preloadjs例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./preloadjs/PreloadJS-master/lib/preloadjs.js"></script>
</head>
<body>
  <div>
    <img class="img" id="ball" />
    <img class="img" id="core" />
  </div>
  <script>
    var preload = new createjs.LoadQueue(false, "images/")
    console.log(preload)
    var plugin = {
      getPreloadHandlers: function(){
        console.log("AAA")
        return {
          types: ["image"],
          callback: function(loadItem) {
            const {src} = loadItem;
            console.log(src);
            var id = src.toLowerCase().split("/").pop().split(".")[0];
            var img = document.getElementById(id);
            loadItem.tag = img;
          }
        }
      }
    }
    preload.installPlugin(plugin);
    preload.loadManifest([
      "ball.png",
      "core.png"
    ])
  </script>
</body>
</html>

Easeljs 添加一个图片到画布中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./easeljs/EaselJS-master/lib/easeljs.js"></script>
  <script src="./tweenjs/TweenJS-master/lib/tweenjs.js"></script>
  <script src="./preloadjs/PreloadJS-master/lib/preloadjs.js"></script>
</head>
<body>
  <canvas id="root-canvas" style="background-color: #ccc" width="360px" height="200px">
    您的浏览器不支持canvas
  </canvas>
  <script>
    var stage = new createjs.Stage("root-canvas");
    var image = new createjs.Bitmap("./images/ball.png");
    stage.addChild(image);
    createjs.Ticker.addEventListener("tick", handleTick);
    function handleTick(event) {
        image.x += 10;
        if (image.x > stage.canvas.width) {
          image.x = 0;
        }
        stage.update();
    }
  </script>
</body>
</html>

Easeljs 添加一个容器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./easeljs/EaselJS-master/lib/easeljs.js"></script>
  <script src="./tweenjs/TweenJS-master/lib/tweenjs.js"></script>
  <script src="./preloadjs/PreloadJS-master/lib/preloadjs.js"></script>
</head>
<body>
  <canvas id="root-canvas" style="background-color: #ccc" width="360px" height="200px">
    您的浏览器不支持canvas
  </canvas>
  <script>
    var stage = new createjs.Stage("root-canvas");
    var gameView = new createjs.Container();
    var image = new createjs.Bitmap("./images/ball.png");
    stage.addChild(gameView);
    gameView.addChild(image);
    gameView.x = 10;
    gameView.y = 10;
    stage.x = -10;
    stage.y = -10;
    createjs.Ticker.addEventListener("tick", handleTick);
    function handleTick(event) {
        image.x += 10;
        if (image.x > stage.canvas.width) {
          image.x = 0;
        }
        stage.update();
    }
  </script>
</body>
</html>

例子

要开始使用绘画，创建一个舞台，把画布元素，并添加 DisplayObject 实例作为子元素。easeljs支持以下类：

使用位图的图像 Bitmap
使用图形 Shape 和图形的矢量图形 Graphics
使用雪碧图SpriteSheet和雪碧的位图动画 Sprite
实例使用简单文本 Text
容器持有其他displayobjects使用容器 Container
控制HTML DOM元素的使用 DOMElement

所有显示对象都可以添加到舞台里，或直接绘制到画布上。
用户交互
在舞台上的所有显示对象（除domelement）调用事件时，使用鼠标或触摸事件。easeljs支持悬停，按下和释放事件。以及一个易于使用的拖放和拖放模式 MouseEvent 查看更多信息事件。

npm i —save createjs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./easeljs/EaselJS-master/lib/easeljs.js"></script>
  <script src="./tweenjs/TweenJS-master/lib/tweenjs.js"></script>
 </head>
<body>
  <canvas id="root-canvas" style="background-color: #ccc" width="360px" height="200px">
    您的浏览器不支持canvas
  </canvas>
  <script src="./index.js"></script>
</body>
</html>

//创建一个舞台，得到一个参考的画布
stage = new createjs.Stage("root-canvas");
// 创建一个形状的显示对象
circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
//形状实例的设置位置
circle.x = circle.y = 50;
//添加形状实例到舞台显示列表
stage.addChild(circle);
//更新舞台将呈现下一帧
stage.update();
stage.x = 10;
stage.y = 10;
// 创建一个文本
var text = new createjs.Text("Hello easeljs", "36px Arial", "blue")
stage.addChild(text);
stage.update();
text.text = "666 Hello easeljs";
stage.update();
circle.addEventListener("click", handleClick);
circle.addEventListener("mousedown", mouseDown);
circle.addEventListener("mousemove", handleMove); // 放在这里不生效
function handleClick(event){
  console.log('stage click', event)
}
function mouseDown(event) {
  console.log('stage mousedown', event)
}
function handleMove(event) {
  onsole.log('stage mousemove', event)
}
createjs.Tween.get(circle, {loop: true})
  .wait(1000) // 等待一秒
  .to({
    scaleX: 0.2, scaleY: 0.2
  })
  .wait(1000)
  .to({
    scaleX: 1, scaleY: 1
  }, 1000, createjs.Ease.bounceInOut)
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  //圆圈向右边移动10个单位。
  circle.x += 10;
  //将导致圈转回到开始位置
  if (circle.x > stage.canvas.width) { circle.x = 0; }
  stage.update();
}

注意事项

新手写createjs时容易遇到的坑（持续更新）
新手写createjs一定会遇到很多的坑，下面我来讲下常见的坑和解决方法，大家可以经常来看看这篇文章，本人会持续更新！
1.按钮的alpha值不能为0(其中一部分透明也不行):
在做fla的时候很多人会弄一个alpha值为0的按钮放在图片上代替图片按钮点击，以减少项目的大小。但是在createjs中所有对象 alpha为0时都不受任何鼠标事件影响。不过解决起来也非常容易，alpha设为%1（0.01）就可以了（设置hitArea也可以，纯代码项目会方便）。
（注：为什么一部分透明也不可以？因为createjs的点击是根据像素判断的，如果点击的时候刚好点到这部分透明的位置，就会不触发点击）
2.项目中有使用引导层 必须在初始化中写上createjs.MotionGuidePlugin.install();
这个就不用多说了 如果项目中的动画有用到引导层 初始化的时候加上这句话就可以了。
3.项目中使用音乐时 必须在加载时写上loader.installPlugin(createjs.Sound);
这个也不多解释同上。
4.用到mouseOver事件的时候需要加一句stage.enableMouseOver();要让移动端支持createjs的点击等鼠标事件时需要加上createjs.Touch.enable(stage);