説明
スプライトが永遠に拡大縮小を繰り返すようにするにはサイン（正弦）を利用します。JavaScriptではMath.sin()を使ってサインの値を求めることができます。Math.sin()のパラメータにはラジアンを指定します。角度からラジアンに変換する場合には「度*π/180」として計算します。角度を加算または減算し、Math.sin()のパラメータに指定していけば-1〜1までの小数値を得ることができます。この値をスプライトのscaleX, scaleYに設定します。ただし、この時に負数を設定するとスプライトが反転して表示されてしまいますのでMath.abs()を使って数値を絶対値に変換します。
■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初期化
window.onload = function(){
// 320×240ピクセルサイズの画面(Canvas)を作成
var game = new Game(320, 240);
// フレームレートの設定。15fpsに設定
game.fps = 15;
// 画像データをあらかじめ読み込ませる
game.preload("images/fighter.png");
// データの読み込みが完了したら処理
game.onload = function(){
var fighter = new Sprite(32, 32);
fighter.image = game.assets["images/fighter.png"];
fighter.x = game.width / 2;
fighter.y = game.height / 2;
fighter.degree = 0; // 正弦波の値を計算するための角度を初期化
game.rootScene.addChild(fighter);
// フレームイベントが発生したら処理
fighter.addEventListener(Event.ENTER_FRAME, function(){
fighter.degree = fighter.degree + 2;
var radian = Math.sin(fighter.degree*Math.PI/180);
var s = Math.abs(radian * 2); // 0〜2倍にする
fighter.scaleX = s;
fighter.scaleY = s;
});
}
game.start(); // ゲーム処理開始
}
目次に戻る