← ラボノート

ゲームを作りたい。まずはゲームの伝え方を学ぶことにした

8分で読めます

どんなゲームも答えるべき3つの問い、覚える必要があった6つの言葉、そしてAIと作った最初のバージョンの失敗について。

最初に作った三目並べには、コードの外にバグがひとつありました。マスをクリックすると、XとOが同時に盤面に置かれます。どちらが自分の手なのか分かりませんでした。

1回クリックした後の最初のバージョン。左上にX、中央にコンピューターのOが同時に置かれ、スタート画面もなく最初から盤面が表示されています。
8月18日のバージョン1。1回のクリックで印が2つ。スタート画面も待ち時間もないので、どちらが自分の印か分かりませんでした。

ルールは正しく動いていました。テストでは、コンピューターに対する私の手順をすべて試し、569局でコンピューターは一度も負けませんでした。それでも、ゲームは私に何も伝えていませんでした。始まりがなく、誰の番かも分かりにくく、「あなたの勝ち、もう一度」と伝える場面もありません。当時の私にはそれを表す言葉がなかったので、学ぶことにしました。こうした約束事を、私は「ゲームの文法」と呼んでいます。私の呼び方で、正式な標準ではありません。

すぐに遊びたい方へ。三目並べで遊ぶ。この記事を先に読む必要はありません。

シンプルなゲームはどう作り始めればいい？

今の私が使っている順番です。エディターを開く前に、メモに写しておいてください。

  1. 目的と、1ラウンドがどう終わるかを書き出す。
  2. 開始、プレイ、結果、もう一度遊ぶ場面をスケッチする。
  3. 遊べる最小限のルールと操作を作る。「起きてはいけないこと」も含めます。ラウンドが終わったら、空いているマスはすべてロックされます。
  4. 手番と結果を表示し、そのあとで実際の変化を伝える演出を加える。
  5. 誰かに遊んでもらい、つまずいたところを直す。

最初のバージョンは手順2を飛ばしていました。この記事の残りは、それがなぜ問題だったかの話です。

腑に落ちた6つの言葉

それぞれの言葉に、私の三目並べでの意味を添えました。

  • ゲームループ：状況を見せ、入力を受け取り、何が起きたかを判断し、新しい状況を見せる。MDNの「Anatomy of a video game」が、これを技術的な言葉で説明しています。三目並べでは：マスを選ぶと、ゲームが勝者を判定し、盤面を描き直します。
  • ステート（状態）：今この瞬間にゲームが覚えておくべきことすべて。三目並べでは：9つのマス、誰の番か、そしてセッションの得点です。
  • シーン：それぞれ役割を持つ、区切られた場面。三目並べでは：タイトル、プレイ、結果の3つです。結果は終わった盤面の下に表示され、「もう一度プレイ」でそのままプレイに戻ります。
  • HUD（ヘッドアップディスプレイ）：常に表示される情報の層。三目並べでは：ステータス行（「Xの番です。」）と得点です。
  • フィードバック：操作に対するゲームからの直接の返事。三目並べでは：マスが埋まり、手番のメッセージが変わります。
  • ジュース：フィードバックの上に重ねる動き、音、パーティクル、揺れなどの追加の反応。三目並べでは：あえてほとんど入れていません。勝ちのラインと、最新の印が現れるときの小さなアニメーションだけです。

ルール1：ゲームは次に起きることを伝える

バージョン1には、遊ぶ流れがありませんでした。ページを開くと盤面がそこにあるだけで、勝負がつくとそのまま止まります。翌日の作り直しで、タイトル → プレイ → 結果 → もう一度、という流れを加えました。

三目並べのタイトルからプレイ、結果、次のラウンドへ進む流れを示した図です。
最初、結果、もう一度遊ぶ場面まで描くと、盤面だけに考えが偏りません。
現在のゲームの最初の画面。コンピューター対戦か2人対戦かを選ぶモード選択と「ゲームを始める」ボタンがあり、盤面はまだ表示されていません。
作り直した版は盤面ではなく選択から始まるので、どんなラウンドを遊ぶのかを始める前に理解できます。

ルール2：画面は聞かれる前に答える

どの瞬間でも、画面は3つの問いに答えるべきです。誰の番？ どこに置ける？ 誰が勝った？

私のバージョンでは、ステータス行が手番を示し、印が履歴を残し、勝った3つの印を線が貫きます。

三目並べの画面に手番、置ける場所、モード、得点、次のラウンドの操作を示した図です。
必要な情報は、次の問いが生まれる場所で答えを示します。

HUDを得点カウンターのように画面に重ねて表示するゲームもあれば、道端の看板のように世界の中に組み込むゲームもあります。Erik FagerholtとMagnus Lorentzonによる2009年のチャルマース工科大学の論文Beyond the HUDが、その選択を考える言葉をくれました。対象はシューティングゲームで、ボードゲームではありません。

「どこに置ける？」はマウスなしでも答えられる必要があります。各マスはW3Cのボタンパターンに沿った本物のボタンです。Tabキーで見えるフォーカスリングが移動し、SpaceかEnterでそのマスに置けます。置いたマスはタブ順から外れます。

