説明
ファンタジーゾーンのように自機の位置にあわせて上下に二重スクロールさせるには、奥の背景画像と手前の背景画像をそれぞれ2枚用意しておきます。背景画像は表示する画面の横2倍のサイズ、縦方向は少し長めにし同じ画像が左右2枚並ぶようにしておきます。
背景の上下移動はキー入力に応じて処理するのではなく、自機のY座標から計算で求めます。この計算は「画面の高さ - (背景画像の高さ - 画面の高さ)」によってどのくらいの差があるかを求めます。次に自機のY座標を差で除算した後に-1をかけます。サンプルでは* -1とはせずに-n1、-n2のようにしています。これを奥と手前の背景のY座標それぞれに入れます。
なお、以下のサンプルでは本物のファンタジーゾーンのような左右の遊び部分は考慮していません。
■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(320, 240);
// フレームレートの設定。30fpsに設定
game.fps = 30;
// 画像データをあらかじめ読み込ませる
game.preload("images/fighter.png", "images/bg1.png",
"images/bg2.png");
// データの読み込みが完了したら処理
game.onload = function(){
// 奥の背景画像を設定
var bg1 = new Sprite(640, 280);
bg1.image = game.assets["images/bg1.png"];
game.rootScene.addChild(bg1);
// 手前の背景画像を設定
var bg2 = new Sprite(640, 320);
bg2.image = game.assets["images/bg2.png"];
game.rootScene.addChild(bg2);
// 自機の設定
var fighter = new Sprite(32, 24);
fighter.image = game.assets["images/fighter.png"];
fighter.x = game.width / 2;
fighter.y = game.height / 2; // 画面中央に配置
game.rootScene.addChild(fighter);
// フレームイベントが発生したら処理
game.rootScene.addEventListener(Event.ENTER_FRAME, function(){
if (game.input.left && (fighter.x > 0)){
// 自機を左向きに
fighter.scaleX = -1;
// 奥の背景をスクロール
bg1.x = bg1.x + 2;
if (bg1.x > 0){ bg1.x = -bg1.width/2; }
// 手前の背景をスクロール
bg2.x = bg2.x + 4;
if (bg2.x > 0){ bg2.x = -bg2.width/2; }
}
if (game.input.right && (fighter.x < 200)){
// 自機を右向きに
fighter.scaleX = 1;
// 奥の背景をスクロール
bg1.x = bg1.x - 2;
if (bg1.x < (-bg1.width/2)){ bg1.x = 0; }
// 手前の2つの背景をスクロール
bg2.x = bg2.x - 4;
if (bg2.x < (-bg2.width/2)){ bg2.x = 0; }
}
if (game.input.up && (fighter.y > 0)){ fighter.y = fighter.y - 4; }
if (game.input.down && (fighter.y < game.height-fighter.height)){ fighter.y = fighter.y + 4; }
// 自機のY座標に合わせて背景画像のY座標を決める
var n1 = game.height / (bg1.height - game.height);
var n2 = game.height / (bg2.height - game.height);
bg1.y = fighter.y / -n1;
bg2.y = fighter.y / -n2;
});
}
game.start(); // ゲーム処理開始
}
目次に戻る