ChatGPTを活用したゲーム制作の方法｜具体的な事例を解説
ChatGPTは、その優れた対話能力と多岐にわたる応用範囲から、ゲーム制作の分野でも注目を集めています。
本記事では、プログラミング未経験者でも簡単に始められるChatGPTを使ったゲーム制作の成功事例と具体的な手法を詳しく解説します。
コンテンツ [表示]
ChatGPTを活用したゲーム制作とは
近年、AI技術の進展により、新たなツールを活用して、より効率的なゲーム制作が可能になっています。
中でも特に注目されているのが、ChatGPTです。
しかし、「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 ChromeとVisual Studio Codeを使用しました。
Visual Studio Codeの導入方法は、後ほど詳しく説明します。
本記事は、有料プランであるChatGPT Plusに加入する事で利用できるモデル「ChatGPT-4o」を使用しています。
ChatGPT Plusは「DALL-E 3」という画像生成機能を使用することができます。
Plusプランに加入していないユーザーも回数制限はありますが、無料でChatGPT-4oを利用することが可能です。
同様に、Plusプランに加入していないユーザーも回数制限はありますが、無料で「Image Creator for Microsoft Bing」から画像生成機能を使うことができます。
ゲーム制作におすすめのプログラミング言語をChatGPTに尋ねる
はじめに、ゲーム制作の環境についてChatGPTに尋ねます。
5つのプログラミング言語について、ChatGPTが利点とおすすめの用途を提案してくれました。
2の「JavaScript」はウェブブラウザ上で動くゲームを制作できるようなので、今回のゲーム制作では「JavaScript」を使用することにします。
どのようなゲームが作れるのかChatGPTに尋ねる
ウェブブラウザ上で遊べる簡易的なゲームとして、どのようなものが制作できるのか、ChatGPTに尋ねます。
短時間で制作できる6つのジャンルの異なるゲームを、ChatGPTが提案してくれました。
3の「シューティングゲーム」が気になったので、さらに深掘りします。
シューティングゲームの設計や、必要な技術とツールについて、詳細な回答を得ることができました。
ChatGPTが「2Dの上から見下ろし型のシューティングゲームが初心者には作りやすい」と答えているので、それに従って制作するゲームをインベーダーゲーム風のシューティングゲームに決定しました。
シューティングゲームをJavaScriptで作る方法をChatGPTに尋ねる
JavaScriptでシューティングゲームを作るために、どのようなツールや環境が必要なのかをChatGPTに尋ねます。
シューティングゲームを制作するにあたって必要なツールや環境について、具体例と目的をあげて答えてくれました。
さらに、開発する際のポイントも答えてくれています。
ChatGPTがJavaScriptを用いて、シューティングゲームを制作するには、テキストエディタとウェブブラウザが必要だと教えてくれました。
筆者は、ウェブブラウザはGoogle Chromeを使用しているので、新たに環境を整える必要なさそうです。
もしGoogle Chromeを導入していない場合、下記のリンクからインストールすることができます。
筆者は、コードの編集と保存を行うために必要なテキストエディタを導入していないので、Visual Studio Codeの導入方法について尋ねてみます。
作業環境を導入する方法について、公式リンクへのアクセス方法を添えて回答してくれました。
Visual Studio Codeのダウンロードは、以下のリンクから可能です。
ChatGPTの手順通り、Visual Studio Codeの導入を進めます。
以下の画像のように表示されれば、Visual Studio Codeの導入が完了です。
次に、Visual Studio Codeで「Live Server」という拡張機能をインストールします。
拡張機能のインストール方法は、Visual Studio Codeの左サイドバーにある「拡張機能」アイコン（四つの四角形のアイコン）をクリックします。
拡張機能ビューの検索バーに「Live Server」と入力します。
検索結果に「Live Server - Ritwick Dey」が表示されるので、それを選択します。
「インストール」ボタンをクリックして、拡張機能をインストールします。
ChatGPTの指示に従って実際にゲームを制作する
作業環境の導入が終わったら、ChatGPTにシューティングゲームの作り方を教えてもらいます。
ChatGPTの指示に従って、プロジェクトフォルダを作成します。
筆者は、デスクトップに配置しました。
プロジェクトフォルダの名前は、「my-html-project」とします。
プロジェクトフォルダ内に「index.html」、「style.css」、「script.js」ファイルをそれぞれ作成します。
作成方法は、まずVisual Studio Codeを起動し、サイドバーのエクスプローラーから、作成したプロジェクトフォルダを開きます。
次に、新しい無題のテキストファイルをクリックして、3つのテキストファイルを作成します。
3つのテキストファイルの名前を「index.html」、「style.css」、「script.js」とそれぞれリネームします。
このままでは、敵が緑の四角で描画されている状態なので、ChatGPTの画像生成機能を使って、インベーダーのグラフィックを作成します。
この画像を、「enemy.png」という名前で、作成したプロジェクトファイル、「my-html-project」のフォルダに保存します。
以下の画像のような階層になっていれば、作業環境の準備が完了です。
最後に、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を活用して、ゲーム制作に参考にできる部分があれば取り入れてみてください。
おすすめの記事
Recommended Articles![]()
ゲーム企画の伝え方 〜より良い企画を作成するために抑えるべきポイント〜
2024.02.13
![]()
【完全版】ChatGPTを使いこなすための汎用プロンプト16選
2024.03.22
![]()
ChatGPTを使ったゲーム企画書の書き方｜すぐに使えるプロンプトと実例
2024.03.22
引用：https://chizaizukan.com/property/709/