テクノロジー

【テクノロジー】プログラミング初心者がChatGPTを利用してゲーム作成にチャレンジ！

テクノロジー
2024.04.20

■はじめに

今回は、「　プログラミング初心者がChatGPTを利用すれば、簡単にゲームを作成できるのか　」チャレンジしたいと思います。

「　ChatGPT　」が出始めたころはいろいろな情報が飛び交って、出来ること、出来ないこと、そもそも何ができるのか良くわからない状態でしたが、最近では情報も整理され、ChatGPTを利用している方も多いのではないでしょうか。

ChatGPTは、「　文章の生成　」「　文章の要約　」「　質問への回答　」「　多言語への対応　」などを得意としますが、「　プログラミング　」もできるらしく、

「　プログラミング未経験者が、ChatGPTを利用してゲームを作成できた　」などの情報やニュースを見かけることもあり、本当に？ 未経験で？っと思い。

それなら、「　プログラミング初心者が、ChatGPTを利用して簡単にゲームを作成できるのか　」実際にチャレンジしてみようと思いトライした結果になります。

今後、「　ChatGPT　」はインターネット検索のように一般的に使うことが多くなるツールだと思います。
数回に分けて「　ChatGPT　」の話しをしたいと思っておりますので、「　ChatGPT　」の使い方やどんなことができるのか今のうちから少しずつ使い方に親しんでもらえたらと思います。

この記事を見て皆さんが、「　明日の話しのネタにしてみよう　」、今度の休みは「　こんなことやってみよう　」のヒントになれば幸いです。

【　結果　】
「　ChatGPT　」を利用して簡単にゲームを作成できるのか？

・プログラミング「　未経験者　」
→　短時間でゲームを作成することは難しい。

・プログラミング「　初心者　」
→　短時間でゲームを作成することは難しい。
ただし、ChatGPTを上手く利用することができる人であれば、単純なゲームであれば作成可能。

・プログラミング「　経験者　」
→　できる。ChatGPTを上手く利用すれば、作業効率も向上する。

※　ChatGPTは、プログラミングのソフトではないため、プログラミングソフトなどの開発ツール、開発環境は別の環境を使用しております。

■話しの流れ

今回の話しの流れを下記に記載します。

【　流れ　】
●「　簡単・初心者　」などのレベルを決めておく。
●「　ChatGPT　」に質問しても、欲しい回答は得られないことを知る。
●「　ChatGPT　」について学ぶ。
●「　ChatGPT　」を利用して、1～2時間程度でゲームを作る方法を学ぶ。
　・ChatGPTへの「　質問の仕方　」について。
　・ChatGPTの「　回答内容　」を理解する。
●ゲーム作る①
　・ゲームを動かしてみる。
●ゲームを作る②
　・同じ質問をしてみる。
　・ゲームを動かしてみる。

■ルールを決める（定義）

本題に入る前に、まずは「　簡単　」「　初心者　」などのレベルについてルールを決めておきたいと思います。

【　ルール（定義）　】
●簡単の定義
簡単にゲームを作るの「　簡単　」とは、「　1～2時間程度　」でゲームを作るとしたいと思います。

●初心者の定義
「　初心者　」とは、プログラミングは組めないが、「　HTML言語　」「　Java スクリプト　」「　CSS　」「　C言語　」「　Python（パイソン）　」などコンピューター言語に種類がある事を知っていることや、「　拡張子の知識　」「　ファイル操作　」「　パソコンの設定変更　」「　ソフトのインストール　」など、一般的なパソコンの操作を行えるレベルとしたいと思います。

●ゲームのクオリティー
最低レベル。ゲームと言えなくもない程度でok。

●ChatGPTの理解度
ChatGPTを「　ほとんど使ったことがない　」レベルにしたいと思います。

■欲しい回答を得るにはコツがいる

プログラミング初心者が、「　ChatGPT　」にゲームの作り方を聞くだけでは、
「　簡単に（1～2時間で）ゲームを作ることができない　」
つまり、質問の仕方にはコツがいるということを、身をもって理解したいと思います。

