ベーマガ世代、ChatGPTとゼロからRPGを作る旅

第2章：やっぱり必要でしょ！　画像作成ツール、マップツール作り

ビットマップツールを作ろう

連載第1回ではテンプレートにプレイヤーや背景のしょぼい画像をあてていた。これはビットマップ画像作成ツールを作成して作ったものだ。
ビットマップツールなんてネット上にいくらでもありそうだけど、たくさん使うことになるツールは、操作感にこだわりたい。
マウスでぽちぽちやると位置調整が手が疲れるから、極力キーボードでの操作に寄せるのが私の流儀。
たとえばドットを置くキーをローマ字fに割り当てれば一マスおきにドットを配置していく時も、
f→右→右→f→右→右→、たんたた、たんたた、
とリズムよく完結できてとっても楽ちんだ。
（fは前景色（フロント）、bが背景色（バックグランド）にすることを想定）
さて、ChatGPTでビットマップ画像作成ツール、作れるかな？

画面上にビットマップを書いて＜原文ママ＞、PNGファイルでダウンロードするjavascipr＜原文ママ＞を書きたい

実際にChatGPTに依頼した文章。
改めて見ると、なんて雑すぎるお願いだろうか。
誤変換および脱字もあるし・・・

が、心配することなかれ、この一言だけで、ChatGPTはさらさらっとhtml+javascriptを書きだしてくれた。
そこへサイズ指定ボックスやアップロード・ダウンロードボタンを追加。
そして、ドット絵作りに欠かせないビットマップを拡大した画面を作成する。

今作ったcanvasをminicanvasという名前に変更し、minicanvasのサイズを64×64とします。また、新たにbigcanvasという640×640のキャンバスを追加します
minicanvasにファイルから取り込んだ画像を表示したら、bigcanvasに10倍にして表示したいです

そう、このツールを作った時点では、1ブロック64×64想定だったのでした。
即座に拡大機能をつけてくれたけど、ビットマップとしての動きを担保するため念を入れてループ文を使って1bitずつ移していく方式に変えてもらう。

forループでminicanvasのファイルの左上から右下まで1ピクセルずつ色を読み取り、bigcanvas上に左上右下まで同じ色の10×10の四角を左上から描画する形式で、10倍サイズに表示するプログラムに変更できますか？

そしてこれが最大の目的、カーソル移動と画面に色を配置する機能を搭載。

bigcanvas上で、画像を表示後、10×10の格子を灰色で重ねたいです。

x,yで座標を定義します。初期値は(0,0)です。bigcanvas上のx,yの格子を赤枠で囲います。赤枠を、カーソルキーで上下左右に移動できます。bigcanvasの端に到達したら、反対側に現れます。例えば、現在64×64の格子があるので、(64,0)の状態で右のカーソルキーを押したら、(0,0)に移動します。

前景色fgcolorと背景色bgcolorを定義します。初期値はwhiteとblackです。fを押すと、現在の座標(x,y)の格子を前景色で塗りつぶします。gを押すと背景色で塗りつぶします。bigcanvas上の格子に色を塗った後、minicanvas上の対応する(x,y)のピクセルを同じ色に更新します。

本当にこれだけのやり取りで、ビットマップ作成ツールができてしまうのですごい。
パレットについてはちょっと迷ったのだが、レトロゲームなので１６色にすることにした。
最近のドット絵というと、68系風のドットは荒いけど色は豊富で、絶妙な色使いが美しいイメージ。
でも色が増えてくると、私のデザインセンスがついていかない…
ドットは現在の画面に合わせて高解像度、逆に色数を絞って混合色を２色交互表示とかで表現すればPC-98風のレトロ画面になりそう。
（本当はグラデーションが美しいX68000に憧れていたんだけども…8色、16色という同時発色が主流の中、65536色も表示できる化け物マシンだったんだよね）
とりあえず、今回実装したカラーパレットはこれ。

ChatGPTはpを押した時のペイント機能として、わざわざfloodfill関数を作ってくれた。
floodfillというのは、こんな感じで、１ドットずつ色を拾いながら同一色なら色を変えていく方式。
自力で作り上げるのはちょっと面倒だよね。
自分で作るなら、minicanvas側でデフォルトの塗りつぶし機能を使った後、bigcanvasに拡大コピーするなど楽していたはずだけど、この関数があったお陰で後に二色交互の塗りつぶし（中間色の表現に必須）に拡張できた。
たぶん後のことまで見据えて用意していたのだろう。ほんとにすごいね。

