このページの内容は、下記の動画で詳しく説明しています
はじめに
ゲーム制作なんて自分には絶対に無理！
自分はプログラマーとか、専門家じゃないからゲームなんて作れるわけがない！
そんなふうに思っていませんか？
確かに自分ひとりでは難しいかもしれません
でも、最近はAIの進化がものすごく、これらAIを活用すれば
あなたもゲーム制作者になれるかもしれません！
さぁ、一緒に、AIに頼りまくったゲーム制作を始めていきましょう！
前回の振り返り
前回は、ChatGPTに教えてもらいながら、「鉱石収集＆ツール強化システム」の土台を完成させることができました。
これで、鉱石をクリックして集め、ボタン一つでピッケルをアップグレードする基本機能が実装できました。
このチャレンジのコンセプト
- AIを活用することで、初心者でもゲーム制作できることを目指す！
- Unity（ユニティ）というゲームエンジンを使って制作する
- AIはできる限り、無料のものを使用する（商用利用の関係や、どうしても必要な機能の関係で有料版を使用する場合もあり）
- AIを活用したゲーム制作の過程を、省略せずに全てをお見せすることで、視聴者の方が真似をして再現できるようにする
このページで使用するAIツール
前回まではChatGPTやClaudeをWebブラウザで直接利用していましたが、今回から開発スタイルを大きく変更します！
- メインツール: Cursor
- AIエージェント機能を搭載したコードエディタです。 VSCodeベースで操作しやすく、プロジェクト全体のコードをAIが把握してくれるため、開発効率が飛躍的に向上します。
- サブツール: ChatGPT (有料版)
- UIに必要な画像素材を生成するために、商用利用可能な有料版の画像生成機能を使用します。
このページ（および動画）の活用方法
このシリーズは、以下のような方々に向けて制作しています。
- まずは真似して同じように試してみて、慣れてきたら少しアレンジするのが良いと思います
- 手順などは、動画を見てもらうのが一番分かりやすいと思います
- AIへの指示文（プロンプト）はこのページに載せていますので、コピペして、ご自身用に修正しながらご使用ください
それでは、AIに助けてもらいながら、ゲーム制作を始めていきましょう！
新たな相棒！AIコードエディタ「Cursor」の導入
なぜ今、AIコードエディタなのか？
これまでAIコードエディタは、無料プランでは性能が発揮しきれない、GUI操作の多いUnityでは恩恵が少ない、という理由で使ってきませんでした。
しかし、Claude 3.7 SonnetやGemini 2.5 Proといった強力なAIが登場し、Cursor自体の性能も上がってきた結果
無料プランでも十分にUnity開発の強力なサポーターになってくれると判断し、今回から本格的に導入することにしました。
Cursorのインストールと初期設定
手順1: ダウンロードとインストール
Cursorのウェブページからインストーラーをダウンロードし、画面の指示に従ってインストールします。
Cursor - The AI Code Editor
Built to make you extraordinarily productive, Cursor is the best way to code with AI.
www.cursor.com
手順2: サインインと基本設定
AI機能を使うにはサインインが必要です。
GoogleやGitHub、メールアドレスで登録できます。
初めて開いたら、右上の歯車マークから設定画面を開き、以下の項目を確認しましょう。
- Language For AI:
日本語と入力しておくと、AIが日本語で回答してくれます。 - プライバシーモード:
Enableにしておくと、送信したコードがAIの学習に使用されなくなります。
手順3: AIモデルの選択
「モデル」タブで、使いたいAIモデルにチェックを入れます。
動画撮影時点では、高性能なClaude 3.7 Sonnet、Gemini 2.5 Proと、利用回数が多いChatGPT 4o-miniをチェックしておくのがおすすめです。
手順4: Rules（AIへの指示書）の設定
「Rules」機能を使えば、AIにどう振る舞ってほしいかをあらかじめ設定でき、毎回細かく指示する手間が省けます。
今回は、他の人が公開しているUnity用の設定を「Cursor Directory」というサイトからコピーして、プロジェクトに設定しました。
Cursor Directory
Find the best cursor rules for your framework and language
cursor.directory
アップグレードメニューの実装
準備が整いました！それでは早速、Cursorを使ってピッケルのアップグレード機能を拡張していきます。
仕様の確認とAIへの指示
現在の仕様は、ボタンを一つ押すだけで次のピッケルにアップグレードされる、というシンプルなものです。
これを、専用のメニュー画面を開いて、そこから好きなピッケルを選択してアップグレードできるように変更します。
それでは、CursorのAIにタスクを依頼します！
プロンプト
このゲームは現在、ピッケルのアップグレードを、ボタンを押すだけというシンプルな仕様になっていますが、これを、ボタンを押すと別メニューが開き、そのメニュー内にアップグレードのピッケル一覧が表示されて、選択すると条件を満たしていればそのピッケルにアップグレードできるようなかたちに仕様変更したいです。
まず、仕様変更の流れを書いてください、その後で実際に仕様変更を進めてください。
AIによる実装計画の立案
プロンプトを受け、Cursorが自律的に動き始めました。
Cursor（AI）の回答例
コードを理解するためにまずファイル構造を確認します。
Ran tool
次にスクリプトディレクトリの内容を確認します。
Ran tool
さらに、PickaxeManagerの内容を確認します。
Read file: Assets/Scripts/PickaxeManager.cs
次に、PickaxeDataの内容を確認します。
Read file: Assets/Scripts/PickaxeData.cs
最後に、GameManagerを確認してピッケルのアップグレード関連の処理を把握します。
Read file: Assets/Scripts/GameManager.cs
適切なユーザーインターフェイス要素を作成するために、プレハブフォルダの内容も確認します。
Ran tool
Ran tool
ピッケルデータの実装も確認します。
Ran tool
ピッケル一つを確認します。
Read file: Assets/Pickaxe/WoodenPickaxe.asset
これで必要な情報が集まりました。仕様変更の計画を立てます：ピッケルアップグレードシステムの仕様変更計画
- 新しいUIの設計と実装
- ピッケルアップグレードメニューのウィンドウを作成
- 利用可能なピッケルのリスト表示
- 各ピッケルの詳細情報表示（名前、採掘力、アップグレード要件など）
- 選択ボタンと閉じるボタンの実装
- スクリプトの変更点
- PickaxeManager の拡張
- 使用可能な全ピッケルのリストを取得するメソッドの追加
- 特定のピッケルへの直接アップグレードメソッドの追加
- GameManager の変更
- 既存のアップグレードボタン処理を新しいメニュー表示に変更
- 実装手順
- ピッケルアップグレードメニュープレハブを作成
- PickaxeListItem プレハブの作成（リスト内の各ピッケルアイテム用）
- PickaxeManager を拡張
- GameManager を修正
- UIとロジックの結合
スクリプトの自動生成と修正
AIが計画通りにスクリプトを次々と生成・修正してくれます。
人間は見守っているだけでOKです。
Cursor（AI）の回答例
まず、新しいUIプレハブを作成するためのスクリプトを作成します。
【PickaxeUpgradeMenu.cs】（新規作成）
C#
using UnityEngine; using UnityEngine.UI; using System.Collections.Generic; public class PickaxeUpgradeMenu : MonoBehaviour { public GameObject pickaxeItemPrefab; // ピッケルリストアイテムのプレハブ public Transform content; // スクロールビューのコンテンツ public Button closeButton; // 閉じるボタン public PickaxeManager pickaxeManager; // ピッケルマネージャー参照 public OreManager oreManager; // 鉱石マネージャー参照 private List<GameObject> instantiatedItems = new List<GameObject>(); private void Start() { closeButton.onClick.AddListener(CloseMenu); gameObject.SetActive(false); // 初期状態は非表示 } public void ShowMenu() { ClearPickaxeList(); PopulatePickaxeList(); gameObject.SetActive(true); } public void CloseMenu() { gameObject.SetActive(false); } private void ClearPickaxeList() { foreach (var item in instantiatedItems) { Destroy(item); } instantiatedItems.Clear(); } private void PopulatePickaxeList() { // 現在使用中のピッケルのインデックスを取得 int currentIndex = System.Array.IndexOf(pickaxeManager.pickaxeDataList, pickaxeManager.currentPickaxe); // 全てのピッケルデータをリストに表示 for (int i = 0; i < pickaxeManager.pickaxeDataList.Length; i++) { PickaxeData pickaxeData = pickaxeManager.pickaxeDataList[i]; GameObject item = Instantiate(pickaxeItemPrefab, content); instantiatedItems.Add(item); PickaxeListItem listItem = item.GetComponent<PickaxeListItem>(); if (listItem != null) { bool isCurrentPickaxe = (i == currentIndex); bool isUnlocked = (i <= currentIndex); bool canUpgrade = false; if (i > currentIndex) // 未解除のピッケルはアップグレード可能かどうかをチェック { canUpgrade = true; foreach (var req in pickaxeData.upgradeRequirements) { if (!oreManager.HasEnoughOre(req.oreName, req.requiredCount)) { canUpgrade = false; break; } } } listItem.Setup(pickaxeData, isCurrentPickaxe, isUnlocked, canUpgrade); // 未解除だがアップグレード可能なピッケルの場合、アップグレードボタンにリスナーを追加 if (canUpgrade && !isUnlocked) { int pickaxeIndex = i; // ローカル変数にインデックスをコピー listItem.upgradeButton.onClick.AddListener(() => UpgradeToPickaxe(pickaxeIndex)); } } } } private void UpgradeToPickaxe(int index) { if (pickaxeManager.UpgradeToSpecificPickaxe(index)) { ClearPickaxeList(); PopulatePickaxeList(); } } }次に、リスト内の各ピッケルアイテムを表示するためのスクリプトを作成します。
【PickaxeListItem.cs】（新規作成）
C#
using UnityEngine; using UnityEngine.UI; using System.Text; public class PickaxeListItem : MonoBehaviour { public Image pickaxeIcon; // ピッケルのアイコン public Text pickaxeName; // ピッケル名 public Text miningPowerText; // 採掘力テキスト public Text requirementsText; // 必要アイテムテキスト public Button upgradeButton; // アップグレードボタン public GameObject lockedIcon; // ロック状態アイコン public GameObject currentPickaxeIndicator; // 現在使用中表示 private PickaxeData pickaxeData; // このアイテムに関連づけられたピッケルデータ public void Setup(PickaxeData data, bool isCurrent, bool isUnlocked, bool canUpgrade) { pickaxeData = data; // 基本情報の設定 pickaxeIcon.sprite = data.pickaxeSprite; pickaxeName.text = data.pickaxeName; miningPowerText.text = "採掘力: " + data.miningPower.ToString(); // アップグレード要件テキストの作成 StringBuilder requirements = new StringBuilder(); if (data.upgradeRequirements != null && data.upgradeRequirements.Length > 0) { requirements.AppendLine("必要素材:"); foreach (var req in data.upgradeRequirements) { requirements.AppendLine(" " + req.oreName + ": " + req.requiredCount); } } requirementsText.text = requirements.ToString(); // 現在使用中の表示 currentPickaxeIndicator.SetActive(isCurrent); // ロック状態の設定 lockedIcon.SetActive(!isUnlocked && !canUpgrade); // アップグレードボタンの設定 upgradeButton.gameObject.SetActive(!isUnlocked && canUpgrade); upgradeButton.interactable = canUpgrade; // すでに解除済みか現在使用中の場合はボタンを非表示 if (isUnlocked) { upgradeButton.gameObject.SetActive(false); } } }続いて、
PickaxeManager.csを拡張して、特定のピッケルへアップグレードする機能を追加します。【PickaxeManager.cs】（修正）
C#
using UnityEngine; using UnityEngine.UI; public class PickaxeManager : MonoBehaviour { public PickaxeData[] pickaxeDataList; // ピッケルデータのリスト public PickaxeData currentPickaxe; // 現在使用中のピッケル public Image pickaxeIcon; // UIのピッケルアイコン public Text pickaxeNameText; // UIのピッケル名前表示用テキスト public OreManager oreManager; // OreManagerへの参照 private int currentIndex = 0; // 現在のピッケルのインデックス private void Start() { if (pickaxeDataList != null && pickaxeDataList.Length > 0) { currentPickaxe = pickaxeDataList[0]; // 初期ピッケルを設定 UpdatePickaxeUI(); // UIを更新 } else { Debug.LogError("Pickaxe data list is empty! Please assign pickaxe data in the Inspector."); } } public int GetMiningPower() { return currentPickaxe != null ? currentPickaxe.miningPower : 1; } /// <summary> /// 現在のピッケルをアップグレードする処理。 /// 次のピッケルデータに設定された upgradeRequirements を基に、OreManager 経由で /// 各種鉱石の在庫チェックと消費を行います。 /// </summary> public bool UpgradePickaxe() { if (currentIndex < pickaxeDataList.Length - 1) { // 次のアップグレード用のピッケルデータを取得 PickaxeData nextPickaxe = pickaxeDataList[currentIndex + 1]; // 次のアップグレードに必要な各種鉱石の要求を取得 PickaxeData.UpgradeRequirement[] requirements = nextPickaxe.upgradeRequirements; // 各要求が満たされているかチェック bool canUpgrade = true; foreach (var req in requirements) { if (!oreManager.HasEnoughOre(req.oreName, req.requiredCount)) { canUpgrade = false; break; } } if (canUpgrade) { // 全ての要求を満たしている場合、各鉱石を消費する foreach (var req in requirements) { oreManager.ConsumeOre(req.oreName, req.requiredCount); } // ピッケルのアップグレード実行 currentIndex++; currentPickaxe = pickaxeDataList[currentIndex]; UpdatePickaxeUI(); Debug.Log("Upgraded to: " + currentPickaxe.pickaxeName); return true; } else { Debug.LogWarning("Not enough ore to upgrade."); return false; } } else { Debug.LogWarning("No further upgrades available."); return false; } } /// <summary> /// 特定のインデックスのピッケルへアップグレードする処理。 /// 指定されたピッケルデータに設定された upgradeRequirements を基に、OreManager 経由で /// 各種鉱石の在庫チェックと消費を行います。 /// </summary> public bool UpgradeToSpecificPickaxe(int targetIndex) { // インデックスの妥当性チェック if (targetIndex <= currentIndex || targetIndex >= pickaxeDataList.Length) { Debug.LogWarning("Invalid pickaxe index for upgrade."); return false; } // 対象のピッケルデータを取得 PickaxeData targetPickaxe = pickaxeDataList[targetIndex]; // アップグレードに必要な各種鉱石の要求を取得 PickaxeData.UpgradeRequirement[] requirements = targetPickaxe.upgradeRequirements; // 各要求が満たされているかチェック bool canUpgrade = true; foreach (var req in requirements) { if (!oreManager.HasEnoughOre(req.oreName, req.requiredCount)) { canUpgrade = false; break; } } if (canUpgrade) { // 全ての要求を満たしている場合、各鉱石を消費する foreach (var req in requirements) { oreManager.ConsumeOre(req.oreName, req.requiredCount); } // ピッケルのアップグレード実行 currentIndex = targetIndex; currentPickaxe = pickaxeDataList[currentIndex]; UpdatePickaxeUI(); Debug.Log("Upgraded to: " + currentPickaxe.pickaxeName); return true; } else { Debug.LogWarning("Not enough ore to upgrade to " + targetPickaxe.pickaxeName); return false; } } /// <summary> /// 次のアップグレードに必要なスコア（旧システム用）を返します。 /// 現在は主に参考情報として利用されます。 /// </summary> public int GetNextUpgradeCost() { if (currentIndex < pickaxeDataList.Length - 1) { return pickaxeDataList[currentIndex + 1].upgradeCost; } return 0; // 最大レベルに達している場合 } /// <summary> /// UI上のピッケル表示を更新します。 /// </summary> private void UpdatePickaxeUI() { if (pickaxeIcon != null && currentPickaxe != null) { pickaxeIcon.sprite = currentPickaxe.pickaxeSprite; } if (pickaxeNameText != null && currentPickaxe != null) { pickaxeNameText.text = currentPickaxe.pickaxeName; } } /// <summary> /// 現在のピッケルに設定されている鉱石出現確率リストを返します。 /// </summary> public PickaxeData.OreProbability[] GetCurrentOreProbabilities() { if (currentPickaxe != null) { return currentPickaxe.oreProbabilities; } Debug.LogWarning("Current pickaxe is null. Returning empty probabilities."); return new PickaxeData.OreProbability[0]; } /// <summary> /// 次のアップグレードが可能かどうかを判定します。 /// 次のピッケルデータに設定されている upgradeRequirements をすべて満たしている場合に true を返します。 /// </summary> public bool CanUpgrade() { if (currentIndex < pickaxeDataList.Length - 1) { PickaxeData nextPickaxe = pickaxeDataList[currentIndex + 1]; foreach (var req in nextPickaxe.upgradeRequirements) { if (!oreManager.HasEnoughOre(req.oreName, req.requiredCount)) { return false; } } return true; } return false; } }最後に、
GameManager.csを修正して、新しいピッケルアップグレードメニューを呼び出すようにします。【GameManager.cs】（修正）
C#
using UnityEngine; using UnityEngine.UI; public class GameManager : MonoBehaviour { public Text scoreText; // スコア表示用UI public Button upgradeButton; // アップグレードメニューを開くボタン public Slider progressBar; // 進行バー public PickaxeManager pickaxeManager; // PickaxeManagerの参照 public PickaxeUpgradeMenu upgradeMenu; // ピッケルアップグレードメニューの参照 private int score = 0; // 現在のスコア private void Start() { UpdateUI(); // ボタンのリスナーを変更: 直接アップグレードではなくメニューを開くように upgradeButton.onClick.RemoveAllListeners(); upgradeButton.onClick.AddListener(OpenUpgradeMenu); } public void AddPoints(int points) { score += points; UpdateUI(); } // アップグレードメニューを開く処理に変更 private void OpenUpgradeMenu() { if (upgradeMenu != null) { upgradeMenu.ShowMenu(); } else { Debug.LogError("Upgrade menu reference not set in GameManager!"); } } private void UpdateUI() { // スコアの更新 scoreText.text = "Score: " + score; // 現在のピッケルのインデックスを算出（配列内での位置） int currentIndex = System.Array.IndexOf(pickaxeManager.pickaxeDataList, pickaxeManager.currentPickaxe); // アップグレードボタンのテキストと有効/無効の設定 if (currentIndex < pickaxeManager.pickaxeDataList.Length - 1) { // 次のピッケルに関する情報は表示せず、単にアップグレードメニューを開くボタンとして表示 upgradeButton.GetComponentInChildren<Text>().text = "ピッケルをアップグレード"; // 次のピッケルが存在する場合はボタンを有効に upgradeButton.interactable = true; } else { upgradeButton.GetComponentInChildren<Text>().text = "最大レベル"; upgradeButton.interactable = false; } // 進行バーの更新（例: 最大スコア1000を基準） progressBar.value = Mathf.Min(score / 1000f, 1f); } }リンターエラーは作成した新しいクラスファイルがまだコンパイルされていないために発生している可能性があります。
一度Unityエディタでコンパイルされれば解決するでしょう。
最後に、UIプレハブの作成方法をまとめておきましょう。
# ピッケルアップグレードメニューUIの作成手順 ## 1. ピッケルアップグレードメニューの作成 1. Hierarchy ウィンドウで右クリックし、UI > Canvas を選択してUIキャンバスを作成します。 2. 作成したキャンバスを右クリックし、UI > Panel を選択して背景パネルを作成します。 - パネルのサイズを適切に調整します（例: 幅800、高さ600） - パネルの背景色を調整します（例: 半透明の黒 RGBA: 0, 0, 0, 0.8） 3. パネルの子として以下のUI要素を作成します: - UI > Text: "ピッケルアップグレード" というタイトルテキスト - UI > Button: "閉じる" ボタン（右上に配置） - UI > Scroll View: ピッケルリスト表示用のスクロールビュー 4. 作成したCanvasオブジェクトに `PickaxeUpgradeMenu` スクリプトをアタッチし、以下のプロパティを設定します: - Content: スクロールビューのContent Transform - Close Button: 閉じるボタンの参照 - Pickaxe Manager: シーン内の PickaxeManager コンポーネント - Ore Manager: シーン内の OreManager コンポーネント ## 2. ピッケルリストアイテムプレハブの作成 1. Hierarchy ウィンドウで右クリックし、Create Empty を選択して空のGameObjectを作成します。 2. 名前を "PickaxeListItem" に変更します。 3. このGameObjectに以下のUI要素を子として追加します: - UI > Image: ピッケルアイコン用の画像 - UI > Text: ピッケル名表示用テキスト - UI > Text: 採掘力表示用テキスト - UI > Text: 必要アイテム表示用テキスト - UI > Button: "アップグレード" ボタン - UI > Image: ロック状態表示用のアイコン（ロック画像を使用） - UI > Image: 現在使用中表示用のインジケーター（チェックマークなどのアイコンを使用） 4. PickaxeListItem オブジェクトに `PickaxeListItem` スクリプトをアタッチし、以下のプロパティを設定します: - Pickaxe Icon: ピッケルアイコン画像の参照 - Pickaxe Name: ピッケル名テキストの参照 - Mining Power Text: 採掘力テキストの参照 - Requirements Text: 必要アイテムテキストの参照 - Upgrade Button: アップグレードボタンの参照 - Locked Icon: ロックアイコンの参照 - Current Pickaxe Indicator: 現在使用中インジケーターの参照 5. 完成したPickaxeListItemオブジェクトをPrefabsフォルダにドラッグ＆ドロップしてプレハブ化します。 ## 3. ピッケルアップグレードメニューの参照設定 1. ピッケルアップグレードメニューの `pickaxeItemPrefab` プロパティに、作成した PickaxeListItem プレハブを設定します。 2. GameManager の `upgradeMenu` プロパティに、作成したピッケルアップグレードメニューを設定します。 これで、ピッケルアップグレードシステムの実装は完了です。 ## 動作確認 1. アップグレードボタンをクリックすると、ピッケルアップグレードメニューが表示されます。 2. メニュー内に利用可能なピッケルのリストが表示されます。 3. 現在のピッケルには「現在使用中」と表示されます。 4. アップグレード可能なピッケルには「アップグレード」ボタンが表示されます。 5. 必要な鉱石が不足しているピッケルはロックされています。 6. アップグレードボタンをクリックすると、必要な鉱石を消費して対応するピッケルにアップグレードされます。仕様変更の実装が完了しました。以下に実装内容をまとめます。
- 新しいクラスの実装
- PickaxeUpgradeMenu.cs: ピッケルアップグレードメニューを管理するクラス
- PickaxeListItem.cs: メニュー内の各ピッケルアイテムを表示するクラス
- 既存クラスの拡張
- PickaxeManager.cs: 特定のピッケルへ直接アップグレードする機能を追加
- GameManager.cs: アップグレードボタンの動作を、直接アップグレードから新しいメニュー表示に変更
- UIプレハブ作成手順
- ピッケルアップグレードメニューの構築方法
- ピッケルリストアイテムプレハブの作成方法
- 参照設定と動作確認の手順
この実装により、プレイヤーは：
- アップグレードボタンをクリックすると、詳細なピッケルアップグレードメニューが開きます
- メニュー内では、利用可能な全てのピッケルの情報が一覧表示されます
- 各ピッケルには、名前、採掘力、アップグレードに必要な素材が表示されます
- 現在使用中のピッケルは特別な表示で識別できます
- 条件を満たしたピッケルにはアップグレードボタンが表示され、クリックすることでその特定のピッケルにアップグレードできます
これにより、より直感的かつ情報量の多いピッケルアップグレードシステムが実装されました。
生成されたコードは「Accept All」ボタンで一括適用しました。
これでスクリプトの変更は完了です！
UnityエディタでのUI作成
AIの指示書を元にUIを組み立てる
Cursorが書いてくれた手順書（マークダウンファイル）を見ながら、UnityエディタでUIを組み立てていきます。
手順1: ピッケルアップグレードメニューの作成
- ヒエラルキーで右クリック →
UI→Panelを選択し、背景パネルを作成。名前をPickaxeUpgradeMenuに変更。 PickaxeUpgradeMenuの子として、Text (TMP)でタイトル、Button (TMP)で閉じるボタン、Scroll Viewでピッケルリスト表示用のエリアを作成。PickaxeUpgradeMenuオブジェクトに、先ほどAIが作成したPickaxeUpgradeMenu.csをアタッチ。
手順2: ピッケルリストアイテムのプレハブ作成
- ヒエラルキーに空の
GameObjectを作成し、名前をPickaxeListItemに変更。 PickaxeListItemの子として、ピッケルアイコン用のImage、ピッケル名表示用のText (TMP)、アップグレードボタン用のButton (TMP)などを追加。PickaxeListItemオブジェクトにPickaxeListItem.csをアタッチ。- 完成した
PickaxeListItemオブジェクトをProjectウィンドウにドラッグ＆ドロップしてプレハブ化。
手順3: 参照設定
PickaxeUpgradeMenuのインスペクターで、Pickaxe Item Prefabプロパティに手順2で作成したPickaxeListItemプレハブを設定。GameManagerのインスペクターで、Upgrade Menuプロパティに手順1で作成したPickaxeUpgradeMenuオブジェクトを設定。
ヒエラルキーの状態
ここまでの手順が完了した時点でのヒエラルキーは以下のようになります。
Canvas
└ PickaxeUpgradeMenu <追加>
├ TitleText <追加>
├ CloseButton <追加>
└ Scroll View <追加>
└ Viewport
└ Content
AIによる画像素材の生成
UIの骨格はできましたが、アイコンなどの画像素材が足りません。これもAIに作ってもらいましょう！
AIへのプロンプト作成依頼
プロンプト
上記のUIに必要となる画像素材を画像生成AIで作成しようと思います。プロンプト文を英語で書いてください。
# 必要な画像素材
- “閉じる” ボタンのアイコン画像
- ロック状態表示用のアイコン（錠前の画像）
- 現在使用中表示用のインジケーター（チェックマークなど）
- ウィンドウ枠の画像
- その他、使えそうなアイコン
# 要件
- 背景は透明にすること。
- 上記の素材を一つの画像ファイルに並べて描くこと。 * 現状のゲーム画面（※スクリーンショットを添付）に合う雰囲気の画像にすること。
Cursor（AI）の回答例
かしこまりました！添付されたゲーム画面の雰囲気に合わせた、UIアセット生成用のプロンプトを作成します。
Create a set of UI icons for a pixel art mining game with a medieval fantasy theme. All icons should be on a transparent background and arranged in a single image file. The icons should match the game's pixel art style and color scheme. Required icons (arranged in a grid): 1. Close button icon (top-right corner) - A simple "X" symbol in a circular frame 2. Lock icon - A medieval-style padlock 3. Current pickaxe indicator - A golden checkmark or star 4. Window frame - A decorative border with medieval fantasy elements 5. Additional useful icons: - Upgrade arrow (pointing up) - Resource icons (stone, copper, iron) - Pickaxe power indicator (lightning bolt or hammer) Style requirements: - Pixel art style (32x32 pixels per icon) - Transparent background - Medieval fantasy theme - Color palette: Earth tones, gold accents, and metallic colors - Consistent with mining/fantasy aesthetic - Clear and readable at small sizes - Simple but detailed enough to be recognizable Technical requirements: - PNG format - Transparent background - All icons arranged in a grid with 16px spacing - Each icon should be clearly separated - Total image size: 256x256 pixels
トラブルシューティング
- AIモデルの混雑: 最初、Claude 3.7 Sonnetが混雑していてエラーになりましたが、モデルを「Autoセレクト」に切り替えたところ、無事プロンプトを生成してくれました。
- モデルをAutoにすると、その時空いているモデルが選択されることもあるようなので
使用したいモデルがある場合はちゃんと選択したほうが良いです
（ただし、無料プランだと使用できるモデルが限られてきます）
- モデルをAutoにすると、その時空いているモデルが選択されることもあるようなので
- 画像の透過問題: ChatGPTで生成した画像の背景を透明にしましたが、Unity上でうまくスライス（分割）できませんでした。 これはUnityが画像の透明部分を完全に認識できていないことが原因のようです。
- 解決策: 別の背景透過サイトで画像を処理し直したところ、無事にスライスできました。
生成・加工した画像をUnityにインポートし、UIの各パーツに設定していきます。
動作確認とまとめ
全てのUI設定が完了しました！早速ゲームを実行して、動作を確認してみましょう。
動作確認
- アップグレードボタンを押すと… 見事に新メニューが開きました！
- 現在使用中のピッケルにはチェックマーク、まだ条件を満たしていないピッケルにはロックアイコンが表示されています。完璧です。
- 鉱石を貯めてから再度メニューを開くと、銅ピッケルのボタンがアクティブになりました。
- ボタンを押すと、正常にアップグレードされました！
まとめ
今回は、AIコードエディタ「Cursor」を導入し、ピッケルのアップグレードメニューを実装しました。
Cursorが自分で計画を立てて、スクリプトを自動で書き換えてくれるおかげで、人間はUIの配置など手を動かす部分に集中でき、非常に効率的に開発を進めることができました。
一から自分で実装するとかなり面倒な作業ですが、AIをパートナーにすることで、驚くほど簡単かつスピーディーに新機能を追加できましたね。
一度この凄さを体験すると、もう元の開発スタイルには戻れないと感じるほど、Cursorは強力な味方となってくれそうです。
最後までご視聴ありがとうございました！
コメント