まずは、ChatGPTに「　ゲームの作り方を教えて　」と、ストレートな質問をしてみました。
※ 今回使用するChatGPTは、ユーザー登録で使用できる「　ChatGPT3.5　」を使用しております。
※ 文章の末尾に[ChatGPT]と記載している箇所は、ChatGPTの回答文になります。

ChatGPTへ質問

「　ゲームの作り方を教えて　」

ChatGPTの回答

ゲームを作る方法には多くのアプローチがありますが、基本的なステップは以下の通りです

① アイデアの構築:　まずはゲームのコンセプトやストーリー、ゲームプレイの要素・・・
② ゲームデザインの作成: ゲームデザインを詳細に計画しましょう。ゲームのルール・・・
③ プロトタイプの作成: ゲームの初期バージョン（プロトタイプ）を作成します。これは・・・
④ 開発: プロトタイプが完成したら、本格的な開発に入ります。プログラミング、・・・
⑤ テストとフィードバック: 開発中に定期的にテストを行い、プレイヤーからフ・・・
⑥ リリース: ゲームが完成したら、適切なプラットフォーム（PC、スマートフォン、・・・
※ ・・・の部分は長いので省略しています。

このステップは一般的なゲーム開発の流れですが、実際にはさまざまな方法やツールがあります。自分のスキルや目標に合わせて最適な方法を見つけることが重要です。[ChatGPT]

まとめ

質問に対する回答として間違ってはいないのですが、今回は「　ゲームを作る流れ　」が知りたいのではなく、「　実際に動かせるゲームの作り方　」を知りたいため、欲しい回答とは少し違いました。

私の欲しい回答と違ったため、質問を少し変更してみました。

ChatGPTへ質問

「　簡単にゲームを作る方法を教えて　」

ChatGPTの回答

簡単にゲームを作る方法として、以下の手順があります：

① ゲームエンジンの選択　・・・
② チュートリアルやサンプルプロジェクトの学習　・・・
③ シンプルなゲームの作成　・・・
④ リソースの活用　・・・
⑤ テストとフィードバック　・・・
⑥ 公開　・・・
※ ・・・の部分は長いので省略しています。

この手順に従うことで、比較的簡単にゲームを作ることができます。初心者でも取り組みやすい方法ですので、ぜひ挑戦してみてください。[ChatGPT]

まとめ

質問に対する回答として間違っていないのですが、今度も「　ゲームを作る流れ　」についての説明でした。

質問の仕方が悪いと思い、質問の仕方を「　ゲームを作ってもらえる　」よう変更してみました。

ChatGPTへ質問

「　簡単なゲームを作って　」

ChatGPTの回答

①Unityのインストール、②ゲームオブジェクトの作成、③物理エンジンの設定、④ゲームのルールとコードの実装・・・　[ChatGPT]

※ ・・・の部分は長いので省略しています。

まとめ

少し変化はありましたが、今度も「　ゲームを作る流れ　」についての説明でした。

さらに質問の仕方を変えてみたいと思います。

ChatGPTへ質問

「　簡単なゲームのプログラミングを組んで　」

ChatGPTの回答

理解しやすく、簡単に実装できるゲームとして、Pythonを使って「数当てゲーム」を作ってみましょう。このゲームでは、コンピューターがランダムな数を選び、プレイヤーがその数を当てるゲームです。以下に、Pythonでの数当てゲームのプログラム例を示します。[ChatGPT]

import random

def guess_number():
    print("数当てゲームを始めます！")
    target_number = random.randint(1, 100)  # 1から100までのランダムな数を選択
    attempts = 0

    while True:
        user_guess = int(input("1から100までの数を入力してください（終了するには0を入力）: "))
        if user_guess == 0:
            print("ゲームを終了します。")
            break
・・・以下略　[ChatGPT]

まとめ

「　Python（パイソン）　」を使ったプログラムを組んでくれましたが、そのプログラムはどのようにしたら動かせるようになるのでしょうか？

このように、「　プログラミング未経験者 や プログラミング初心者　」がChatGPTを利用したところで、簡単に（1～2時間で）ゲームを作ることはできなそうということを理解してもらえたでしょうか？

