ドラゴンレーダー風ナビ ～エンジン編～（2/4）
目的地ポイントはアニメーションで
目的地をポイント表示していきますが、点をただプロットするだけでは面白くないので、アニメーションを作りましょう！
中心の点シェイプは固定表示して、もう一つの輪っかシェイプのサイズを少しずつ拡大することで実現しています。
少しずつ、ということはタイマーを使うのですが、CreateJsにはタイマーを管理できる便利な「Tickerクラス」が用意されています。
Tickerのフレームレートを設定（単位はfps。1秒間に何回動くか）
createjs.Ticker.setFPS(15);
Tickerのイベントリスナーに呼び出す関数を登録
createjs.Ticker.addEventListener('tick', function);
<canvas id="myCanvas" width="260" height="50"></canvas>
<script type="text/javascript">
var stage; //Stageオブジェクト
var shpPoint; //目的地Shape
var shpPoint2; //目的地Shape2（アニメーション部分）
window.addEventListener("load", sample1);
function sample1() {
//Stageオブジェクトを作成
stage = new createjs.Stage("myCanvas");
//目的地Shapeを作成
shpPoint = new createjs.Shape();
shpPoint.graphics.beginStroke("orange");
shpPoint.graphics.beginFill("orange");
shpPoint.graphics.setStrokeStyle(1);
shpPoint.graphics.drawCircle(0, 0, 5);
shpPoint.x = 130;
shpPoint.y = 30;
stage.addChild(shpPoint);
//目的地Shapeのアニメーション部分を作成
shpPoint2 = new createjs.Shape();
shpPoint2.graphics.beginStroke("orange");
shpPoint2.graphics.setStrokeStyle(1);
shpPoint2.graphics.drawCircle(0, 0, 5);
shpPoint2.x = 130;
shpPoint2.y = 30;
shpPoint2.scaleX = 1;
shpPoint2.scaleY = 1;
stage.addChild(shpPoint2);
//Stageの描画を更新
stage.update();
//フレームレートを設定
createjs.Ticker.setFPS(15);
//tickイベントにアニメーション処理のリスナーを登録
createjs.Ticker.addEventListener('tick', pointAnimation);
}
/*
目的地Shapeのアニメーション処理
*/
function pointAnimation(){
//目的地Shepeの輪っかを少しずつ拡大する
shpPoint2.scaleX += 0.1;
shpPoint2.scaleY += 0.1;
if (shpPoint2.scaleX > 2.5){
//2.5倍を超えると、1倍に戻す
shpPoint2.scaleX = 1;
shpPoint2.scaleY = 1;
}
//Stageの描画を更新
stage.update();
}
</script>
【ワンポイント】
シェイプの拡大にはscaleX・scaleYプロパティの値を大きくしていくのですが、シェイプの基点となる座標が0でないとおかしな動作をします。
shape.graphics.drawCircle(0, 0, 5);
このように基点のX座標・Y座標を共に0にしておくと問題ないのですが、
shape.graphics.drawCircle(120, 30, 5);
シェイプ生成時のX座標・Y座標に初期値を入れてしまうと、scaleX・scaleYの値を変化させた時に、X座標・Y座標も連動して拡大・縮小してしまいます。
座標の指定はX・Yプロパティで行うようにするといいでしょう。
shape.graphics.drawCircle(0, 0, 5);
shape.x = 120;
shape.y = 30;
アニメーションにサウンドを添えて
アニメーションに合わせて効果音をつけると、よりそれっぽく演出できます。
サウンドの再生には、CreateJsの「Soundクラス」を使用します。
画面表示時に音声ファイルを読み込んでおいて、適時に再生することが可能です。
音声ファイル読み込み
createjs.Sound.registerSound("sound/sound1.mp3", soundid);
サウンドの再生
createjs.Sound.play(soundid);
サウンドの停止
createjs.Sound.stop();
<canvas id="myCanvas" width="260" height="50"></canvas>
<input type="checkbox" id="sound-on-off"> <label for="sound-on-off">サウンドON</label>
<script type="text/javascript">
var stage; //Stageオブジェクト
var shpPoint; //目的地Shape
var shpPoint2; //目的地Shape2（アニメーション部分）
window.addEventListener("load", sample2);
function sample2() {
//音声ファイル読み込み
createjs.Sound.registerSound("sound/sound1.mp3", "sound1");
//Stageオブジェクトを作成
stage = new createjs.Stage("myCanvas");
//目的地Shapeを作成
shpPoint = new createjs.Shape();
shpPoint.graphics.beginStroke("orange");
shpPoint.graphics.beginFill("orange");
shpPoint.graphics.setStrokeStyle(1);
shpPoint.graphics.drawCircle(0, 0, 5);
shpPoint.x = 130;
shpPoint.y = 30;
stage.addChild(shpPoint);
//目的地Shapeのアニメーション部分を作成
shpPoint2 = new createjs.Shape();
shpPoint2.graphics.beginStroke("orange");
shpPoint2.graphics.setStrokeStyle(1);
shpPoint2.graphics.drawCircle(0, 0, 5);
shpPoint2.x = 130;
shpPoint2.y = 30;
shpPoint2.scaleX = 1;
shpPoint2.scaleY = 1;
stage.addChild(shpPoint2);
//Stageの描画を更新
stage.update();
//フレームレートを設定
createjs.Ticker.setFPS(15);
//tickイベントにアニメーション処理のリスナーを登録
createjs.Ticker.addEventListener('tick', pointAnimation);
}
/*
目的地Shapeのアニメーション処理
*/
function pointAnimation(){
//目的地Shepeの輪っかを少しずつ拡大する
shpPoint2.scaleX += 0.1;
shpPoint2.scaleY += 0.1;
if (shpPoint2.scaleX > 2.5){
//2.5倍を超えると、1倍に戻す
shpPoint2.scaleX = 1;
shpPoint2.scaleY = 1;
}
//Stageの描画を更新
stage.update();
if (shpPoint2.scaleX != 1){
return;
}
//サウンド停止
createjs.Sound.stop();
//サウンドONの場合、サウンドの再生
if ($('#sound-on-off').prop('checked') == true) {
createjs.Sound.play("sound1", {volume:0.6});
}
}
</script>