ChatGPTを活用したゲーム制作の方法|具体的な事例を解説

ChatGPTを活用したゲーム制作の方法|具体的な事例を解説

ChatGPTを活用したゲーム制作の方法|具体的な事例を解説

ChatGPTは、その優れた対話能力と多岐にわたる応用範囲から、ゲーム制作の分野でも注目を集めています。
本記事では、プログラミング未経験者でも簡単に始められるChatGPTを使ったゲーム制作の成功事例と具体的な手法を詳しく解説します。

コンテンツ [表示]

  1. 1ChatGPTを活用したゲーム制作とは
  2. 1.1ChatGPTを活用して制作したシューティングゲームの操作方法
  3. 2ゲーム制作にChatGPTを活用するメリット
  4. 2.1プログラミングのサポートをしてくれる
  5. 2.2ゲーム制作時間の効率化につながる
  6. 3ChatGPTを活用してゲームを制作する方法
  7. 3.1ゲーム制作におすすめのプログラミング言語をChatGPTに尋ねる
  8. 3.2どのようなゲームが作れるのかChatGPTに尋ねる
  9. 3.3シューティングゲームをJavaScriptで作る方法をChatGPTに尋ねる
  10. 3.4ChatGPTの指示に従って実際にゲームを制作する
  11. 4まとめ|ChatGPTを活用したゲーム制作

ChatGPTを活用したゲーム制作とは

ChatGPT

引用:https://chizaizukan.com/property/709/

近年、AI技術の進展により、新たなツールを活用して、より効率的なゲーム制作が可能になっています。
中でも特に注目されているのが、ChatGPTです。

ChatGPTは、OpenAIが開発した高度な自然言語処理モデルで、様々なタスクに対応できる柔軟性を持っています。
 
ゲームの企画書やストーリープロットの作成、キャラクターデザインのアイデア出し、さらにはプログラミングやデバッグのサポートまで、幅広い分野で力を発揮します。

しかし、「ChatGPTをどのようにゲーム制作に活かせば良いのかわからない」「実際に活用しようとしたが、期待した結果が得られなかった」という方も多いのではないでしょうか。

そこで、本記事ではプログラミング未経験者である筆者が、ChatGPTを活用したシューティングゲームの制作方法について、具体的な事例を交えながら解説します。

こちらは、筆者がChatGPTを活用して、インベーダーゲームを参考に6時間で制作したシューティングゲームのスクリーンショットです。

シューティングゲーム スクリーンショット

実際にゲームとして遊ぶことが出来るように設計しています。
 

ChatGPTを活用して制作したシューティングゲームの操作方法

制作したインベーダーゲーム風のシューティングゲームの遊び方を説明します。

基本操作

  • 左移動:左矢印キー () または Left キーを押します。
  • 右移動:右矢印キー () または Right キーを押します。
  • 弾を発射:スペースキー (space) を押します。
  • 一時停止:キーを押します。

詳細な操作説明

  • プレイヤーの移動

    • 左矢印キー () またはLeftキーを押すと、プレイヤーキャラクターが左に移動します。
    • 右矢印キー () またはRightキーを押すと、プレイヤーキャラクターが右に移動します。
    • キーを離すと、プレイヤーキャラクターの移動が停止します。
  • 弾を発射

    • スペースキー(space) を押すと、プレイヤーキャラクターから弾が発射されます。弾は上方向に飛び、敵に当たると敵を倒すことができます。
  • ゲームの一時停止と再開

    • pキーを押すと、ゲームが一時停止します。再度pキーを押すと、ゲームが再開されます。

ゲームオーバーとリスタート

プレイヤーキャラクターのライフが0になると、ゲームオーバーになります。
ゲームオーバー後、Restart ボタンをクリックするとゲームが再開されます。

ゲーム制作にChatGPTを活用するメリット

ゲーム制作にChatGPTを活用できると、以下のようなメリットが得られます。

プログラミングのサポートをしてくれる

ChatGPTはコードの生成や解説ができるため、プログラミング未経験者でも簡単にゲームを制作を始めることができます。
具体的なコード例や手順をChatGPTに教えてもらうことで、初心者でもスムーズにゲーム制作を進められます。

筆者は、プログラムを書いた経験が全くありませんが、ゲームを制作することができました。

ゲーム制作時間の効率化につながる

ChatGPTを活用することで、ゲーム制作にかかる時間を短縮することが可能になります。

アイデア出しの時間短縮

ChatGPTは無数のアイデアを、短時間で生み出すことができます。
キャラクター設定、ストーリープロット、ゲームメカニクスなどのアイデア出しにかかる時間を削減できます。

