[7日間] AIと共につくる楽しいゲーム開発

Perplexity.AIと協力してD&D5eベースのウェブゲームを作り始めてから、もう1週間が経ちました。

今日もコンテンツよりも、より堅牢なゲームを目指して、内部アーキテクチャの改善に多くの時間を費やしました。

★レイヤードキャンバスの使用

単一キャンバスの利用をやめて、3つのキャンバス（background、ui、character）に分割しました。

これにより、全体を再描画するのではなく、更新が必要な部分だけを新たに描画して合成する方式で動作するため、

全体的なパフォーマンスの向上に役立つそうです（AI談）。ㅎㅎ

そして今回学んだことですが、キャンバス作業にsave、restoreがないと、それぞれの要素が互いに影響し合うため、

キャンバスに正確に表現したい場合は、saveとrestoreを使用する必要があります。

★ESM方式への変更

以前は、htmlで全てのjsを<script>でロードして実装していましたが、コードが分割されるたびにjsが増えていくので…

最初は過去の記憶にとらわれ、require.jsを使おうとしたのですが、AIが最新の技術を教えてくれました。

おかげでESM方式にうまく修正することができました。これで、コードが増えても

このように、moduleで宣言したmain.jsだけがindex.htmlで記述されます。見やすいですね。

このように全体的な構造を改善したことで、以下の機能を追加することができました。

★施設とのインタラクション実装

施設に入ると、会話ウィンドウに選択肢が表示され、クリック（タッチ）することでインタラクションが可能になりました。

これは今後様々なシステムを追加する際の基礎となる機能です。追加作業中はバグや修正事項が多くありましたが、

現在は正常に動作しているのでOKです。

このように、会話ウィンドウに選択肢が表示され、クリックすると正常に動作します。上の地域表示も位置が正しく表示されています。

そして戦闘でも、攻撃結果に応じて以下のようにエフェクトが表示されます！

命中するとHit！クリティカルが発生するとCritical！と表示されます。これも昨日まではうまくいかなかったのですが…ふふふ…

全体的にコードを整理し、構造を改善したことで、実装した機能が期待通りに動作するのが実感できます。

そして、開始時に全ての画像をロードしてからゲームを開始するため、以下のようなローディング画面も実装されました。

何となく…ゲームっぽくなってきた感じがします。

ある程度整理と基盤作りはできたようなので、そろそろ次の段階の実装に取り掛かろうと思います。

まず、キャスター系の呪文システム、ローグとファイタークラスの追加行動などのシステムを実装し、

戦闘以外の探索時に発生するイベント、街でのインタラクションを通じたクエストや休息、アイテム取引、シナリオなど…

あれ…まだやること山積みですね!?

それでもAIと一緒に楽しく進めていきたいと思います。