さてここからがAI開発の真骨頂。
こちらの希望と向こうの提案とを取り入れ、使いながらどんどんブラッシュアップしていく。
斜め移動、シフトを押しながらの範囲指定、Enterで選択範囲を記憶領域に保存したりペーストしたりする機能。
Shit+Aでの全体選択、BSキーでの選択範囲の塗りつぶし、Ctrlでの飛ばし移動機能。
AIが提案してくれた背景透過時のチェックボード画像もありがたかったけど、保存時に透過されなくなりここだけはちょっとバグ取りに苦労した。
Ctrl+Z、Ctrl+Yの履歴機能をつけるのも想像以上に簡単でびっくり。
自分で実装したら、うんうん首をひねっていただろうなあ。

▲ ビットマップツール完成！　ツールは順調にできたけど、肝心の歩行画像がうまく描けずに四苦八苦

なお、やりたいことが増える都度、思いつくまま拡張しているので、謎仕様だらけになっている。
Shift押しながらで範囲選択し、BackSpaceで背景色塗りつぶし（消しゴム代わり）。
範囲選択でエンターを押すと、範囲コピー以外に矩形描画、箱の描画が出てきたり、右クリックでスポイト機能になったり……
スペースキーを押すとラインとサークルが書ける（lでライン、cでサークルに切り替え）
ナドナド……
公式サイトでひっそり公開しているツール部屋にも載せようかと思ったけど、もろもろの仕様がユーザアンフレンドリーと思われるので断念。
もうちょい万人向けに整理できたら転載するかも。

マップツールを作ろう

お次はオリジナルゲーム制作で必須のマップツール作り。
MSX2のころは、方眼用紙を見てぽちぽち手打ちで配列に変換していたけど、そんなことしてたらマップ作りだけで日が暮れる。社会人は忙しいのだ。
ChatGPTとのツール作りも、だんだん要領が分かってきたから、仕様をしっかりまとめてお願いしてみたよ。
フランクに話しかけるとフランクに返事が来るという情報をゲットしたので、丁寧語をやめてタメ語にしてみた。

レトロなRPG用のマップ作製（原文ママ）ツールを作りたいんだよね。こんな感じのhtmlは作れる？
・canvasが左右にふたつあって、左側がマップチップの並んだ元画像、右側がマップを配置するマップパネル。
・マップチップには、ユーザがローカルファイルから48×48のマップチップが並んだ画像ファイルをアップロードできる。
　元画像は48の倍数の想定。仮に画像ファイルが480×480だとすると、(0,0)～(9,9)まで、100個のマップチップが設定されている。
・画像の番号を左上から順に0,1,2,3...と連番で振っていく。
　10×10のマップチップなら、0～99まで番号が振られる。
・右のマップサイズは、ユーザが縦横の最大幅を設定可能。仮に初期値は50×50とする。スクロールと拡大縮小表示ができる。
・左のマップチップをクリックすると、クリックした場所のマップチップが選択できる。選ばれたマップチップは赤枠で囲まれる。また、選ばれたマップチップが半透明画像として カーソルにくっついてくる。右クリックするとマップチップ選択が解除される。
・右のマップにカーソルを移すと、選んだ場所のマップブロックが赤枠で示される。クリックすると、選んだマップチップがその場所に配置される。
・「ダウンロード」ボタンを押すと、マップチップの番号が表示された2次元配列のマップデータ（テキスト）をダウンロードできる。

極力一回で仕様を伝えようと思って長文になってしまったが、前よりはだいぶ丁寧に書いたつもり。
それでも、こんな依頼をぶん投げられたら「もっと丁寧に説明してくださいよ！」って図解を求めるプログラマもいるでしょう。
さて、ChatGPTは……？

こんな感じでどうかな？
左にマップチップ、右に編集キャンバスがあって、マップチップを選択して配置、2次元配列のマップデータをダウンロードもできるようになってるよ！
拡大縮小やスクロール、範囲選択の追加
編集の履歴管理（undo/redo）
背景チェック柄の表示
…とかも追加したければ言ってね！さらにカスタムできる！

わきまえてらっしゃる……！
こんなのもう何十回も作りましたよ…って感じですな。
マップツールの需要ってそんなにたくさんあるんだろうか？
このあとわずか３、４往復で、やりたいことがほぼ実現してしまった…！

▲あまりに簡単に作れすぎて、本当にびっくりした。

これでゲーム作成を支えるツールが整った。
次回は張り切ってゲーム作りに戻ろう。