バグ修正とテストの効率化

ChatGPTを仮想プレイヤーとしてシミュレーションに利用することで、ゲームの修正をしたり、バグを早期に発見したりできます。
またChatGPTにコードを提示することで、デバッグやテストの時間を大幅に削減できます。

ChatGPTを活用してゲームを制作する方法

実際に、ChatGPTを活用してゲームを制作する方法を解説します。

筆者がゲームを制作するために使用した作業の環境は、Google ChromeVisual Studio Codeを使用しました。
Visual Studio Codeの導入方法は、後ほど詳しく説明します。

本記事は、有料プランであるChatGPT Plusに加入する事で利用できるモデル「ChatGPT-4o」を使用しています。
ChatGPT Plusは「DALL-E 3」という画像生成機能を使用することができます。

Plusプランに加入していないユーザーも回数制限はありますが、無料でChatGPT-4oを利用することが可能です。

同様に、Plusプランに加入していないユーザーも回数制限はありますが、無料でImage Creator for Microsoft Bing」から画像生成機能を使うことができます。

Microsoft Designer の Image Creator

ゲーム制作におすすめのプログラミング言語をChatGPTに尋ねる

はじめに、ゲーム制作の環境についてChatGPTに尋ねます。
 

ChatGPT ゲーム制作

5つのプログラミング言語について、ChatGPTが利点とおすすめの用途を提案してくれました。

2の「JavaScript」はウェブブラウザ上で動くゲームを制作できるようなので、今回のゲーム制作では「JavaScript」を使用することにします。

どのようなゲームが作れるのかChatGPTに尋ねる

ウェブブラウザ上で遊べる簡易的なゲームとして、どのようなものが制作できるのか、ChatGPTに尋ねます。

ChatGPT ゲーム制作
ChatGPT ゲーム制作

短時間で制作できる6つのジャンルの異なるゲームを、ChatGPTが提案してくれました。

3の「シューティングゲーム」が気になったので、さらに深掘りします。

ChatGPT ゲーム制作

シューティングゲームの設計や、必要な技術とツールについて、詳細な回答を得ることができました。

ChatGPTが「2Dの上から見下ろし型のシューティングゲームが初心者には作りやすい」と答えているので、それに従って制作するゲームをインベーダーゲーム風のシューティングゲームに決定しました。

シューティングゲームをJavaScriptで作る方法をChatGPTに尋ねる

JavaScriptでシューティングゲームを作るために、どのようなツールや環境が必要なのかをChatGPTに尋ねます。
 

ChatGPT ゲーム制作
ChatGPT ゲーム制作

シューティングゲームを制作するにあたって必要なツールや環境について、具体例と目的をあげて答えてくれました。
さらに、開発する際のポイントも答えてくれています。

ChatGPTがJavaScriptを用いて、シューティングゲームを制作するには、テキストエディタウェブブラウザが必要だと教えてくれました。

筆者は、ウェブブラウザはGoogle Chromeを使用しているので、新たに環境を整える必要なさそうです。

もしGoogle Chromeを導入していない場合、下記のリンクからインストールすることができます。

Google Chrome - Google の高速で安全なブラウザをダウンロード
新しい Google Chrome で毎日をもっと快適に。Google の最先端技術を搭載し、さらにシンプル、安全、高速になった Chrome をダウンロードしてご活用ください。

筆者は、コードの編集と保存を行うために必要なテキストエディタを導入していないので、Visual Studio Codeの導入方法について尋ねてみます。

ChatGPT ゲーム制作
ChatGPT ゲーム制作

作業環境を導入する方法について、公式リンクへのアクセス方法を添えて回答してくれました。

Visual Studio Codeのダウンロードは、以下のリンクから可能です。

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

ChatGPTの手順通り、Visual Studio Codeの導入を進めます。

以下の画像のように表示されれば、Visual Studio Codeの導入が完了です。

Visual Studio Code

次に、Visual Studio Codeで「Live Server」という拡張機能をインストールします。

拡張機能のインストール方法は、Visual Studio Codeの左サイドバーにある「拡張機能」アイコン(四つの四角形のアイコン)をクリックします。

拡張機能ビューの検索バーに「Live Server」と入力します。
検索結果に「Live Server - Ritwick Dey」が表示されるので、それを選択します。
「インストール」ボタンをクリックして、拡張機能をインストールします。

ChatGPT ゲーム制作

ChatGPTの指示に従って実際にゲームを制作する

