AIとの対話によってゲームを制作できたとしても、完成したゲームを一般公開するためには、さらに別の作業が必要になる。

今回、AIゲーム開発研究室では、HTML形式で制作したゲーム「世界をちょっとだけ動かす Ver.3.3」を、ゲーム公開プラットフォームitch.ioに登録し、インターネット上で誰でも遊べる状態にすることを試みた。

本稿は、その実際の操作手順と、途中で発生した問題、修正方法、最終的な動作確認を記録したものである。

操作の案内はChatGPTが担当し、人間がブラウザ上で操作を実行した。問題が発生した場合にはスクリーンショットをChatGPTに提示し、画面を確認しながら解決を進めた。

なお、本稿は今回の実際の操作に基づく記録であり、itch.ioの画面構成や仕様は今後変更される可能性がある。

公開対象は、AIとの対話を通して制作したブラウザゲーム「世界をちょっとだけ動かす」である。

プレイヤーは世界を左右に傾け、子供を家まで帰す。途中には雨や犬などの出来事があり、ゲームの進行によって状況が変化する。

今回登録したファイルは、次のHTMLファイルである。

ファイル名：little_world_v33.html
ファイルサイズ：約24KB
ゲームバージョン：Ver.3.3
公開先：itch.io

itch.ioでは、HTMLファイルをアップロードし、ブラウザ上でプレイできるゲームとして公開することができる。

itch.ioの新規プロジェクト作成画面を開き、HTMLファイルのアップロードを試みた。

ところが、最初の操作ではエラーが発生した。

画面には、プロジェクトのタイトルを先に入力するよう求めるメッセージが表示された。

【掲載画像①：タイトル未入力によるエラー画面】
※今回再現したエラー画面を配置。実際のエラー発生時のスクリーンショットではなく、当時の表示を再現したものである。

エラー内容を確認し、プロジェクトのタイトルを入力した。

その後、同じHTMLファイルを再度アップロードしたところ、今度は正常に登録できた。

今回の操作から、少なくともこの新規登録画面では、ファイルをアップロードする前にプロジェクトのタイトルを入力しておく必要があることが確認できた。

実践上のポイント：新規プロジェクトを作成する際は、まずタイトルを入力し、その後にゲームファイルをアップロードするとよい。

ファイルのアップロードに成功すると、登録済みファイルとして「little_world_v33.html」が表示された。

次に、プロジェクトの種類を設定した。

「何をアップロードしているのですか？」ではゲームを選択し、「ちょっとしたプロジェクト」の項目では、ブラウザで再生されるHTMLファイルを含む形式を選択した。

この設定により、ゲームをダウンロードするだけでなく、itch.ioのページ内で直接遊べるようにするための項目が表示された。

【掲載画像②：HTMLゲーム形式の選択画面】
ゲームの分類とHTML形式の選択状態が分かるスクリーンショットを配置。

ただし、ファイルのアップロードが成功したことと、ゲームがブラウザ上で正常に動作することは別である。

実際に公開ページで動作を確認する必要がある。

今回の作業では、AIの案内に従って設定を進めていたが、価格設定を十分に確認しないまま別の項目へ進んでしまった。

これに対して、人間が「先に価格設定ですよ」と指摘した。

今回のゲームは無料公開を目的としていたため、価格設定では「支払いはなし」を選択することにした。

【掲載画像③：価格設定画面】
「か寄付か」「有料」「支払いはなし」の選択肢が表示されている画面を配置。

設定を変更する途中で、いったん選択した項目を戻しても、関連する画面表示がすぐには元に戻らない現象が発生した。

このとき、人間は以前の経験から、ブラウザの再読み込みによって状態が更新される可能性を考えた。

実際に再読み込みすると、保存済みの設定が画面に反映され、操作を続けることができた。

今回、ブラウザの再読み込みは複数回有効だった。

ただし、再読み込みは未保存の入力内容を失う可能性もあるため、保存できる状態であれば先に保存することが望ましい。

実践上のポイント：設定変更後に表示が不自然になった場合は、保存状態を確認したうえで再読み込みを試す。画面上の一時的な表示と、保存済みの設定を区別することが重要である。

HTMLゲームとして登録した後、公開ページのプレビューを確認した。

ところが、ゲーム画面の下部が表示領域の外に隠れ、操作ボタンや説明文が見えない状態になっていた。

ゲームそのものが動作していても、ページ上で正常に表示されているとは限らない。

