まずは簡単なサンプルを通してCreateJSがどのようなものなのか確認しましょう。次のコードをHTMLファイルにコピー&ペーストして、ブラウザで開くと画面に赤い円が表示されます。
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
window.addEventListener("load", init);
function init() {
// Stageオブジェクトを作成します
var stage = new createjs.Stage("myCanvas");
// 円を作成します
var shape = new createjs.Shape();
shape.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
shape.graphics.drawCircle(0, 0, 100); //半径 100px の円を描画
shape.x = 200; // X 座標 200px の位置に配置
shape.y = 200; // Y 座標 200px の位置に配置
stage.addChild(shape); // 表示リストに追加
// Stageの描画を更新します
stage.update();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="640" height="320"></canvas>
</body>
</html>
CreateJSはHTML5のcanvas要素を利用します。canvas要素はコンテンツを表示する描画エリアとなります。canvas要素には3つの属性としてid(ID値)とwidth(幅)とheight(高さ)を最低限設定しておきましょう。
<body>
<canvas id="myCanvas" width="960" height="540"></canvas>
</body>
次にJavaScriptライブラリを読み込みます。CreateJSはJavaScriptのライブラリですが、これを読み込むことによってはじめてCreateJSが利用できるようになります。
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
具体的な処理はページの読み込みが終わってから実行させます。addEventListener()関数を使ってloadイベントが発生するのを監視させ、ページが読み込み終わったときに実行させたい関数を指定します。この関数init()の中にCreateJSのコードを書いていきます。
<script>
window.addEventListener("load", init);
function init(){
// 処理
}
</script>
ここからは関数init()の中にコードを書いていきます。まずはcreatejs.Stageクラスを使ってステージを作成します。createjs.Stageクラスの引数にはcanvas要素のid値に指定します。stage変数とは舞台と考えておくといいでしょう。
// Stageオブジェクトを作成。表示リストのルートになります。
var stage = new createjs.Stage("myCanvas");
※createjs.Stageクラスの詳しい使い方は「公式ドキュメント(英語)」を確認ください。
createjs.Shapeクラスを使って円のシェイプ(図形)を作成します。
※createjs.Shapeクラスの機能は後述で詳しく説明します。現時点ではグラフィックの描き方を理解する必要はありません。
// 円を作成します
var shape = new createjs.Shape();
shape.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
shape.graphics.drawCircle(0, 0, 100); //半径100pxの円を描画
シェイプ(図形)を作成したものの、上記のコードではプログラムの中で作成したに過ぎないので、ステージに登場させ見えるようにする必要があります。addChild()という命令はステージに登場させるために必要な命令です。
stage.addChild(shape); // 表示リストに追加
最後にCreateJSで処理した結果をcanvas要素に反映させます。stage.update()関数を使って反映させましょう。
// Stageの描画を更新
stage.update();
※update()メソッドの詳しい使い方は「公式ドキュメント(英語)」を確認ください。
これがCreateJSの簡単なサンプルです。具体的に一つずつ順番に理解していきましょう。