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

さてenchant.jsの勉強中ですが、付属しているサンプルコードのうち、RPG風のものとマリオ風のものが結構むずかしいので読み解いてみますよ。今回はRPG風のやつをば。

↑ これね。

ゲームプログラミングをやっている人には定石なのか？的な表現があっておもしろいですが、慣れないうちは「？？？」となってしまうかと思います（僕はそうですな・・・）。

では最初からコードを読んでいきましょう。簡単にコメントつけていきますね。

enchant();
window.onload = function() {
    var game = new Game(320, 320); // ゲーム画面のサイズを320×320に設定
    game.fps = 15; // frame per secondを15に設定。秒間15フレーム動くってことですな。
    game.preload('map.gif', 'player.gif', 'pad.png'); // 画像読み込み

ま、ここらへんはいいですよね。では次。

    game.onload = function() {
        var map = new Map(16, 16); // マップの一マスを16×16に設定
        map.image = game.assets['map.gif']; // 画像の読み込み
        map.loadData([
            [322,322,322,322,322,322,224,225,225,225,225,225,167,205,205,205,205,205,205,205,205,205,205,205,205,205,205,205,205,205],
            [322,322,322,322,322,322,322,322,322,322,322,322,224,225,225,225,225,225,167,205,205,205,205,205,205,205,205,205,205,205],
            [322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,224,225,225,225,225,225,225,225,225,225,225,225],
            [322,322,322,342,342,342,342,342,342,342,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322],
            [322,322,322,342,342,342,342,342,342,342,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322],
            [322,322,322,342,342,342,342,342,342,342,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322],
            [322,322,322,342,342,342,342,342,342,342,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322,322],
            [322,322,322,342,342,342,342,342,342,342,322,322,322,322,322,322,322,342,342,342,342,342,342,342,342,342,322,322,322,322],
            [322,322,322,342,342,342,342,342,342,342,322,322,322,322,322,322,322,342,342,342,342,342,342,342,342,342,322,322,322,322],
...

ここはマップを読み込んでいると想定されますが、322とかなんじゃらほい？って感じですよね。これは元画像のmap.gifを見るとなんとなくどういうことかがわかります。

↑ これです。

ただこれだとよくわからんので、16×16（マップの一マスのサイズ）でグリッド表示してみます。

↑ グリッドつけてみた。そんでもってさらにわかりやすくすると・・・。

↑ こういうことです。

なので根気よくこの16×16のマスを数えていくと、マップによく出てくる「322」の部品は次のものになります。

↑ これね。

つまりloadDataではこうした「マップ画像に対応するマスの番号」を2元配列に突っ込んで読み込んでいるわけですな。なお、この2元配列はいくつでも重ねる事ができるようです。

サンプルコードではmapの中に二つの配列を読み込んでいます。すんごく単純化すると次のようなことをしていますね。

        map.loadData([地面っぽいマップ], [その上の建物とか木とかのマップ]);

なお、試しに最初の配列（地面部分）を削除すると次のようになります。

↑ 地面が消えた！

こうやって重ねていけば奥行きのあるマップが出来ますよね。さて次のコード。

        map.collisionData = [
            [  0,  0,  0,  0,  0,  0,  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1],
            [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1],
            [  0,  1,  1,  0,  1,  1,  0,  1,  1,  0,  1,  1,  0,  0,  0,  0,  0,  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1],
...

これは名前のままですが、衝突判定用のマップですね。これがあることでhitTestというメソッドが使えるようになります。

さて次。

        var foregroundMap = new Map(16, 16);
        foregroundMap.image = game.assets['map.gif'];
        foregroundMap.loadData([
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
            [ -1,461,462, -1,461,462, -1,461,462, -1,461,462, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
...

これはプレイヤーの前面に来るマップです。プレイヤーが木の陰に隠れたりできるのはこれがあるおかげですね。なお、「-1」を指定すると対応する画像がないのでその部分が透明になるようです。

なお、ちょっと先まで読み進めてみるとマップやらプレイヤーやらは次のようにシーンに追加されています。

        var stage = new Group(); // ルートシーンに追加するグループを作成
        stage.addChild(map); // まずはマップを配置（地面部分＋建物部分）。
        stage.addChild(player); // 次にプレイヤーを配置。
        stage.addChild(foregroundMap); // 次に前面マップを配置。
        game.rootScene.addChild(stage); // これらをまとめてシーンに追加。

概念的にあらわすとこんな感じかな。

↑ 無駄に作り込んでしまったｗ。

ふー・・マップ部分だけでかなりの長さになってしまいましたね。プレイヤー部分については次のエントリーにしたいと思います。

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