進行中の2人対戦。左上と上段中央にX、中段の左と中央にOがあり、右上の空いたマスに太い青のフォーカスリングが表示されています。
キーボードで遊ぶ人にも「どこに置ける？」への答えが届きます。次に空いているマスにフォーカスリングが表示されます。

ルール3：すべての操作に返事をする

まずはフィードバックです。印を置けばマスが変わります。1列そろえば、ゲームが勝者を告げて線を引きます。

最初の作り直し版の結果画面。「Xの勝ちです — 上段をそろえました。」と書かれたカードと「もう一度プレイ」「スタート画面に戻る」ボタンが盤面の上に重なり、3つのXを貫く緑の線を覆って暗くしています。
最初の作り直し版の結果画面は、勝者を告げて次の操作を示していましたが、カードが勝ちのラインに重なって暗くしていました。このスクリーンショットを撮るまで気づきませんでした。

ジュースはその上の層です。「Juice it or lose it」のデモは、シンプルなブロック崩しにこうした演出を一つずつ加えていきます。付属のリポジトリで、それぞれの手法を確かめられます。

ゲームに必要な情報の上へ、動き、音、パーティクル、揺れを重ねた図です。
まず分かる反応を作り、それを支える演出だけを検討します。

私のバージョンは、あえて静かにしています。音も、パーティクルも、揺れもありません。そこから始めたことで、それぞれの演出がプレイヤーに何を伝えるのかを考えるようになりました。

AIはどう作り、どこでつまずいたか

ルールエンジン、ページ、テストは、私が渡したデザイン仕様をもとにAIのコーディングエージェントが書きました。別のAIによるQAが結果を確認し、ブラウザで実際に遊びました。すべてのコマンドと失敗は、記録として残してあります。

  • 仕様に忠実すぎた。仕様には、コンピューターの返事は「人間の手と同じ瞬間に届く」と書き、わざと遅らせることもローディング表示も禁止していました。エージェントはその通りに作りました。あとでQAが、即座に返事が来るせいで自分の手とコンピューターの手を見分けにくいと指摘しました。これが冒頭のバグで、原因は私の仕様でした。
  • 最初のテストは失敗した。エンジンのテスト17件のうち8件が、初回の実行で失敗しました。テストランナーが勝ちラインのデータを展開する方法が原因です。エージェントがテストの設定を直し、17件すべてが通りました。
  • 2つ目のエージェントが、1つ目の見落としを見つけた。ゲームを作ったエージェントが追加したフォントのリンクが、型チェックに通りませんでした。別のQAが、修正されるまでリリースを止めました。

私にとっての教訓は、AIは私の良いアイデアと同じくらい忠実に、私の文法の間違いも形にするということです。何かが実際に遊ぶまで、ゲームが分かりにくいことを私に伝える手段はありませんでした。

追記：2つの問題を直しました

この記事を書く中で2つの問題が見つかったので、公開前に直しました。

  • コンピューターの番が見えるようになった。自分の手を置くと、ステータス行に「コンピューターの番です — Oが考えています…」と0.5秒足らず表示され、その間は盤面がロックされます。そのあとOが輪郭付きで現れるので、どれが新しい印か分かります。私自身の仕様にあった「遅延なし」のルールを撤回しました。
  • 結果カードを盤面の下に移した。これで勝ちのラインが隠れずに全部見えます。
修正後のゲームで最初の手を置いた直後。左上にXがあり、ほかのマスは空で、ステータス行に「コンピューターの番です — Oが考えています…」と表示されています。
1回のクリックで印はひとつ。コンピューターの番に、画面上の独立した瞬間ができました。
修正後の結果画面。上段の3つのXを貫く緑の線がすべて見え、「Xの勝ちです — 上段をそろえました。」のカードと「もう一度プレイ」「スタート画面に戻る」ボタンが盤面の下に置かれています。
勝ちのラインが全部見えるようになり、次の操作はそのすぐ下にあります。

まだ試していないこと

AIのQAはこのゲームを遊びました。でも人はまだ遊んでいません。それは別のテストです。次のステップは、Nielsen Norman Groupが説明しているような、誘導なしのシンプルなテストです。3人に3つのタスク（モードを選ぶ、1ラウンドを終える、もう1ラウンド始める）をお願いし、迷った場面をすべて記録します。それまでは、このデザインは仮説です。

これは小さなプロジェクトのための出発点の順番です。リアルタイムの動きや長い物語があれば、問いは変わります。それを掘り下げているのが、私の2Dプラットフォーマーの調査です。

ぜひ手伝ってください。1ラウンド遊んで、最初に「どうすればいいんだろう」と迷った瞬間を教えてください。Instagramの@ai.maker.labへのDMかコメントで届きます。

ゲームはAIのコーディングエージェントが作り、この記事の制作にもAIと自動化を活用しました。AI Maker Labの所有者として、最終的な表現と出典確認に責任を持ちます。

出典

あわせて読む