ゲーム画面でそのまま直せるワールドエディターを作りました

Poglでは、AIに言葉で伝えてゲームを直します。ただ、木を少し横に動かしたり壁をひとつ消したりするのは、言葉で説明するより自分で動かすほうが早く済みます。自分で直したいという声がずっと届いていて、11月11日にワールドエディターを作り、すべてのユーザーに公開しました。

10月に作ったエディターは、実際のオブジェクトを動かせませんでした

10月にも一度エディターを作りました。二つの方式を試し、どちらもやめました。

一つ目は、画面で押した位置からどのオブジェクトかを推測する方式でした。AIが書いたゲームコードでは、オブジェクトごとに決まった名前がなかったためです。推測が外れると、エディターで動かしても実際のオブジェクトはその場に残りました。

二つ目は、ゲームがマップファイルを読んでオブジェクトを置くようにする方式でした。名札は正確になりましたが、AIがマップファイルの形式に合わせてゲームを作るうちに、灰色の箱と何もない地面が多い、物足りないゲームになりました。

ゲームコードはそのままに、プラットフォームが名札を付けます

Poglでは、ゲームが3Dオブジェクトをシーンに加えた瞬間に、プラットフォームが名札を付けます。名前はオブジェクトの種類と、その種類が作られた順番です。ゲームは起動するたびに同じ順番でオブジェクトを作るので、次に起動しても同じオブジェクトに同じ名前が付きます。three.jsを自分のファイルに含めた古いゲームも同じ方法で捉えられるため、ゲームを作り直さなくてもエディターが開きます。

エディターで直した内容は、上書きファイル（pogl.scene.json）ひとつに保存されます。ゲームの起動時、オブジェクトがシーンに加わった瞬間にこの内容を適用するので、そのあとゲームが計算する当たり判定も動かした位置に従います。ファイルにはオブジェクトの初期位置も一緒に記録しておきます。次に起動したとき同じ名前のオブジェクトが別の位置から始まった場合は適用しません。違うオブジェクトが動いてしまうのを防ぐためです。

実際のゲームでつまずいた点を、ひとつずつ解決しました

最初の版はテスト用のゲームではうまく動きましたが、実際に作られたゲームを開くとつまずく点が出てきました。11月11日の一日で、12回修正して公開しました。

• 同じ形をまとめて描いたオブジェクト：円錐320個をまとめて描いたゲームでは、ひとつだけを動かせませんでした。今はひとつを押すと、そのひとつだけを動かし、消し、色を変えられます。
• ブロックで建てた村：数百個のブロックでできた家が何軒も、ひとつのオブジェクトに入っているゲームがありました。互いに接しているブロックを建物ひとつにまとめ、最初に押すと家が一軒、もう一度押すとブロックひとつが選ばれるようにしました。
• three.jsを直接含めた古いゲーム：押した場所のオブジェクトを探す機能が抜けていて、島全体を覆う地面だけが選ばれていました。まず箱の範囲で絞り込み、そのあと実際の形で当たりを判定するようにしました。
• 斜め上から見下ろすゲーム：カメラを近づけても画面が大きくならない方式のため、拡大できませんでした。こうしたゲームは画面の倍率を上げて拡大します。
• 2Dゲーム：画面の文字・ボタン・画像はすべてのゲームで直せます。絵の中のキャラクターやアイテムは、最初はゲームが「動かせるオブジェクト」だと知らせる必要があり、新しく作ったゲームでしか使えませんでした。11月12日からは、ゲームがひとまとまりで描くものや画像の一枚一枚をプラットフォームが直接オブジェクトとして捉えるので、既存の2Dゲームでも移動・非表示ができます。
• いくつもの部品でできたオブジェクト：レースゲームのスタートゲートのように、柱・看板・文字板がひとつのまとまりに入ったオブジェクトは、まとまりごとにしか選べませんでした。ゲームがまとまりを空にしてから入れ直す場合にも対応し、最初のクリックでまとまり全体、もう一度クリックすると部品ひとつが選ばれるようにしました。

この過程で、編集権限のあるゲーム40個をひとつずつ開いて確認しました。40個すべてでエディターが開きました。

保存は6分から7〜9秒になりました

本番で最初に保存したときは6分かかりました。そのうち5分20秒は公開前チェックでした。ゲームを別の仮想マシンで起動し、スマホとパソコンの画面をすべて撮って確かめるチェックです。

エディターの保存はゲームコードを一文字も変えず、上書きファイルひとつだけを変えます。そこでこのチェックはやり直さず、ファイル形式などの短いチェックだけを行い、直前のバージョンのチェック結果を引き継ぎます。みんなで遊ぶゲームは、サーバーのルールファイルに2人を入れてみる確認だけをその場でやり直します。ゲームの文言を読み直す段階も省き、ファイルを一つずつアップロードしていたのを8個ずつ同時にアップロードするよう変えました。アップロードを変えたことで、AIでの修正や公開の保存も一緒に速くなりました。

最初は、みんなで遊ぶゲームはサーバー側の確認が必要だと考え、保存のたびに5分かかるチェックをやり直していました。11月12日、チェック用のコンピューターが混んでいた時間の保存が「準備の合図が遅い」という理由で止められ、同じファイルをもう一度チェックすると3回とも通りました。エディターはサーバーのルールファイルを変えないため、みんなで遊ぶゲームも2人を入れてみる確認だけをやり直して、すぐに保存するようにしました。同じゲームの保存は7秒で終わりました。ほかの保存でも、チェックがこの種の理由だけで落ちた場合はもう一度確認します。

