「CreateJS」は、リッチコンテンツを制作するためのJavaScriptライブラリです（参考記事「CreateJS入門サイト - ICS MEDIA」）。リッチコンテンツ作成には便利なものの、ES Moduleに対応していないのがネックでしたが、次期バージョン2.0でES Moduleに対応します。その使い方とwebpackによるバンドル方法についてまとめました。
使用準備
まずはプロジェクトを初期化します。
プロジェクトの初期化コマンド
npm init -y
続いて、ES Moduleに対応したCreateJS 2.0のパッケージ「@createjs/easeljs」、「@createjs/tweenjs」をインストールします。
CreateJSのインストールコマンド
npm i @createjs/easeljs @createjs/tweenjs
バンドル用にwebpackをインストールします。
webpackのインストールコマンド
npm i -D webpack webpack-cli
インストール手順に不明であれば、次を参照ください
- webpackのインストール手順：webpack 4入門 - ICS MEDIA
-
-yや-Dなど：GulpやSassを使う時に覚えて幸せになったnpmの便利な使い方
CreateJS系のモジュールをimport
webpackでStageやTweenなどを読み込む場合は、次のようにします。
JavaScript
// EaselJS系の読み込み
import { Shape, Stage } from '@createjs/easeljs/dist/easeljs.module';
// TweenJS系の読み込み
import { Tween } from '@createjs/tweenjs/dist/tweenjs.module';
サンプルコードとバンドル
「CreateJS でのトゥイーンの作成方法 - ICS MEDIA」のデモを元に、CreateJSのES Moduleを使って簡単なデモを作りました。
JavaScript
// EaselJS系の読み込み
import { Shape, Stage } from '@createjs/easeljs/dist/easeljs.module';
// TweenJS系の読み込み
import { Tween } from '@createjs/tweenjs/dist/tweenjs.module';
const stage = new Stage('myCanvas');
const circle = new Shape();
circle.graphics.beginFill('DarkRed').drawCircle(0, 0, 50);
stage.addChild(circle);
circle.x = 300;
circle.y = 200;
Tween.get(circle, {loop: true})
.wait(300)
.to({x: 740, y: 400, scale: 2}, 700)
.to({x: 400, y: 0, scale: 1.4}, 1200)
.to({x: 500, y: 300, scale: 3}, 1200)
.to({x: 300, y: 200, scale: 1}, 700);
update();
// 毎フレームステージを自動更新する
function update() {
stage.update();
requestAnimationFrame(() => update());
}
webpackを用いてバンドルします（参考記事「設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみる - Qiita」）。
バンドルコマンド
npx webpack --mode production
デモが動作している様子
バンドルが成功し、デモが動作している様子がこちらです。
ソースファイルはこちらにアップロードしました。
最後に
CreateJSのES Module対応は長らく待ち望んでいた機能でした。早く正式リリースされますように。
なお、本エントリーにおけるCreateJSモジュールの確認バージョンは次のとおりです。
確認バージョン
- @createjs/easeljs: 2.0.0-beta.2
- @createjs/tweenjs: 2.0.0-beta.1