CreateJS - 基于HTML5的游戏与富媒体开发

CreateJS 是基于 HTML5 的一组 JavaScript 库，可以帮助程序员轻松开发游戏和富媒体应用。CreateJS 包含了许多可在浏览器中运行的模块，如 EaselJS、TweenJS、SoundJS 等。EaselJS 是最常用的模块，它提供了一个基于帧的 Canvas API，使开发者可以轻松创建 HTML5 Canvas 应用。

安装

CreateJS 可以通过 npm 或者 CDN 进行安装。

NPM

npm install createjs

CDN

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

使用

下面是一个简单的 EaselJS demo。

<canvas id="myCanvas" width="500" height="300"></canvas>

var stage = new createjs.Stage("myCanvas");
var shape = new createjs.Shape();
shape.graphics.beginFill("DeepSkyBlue").drawRect(0, 0, 50, 50);
shape.x = 100;
shape.y = 100;
stage.addChild(shape);
stage.update();

动画

以下代码是实现一个简单的 TweenJS 动画：

createjs.Tween.get(shape, { loop: true })
  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
  .to({ alpha: 0, y: 75 }, 500, createjs.Ease.getPowInOut(2))
  .to({ alpha: 0, y: 125 }, 100)
  .to({ alpha: 1, y: 100 }, 500, createjs.Ease.getPowInOut(2))
  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

声音

以下代码是实现一个简单的 SoundJS 功能：

createjs.Sound.registerSound("myAudio.mp3", "sound");
createjs.Sound.on("fileload", function () {
  createjs.Sound.play("sound");
});

总结

CreateJS 提供了一组易于使用的 JavaScript 库，帮助开发者快速开发富媒体和游戏应用。开发者可使用 EaselJS 创建 Canvas 应用，使用 TweenJS 进行动画制作，还可以使用 SoundJS 添加音频。CreateJS 简单易用，非常适合初学者和中级开发者，欢迎体验。