Javascriptでゲームを作りたい その13(enchant.jsを使いたい4-マップ機能)

前回はenchant.jsの練習と今までのおさらいを兼ねてカードをシャッフルしてめくる簡単なゲームっぽいものをつくりました。スプライトに関してはちょっとわかってきたので、次は、「マップ」の機能を使ってみたい。

昔の2Dゲームでは、キャラクターが歩き回るマップを作るときにマップチップを使います。

マップの素材となるパーツをひとつの画像にまとめておいて、それぞれのパーツを呼び出して組み合わせてステージを作っています。

たとえば、enchant.jsの公式で配布されているマップチップはこんな感じ。

これを組み合わせてRPGのマップが作れそうなのが想像つくと思います。

僕も作ってみました。

マップは配列を使って並べます。こんな感じ。

map.loadData(
            [
                [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [ 4, 4, 4, 4,-1, 4, 4,-1, 8, 8],
                [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
                [ 0, 0, 8, 8,-1, 6,11,-1, 9, 0],
                [ 0, 1, 2, 3,-1, 6,11,-1, 6, 0],
                [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
                [ 4, 4,11, 5,-1,10, 7,-1, 0, 0],
                [ 4, 4,11, 8,-1, 5, 8,-1, 0, 0]
            ]
        );

この数字が先ほどのマップチップの各部分に対応しているわけです。ちなみに表示しない場所には「-1」を入れます。

実際の実行結果はこちら。

せっかくなので主人公っぽいキャラを設置してみました。(置いただけなので動かせません…)でもなんだかゲームっぽくなってきた感じがしませんか…!

次はこのマップの中でキャラを動かしたいです!

続き