上記のような質問を、何度も繰り返せば、いつかは「　ゲーム　」が作れることは予想できますが、そこまで労力をかけるなら「　普通にプログラミングを学んだほうが手っ取り早い　」のではないかと思います。

■ChatGPT について学ぶ

今回は、「　ChatGPT　」をほとんど使ったことがないということが前提のため、上記のようなあいまいな質問をしましたが、もっと質の高い質問をすれば「　自分の欲しい回答　」を得ることができるようになります。

ChatGPTに「　質の高い質問　」をするために、ChatGPTの使い方や特徴について説明したいと思います。

ChatGPTはどんな奴？

「　ChatGPT　」は、気のいい友達と思ってもらえたらよいと思います。
友達に「　文章　」で質問するようにChatGPTに「　文章　」で質問をすれば回答してもらうことができます。

検索エンジンのように「　単語　」ではなく、ChatGPTは「　文章　」を読み取るため、友達との会話やメールのように、「　句読点　」など文章として成立するよう入力してあげることにより、自分の欲しい回答を得ることがでるようになります。

また、丁寧な言葉で質問をすれば「　丁寧な言葉で　」、雑な言葉で質問をすれば「　雑な言葉で　」回答をしてくるため、丁寧な言葉で質問をするよう心掛けたいですね。

【　すごく大雑把にいうと、下記のような性格をしています　】
　・頭が良いけど、おっちょこちょいで勘違いをする。
　・流暢（りゅうちょう）にウソを付く。（ウソを付かないようにも指示できる）
　・何度も同じ質問に答えてくれる気のいい奴。
　・日々成長を続けている努力家。

こんな特徴がある

ChatGPTにはこんな特徴があります。

【　ChatGPTの特徴　】
　・検索エンジンではない
　・同じ質問でも、毎回答えが違う。
　・こちらが質問した文脈を理解して、流暢（りゅうちょう）な会話が可能。
　・さっきした質問に対して「　その、さっきの　」などが通用する。
　・基本的にテキストのみのやり取り。（画像や音声など随時対応中）
　・回答が真実である保証はない。
　・新しい直近の情報は信憑性が薄い。
　・専門性が高いほど信憑性が薄くなる。
　・日々進化している。
　・多くの言語に対応している。
　・機密性は保証されていない。
　・日本語より、英語のほうが正確で回答が早い。

こんなこともできる

ChatGPTはこんなこともできます。

【　こんなこともできる　】
　・回答の長さを調整できる。（100文字以内でなど）
　・回答レベルを変えられる。（小学生にも分かるようになど）
　・知らないことは「　知らない　」と言ってもらうこともできる。
　・回答の個数を指定できる。（～～について5個教えてなど）
　・文章を張り付ければ、内容を校正してもらえる。
　・文章を張り付ければ、内容を要約してもらえる。（文字数も指定できる）

こんな使い方もできる

ChatGPTはこんな使い方もできます。

【　こんな使い方もできる　】
　・検索エンジンのように、知りたいことを教えてもらう。
　・資料の下書きを作ってもらう。
　・文章のたたき台を作ってもらう。
　・自分の考えやアイデアを整理する。
　・メールの回答をしてもらう
　・時間割などのたたき台を作ってもらう。
　・箇条書きを文章にしてもらう。
　・結婚式などのスピーチを作ってもらう。
　・指定したキーワードを含めて文章を作ってもらう。
　・翻訳に使う。
　・プログラミングの修正をしてもらう。
　・プログラミングのたたき台を作ってもらう。
　・エクセルの関数を教えてもらう。
　・小説を作ることも可能。

ChatGPTへの質問は、「　一発で完成を求めるのではなく、複数回トライ　」した回答結果を、自分なりに整理して使うというのが好ましいというのが現状です。

■ChatGPT を利用して、1～2時間程度でゲームを作る方法

プログラミング初心者が「　やみくもにChatGPTに質問するだけでは、簡単にゲームを作ることができない　」という結論に至りましたが、
ChatGPTに上手に質問をすることができれば、プログラミングを組まなくても、ChatGPTを利用し「　短時間　」でゲームを作ることができるため、その手順を紹介したいと思います。

開発環境について