作業環境の導入が終わったら、ChatGPTにシューティングゲームの作り方を教えてもらいます。

ChatGPT ゲーム制作
ChatGPT ゲーム制作
ChatGPT ゲーム制作

ChatGPTの指示に従って、プロジェクトフォルダを作成します。
筆者は、デスクトップに配置しました。

プロジェクトフォルダの名前は、「my-html-project」とします。

プロジェクトフォルダ内に「index.html」、「style.css」、「script.js」ファイルをそれぞれ作成します。

作成方法は、まずVisual Studio Codeを起動し、サイドバーのエクスプローラーから、作成したプロジェクトフォルダを開きます。

ChatGPT ゲーム制作

次に、新しい無題のテキストファイルをクリックして、3つのテキストファイルを作成します。

ChatGPT ゲーム制作

3つのテキストファイルの名前を「index.html」、「style.css」、「script.js」とそれぞれリネームします。

Visual Studio Code

このままでは、敵が緑の四角で描画されている状態なので、ChatGPTの画像生成機能を使って、インベーダーのグラフィックを作成します

ChatGPT ゲーム制作

この画像を、「enemy.png」という名前で、作成したプロジェクトファイル、「my-html-project」のフォルダに保存します。

以下の画像のような階層になっていれば、作業環境の準備が完了です。

ChatGPT ゲーム制作

最後に、ChatGPTが出力したコードを、それぞれのファイルに記述します。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shooting Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<button id="restartButton" style="display:none;">Restart</button>
<script src="script.js"></script>
</body>
</html>

style.css

body {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
canvas {
border: 1px solid #fff;
}
#restartButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
}

