CreateJSでアニメーションを作ろう！
目次
- 目標物のご紹介
- canvasとは？
- 環境構築
- canvas&stageを作ってみよう
- スプライトを配置してみよう
- スプライトを生成する関数を作ろう
- スプライトを動かす準備をしよう(１)
- スプライトを動かす準備をしよう(２)
- スプライトを動かしてみよう
- スプライトを指定した角度に向かって動かしてみよう
- スプライトを円形に動かしてみよう
- 二つの動きを組み合わせてみよう。
- スプライトをたくさん配置してみよう
- 自由にアニメーションを作ってみよう
1. 目標物のご紹介
このワークショップを受講するとこんな感じのものが作れるようになります。
http://jsfiddle.net/mellun0610/bq9z7Lzx/1/
2. canvasとは？
CanvasとはHTML5で策定された要素の一つで、図を描くことのできる要素です。
従来、アニメーションを動かすためにはFlashを使って動かす必要がありました。
しかし、Flashをブラウザで動かすためにはFlashのプラグインが見る人のPCにインストールされていなければならず、環境によっては再生できないなど、面倒なことも多いものでした。
しかし、canvasはJavaScriptで動かすことができるので、プラグインがインストールされていなくても最新のブラウザであればすぐに使うことができ、手軽にアニメーションを楽しめます。
3. 環境構築
http://jsfiddle.net/
を使うと書いたソースコードがすぐに実行できますので、このサービスを使ってみましょう。
また、今回のワークショップの後半ではチーム開発を行います。
こちらのサービスはリアルタイムにコードが反映されてチーム開発に便利ですので、使ってみましょう。
http://scrapfy.io/
4. canvas&stageを作ってみよう
では早速コードを書いていきましょう！
最初はこのコードを写してみてください。
真っ黒な画面が表示されれば成功です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Canvas Animation</title>
</head>
<body onload="init();">
<canvas id="canvas" width="640" height="480" style="background-color: #000000;"></canvas>
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script type="text/javascript">
var stage; //stageをグローバル変数として追加
/**
* 初期化
*/
function init() {
// ステージの初期化
var canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
}
</script>
</body>
</html>
5. スプライトを配置してみよう
スプライトとは、ゲームを作るときに使われる技術で、背景にキャラクターや建物などを重ねて表示する画像合成技術のことです。
PhotoShop等のレイヤーをイメージしてもらえれば分かりやすいでしょうか。
レイヤーと違う点としては、レイヤーは背景と同じ大きさの透明の画像をどんどん重ねていくのに対し、スプライトはより小さい透明の画像を重ねていく点です。
まずはやってみましょう！
sprite.graphics.beginFill('red').drawCircle(0, 0, 50);
でスプライトを描画することになるのですが、これだけでは画面に表示されません。これはあくまでも描画のための準備をしているだけです。
最後にある
stage.update();
ではじめて描画されます。
今はスプライトが一つしかないのであまりメリットを感じないかもしれませんが、このような処理をすることにより、描画回数を減らし、コストを下げています。あまり高速に描画しようとするとマシンが追いつかずにチカチカして目障りなアニメーションになってしまうこともありますので、このように作っています。
画面の真ん中に赤い丸が表示されれば成功です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Canvas Animation</title>
</head>
<body onload="init();">
<canvas id="canvas" width="640" height="480" style="background-color: #000000;"></canvas>
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script type="text/javascript">
var stage; //stageをグローバル変数として追加
/**
* 初期化
*/
function init() {
// ステージの初期化
var canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
}
</script>
</body>
</html>
6. スプライトを生成する関数を作ろう
5.ではinit()の中でスプライトを直接生成していましたね。
しかし、「分けることが出来る機能は分ける」ようにすると、後々見通しが良くなってきます。
画面の真ん中に赤い丸が表示されれば成功です。
見かけ上は5.と同じになります。
7. スプライトを動かす準備をしよう(１)
さあ、いよいよ赤い丸を動かしてみましょう。
何度も何度もループを回すことで、少しずつ動かしていくことになります。
CreateJSではtickというイベントリスナーを使います。
//58行目
createjs.Ticker.addEventListener('tick', onTick);
イベントリスナーとはtickという状態になったらonTick()という関数を呼ぶということです。
tickとは時計の針の音(チクタク)から取ったものです。
var fps = 30;
createjs.Ticker.setFPS(fps);
fpsはframe per secondの略で1秒間に何フレーム実行するかという意味です。
このように書いておくと、1秒間に30回、tickという状態が訪れるようになります。つまり、1秒間に30回onTick()が呼ばれるようになるというわけです。
なので、onTick()関数の中にやりたいことを書いておけば勝手に繰り返し実行されます。なお、終了条件を書かない限り、無限に繰り返しは行われます。
アニメーションやゲームを作る上でこの「無限に繰り返される」という性質は大変重要な意味を持っています。
8. スプライトを動かす準備をしよう(２)
このサンプルを見てみてください。
一見さっきと何も変わっていないように見えますね。
ポイントは78行目です。
// スプライトを画面の中心に移動
sprite.move(stageWidth / 2, stageHeight / 2);
ここをコメントアウトしてみると左上にスプライトが移動してしまうことが分かります。
なぜなら、62行目で初期位置の設定をしているからです。
//62行目
sprite = new Sprite(0, 0, 50, 'red');
9. スプライトを動かしてみよう
いよいよ動きますよ！
frameCountという変数が登場しました。
これは何フレーム経過したかを表す変数です。
これはcreateJSに用意されている変数ではなく、自分で用意したものです。
onTick()の90行目で毎回1を足しています。
このframeCountの情報をもとに、次のフレームのスプライトの位置を算出しています。
46行目でframeCountをそのままxとyに足していますね。
Sprite.prototype.move = function(x, y, r) {
this.x = x + r;
this.y = y + r;
};
10. スプライトを指定した角度に向かって動かしてみよう
三角関数、覚えていますか？
今回はconとsinを使いましょう。
ワークショップでは板書して説明します。
下のページに書いてあることをそのまま説明しているだけですので、復習する場合はこのURLを見てください。
http://www24.atpages.jp/venvenkazuya/math1/trigonometric_ratio1.php
cosとsinをうまく使えばスプライトを斜めに動かせるのが分かるでしょうか。
たとえば現在(x, y) = (0, 0)にいるとしましょう。
右上に70度、長さ1の距離を進んだときの座標は何でしょうか。
cosとsinの定義より、
(x, y) = (cos70°, sin70°) = (0.342..., 0.939...) になります。
では、2進んだときはどうでしょうか。
これは非常に簡単です！
(x, y) = (2 * cos70°, 2 * sin70°) = (0.684..., 1.878...)
上のように、ただそれぞれ2倍すればいいだけです。
ですので、公式化すると、斜めに動かしたいときは
動かしたい距離 -> r, 動かしたい角度 -> θ とすると
(x, y) = (r * cosθ, r * sinθ)
とすれば良いわけです。
実際にやってみましょう。
気をつけて欲しいのは、CreateJSの座標系では一般的な数学の座標と異なり、y軸は下向きに伸びていきます。
ですので、
→ 0度
↓ 90度
← 180度
↑ 270度
となります。ここだけ特殊なルールです。
11. スプライトを円形に動かしてみよう
10で作った関数のthetaをどんどん変えていくだけです。
ついでに度数法（180度とか)から弧度法(πラジアンとか)に変換する関数も作ってしまいましょう。
360° = 2πラジアンというのがラジアンの定義です。
ですから
/**
* 角度を度数法から弧度法に変換する関数
*
* @param Number degree 角度（度数法）
* @return Number radian 角度（弧度法）
*/
function degreeToRadian(degree) {
var radian = 2 * Math.PI * degree / 360.0;
return radian;
}
こんな関数で良いでしょう。
肝心の回転部分ですが、moveの第四引数にframeCountを入れれば勝手にぐるぐる回ってくれます(360度を超えても計算できます)
sprite.move(stageWidth / 2, stageHeight / 2, 50, degreeToRadian(frameCount));
12. 二つの動きを組み合わせてみよう。
では、今度は渦巻きを作ってみましょう。
10.のcosとsinの話を思い出してください。
10.ではrを徐々に変えていきました。11.ではthetaを徐々に変えていきましたね。
ということは、rとthetaを同時に変えていけば渦巻きになるのがわかりますでしょうか。
13. スプライトをたくさん配置してみよう
これまでスプライトは1つだけ動かしていました。
しかしここで、もう1つ動かしてみましょう。
init()でスプライトを生成するときに、違うパラメータのスプライトをもう一つ生成しましょう。
今回は青いスプライトをcanvasの中心を軸にして180度回転させたところから回転させました。
14. 自由にアニメーションを作ってみよう
さて、ここからはペアプログラミングになります。
2人1組になって作品を作ってみましょう。
まずは方針を決めて分担していきましょう。
たとえば2人が作ったアニメーションを重ねて表示させるのも一つの案ですね。あとは300tickまではAさんのアニメーションで、301tickからはBさんのアニメーションとしても良いでしょう。
綺麗なアニメーションを研究してみてください。
↓１つ上のサンプルにメモリの配慮をしたもの（はみ出したら消す）
http://jsfiddle.net/mellun0610/onnotvqj/
↓マウスにくっついてきます
http://jsfiddle.net/mellun0610/nhw48heq/
↓冒頭で見せたもの
http://jsfiddle.net/mellun0610/bq9z7Lzx/1/
補足1. クリックイベントを取得するサンプル
クリックされた座標はevent.x, event.yで取ることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Canvas Animation</title>
</head>
<body onload="init();">
<canvas id="canvas" width="640" height="480" style="background-color: #000000;"></canvas>
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script type="text/javascript">
/**
* 初期化
*/
function init() {
// ステージの初期化
var canvas = document.getElementById('canvas');
canvas.addEventListener('click', handleClick);
}
function handleClick(event) {
console.log(event);
}
</script>
</body>
</html>
補足2. 画像を読み込むサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Canvas Animation</title>
</head>
<body onload="init();">
<canvas id="canvas" width="640" height="480" style="background-color: #000000;"></canvas>
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script type="text/javascript">
var stage;
/**
* 初期化
*/
function init() {
// ステージの初期化
// Stageオブジェクトを作成
// ※canvasタグのid名を引数に指定
var stage = new createjs.Stage('canvas');
// Bitmapオブジェクトを作成
// ※画像ファイルパスを引数に指定
var bitmap = new createjs.Bitmap('picture.png');
bitmap.x = 100;
bitmap.y = 120;
// stageにBitmapオブジェクトを配置
stage.addChild(bitmap);
// canvasの描画設定
// ※30fpsで描画を繰り返す
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick', function(){
stage.update();
});
}
</script>
</body>
</html>
補足3. 四角形
参考文献
http://www.html5.jp/canvas/what.html
http://www.createjs.com/tutorials/Getting%20Started/