ドラゴンレーダー風ナビ ～エンジン編～（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;
var shpPoint;
var shpPoint2;
window.addEventListener("load", sample1);
function sample1() {
stage = new createjs.Stage("myCanvas");
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);
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.update();
createjs.Ticker.setFPS(15);
createjs.Ticker.addEventListener('tick', pointAnimation);
}
function pointAnimation(){
shpPoint2.scaleX += 0.1;
shpPoint2.scaleY += 0.1;
if (shpPoint2.scaleX > 2.5){
shpPoint2.scaleX = 1;
shpPoint2.scaleY = 1;
}
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;
var shpPoint;
var shpPoint2;
window.addEventListener("load", sample2);
function sample2() {
createjs.Sound.registerSound("sound/sound1.mp3", "sound1");
stage = new createjs.Stage("myCanvas");
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);
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.update();
createjs.Ticker.setFPS(15);
createjs.Ticker.addEventListener('tick', pointAnimation);
}
function pointAnimation(){
shpPoint2.scaleX += 0.1;
shpPoint2.scaleY += 0.1;
if (shpPoint2.scaleX > 2.5){
shpPoint2.scaleX = 1;
shpPoint2.scaleY = 1;
}
stage.update();
if (shpPoint2.scaleX != 1){
return;
}
createjs.Sound.stop();
if ($('#sound-on-off').prop('checked') == true) {
createjs.Sound.play("sound1", {volume:0.6});
}
}
</script>
続きを見る