【掲載画像④：ゲーム画面が途中で切れた状態】
ゲームの下部が表示されていないスクリーンショットを配置。

itch.ioの「埋め込みオプション」には、ゲームを表示する領域の幅と高さを設定する項目がある。

最初に確認した設定は、幅640px、高さ360pxだった。

この高さでは不足していたため、高さを700pxに変更した。

変更後、Enterキーを押したところ、保存処理が反応したことを確認した。

さらにページを再読み込みすると、ゲーム画面の表示状態が正常になった。

今回確認した設定：
幅：640px
高さ：700px

【掲載画像⑤：表示サイズ修正後のゲーム画面】
ゲーム画面、操作ボタン、説明文が表示されているスクリーンショットを配置。

この640×700pxという値は、今回のゲームに対して実際に使用した設定である。ほかのゲームでも同じ値が最適になるとは限らない。

実践上のポイント：ゲームの表示領域は、実際の画面構成に合わせて設定し、プレビューで全体を確認する必要がある。

ゲームが正常に表示されることを確認した後、一般公開の設定を行った。

編集画面の下部にある「視認性とアクセス」には、次の選択肢が表示されていた。

・ドラフト
・制限付き
・公開

今回は「公開 — 誰でもページを閲覧可能です」を選択し、セーブした。

【掲載画像⑥：視認性とアクセスの設定画面】
ドラフト、制限付き、公開の選択肢が分かるスクリーンショットを配置。

同じ画面には、コメント機能の設定も表示されていた。

その中で、コメントを無効にする項目が「障害者」と表示されていた。

これは英語の「Disabled」が不自然に翻訳されたものと考えられる。

今回の公開では、ゲームページ下部にコメントを投稿できる設定を維持した。

このような自動翻訳の問題も、海外サービスを日本語表示で操作する際に注意すべき点である。

セーブ後にゲームページを開くと、それまで表示されていた「ドラフト」が消え、画面上部に緑色の「公開」が表示された。

これにより、公開設定が反映されたことを確認できた。

一般公開の設定が完了した後、実際に公開ページでゲームをプレイした。

ゲーム画面の表示、左右への傾斜操作、ゲームの進行を確認し、最終的にクリアまで到達した。

クリア画面には「おかえり！大成功！」と表示された。

【掲載画像⑦：一般公開後のゲームクリア画面】
「公開」の表示とゲームのクリア状態が確認できるスクリーンショットを配置。

この確認によって、単にファイルをアップロードしただけでなく、公開されたページ上でゲームを実際に遊び、クリアできることが確かめられた。

公開ページは次のとおりである。

🌎 世界をちょっとだけ動かす　ゲームで遊ぶ

今回の公開作業では、HTMLゲームの登録から一般公開、公開後のプレイ確認までを完了できた。

一方で、その過程はAIの案内だけで順調に進んだわけではない。

タイトル未入力によるエラー、価格設定の順番、画面表示の不整合、ビューポートの高さ不足など、複数の問題が発生した。

特に重要だったのは、人間が実際の画面を確認し、AIの案内に誤りがある場合には修正を求めたことである。

また、スクリーンショットを通して画面の状態を共有することで、AIは操作対象を具体的に把握しやすくなった。

今回の実践から、次のことが確認できた。

第一に、HTML形式で完成したゲームは、itch.ioを利用してブラウザゲームとして公開できる。

第二に、AIとの対話は公開作業の案内に利用できるが、画面の状態や操作の正しさを人間が確認する必要がある。

第三に、公開作業では、アップロードの成功、表示の成功、実際のゲーム動作の成功を分けて確認することが重要である。

第四に、問題が発生した際の操作と解決方法を記録することで、後から同じ作業を行う人に役立つ実践的なノウハウを蓄積できる。

今回の研究では、AIとの対話によって制作したゲームを、さらにAIとの対話を通してインターネット上に公開することができた。

しかし、そこに至るまでには、AIの案内を人間が修正し、人間の判断によって問題を解決する場面があった。

本研究で重要なのは、AIがすべてを自動的に実行したことではない。

人間とAIが役割を分担し、実際に発生した問題を共有しながら、完成したゲームを公開するという目的に到達したことである。

そして、公開されたゲームを実際にプレイし、クリアできたことによって、今回の作業は一つの完結した実践記録となった。

ゲームを制作することと、ゲームを公開すること。

この二つをつなぐ具体的な方法を記録できたことは、AIゲーム開発研究室にとって、次の制作へつながる成果である。