ゲームのプログラミングを行うためには、「　ゲームを開発する環境が必要　」になります。
ほとんどの初心者の方は、この「　開発環境を整える段階で挫折してしまう　」ことや、開発環境を整えるだけで1～2時間なんてあっという間に過ぎてしまうため、「　短時間でゲームを作る　」というルールから外れてしまいます。

そのため、今回は手を抜きたいと思います。

このページを見ていて、ゲームプログラミングをしようとし思っている方は、「　パソコン　」を所持しており、「　インターネットを見られる環境　」が準備できていると思いますので、その環境を使用したいと思います。

今回、開発環境は「　インターネット閲覧ソフト（ブラウザ）　」と「　メモ帳　」を使いたいと思います。
この二つであればすでにパソコンにインストールしてあると思いますので、特別な準備をしないで済むと思います。

【開発環境】
　・ChatGPT 3.5 を使用
　・Windowsのインストールしてあるパソコン
　（OSはWindows10 or 11が好ましい）
　・インターネットを見られる環境。
　（Edge、chrome）
　・メモ帳

ChatGPTへの「　質問の仕方　」について。

ChatGPTから「　自分の欲しい回答を得る　」ためには、「　〇〇を使って　」「　〇〇で　」など、的を絞った質問を行うことで自分の欲しい回答を得ることができるようになります。
また、インターネット検索のように「　単語や短文　」ではなく、「　長文　」で質問してもよいため、友達に話すように長文で質問して問題ありません。

以上を踏まえ、今回は以下のキーワードを含めて質問をしたいと思います。

【キーワード】
●ブラウザ
インターネット閲覧ソフトを使ってゲームを行うため、「　ブラウザ　」という言葉を使用します。

●HTML
ブラウザでプログラミングを行うということは「　HTML　」という言語をつかうため、「　HTML　」という言葉を使用します。

●ソースコード
プログラミングの内容のことを「　ソースコード　」というので、「　ソースコード　」という言葉を使用します。

上記の「　キーワード　」を含めて、下記のような質問をしたいと思います。

質問内容

「　htmlを使用し、パソコンのブラウザ上で動く簡単なゲームプログラミングのソースコードを教えて。　」

■ゲームを作る①

ChatGPTへ質問する

先ほど決めた質問内容をChatGPTへ質問したいと思います。

注意点として、「　ChatGPT　」はさきほどした質問の内容を覚えているため、質問をするときは「　話題を一つ　」に絞ったほうが質問の理解度が深まります。
そのため、「　同じ話題の時は続けて質問を行う　」とChatGPTの理解度も深まります。

ただし、今回ははじめて質問したときのChatGPTの反応が見たいため、わざと「　New chat（新規で質問）　」で質問したいと思います。

ChatGPTへ質問

「　htmlを使用し、パソコンのブラウザ上で動く簡単なゲームプログラミングのソースコードを教えて。　」

ChatGPTの回答

上記の質問を行った結果、下記のような回答を得ることができました。

ChatGPTの回答

以下はHTMLとJavaScriptを使用して、ブラウザ上で動作する簡単なゲームの例です。この例では、ユーザーがクリックするたびにボールがランダムな場所に移動します。ボールが特定のエリア内にある場合、ユーザーはポイントを得ます。[ChatGPT]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クリックゲーム</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
  }
  #score {
    font-size: 24px;
    margin-bottom: 20px;
  }
  #clickButton {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
  }
</style>
</head>
<body>

<h1>クリックゲーム</h1>
<p>ボタンをクリックしてスコアを上げよう！</p>

<p id="score">スコア: <span id="currentScore">0</span></p>

<button id="clickButton">クリック!</button>

<script>
  // スコアを管理する変数
  let score = 0;

  // ボタンがクリックされたときの処理
  document.getElementById("clickButton").addEventListener("click", function() {
    // スコアを1増やす
    score++;
    // スコアを表示する要素を更新
    document.getElementById("currentScore").textContent = score;
  });
</script>

</body>
</html>

このコードは、HTML内にゲーム領域を設定し、その中に赤い円（ボール）を表示します。ユーザーがボールをクリックすると、スコアが増え、ボールがランダムな位置に移動します。[ChatGPT]

