enchant.jsのサンプルコードを解読する（RPG編その4）

その1、その2、その3に続いての第4弾。今回で最終回ですよ。

さて最後の方のコードをちょろりと見ていきましょう。

var pad = new Pad(); // Padに対応させるよ
pad.x = 0; // x座標
pad.y = 220; // y座標
game.rootScene.addChild(pad); // シーンに追加

これはタッチパッドに対応させるための記述ですね。なお、これを使うにはHTMLの方で「ui.enchant.js」を読み込んでおく必要があります。

↑ 左下のこれ。

これはまぁ、そのままなのでOKでしょう。

で、お次はこちら。マップのスクロール処理ですね。

このゲームの場合、ゲーム画面が320×320、マップが480×480なので概念的にはこういうことになります。

↑ このゲーム画面を上下左右に動かしていきます。

そこでこの処理ですが・・・。

game.rootScene.addEventListener('enterframe', function(e) {
    var x = Math.min((game.width  - 32) / 2 - player.x, 0); // playerの位置がマップ半分まで到達？
    var y = Math.min((game.height - 32) / 2 - player.y, 0);
    x = Math.max(game.width,  x + map.width)  - map.width; // playerの位置がマップ右端まで到達？
    y = Math.max(game.height, y + map.height) - map.height;
    stage.x = x; // stageの座標をセット
    stage.y = y;
});

うむ・・・はっきりいって全然わからないｗ。

しょうがないので、ゼロベースで自分で考えてみました。話を単純化するためにStageのx軸だけで考えてみます。stage.xを算出するにはプレイヤーの位置によって次の3つのパターンがあることがわかります。

↑ こんな感じの3つのパターンっすよね。

つまり、プレイヤーが左側（ゲーム画面の半分より左）にいるときはマップがスクロールしないので、stage.xは0です。同様に右端の場合はスクロールしきっちゃっているのでstage.xは-160になります。

その間に関してはマップの真ん中からプレイヤーが動いた距離分だけなので（ちょっと複雑ですが）stage.xは図の通りになります。

ただ、そう考えると、多分、Webプログラマだと次のように書いちゃうと思います（ちょっと強引で汎用性ないですが）。

var x = 0;
if (player.x < (game.width/2-16)) {
    x = 0;
} else if (player.x-16 > (game.width)) {
    x = -160;
} else {
    x = (game.width/2-16)-(player.x);
}
stage.x = x;

案の定、これでもきれいに動くのですが、サンプルコードのように書くとは・・・。ゲームプログラミングってなんかmaxとかminとかの定石が多いような気がしますよ・・・。

きちんとロジックわかったうえで見るとまぁ、そうかな、という気がしますが、これってゼロからは絶対（僕には）書けないですよ・・・。というわけでスクロールゲームつくるときはもうこれをコピペすることにしちゃいましょう！（だめかｗ）

ふー・・・というわけで全4回にわたる解説エントリーが終了です。あとマリオのサンプルゲームもありますが、こちらも解読していきますかね。解読するのはいいのですが、その説明をブログに書くのが大変ｗ。ちょっとのんびりになりますが、またアップしますね。

追記

いつも参考にさせていただいている「」にて補足記事が。こちらもあわせてどうぞ！

• IDEA*IDEAさんの「RPG編その4」の部分の解説補足(その1) – 強火で進め
• IDEA*IDEAさんの「RPG編その4」の部分の解説補足(その2) – 強火で進め

ツイッターもやっています！