【疑似3DダンジョンRPG開発日誌 08】 ── ブラウザ上で動くマップエディターを作った話

ダンジョン自体を作ることに

疑似3DダンジョンRPG「グラヴェンの傷跡」の開発中、ダンジョンのマップを本格的に作り始めることを考えていた。

今まではPythonのコードに直接こんな感じで書いていた。

python

MAP_1F = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
    [1, 0, 1, 0, 1, 0, 1, 1, 0, 1],
    ...
]

フロアが1〜2枚ならなんとかなるけど、最終的に10フロア・最大20×20のマップを作るとなると、数字を手で並べるのはものすごく手間がかかる。ミスも増えるし、全体像が全然見えない。

方針：HTMLのマップエディターを作る

Pyxelの中でエディターを作ることも考えたけど、マウス操作のUIはブラウザの方が断然作りやすい。

作ったものをPythonコードとして出力して data.py に貼り付ける方式にすれば、ゲーム本体のコードは一切変えなくていい。

作ったもの

ローカルで開くHTMLファイル1枚のエディター。

主な機能

描画ツール

• 壁 / 通路 / 扉 / 下り階段 / 上り階段 / 固定エンカウント

• クリック or ドラッグで連続塗り

• キーボード 1〜6 でツール切り替え

フロア管理

• B1F〜B10F（最終エリアまで）をタブで切り替え

• フロアをエリアごとにグループ表示

  • 汚染された自然（B1F〜B3F）

  • ドゥルムガルの廃墟（B4F〜B6F）

  • グラヴェンの核心（B7F〜B9F）

  • ドゥルム王の玉座（B10F）

マップサイズ変更

• フロアごとに個別にサイズを設定できる（最大20×20）

• サイズを縮小しても既存データははみ出た部分だけ削除して保持

コード出力

• 右パネルにPythonコードがリアルタイム生成される

• クリップボードへのコピーボタン付き

出力されるPythonコードの例

「出力」ボタンを押すとこういうコードが生成される。

python

# ── B1F（汚染された自然）W=10 H=10
MAP_1F = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
    ...
]

FLOOR_MAPS = [MAP_1F, MAP_2F, ..., MAP_10F]

FLOOR_SIZES = [
    (10, 10),  # B1F
    (10, 10),  # B2F
    (16, 16),  # B4F  ← フロアごとに違うサイズにできる
    ...
]

INITIAL_CELL_ATTRS = {
    0: {  # B1F
        (2, 1): {"type": "door", "open": False},
        (8, 8): {"type": "stairs_down"},
    },
    ...
}

FIXED_ENCOUNTERS = {
    (3, 6): "ワイバーン",  # B1F
}

これをそのまま data.py に貼り付けるだけでゲームに反映される。

作っていて気づいたこと

マップサイズが可変になるとゲーム側も変える必要がある

今まで MAP_W = 10 / MAP_H = 10 という固定定数でマップの大きさを管理していた。フロアごとにサイズが違うなら、FLOOR_SIZES を参照するように変える必要がある。

エディターが先に対応しておいて、ゲーム本体は後から追いつく形にした。

使い方まとめ

1. map_editor.html をブラウザで開く

2. フロアタブを選んでクリック or ドラッグでマップを描く

3. 右パネルのコードをコピーして data.py に貼り付ける

次にやること

• 実際にマップを作り始める

• ゲーム側の MAP_W / MAP_H 固定参照を FLOOR_SIZES 参照に切り替える

• 階段のグラフィック素材を作る（まだ作ってない