説明
B-WINGSのように背景色をスムーズに変化させるには三角関数のサイン（正弦）を利用します。JavaScriptで三角関数のサインを扱うにはMath.sin()メソッドを使います。Math.sin()メソッドのパラメータはラジアンで、ラジアン値を加算しその結果に対して最大輝度を乗算します。これにより０〜最大輝度までの値をMath.sin()により求めることができます。求めた値を背景色を示すプロパティであるgame.rootScene.backgroundColorに代入します。今回のような処理ではカラー指定は#rrggbb形式ではなくrgb(red, green, blue)形式を使うと簡単に背景色を指定することができます。
■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(){
// 240×320ピクセルサイズの画面(Canvas)を作成
var game = new Game(240, 320);
// フレームレートの設定。30fpsに設定
game.fps = 30;
// 画像データをあらかじめ読み込ませる
game.preload("images/map.png");
// 背景色のカラー値を設定するための変数(ラジアン)
var rad = 0;
// データの読み込みが完了したら処理
game.onload = function(){
// 地上のマップ（画像）を設定
var map = new Sprite(480, 640);
map.image = game.assets["images/map.png"];
game.rootScene.addChild(map);
// フレームイベントが発生したらマップをスクロールさせ背景色も変更
map.addEventListener(Event.ENTER_FRAME, function(){
map.y = map.y + 4; // 下に移動
if (map.y > -1){ map.y = -map.height / 2; }
// 背景色を変更
rad = rad + Math.PI / 40; // 輝度を加算
var red = Math.floor((Math.sin(rad) * 128) + 128);
game.rootScene.backgroundColor = "rgb( "+red+", 128, 0)";
});
}
game.start(); // ゲーム処理開始
}
目次に戻る