見出し画像

ChatGPT DALL-E3で女の子と四目並べゲーム対戦するゲームを作成してみた

秋葉原IT戦略研究所

前回の記事に引き続きChatGPT DALL-E3で可愛いアニメキャラクターを作成しまくっていても生産性がないのでなにか作ろう！という動機の元、ゲーム制作をしようというアプローチの第2段目です。

実際に作ったゲーム

ゲーム画面　イラストはDALL-E3


スマートフォンサイズ画面を基本対応
デスクトップだと1200pxぐらいの広さにブラウザをしてください。
CPUは脳死でやると負けるぐらいの強さ。
動画も貼っておきます。


なぜ四目並べゲームなのか

動機は◯◯麻雀風の対戦ゲームが作りたいという動機でしたが、私は麻雀がわからない、ゲーム制作はしたことがないので複雑なゲームルールなものは作れない、といろいろ探していくなかで（もちろんChatGPTに聞きました）一番実装が簡単そうで対戦型のゲームだったからです。

私も初めてその存在を知ったのですが四目並べとはこういうゲームだそうです。(wikipedia)

2人のプレイヤーが交互にコマを下から積み重ねて、先に縦・横・斜めいずれかに直線状に4つ並べた方が勝ちになる。平面方向には任意の場所を選ぶことができるが、垂直方向に対しては重力の関係で先に入っているコマの真上（または盤面のすぐ上）にしかコマを置けないという点がこのゲームのキーポイントになっている。

wikipedia

ChatGPTでのゲーム制作のアプローチ

1. ChatGPTに初心者でも作れるゲームを聞く

JavaScriptの勉強のために 簡単なCPUとの対戦ボードゲームを作りたいと思っています。 レベルは1から10段階まで設定できるものがよいです。 実装の難易度が簡単な入門用でお願いします 私が思いつくのは リバーシ トランプゲーム 五目並べ などですが 他によい候補はありますか？ 10個程度アイデアをください

するとこんな感じで回答が返ってきます

JavaScriptで学習を始めるために、CPUとの対戦ボードゲームを作るのは素晴らしいアイデアです。リバーシ、トランプゲーム、五目並べはすでに良い選択肢ですが、他にも多くのオプションがあります。以下に、実装の難易度が比較的簡単なゲームのアイデアを10個挙げます：

  1. チェス - AIの強度を調整することで、初心者から上級者まで楽しめます。

  2. チェッカー（ドラフツ） - ルールがシンプルで、AIの難易度調整がしやすいです。

  3. 四目並べ（Connect Four） - 垂直なボードにチップを落として四つ並べるシンプルなゲームです。

  4. バックギャモン - 古典的なボードゲームで、ダイスを使った戦略が鍵となります。

  5. シンプルなカードゲーム（例：戦争） - カードの比較に基づくシンプルなゲームです。

  6. タイル配置ゲーム（例：ドミノ） - ドミノのようなタイルを一列に並べるゲーム。

  7. 数独 - 数字パズルゲームで、難易度の調整がしやすいです。

  8. マインスイーパー - 地雷を避けながら空きマスを探す古典的なパズルゲーム。

  9. タイクーンゲーム（簡易経済シミュレーション） - 資源管理と経済戦略を基本としたゲーム。

  10. シンプルなロールプレイングゲーム（RPG） - ターン制の戦闘と基本的なキャラクター成長システムを持つゲーム。

四目ならべとはなんぞ？と思って調べてみるとおもしろそうだったので今回は「四目並べ」を採用しました。

2. 仕様を考えて伝える

まず今回作りたいゲームの概要と仕様をChatGPTに伝えます

CPUとの四目並べ対戦をコンセプトとしたWEBゲームを作成したいと思います。
Javascriptでのゲーム制作の入門としてシンプルなものを考えています。
まず仕様のレビューをお願いします

プロダクト名
「しずくと四目並べしよ！」（略称「しずく四目」）

ゲームコンセプト

主人公:修一(プレイヤー)がヒロインである、しずく（CPU）と四目並べの対戦を行う。

ゲームの流れ

主人公としずくが会話するストーリーパートと四目並べゲームパートの2つの組み合わでゲームが構成される。
流れは

  • ストーリーパート1

  • 四目並べゲームパート1 (難易度レベル1)

  • ストーリーパート2

  • 四目並べゲームパート2 (難易度レベル2)

  • ストーリーパート3

  • 四目並べゲームパート3 (難易度レベル3)

  • ストーリーパート4

  • 四目並べゲームパート4 (難易度レベル4)

  • ストーリーパート5（エンディング）
    となる。

難易度レベルが上がるごとにCPUは強くなる。
四目並べゲームパートでクリアすれば次のストーリーパートへ進める。
クリアできない場合は、その難易度をやり直しになる。

〜〜〜途中略〜〜
四目並べゲームパート

画面仕様

  • 画面には「背景画像」「四目並べゲーム画面」「セリフ窓」が並ぶ

操作仕様

  • ユーザーがタップすることで四目並べをCPUと対戦する。

  • ゲームのアルゴリズムの実装はyonmoku.jsで行う

ゲーム進行

下記はyonmoku-scenario.jsで管理する

  • 背景画像はレベルによって変更されることができる

  • セリフ窓はゲームパートごとの開始と終了で変化させることができる

  • CPUが3つコマを初めて並べた時にカットイン画像が2秒入り「四目並べゲーム画面」の上に表示される、「セリフ窓」の内容が変更される(cpu_reach)

  • プレイヤーが3つコマを初めて並べた時にカットイン画像が2秒入り「四目並べゲーム画面」の上に表示される、「セリフ窓」の内容が変更される(player_reach)

  • CPUが勝った場合にカットイン画像が5秒入り「四目並べゲーム画面」の上に表示される、「セリフ窓」の内容が変更される(cpu_win)

  • プレイヤーが勝った場合にカットイン画像が5秒入り「四目並べゲーム画面」の上に表示される、「セリフ窓」の内容が変更される(player_win)