ゲームを動かす

ChatGPTに「　プログラムをいきなり見せられても　」、プログラミング初心者の方はどのようにしたらゲームを動かしてよいか分からないと思いますので、順番に説明していきたいと思います。

準備

ファイルの「　拡張子　」が見られるように、パソコンの設定を変更したいと思います。
※　すでに設定済の方は読み飛ばしてください。

「　拡張子は　」みなさんはご存じだと思いますが、念のため簡単に説明しておきます。

【　拡張子とは　】
パソコンはさまざまなデータファイルを扱っていますが、さまざまなデータファイルを区別するため、
文字ファイルは「　.txt　」画像ファイルは「　.jpg　.png　」動画合は「　.mp4　.mov　」など、ファイル名の後ろに「　.　」を挟んで「　ファイル名 . 拡張子　」という形で記述し、どのようなファイルを扱っているかパソコンが区別するときに拡張子を使用しています。

拡張子の設定を変更するためには、何でもよいので適当なフォルダーを開きます。
※　説明はWindows11で行っております。

フォルダーの上部にある「　① 表示　」をクリックすると設定画面が下に伸びるので、
その下のほうにある「　② 表示　」をクリックしてあげると更に設定画面がよこに伸びます。

「　③ファイル名拡張子　」に「　レ点　」が入っていることを確認し、
レ点が入っていない場合は、マウスでクリックして「　レ点　」を入れてください。

「　拡張子　」の設定変更を行うと、下図の右側のようにファイル名に「　.txt　」など拡張子が表示されるようになります。

準備は以上になります。

プログラムを張り付ける場所を確保する

先ほどのプログラムはそのままでは動かせないため、パソコンに付属の「　メモ帳　」を使用します。

デスクトップに「　メモ帳　」で「　テキストファイル　」を新規に作成します。
ファイル名は何でもよいですが、分かりやすいように今回は「　ゲーム01.txt　」としておきたいと思います。

先ほどChatGPTに作ってもらったプログラムを「　メモ帳（ゲーム01.txt）　」を開いて貼り付けます。
張り付ける部分は一番上の「　DOCTYPE html　」から、一番下の「　/HTML　」の部分になります。

プログラムが張り付けられたら、メモ帳（ゲーム01.txt）を「　保存　」します。
これで、テキストファイルの準備は完了です。

拡張子をHTMLに変更する

「　ゲーム01.txt　」は、拡張子が「　.txt　」となっているため、「　テキストを扱うデータファイル　」になります。　「　パソコンのブラウザ上でプログラミングを動かす　」ためには、ファイルを「　HTML　」形式に変更してあげる必要があります。

「　HTML形式　」に変更するためには、「　ゲーム01.txt　」の拡張子「　.txt　」を「　.html　」とキーボードで直接打ち込んであげれば、拡張子を変更することができます。

「　拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？　」

と注意されますが「　はい　」を選択し、拡張子を変更します。

拡張子を変更すると、「　Edegの場合は左　」、「　chromeの場合は右　」のようなファイル画像に変わっていると思います。
これは、普段インターネットを何で見ているかによって違う表示になります。
※　環境によってはsafariやfirefoxなどその他の場合もあります。

本来は「　ソフトを使用して拡張子の変更　」を行うべきですが、動作確認を行う程度であれば今回の方法でも問題ありません。

ゲームを動かす

先ほど作成した「　HTML形式ファイル　」を「　ダブルクリック　」してあげます。

すると、「　ブラウザ　」が立ち上がり、下図のようなクリックゲームができるようになります。

このゲームは、「　クリック！　」というボタンを押すと数字をカウントするというシンプルなものです。
ゲームと言えるか微妙なところではありますが、それでも小1時間でゲームができるのはすごいと思います。

「　スタート　」や「　停止　」などの機能はないため、画面右上の「　×ボタン　」でブラウザを閉じるとゲームを終了することができます。

■ゲームを作る②

同じ質問をする

もう一度「　ChatGPT　」に同じ質問をしてみました。

ChatGPTへ質問

