前回の記事はこちら↓
トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1
===
前回はオブジェクトを生成してアニメーションさせるところまでを記事にしましたが、実際に使用するにはもっとたくさんのオブジェクトが必要で、複雑なアニメーションが求められると思います。では、複数のオブジェクトを作るにはどうするか。今回はそちらを書いていきたいと思います。
目次
単純にオブジェクトを複数作ると…
まずオブジェクトを1つ作る場合はこうでしたね。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); //オブジェクトの生成：0個め var obj = new createjs.Shape(); //オブジェクト「obj」を生成 obj.graphics.beginFill("#FF0000").drawCircle(0, 0, 30); //objの色指定・サイズとカタチを指定 obj.x = 40; //objのx座標 obj.y = 100; //objのy座標 //★オブジェクトをmyCanvasに配置 stage.addChild(obj); //stageの描画を更新 stage.update(); } |
単純にちょっと増やすだけであれば、「オブジェクトの生成」「myCanvasに配置」の処理を増やせば簡単です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); //オブジェクトの生成：0個め var obj0 = new createjs.Shape(); //オブジェクト「obj」を生成 obj0.graphics.beginFill("#FF0000").drawCircle(0, 0, 30); //objの色指定・サイズとカタチを指定 obj0.x = 40; //objのx座標 obj0.y = 100; //objのy座標 stage.addChild(obj0); //★オブジェクトをmyCanvasに配置 //オブジェクトの生成：1個目 var obj1 = new createjs.Shape(); obj1.graphics.beginFill("#000000").drawCircle(0, 0, 30); obj1.x = 120; obj1.y = 100; stage.addChild(obj1); //オブジェクトの生成：2個目 var obj2 = new createjs.Shape(); obj2.graphics.beginFill("#FFF000").drawCircle(0, 0, 30); obj2.x = 200; obj2.y = 100; stage.addChild(obj2); //stageの描画を更新 stage.update(); } |
別タブで表示
3つの円が表示されました。
たくさんのオブジェクトを生成する
オブジェクトを複数生成できるのは分かりましたが、では例えば100個の円を作るとして、これを100個記述するのかというと現実的でないと思います。これをfor文を使って解決してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); //オブジェクトを生成 for( var i = 0; i < 50; i++){ var obj = new createjs.Shape(); //オブジェクト「obj」を生成 obj.graphics.beginFill("#FF0000").drawCircle(0, 0, 3); //objの色指定・サイズとカタチを指定 obj.x = 10*i //objのx座標 obj.y = 100 //objのx座標 stage.addChild(obj); //★オブジェクトをmyCanvasに配置 } //stageの描画を更新 stage.update(); } |
for文を使って50個の円を描画しました。
別タブで表示
複数のオブジェクトをグループ化する
CrateJSの、画期的な特徴のひとつです。CrateJSでは生成した複数のオブジェクトをグループ化することが可能です。HTMLに置き換えて例えると、div要素で複数のpタグを囲うようなものです。また、グループにトゥイーンアニメーションを設定すれば、グループまるごと回転させる、なんてことも可能です。先ほどの50個の円もグループでくくって回転させれば、まるでマリオのファイアーバーのような動きになるでしょう。
グループの機能を利用するには、下記の3つの手順を踏みます。
1-1.グループを生成する
1-2.グループをcanvasに配置
1-3.グループにオブジェクトを追加
グループを生成する
|
1 |
var sampleGroup = new createjs.Container(); |
まずは基本です。このようにグループを生成します。「sampleGroup」の箇所は任意です。
グループをcanvasに配置
|
1 2 3 4 5 |
//グループを生成 var sampleGroup = new createjs.Container(); sampleGroup.x = 0; //グループのx座標 sampleGroup.y = 100; //グループのy座標 stage.addChild(sampleGroup); // グループをmyCanvasに追加 |
カンバスに追加することも忘れないでください。
グループにオブジェクトを追加
先程使ったfor文を使って、オブジェクトをグループに追加します。|
1 2 3 4 5 6 7 |
//オブジェクトを生成 for( var i = 0; i < 50; i++){ var obj = new createjs.Shape(); //オブジェクト「obj」を生成 obj.graphics.beginFill("#FF0000").drawCircle(0, 0, 3); //objの色指定・サイズとカタチを指定 obj.x = 10*i //objのx座標(y座標は省略) sampleGroup.addChild(obj); //★オブジェクトをグループに追加 } |
★の部分が、今までの記述と違うことに注目してください。今までstageに追加していましたが、今回はグループに追加しなければならないので、「sampleGroup.addChild(obj);」となっています。
別タブで表示
見た目は変わりませんが、
canvas
└ sampleGroup
├ obj
├ obj
├ obj
～（中略）～
└ obj
└ sampleGroup
├ obj
├ obj
├ obj
～（中略）～
└ obj
canvas内では、この形の構造になっています。
ここでsampleGroupにアニメーションをかけて全体を動かしてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); //グループを生成 var sampleGroup = new createjs.Container(); sampleGroup.x = 10; //グループのx座標 sampleGroup.y = 100; //グループのy座標 stage.addChild(sampleGroup); // グループをmyCanvasに追加 //オブジェクトを生成 for( var i = 0; i < 50; i++){ var obj = new createjs.Shape(); //オブジェクト「obj」を生成 obj.graphics.beginFill("#FF0000").drawCircle(0, 0, 3); //objの色指定・サイズとカタチを指定 obj.x = 10*i //objのx座標 sampleGroup.addChild(obj); //★オブジェクトをグループに追加 } //回転のアニメーション createjs.Tween.get(sampleGroup, {loop: true}).to({rotation:360},6000); //stageの描画を更新 createjs.Ticker.setFPS(60); createjs.Ticker.addEventListener("tick", handleTick); function handleTick() { stage.update(); } } |
別タブで表示
ファイヤーバーだ！
