EnchantMapEditorでマップを作る

昨年、「ゲーム要素ラボ」というカテゴリーを作りました。

その後、ぜんぜん更新してないので今年最初のブログはゲーム要素の2回目です。

そもそもゲーム要素とは何ぞや？ 自分が作りたいモーションコミックは、静止画と文字に加えて音声やアニメなどのマルチメディア要素で描いていくのですが、その中にゲーム要素も含みます。

そのゲーム要素は、読者がゲームに参加することやその結果がストーリーに影響を及ぼすようなヘビーなものから、巻末の付録ゲームまでいろいろ考えられます。

そしてその準備のために「ゲーム要素ラボ」というカテゴリーを作ったわけです。

モーションコミックを制作中に、「おっ、このシーンでちょっとしたゲームを入れたい！」と閃いてもその段階からゲームの準備をしていてはあまりにも大変ですからね。普段から「ゲーム要素ラボ」でいろいろ研究しておこうというわけです。

そんなわけで今回はマップを作るための便利ツールを試してみました。

マップデータは、RPG等で主人公達が活躍する町やダンジョンといった舞台のデータです。小さなタイル画像を並べて表示するのですが、その配列を簡単に作ってくれる便利ツールが「EnchantMapEditor」というenchant.js用のMapEditorです。

上の画像が「EnchantMapEditor」で作ったゲームの舞台。16×16のタイル状の画像で構成されています。

「EnchantMapEditor」は、こちらでダウンロードできます。

以下に「EnchantMapEditor」の使い方を簡単にまとめてみました。


　１．ダウンロードしたファイルを解凍し、mapeditor.htmlを起動する。

　２．横幅(Width) : 20
　      縦幅(Height): 20
　      画像(Image) : RPG
　      マップ拡張を有効にする(Enable Map Extension)□←チェック外す

　      上記のように設定し、［作成(Create)］をクリック。

　３．編集画面が表示される。あとは左側のマップ画面に右側のツールパレットからタイルを選択し配置し
　      ていくだけ。例えば、ツールパレットから草原や樹木などをクリックし「pen」を選択後、マップ画面を　　
　      プチプチとクリックしながらマップ画面にタイル画像を配置していく。一気に塗りつぶしたいときは
　      「fill」、削除は「-1」、「\」はライン、「■」は矩形、一番右はアンドゥ。

　４．マップの当たり判定データは、ツールパレットの一番上の「判定」を選択しマップのブロックや池など
　      プレイヤーが通れない場所をクリックし赤い枠で囲う。

　５．「判定」の右側の「tab1」「tab2」はそれぞれマップのバックグラウンド、フォアグラウンドで画像を
　      重ねて配置するときに使う。

　６．マップが完成したら、、［コード生成］ボタンをクリック。配列コードが生成されるので、自分のプログ
　      ラムのコードにコピペする。


以上です。

２の「横幅(Width) : 20」「縦幅(Height) : 20」は、16×16ピクセルのタイル画像が縦横に20個並びます。つまり320×320サイズのマップを作成しているわけです。

数字がずらっと並んだ配列のマップデータを手作業で入力するのはやっぱり大変なので、タイル画像を配置しながら自動的に生成してくれるツールは便利ですよね。

実際にゲームを作るときは、もっと個性的なオリジナルなマップにしたくなるんじゃないでしょうかね。

その時は、タイルセット画像をいじったりしてみましょう。