保存すると新しいバージョンができます。バージョン一覧から保存前のバージョンにいつでも戻せ、公開済みのゲームは［アップデート］を押すとプレイヤーに反映されます。

直す場所をひとつのエディターにまとめました

Poglにはもともと、速度などの数値、主な色、ゲームの文字、画像・音のファイルを変える「直接修正」画面が別にありました。エディターができて直す場所が二か所になり、二つの画面の見た目も違っていました。そこで直接修正にあった機能をすべてエディターの中に移し、以前の入口はなくしました。

画面もシンプルにしました。パソコンでは、ステージ上部中央のピル型のボタンひとつ［プレイ｜エディター · ↶ · 保存］で出入りします。オブジェクトを選ぶと、名前、［複製］［削除］、色、サイズだけが表示され、位置・回転・質感・当たり判定は「詳しく」を押したときに開きます。スマホでは上に［✕］［プレイ｜エディター］［⋯］、下に［一覧］［+ 追加］だけを置きます。画面下のゲームの操作ボタンを隠さないためです。

追加したオブジェクトにも当たり判定を付けられます

エディターで追加したオブジェクトを描くのはプラットフォームですが、当たり判定はゲームごとにAIが個別に書いたコードの中にあります。そこで、追加したオブジェクトの位置をゲームが読める窓口（pogl.scene.solids()）を作りました。新しく作るゲームは最初からこの窓口を使います。

追加したオブジェクトを選ぶと「当たり判定」スイッチがあります。既存のゲームがまだこの窓口を使っていない場合、スイッチの下に「AI連携前」と表示されます。スイッチを押すとチャット入力欄に連携のリクエストが入り、送るとAIがそのゲームに一度だけつなぎます。そのあとは、追加するオブジェクトすべてに当たり判定が付きます。当たり判定の形は、オブジェクトごとにオフ・箱・球・カプセルから選べます。

ゲームカメラとオブジェクトのモデルも変えられます

シーン欄の「ゲームカメラ」で、プレイ中に見える視点を直せます。視野、ズーム、後ろ・前、上・下の4つです。カメラを追従させる計算はゲームコードの中にあるため、プラットフォームはゲームが画面を描く直前にだけカメラを動かし、描いたらすぐ元に戻します。ゲームの追従や照準の計算はそのままで、見える視点だけが変わります。「ゲームカメラで見る」をオンにすると、エディターですぐ確認できます。

オブジェクトひとつのモデルだけを別のモデルに差し替えることもできます。オブジェクトを選び、「モデルを変える」でライブラリのモデルか自分でアップロードしたモデルを選ぶと、元の形を隠し、同じ場所に同じ大きさで新しいモデルを表示します。位置や当たり判定などのゲームのルールは元のオブジェクトのままです。「元のモデルに」を押すと元に戻ります。

「値」タブには、ゲームの速さや敵の数のように調整できる値が表示されます。値がまだ少ないゲームは、タブのいちばん下の「AIに調整値を作ってもらう」を押すと、変えてみたい設定をAIが調整値として取り出します。この手順はAIが行うため、クレジットを使います。

複数人で一緒に直せます

共同開発者や、クランで体験を編集する権限を持つ人は、同じ体験のエディターを一緒に開いて直せます。誰かが入ると「○○さんがエディターに入りました」と表示され、ステージの上には「○○さんも編集中」が表示され続けます。ほかの人が選んだオブジェクトには、その人の色の枠と名札が付きます。

エディターは0.1秒ごとに、いまの状態と直前に送った状態を比べ、変わった部分だけをリアルタイムチャンネルで送ります。オブジェクトをドラッグしている間も動きを送るので、ほかの人の画面でも同時に動きます。あとから入った人には、先にいた人がまだ保存していない変更を渡すので、同じ画面から始められます。元に戻すは自分の変更だけを戻し、ほかの人の変更はそのままにします。リアルタイムでやり取りする内容は、保存するまでサーバーの記録には残りません。

最初は、2人が順番に保存すると、あとから保存した方が先の人の変更を丸ごと上書きしていました。いまは保存するとき、サーバーがその間に保存されたバージョンを読み、オブジェクトごとに自分が変えたものだけを自分の変更とし、残りは先の人の変更を残します。同じオブジェクトを2人とも変えた場合は、あとから保存した方が残ります。ほかの人が保存して自分の画面と同じになると、自分の［保存］ボタンも押せなくなります。

AIでの修正とつながります

エディターで直したバージョンでAIに修正を頼むと、AIはエディターで変えた状態から続けて直します。エディターを開いている間にAIが新しいバージョンを作った場合、保存はその新しいバージョンの上に適用されるので、AIが直した内容は失われません。

選んだオブジェクトの名前・位置・サイズ・色と、コード上の初期位置をチャット入力欄に入れてくれる［AIに頼む］もあります。手で動かすのが難しいこと、たとえば「この壁を赤いレンガにして」は、続けて言葉で頼めます。この部分はAIが直すので、クレジットを使います。