script.js

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const restartButton = document.getElementById('restartButton');
const player = {
x: canvas.width / 2 - 25,
y: canvas.height - 60,
width: 50,
height: 50,
speed: 5,
dx: 0,
lives: 3
};
let bullets = [];
let enemies = [];
let enemyBullets = [];
let score = 0;
let gameOver = false;
let paused = false;
let enemyInterval;
const enemyImage = new Image();
enemyImage.src = 'enemy.png';
function drawPlayer() {
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawBullets() {
bullets.forEach(bullet => {
ctx.fillStyle = 'red';
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
function drawEnemies() {
enemies.forEach(enemy => {
if (enemyImage.complete) {
ctx.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
} else {
ctx.fillStyle = 'green';
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
}
});
}
function drawEnemyBullets() {
enemyBullets.forEach(bullet => {
ctx.fillStyle = 'yellow';
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
function drawScoreAndLives() {
ctx.fillStyle = 'white';
ctx.font = '20px sans-serif';
ctx.fillText('Score: ' + score, 10, 20);
ctx.fillText('Lives: ' + player.lives, canvas.width - 100, 20);
}
function movePlayer() {
player.x += player.dx;
if (player.x < 0) {
player.x = 0;
}
if (player.x + player.width > canvas.width) {
player.x = canvas.width - player.width;
}
}
function moveBullets() {
bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}
function moveEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += enemy.speed;
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
}
if (Math.random() < 0.01) {
createEnemyBullet(enemy.x + enemy.width / 2, enemy.y + enemy.height);
}
});
}
function moveEnemyBullets() {
enemyBullets.forEach((bullet, index) => {
bullet.y += bullet.speed;
if (bullet.y > canvas.height) {
enemyBullets.splice(index, 1);
}
});
}
function detectCollisions() {
bullets.forEach((bullet, bulletIndex) => {
enemies.forEach((enemy, enemyIndex) => {
if (
bullet.x < enemy.x + enemy.width &&
bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + bullet.height > enemy.y
) {
bullets.splice(bulletIndex, 1);
enemies.splice(enemyIndex, 1);
score += 10;
}
});
});
enemyBullets.forEach((bullet, bulletIndex) => {
if (
bullet.x < player.x + player.width &&
bullet.x + bullet.width > player.x &&
bullet.y < player.y + player.height &&
bullet.y + bullet.height > player.y
) {
enemyBullets.splice(bulletIndex, 1);
player.lives -= 1;
if (player.lives <= 0) {
gameOver = true;
clearInterval(enemyInterval);
restartButton.style.display = 'block';
}
}
});
enemies.forEach((enemy, enemyIndex) => {
if (
enemy.x < player.x + player.width &&
enemy.x + enemy.width > player.x &&
enemy.y < player.y + player.height &&
enemy.y + enemy.height > player.y
) {
enemies.splice(enemyIndex, 1);
player.lives -= 1;
if (player.lives <= 0) {
gameOver = true;
clearInterval(enemyInterval);
restartButton.style.display = 'block';
}
}
});
}
function update() {
if (!paused && !gameOver) {
movePlayer();
moveBullets();
moveEnemies();
moveEnemyBullets();
detectCollisions();
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawBullets();
drawEnemies();
drawEnemyBullets();
drawScoreAndLives();
if (paused) {
ctx.fillStyle = 'white';
ctx.font = '48px sans-serif';
ctx.fillText('Paused', canvas.width / 2 - 100, canvas.height / 2);
}
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '48px sans-serif';
ctx.fillText('Game Over', canvas.width / 2 - 150, canvas.height / 2);
}
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
function keyDown(e) {
if (e.key === 'ArrowRight' || e.key === 'Right') {
player.dx = player.speed;
} else if (e.key === 'ArrowLeft' || e.key === 'Left') {
player.dx = -player.speed;
} else if (e.key === ' ') {
createBullet();
} else if (e.key === 'p' || e.key === 'P') {
togglePause();
}
}
function keyUp(e) {
if (
e.key === 'ArrowRight' ||
e.key === 'Right' ||
e.key === 'ArrowLeft' ||
e.key === 'Left'
) {
player.dx = 0;
}
}
function togglePause() {
paused = !paused;
if (paused) {
clearInterval(enemyInterval);
} else {
startEnemyInterval();
}
}
function createBullet() {
bullets.push({
x: player.x + player.width / 2 - 2.5,
y: player.y,
width: 5,
height: 10,
speed: 7
});
}
function createEnemy() {
const x = Math.random() * (canvas.width - 20);
enemies.push({
x: x,
y: 0,
width: 50,
height: 50,
speed: 3
});
}
function createEnemyBullet(x, y) {
enemyBullets.push({
x: x - 2.5,
y: y,
width: 5,
height: 10,
speed: 5
});
}
function startEnemyInterval() {
enemyInterval = setInterval(createEnemy, 1000);
}
function restartGame() {
gameOver = false;
paused = false;
player.x = canvas.width / 2 - 25;
player.y = canvas.height - 60;
player.lives = 3;
score = 0;
bullets = [];
enemies = [];
enemyBullets = [];
restartButton.style.display = 'none';
startEnemyInterval();
}
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
restartButton.addEventListener('click', restartGame);
startEnemyInterval();
loop();

記述し終えたら、Visual Studio Codeで「index.html」ファイルを右クリックし、「Open with Live Server」を選択します。
または、Visual Studio Codeの右下にある「Go Live」ボタンをクリックします。

ウェブブラウザが自動的に開き、ゲームが表示されます。

以下の画面が表示されたら、ゲームの完成です。

ChatGPT ゲーム制作

まとめ|ChatGPTを活用したゲーム制作

本記事では、ChatGPTを活用してシューティングゲームを制作する手順を解説しました。

ChatGPTの力を借りることで、基本的な開発環境のセットアップから、実際のコーディング、そしてゲームの起動まで、プログラミングの知識がなくてもゲームが制作できました。

ChatGPTを活用すれば、ゲーム制作において、コーディングのヒントはもちろん、レベルデザインの設計、ストーリー展開のアイデアまで、幅広いサポートを得られます。

ただし、ChatGPTの回答は必ずしも正しいとは限らないため、最終的な判断と決定は自分で行うことを念頭に、ChatGPTをあくまでもゲーム制作の補助ツールとして位置づけることが大切です。

ぜひChatGPTを活用して、ゲーム制作に参考にできる部分があれば取り入れてみてください。

草林森
ライター

草林森

草林森(くさばやしりん)です。2018年の2月頃からVtuberにどっぷりハマりそれからVTuber界隈を歩んでいます。その延長線上で、バーチャルリアリティ(VR)にも興味関心があります。インターネットの新しい技術や取り組みが大好きなので、その魅力をお届けしていきたいと思います。

おすすめの記事

Recommended Articles
  • ゲーム企画の伝え方 〜より良い企画を作成するために抑えるべきポイント〜

    2024.02.13

  • 【完全版】ChatGPTを使いこなすための汎用プロンプト16選

    2024.03.22

  • ChatGPTを使ったゲーム企画書の書き方|すぐに使えるプロンプトと実例

    2024.03.22

リンクと画像の例

Risdom事前登録受付中!

Sample Image

タワーオフェンスゲーム「Knightcore Kingdom(ナイトコアキングダム)」日本上陸!

タワーオフェンスゲーム「Knightcore Kingdom(ナイトコアキングダム)」