実装案

  • yonmoku.html yonmoku.js yonmoku-scenario.js が実装ファイルである

yonmoku-scenario.jsのイメージ

const scenario_level1 =
    {
        background: 'top.png',
        start_dialogue:  '勝負よ！' 
        end_dialogue: '負けたー！修一強いね'
    };

いろいろ書いてますが要するにゲーム中にカットイン演出がしたいというのを書いています

プレイヤーやCPUがリーチするとカットイン演出する

ChatGPT先生の返答
「しずくと四目並べしよ！」（略称「しずく四目」）の仕様についてレビューさせていただきます。全体的に、ストーリーとゲームの組み合わせが面白いアプローチで、特にモバイルファーストのデザインは良い選択です。以下、各部分についてのフィードバックです。

共通仕様

  • スマートフォンを基準とする画面サイズの選択は、ユーザーの利便性を考えると妥当です。レスポンシブデザインを採用すると、さらに多くのデバイスで快適にプレイできるでしょう。

〜略


3. ChatGPTとプログラミングをする

あとは前回と同じくまずは目次を作ってもらいます

「しずくと四目並べしよ！」をあなたと一緒に作っていきたいと思います。
ステップバイステップで動かしながら作成するために、どのような実装手順で作成するか、まず目次をつくってください。
希望として四目並べゲームパートを優先的に作成し、その後でストーリーパートを作りたいと思います。

例えば

1-1. 四目並べゲームパートの作成
1-2. ゲーム画面の基本的な実装
1-3. 四目盤の実装
1-4. プレイヤーの操作
1-5. CPUのアルゴリズムの実装
1-X.
2-1. ストーリーパートの作成
2-2. ゲーム画面の基本的な実装

などです

すると目次を作ってくれます

「しずくと四目並べしよ！」の開発をステップバイステップで進める計画を立てましょう。四目並べゲームパートを優先的に作成し、その後にストーリーパートを開発する流れが理想的です。以下に、そのための実装手順の目次を提案します。

1. 四目並べゲームパートの作成

1-1. ゲーム画面の基本的な実装

  • HTMLとCSSを使って基本的なゲーム画面を作成。

  • 四目並べゲームのレイアウトを定義（ボード、ゲーム情報表示エリアなど）。

1-2. 四目盤の実装

  • JavaScriptを用いて四目並べのボードを表現するデータ構造を作成。

  • ボード上でのコマの配置を表示するためのUI実装。

~略

あとはChatPT先生に目次を伝えるー＞コードを書いてもらうー＞コピペする
を繰り返します。

ただ今回の開発規模（JavaScriptで500行)になるとチャットのスレッドが長くなり途中でChatGPT先生(GPT4)がポンコツになる場面は多々ありました。
具体的にはこんな場面がありました

  • 間違ったコードを提示してくる

  • いきなりCode Interpreterが起動しPythonのコードを書き始める

  • 何度質問してもエラーになる　（対処としては質問内容を鉛筆ボタンで編集して変えてみる）

また今回は対戦ゲームなので対戦CPU側のアルゴリズムも必要ですがそこもChatGPTに生成してもらいます。

また今回のゲーム画面に関してはiPadのペンで書いたラフをChatGPTに読み込ませてHTMLを出力してもらいました

そして出力されたコードをコピペして想定と違ったらそのスクリーンショットを貼り付けて「ここ直してGPTえもん！」と叫びます

4. 今回ゲーム用に工夫した点

今回のようにゲーム中にカットインの画像をロードする場合HTTPリクエストが飛んで取得するので画面に表示されるまで遅延が発生します。
またゲームクリア後のご褒美CG（リワードCG）もクリア後に画像をリクエストするので読み込みが遅延が発生してしまいます。
そのためまずChatGPT DALL-Eが出力する画像をGoogleが作ったsquoosh(https://squoosh.app/)を使ってWebP化するとサイズが10%程度になります。その後画像のプリロード処理をするわけですが、そのやり方もChatGPT先生に聞きます。

クリア後ご褒美CG1に相当するもの


作ってみての感想

前回ChatGPTとDALL−E3で作成したギャルゲーに比べて制作は遥かに大変でした（制作に数日かかりました）。素直にDALL-E3とChatGPT先生プログラミングでギャルゲーをちゃんと作るほうが楽だし生産効率は高いは思いました。しかし今回のような対戦ゲームのフレームワークを一回作ってしまえば四目並べの部分を五目並べやオセロに変えられますしそれこそ将来的には麻雀にできるかもしれません。
また今まで「将棋プログラミングをしよう！」「ゲーム制作をプログラミングしよう！」みたいな本を買って挫折した私ですが、初めてまともにゲーム制作ができたと思います。ChatGPT先生は優秀なプログラミングの先生であり本にもまさるガイド役になりえると思いました。
まだ1面しかゲームはないのでCPUを強くして4〜5面まで作っていきたいと思います。麻雀ゲームっぽく多キャラができるとさらに面白いと思いました。

他で活用できそうなアプローチ

このようなアニメキャラを使ったゲーム制作はプログラミングに興味を持たせたい子供などには有効な手なんじゃないかなーと思いました。



この記事が気に入ったらサポートをしてみませんか？