その他の記事はこちら↓
トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1
トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2
===
基本的な、オブジェクトの生成からトゥイーンモーションをまで設定する方法を作成しました。今回は、オブジェクトを生成する関数をinit関数の外に出して、何度でもパーツ化する手法を記事にしたいと思います。
今まではinitの中にあったものをinit関数の外に出します。必要な時にだけアクセスすれば、複数回繰り返し使えるので、コードを短く便利にすることができます。
style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">
では、関数化する前→関数化した後の順に見てみましょう。
Before
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
window.addEventListener("load", init); function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); var obj = new createjs.Shape(); //オブジェクト「obj」を生成 obj.graphics.beginFill("#FF0000").drawCircle(0, 0, 30); //objの色指定・サイズとカタチを指定 obj.x = 150 //objのx座標 obj.y = 150 //objのx座標 stage.addChild(obj); //オブジェクトをmyCanvasに配置 // オブジェクトをステージ上に追加 stage.update(); } |
After
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
window.addEventListener("load", init); /** * * 円を作るクラス * @param Number x 初期位置（x座標） * @param Number y 初期位置（y座標） * @param Number radius 円の半径 * @param String color 色 * */ function CreateCircle(x, y, radius, color) { this.Shape_constructor(); this.initialize(x, y, radius, color); } createjs.extend(CreateCircle, createjs.Shape); createjs.promote(CreateCircle, 'Shape'); // CreateCircleクラスのコンストラクタ CreateCircle.prototype.initialize = function(x, y, radius, color) { this.graphics.beginFill(color).drawCircle(0, 0, radius); this.x = x; this.y = y; this.radius = radius; } /** 初期化 **/ function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); // オブジェクトを生成 obj = new CreateCircle(150, 150, 50, '#FF0000'); // オブジェクトをステージ上に追加 stage.addChild(obj); stage.update(); } |
今回はCreateCircle()という円をつくる関数にしました。まずはコピペで大丈夫だと思います。
この関数は、引数として①x座標、②y座標、③円の半径、④色の4つを受け取り、円オブジェクトを生成します。
ここですね。
|
1 2 3 |
function CreateCircle(x, y, radius, color) { ～中略～ } |
これは、init()の中にあるここで引数を渡しています。
|
1 2 |
// オブジェクトを生成 obj = new CreateCircle(150, 150, 50, '#FF0000'); |
このように、パーツ化しておけば、initの中の記述を追加すれば簡単に複数の円を生成できます。
|
1 2 3 4 5 6 7 |
// オブジェクトを生成 obj = new CreateCircle(150, 150, 50, '#FF0000'); obj2 = new CreateCircle(250, 200, 20, '#000000'); // オブジェクトをステージ上に追加 stage.addChild(obj); stage.addChild(obj2); |
円を2つ生成しました
別タブで表示
応用編
これを応用して、たくさんの円を作ってみましょう。引数をランダムに設定して、1秒ごとに円が増えていきます。ランダムにする場合はこれ。
|
1 |
Math.floor( Math.random() * 500 ) |
*500の数値で最大を設定しています。
x座標とy座標にこのランダムの記述を挿入すると、xとyが自由に動きます。
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
window.addEventListener("load", init); /** * * 円を作るクラス * @param Number x 初期位置（x座標） * @param Number y 初期位置（y座標） * @param Number radius 円の半径 * @param String color 色 * */ function CreateCircle(x, y, radius, color) { this.Shape_constructor(); this.initialize(x, y, radius, color); } createjs.extend(CreateCircle, createjs.Shape); createjs.promote(CreateCircle, 'Shape'); // CreateCircleクラスのコンストラクタ CreateCircle.prototype.initialize = function(x, y, radius, color) { this.graphics.beginFill(color).drawCircle(0, 0, radius); this.x = x; this.y = y; this.radius = radius; } /** 初期化 **/ function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); function CreateCircleTimer(){ // オブジェクトを生成 obj = new CreateCircle(Math.floor( Math.random() * 500 ), Math.floor( Math.random() * 300 ), Math.floor( Math.random() * 10 ), '#FF0000'); stage.addChild(obj); // オブジェクトをステージ上に追加 } //stageの描画を更新 createjs.Ticker.setFPS(1); createjs.Ticker.addEventListener("tick", handleTick); function handleTick() { CreateCircleTimer(); stage.update(); } } |
