CreateJS之入门

一、概况

1. 概念简介

CreateJS是基于HTML5开发的一套模块化的库和工具，基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。历史可以追溯到7年前 flash 使用慢慢变少那个时代，gskinner 开发它作为“下一代”的富交互的工具库，Adobbe、微软、火狐官方资助的一个项目，API 在很多地方和 Flash 是很像，同时可以通过Adobe Animate CC（替代 flash）直接导出Canvas在Web中使用。

2. 模块组成

CreateJS 提供的 4 个模块可以帮助处理游戏开发中常见操作：

EaselJS：用于位图、图形、Sprites、文本的绘制，还包含 Ticker 定时器
TweenJS：用来创建补间动画效果
PreloadJS：游戏资源的预加载和管理，包括图片、音频、json等资源
SoundJS：播放和处理音频

3. 更好使用

目前官方版本的 createjs 不支持通过 npm 方式的使用，导致在 ES6 开发中，需要在 html 中手动引入一个 <script> 标签才可以使用，对模块化开发不方便。

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

createjs-npm 通过 imports-loader、exports-loader 对官方库加了一层胶水，让大家可以向使用 npm 包方式一样使用，具体为：

// 安装后和官方 createjs 1.0 使用一致
npm install createjs-npm -S

// 引入全部模块
import createjs from 'createjs-npm';

// 只引入单个模块（xx 可以是 easel、preload、tween、sound）
import createjs from 'createjs-npm/lib/xx';

二、官网

1.createjs首页：https://createjs.com/

首页有几个tab页，有EASEJS、TweenJS、SoundJS、PrloadJS、ZOE五种.(最新的官网好像没有ZOE的tab页了，不过在http://createjs.com/downloads下载页面的最下面还是可以找到下载的。)

EASEJS：用来处理HTML5的canvas
TWEENJS：用来处理HTML5的动画调整和javascript属性
SOUNDJS：用来帮助简化处理音频相关的API
PRELOADJS：管理和协调程序加载项的类库
ZOE：将SWF动画导出为EaseIJS的sprite的工具

基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。运行环境请使用Safari, Chrome, Firefox 或者 IE 9+ 。

2.下载页解析：https://createjs.com/downloads

3.帮助文档：https://createjs.com/docs

帮助文档里有很多类的介绍，还有对应类的方法、属性、事件的介绍。不过是英文版本的，暂时还没有找到比较好的中文的版本。

三、使用

1. EaselJS 的使用

EaselJS 在 Createjs 中承担画的能力，比如说你要画图片、画图形、画帧动画、画文字可以使用它的 API 实现。

步骤

比如说你需要在画一个红色的圆，必含步骤为创建舞台->创建对象->设置对象属性->添加对象到舞台->更新舞台呈现下一帧：

//创建一个舞台，得到一个参考的画布
const stage = new createjs.Stage("myCanvas");
//创建一个形状的显示对象
const circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40);
//形状实例的设置位置
circle.x = circle.y = 50;
//添加形状实例到舞台显示列表
stage.addChild(circle);
//更新舞台将呈现下一帧
stage.update();

上述代码的效果为：

👀 Graphics 类：
在上面Demo中，我们创建了一个 Shape，这里其实是创建了一块画布，同时假如需要在画布上面画东西，就需要使用Graphics类了。可以在 Graphics 上面设置很多样式，或者调用绘图方法来画其他的图形，同时Graphics类里的所有绘图方法都会返回一个graphics实例，这里使用链式操作会很方便。

EaselJS 元素

上面说过，EaselJS 可以用来画图片、图形、动画帧、文字这类型的元素，对应是 Bitmap、Shape、Sprite、Text 这几个。具体使用为：

// 使用 Bitmap 来表示图片
const bitmap = new createjs.Bitmap("imagePath.jpg");

// 使用 Shape 结合 Graphics 来表示图形
 const shape = new createjs.Shape();
 shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);

// 使用 Sprite 来表示精灵动画（后面详细介绍）
const instance = new createjs.Sprite(spriteSheet);
instance.gotoAndStop("frameName"); 

// 使用 Text 来表示文字
const text = new createjs.Text("How are you", "20px Arial", "#000000");

Sprite（精灵动画）