「　htmlを使用し、パソコンのブラウザ上で動く簡単なゲームプログラミングのソースコードを教えて。　」

ChatGPTの回答

簡単なブラウザ上で動作するゲームとして、「クリックゲーム」を作成してみましょう。このゲームでは、ボタンをクリックするたびにスコアが増加するシンプルな仕組みです。以下に、HTMLとJavaScriptを使用したクリックゲームのソースコードを示します。[ChatGPT]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Game</title>
<style>
    #game-area {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
    }
    #ball {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
    }
</style>
</head>
<body>

<div id="game-area">
    <div id="ball"></div>
</div>

<p>Click inside the box to move the ball. Score: <span id="score">0</span></p>

<script>
    // Get references to DOM elements
    const gameArea = document.getElementById('game-area');
    const ball = document.getElementById('ball');
    const scoreDisplay = document.getElementById('score');

    let score = 0;

    // Function to move the ball to a random position
    function moveBall() {
        const maxWidth = gameArea.clientWidth - ball.offsetWidth;
        const maxHeight = gameArea.clientHeight - ball.offsetHeight;
        const randomX = Math.floor(Math.random() * maxWidth);
        const randomY = Math.floor(Math.random() * maxHeight);
        ball.style.left = randomX + 'px';
        ball.style.top = randomY + 'px';
    }

    // Event listener for clicking inside the game area
    gameArea.addEventListener('click', function(event) {
        const rect = gameArea.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        const ballX = ball.offsetLeft;
        const ballY = ball.offsetTop;

        // Check if click is inside the ball
        if (x >= ballX && x <= ballX + ball.offsetWidth && y >= ballY && y <= ballY + ball.offsetHeight) {
            score++;
            scoreDisplay.textContent = score;
            moveBall();
        }
    });

    // Initial call to moveBall function
    moveBall();
</script>

</body>
</html>

このゲームは非常にシンプルで、HTMLとJavaScriptの基本的な知識があれば理解しやすいでしょう。自分で試してみて、必要に応じてカスタマイズしてみてください！[ChatGPT]

面白いことに、先ほどと違う回答をしてきました。

ゲームを動かす

先ほどと同じ手順でHTMLファイルを作成し、「　ゲーム02.html　」を動かしてみたところ、

今度は、赤いボールをマウスで「　クリック　」すると、画面右下の「　Score　」をカウントしてくれるゲームが作成できました。

「　同じ質問を行っても前回と違う結果になる　」ことから、ChatGPTがその都度考えて回答してくれていることが分かります。

まとめ

質問の仕方によっては、すごくシンプルなゲームであれば、自分でプログラミングを行うことなくあっという間にゲームが作れることが分かりました。

ただ、プログラミング初心者の方が、このような質問ができるようになるには時間がかかると思いますので、「　ChatGPTを使えば簡単に（1～2時間で）ゲームを作成できるのか　」という問いに対しては、「　YES　」とは言えないと思います。

ただし、ChatGPTを上手く使うことができれば、プログラミングを自分で組まなくても、簡単に（1～2時間で）ゲームを作成できるということも分かってもらえたのではないかと思います。

■結果

【　結果　】
ChatGPTを利用すれば簡単にゲームを作成できるのか？

●プログラミング「　未経験者　」
→　短時間でゲームを作成することは難しい。
→　普通にプログラミングを基礎から学んだほうが早いと思います。

●プログラミング「　初心者　」
→　短時間でゲームを作成することは難しい。
→　ただし、ChatGPTを上手く利用することができる人であれば可能。
（プログラミングの内容が全く分からない状態なので実用的ではないが・・・）

●プログラミング「　経験者　」
→　できる。ChatGPTを上手く利用すれば、作業効率も向上する。

折角なので、次回はもう少し踏み込んで「　ブロック崩し風ゲーム　」と「　テトリス風ゲーム　」にチャレンジしてみたいと思います。

内容を理解しやすくするため表現を誇張しているが部分があることや、 このサイトの内容が絶対に正しいという保証は出来ません。 また、実作業における破損・傷害等に付きましても保証できないため、ご了承の上お付き合い頂けたら幸いです。

タイトルとURLをコピーしました