这个特性会让第一次接触的同学高兴起来，很方便使用，同时实现效果很棒，比如说需要实现一个绅士走路的样子：

其中 spriteSheet 逻辑如下：

const spriteSheet = new createjs.SpriteSheet({
    images: ["https://img.alicdn.com/tfs/TB1vMy8EeuSBuNjy1XcXXcYjFXa-2048-512.png"],
    frames: {
        height: 256,
        width: 128,
        regX: 0,
        regY: 0,
        count: 26
    },
    animations: {
        walk: [0, 25],
    },
});
const sprite = new createjs.Sprite(spriteSheet);
sprite.gotoAndPlay("walk");

2. TweenJS 的使用

从上面可以看到，EaselJS 其实可以处理 CreateJS 开发中很多的事情，其他三项可以当做辅助工具，让开发更便捷。

TweenJS 在这里充当着“动”的能力，同时它也可以单独使用，支持数字对象属性和CSS样式属性，是一个很强大的补间动画功能库。

案例

比如说以下这个很经典的动画例子：

其中 Tween 的逻辑为：

createjs.Tween.get(circle, { loop: true})
    .wait(300)
    .to({ x: canvas.width - circle.r*2},speed,createjs.Ease.circOut)
    .to({ y: canvas.height - circle.r*2},speed,createjs.Ease.circOut)
    .to({ x: 0},speed,createjs.Ease.circOut)
    .to({ y: 0},speed,createjs.Ease.circOut)
    .call(()=>{console.log('handleComplete')});

3. PreloadJS 的使用

PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源。

它主要是使用 LoadQueue 类来管理加载内容的，在游戏中很常见的场景是预加载图片资源和游戏音乐。

案例

屏幕中可以看到处理后的图片加载出来，同时在播放着背景音乐：

其中预加载逻辑如下：

const canvas = document.getElementById("canvas");
const stage = new createjs.Stage(canvas);

const queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.Sound);
createjs.Sound.alternateExtensions = ["mp3"];

queue.loadManifest([
  {
    id: "bgImg",
    src: "//img.alicdn.com/tfs/TB1EENFADtYBeNjy1XdXXXXyVXa-528-691.png"
  },
  {
    id: "bgMusic",
    src: "//gw.alipayobjects.com/os/rmsportal/YwASPsDMOPusAzZVdLuS.mp3"
  }
]);

queue.on("complete", handleComplete, this);

function handleComplete() {
  const bg = new createjs.Bitmap(queue.getResult("bgImg"));
  stage.addChild(bg);
  stage.update();
  createjs.Sound.play("bgMusic");
}

4. SoundJS 的使用

一个小游戏要想互动性比较好，背景音乐是必不可少少的，可以选择一些轻松活泼的，需要使用SoundJS来“放音乐”，同时具备完善的兼容处理。

Sound 类

音频管理主要使用 Sound 类，有如下功能：

Sound.registerSound：注册播放的音频，registerSounds 支持多个音频，同时在音频播放前的需要提前注册（此处的加载其实也可用preload弄）
Sound.registerPlugins：注册音频播放插件，一般用于不兼容的低浏览器场景，可以注册来兼容 WebAudioPlugin 或者 HTMLAudioPlugin
Sound.play: 播放音频，一般是createjs.Sound.play(id)

AbstractSoundInstance 播放实例类

当我们调用 Sound.play API时候其实就创建了一个AbstractSoundInstance 类，创建好后，我们可以通过它来直接控制音频的播放或者其他操作，同时可以监听其播放状态：

const myInstance = createjs.Sound.play("myAssetPath/mySrcFile.mp3");

// 属性控制，实际中选择需要的属性设置就好
// 属性同时以对象方式可以加到play第二个参数
myInstance.volume = 0.5;
myInstance.paused = false; // 控制音乐暂停否
myInstance.loop = true;  // 循环播放
myInstance.duration = 30;  //播放时长

// 监听状态，常用于错误时候，重新播放
myInstance.on("complete", handleComplete);
myInstance.on("loop", handleLoop);
myInstance.on("failed", handleFailed);

四、总结

CreateJS 的特性应该不止上述这些，更多的需要在实际项目中使用，通过各种游戏场景可以发掘很多有趣的使用。

posted on 2024-08-29 11:42 梁飞宇阅读(231) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