Unityでボタンの画像を変更するにはどうすればいいですか？

ボタンの「Image」コンポーネントの「Source Image」を変更することで、オリジナルの画像を設定できます。

敵の手をランダムに決める方法を詳しく知りたいです。

UnityEngine.Random.Range(0, 3); を使って、0（グー）、1（チョキ）、2（パー）のいずれかをランダムに選択しています。

勝敗結果をアニメーションで表示することはできますか？

Animatorを使用すれば、勝敗のテキストをフェードイン・フェードアウトさせるなどの演出が可能です。

【Unity 2D】初心者向けじゃんけんゲームの作り方！簡単ステップで解説

1. はじめに

「Unityでゲームを作りたいけど、何から始めたらいいかわからない…」という方も多いのではないでしょうか？そんな初心者の方にぴったりなのが、じゃんけんゲームの作成です！

じゃんけんゲームはシンプルながら、UIの使い方・スクリプトの基礎・ランダム処理・ゲームの管理など、Unityの基本を学ぶのに最適な題材です。

この記事では、以下のような流れでじゃんけんゲームを作っていきます。

✅ ボタンを配置して、プレイヤーが「グー」「チョキ」「パー」を選択できるようにする
✅ 敵の手をランダムに決定し、画像を変更する
✅ 勝敗を判定し、結果を画面に表示する
✅ リセットボタンでゲームを最初からやり直せるようにする

「ボタンを押すだけで遊べるシンプルなゲーム」なので、初心者の方でも楽しく学べます！
Unityの基本的な操作方法を身につけながら、オリジナルのゲームを作ってみましょう！

それでは、早速じゃんけんゲームを作成していきます！ 🚀

2. UIの配置

じゃんけんゲームには、「グー」「チョキ」「パー」の3つのボタンと、勝敗を表示するテキスト、リセットボタンを用意します。まずは、これらのUIを配置していきましょう。

2.1 ボタンの作成

最初に、プレイヤーがじゃんけんの手を選べるように、「グー」「チョキ」「パー」のボタンを作成します。

ボタンの作成
- Hierarchyウィンドウで 右クリック → UI → Button を選択。
- 作成されたボタンを Inspector で GuButton にリネーム。
- 同じ手順で ChokiButton、PaButton も作成。
ボタンのデザイン調整
- 各ボタンの Text を「グー」「チョキ」「パー」に変更。
- ボタンの Image を変更する場合は、Inspector の Source Image で任意の画像を設定。
ボタンのサイズと配置
- Rect Transform でサイズを 幅 200、高さ 100 に変更。
- Anchor を Bottom Center に設定し、3つのボタンを横並びに配置。

2.2 勝敗表示の作成

じゃんけんの結果をプレイヤーに伝えるために、テキストを追加します。

Hierarchy ウィンドウで 右クリック → UI → Text を選択。
Inspector で JudgeText にリネーム。
Text 欄に「結果表示」と入力（デフォルトで空でもOK）。
Font Size を 40 に設定し、文字が見やすくなるよう調整。
Alignment を 中央揃え にし、Color を設定。
Rect Transform で位置を 画面中央の少し上 に配置。

2.3 リセットボタンの作成

試合をリセットできるように、リセットボタンを追加します。

Hierarchy ウィンドウで 右クリック → UI → Button を選択。
Inspector で ResetButton にリネーム。
Text 欄の内容を「リセット」に変更。
Rect Transform で 画面の下中央 に配置。
サイズを 幅 200、高さ 80 に調整。

これで、じゃんけんのプレイに必要なUIの配置が完了しました！次のステップでは、敵のUIを配置していきます。

3. 敵のUIを配置

じゃんけんゲームでは、プレイヤーの手と対戦する「敵」の手を画面に表示する必要があります。このステップでは、敵の手を表現するUIを作成していきます。

3.1 空のオブジェクトを作成

まず、敵の手を表示するためのオブジェクトを作成します。

ヒエラルキー（Hierarchy）ウィンドウで右クリックし、「Create Empty」を選択します。
名前を「Enemy」に変更します。
Inspector（インスペクター）ウィンドウで「Add Component」をクリックし、「Sprite Renderer」を追加します。

3.2 スプライト（画像）を設定

次に、敵の手（グー・チョキ・パー）を表示するスプライトを用意し、設定します。

プロジェクト（Project）ウィンドウの「Assets」フォルダ内に画像をインポートします。
- じゃんけんの「グー」「チョキ」「パー」の3つの画像を準備してください。
- 画像は「Sprites」フォルダを作成して、その中に整理すると管理しやすくなります。
Inspectorウィンドウの「Sprite」フィールドに何も設定しない
- まだ敵の手は決定していないため、最初は「None（空の状態）」にしておきます。

3.3 位置とサイズの調整

敵の手が表示される位置を調整します。

ヒエラルキーで「Enemy」オブジェクトを選択します。
Inspectorウィンドウの「Transform」からPositionを変更します。
- 例えば、X: 0, Y: 2, Z: 0 のように設定すると、プレイヤーの手より少し上に表示されます。
必要に応じてScale（大きさ）を変更して、見やすいサイズに調整します。

これで、敵の手を表示するためのUIが準備できました。次のステップでは、この「Enemy」オブジェクトにスクリプトを追加して、ランダムで手を表示できるようにしていきます！

4. 敵の手をランダムに決定する

じゃんけんゲームでは、プレイヤーの手に対して敵（CPU）がランダムに「グー」「チョキ」「パー」のどれかを出す必要があります。そのために、EnemyManagerスクリプトを作成し、ランダムで手を決定し、対応する画像を表示できるようにしていきましょう。

4.1 EnemyManagerスクリプトの作成

まず、C#スクリプト「EnemyManager」 を作成します。

スクリプトを作成する

プロジェクトウィンドウを右クリック
「Create」→「C# Script」を選択
スクリプト名を「EnemyManager」 に変更

次に、このスクリプトを開いて、以下のコードを入力してください。

4.2 スクリプトの記述

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class GameManager : MonoBehaviour
{
    public EnemyManager enemyManager;
    public Text judgeText;

    public void GuButton() 
    {
        enemyManager.Judge();
        switch (enemyManager.enemyHand)
        {
            case 0: judgeText.text = "あいこ"; break;
            case 1: judgeText.text = "かち"; break;
            case 2: judgeText.text = "まけ"; break;
        }
    }

    public void ChokiButton()
    {
        enemyManager.Judge();
        switch (enemyManager.enemyHand)
        {
            case 0: judgeText.text = "まけ"; break;
            case 1: judgeText.text = "あいこ"; break;
            case 2: judgeText.text = "かち"; break;
        }
    }

    public void PaButton()
    {
        enemyManager.Judge();
        switch (enemyManager.enemyHand)
        {
            case 0: judgeText.text = "かち"; break;
            case 1: judgeText.text = "まけ"; break;
            case 2: judgeText.text = "あいこ"; break;
        }
    }

    public void ResetButton() 
    {
        SceneManager.LoadScene("SampleScene");
    }
}

4.3 スクリプトの解説

① `enemyHand` 変数

enemyHand は、敵の出す手（グー・チョキ・パー）を数字で管理するための変数です。
0 = グー、1 = チョキ、2 = パー とします。

② `Start()` メソッド

Start() メソッド内で、UnityEngine.Random.Range(0, 3) を使い、0〜2のいずれかの数字をランダムに選択します。
これにより、敵の手がランダムに決まるようになります。

③ `Judge()` メソッド

Judge() メソッドでは、ランダムで決まった手に対応するスプライト画像をセットします。
switch 文を使って、enemyHand の値に応じて正しい画像を設定します。

4.4 スクリプトをオブジェクトにアタッチ

作成した EnemyManager スクリプトを Unity 内で使うために、オブジェクトに設定しましょう。

手順

ヒエラルキーウィンドウで空のオブジェクトを作成
- 「Hierarchy」ウィンドウで 右クリック →「Create Empty」
- 名前を 「Enemy」 に変更
「Enemy」オブジェクトにスクリプトをアタッチ
- 「Enemy」オブジェクトを選択
- 「Inspector」ウィンドウで「Add Component」をクリック
- EnemyManager スクリプトを追加
敵の画像（スプライト）を設定
- sprites 変数に 「グー」「チョキ」「パー」用の画像 をそれぞれセット

4.5 動作確認

Playボタンを押して確認してみましょう！

シーンを再生すると、敵の手がランダムに変わるようになります！
ただし、Judge() メソッドは Start() の段階では呼ばれていないため、後ほどボタンを押したときに表示されるようにする処理を GameManager で実装します。

これで、敵がランダムにじゃんけんの手を決める仕組みができました！次は、プレイヤーがボタンを押したときに勝敗を判定する仕組みを作るために、GameManager スクリプトを作成していきます。

5. 勝敗判定とゲームの管理

じゃんけんゲームの一番重要な部分は、プレイヤーの選択に応じて敵の手と勝敗を判定する仕組みです。このステップでは、GameManagerスクリプトを作成し、各ボタンが押されたときに適切な処理を行うように設定します。

5.1 GameManagerスクリプトの作成

まずは、新しく GameManager というC#スクリプトを作成し、勝敗判定の処理を実装していきましょう。

スクリプトの作成

プロジェクトウィンドウを右クリックし、「Create」→「C# Script」を選択して、新しいスクリプトを作成します。名前は GameManager にしましょう。

作成した GameManager.cs をダブルクリックして開き、以下のコードを入力してください。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class GameManager : MonoBehaviour
{
    // EnemyManagerスクリプトを格納する変数
    public EnemyManager enemyManager;

    // 勝敗を表示するText
    public Text judgeText;

    // グーボタンが押されたときの処理
    public void GuButton() 
    {
        enemyManager.Judge(); // 敵の手を決定

        switch (enemyManager.enemyHand)
        {
            case 0: 
                judgeText.text = "あいこ"; 
                break;
            case 1: 
                judgeText.text = "かち"; 
                break;
            case 2: 
                judgeText.text = "まけ"; 
                break;
        }
    }

    // チョキボタンが押されたときの処理
    public void ChokiButton()
    {
        enemyManager.Judge();

        switch (enemyManager.enemyHand)
        {
            case 0: 
                judgeText.text = "まけ"; 
                break;
            case 1: 
                judgeText.text = "あいこ"; 
                break;
            case 2: 
                judgeText.text = "かち"; 
                break;
        }
    }

    // パーボタンが押されたときの処理
    public void PaButton()
    {
        enemyManager.Judge();

        switch (enemyManager.enemyHand)
        {
            case 0: 
                judgeText.text = "かち"; 
                break;
            case 1: 
                judgeText.text = "まけ"; 
                break;
            case 2: 
                judgeText.text = "あいこ"; 
                break;
        }
    }

    // リセットボタンが押されたときの処理
    public void ResetButton() 
    {
        SceneManager.LoadScene("SampleScene"); // シーンをリロード
    }
}

5.2 スクリプトの解説

このスクリプトでは、プレイヤーの選択した手に応じて、敵の手と比較し勝敗を決定 する処理を記述しています。

各処理の説明

enemyManager.Judge() を呼び出す
- これにより、敵の手がランダムに決定され、スプライトが更新されます。
switch文で勝敗を判定
- じゃんけんのルールに基づいて、enemyHand の値を確認し、勝敗を決定します。
- 例えば enemyHand == 0（敵がグー）の場合、プレイヤーが「グー」なら「あいこ」、「チョキ」なら「まけ」、「パー」なら「かち」と表示します。
リセットボタンでシーンを再読み込み
- SceneManager.LoadScene("SampleScene"); を使って、現在のシーンをリロードし、最初の状態に戻します。

5.3 GameManagerのアタッチ

作成した GameManager スクリプトを空のオブジェクトにアタッチします。

Hierarchyウィンドウで 右クリック → 「Create Empty」で空のオブジェクトを作成
名前を GameManager に変更
作成した GameManagerスクリプト を ドラッグ＆ドロップ でアタッチ
Inspectorウィンドウ で以下を設定
- EnemyManager → Enemyオブジェクトをアタッチ
- JudgeText → 勝敗を表示するText UIをアタッチ

5.4 各ボタンの設定

最後に、ボタンを押したときに GameManagerの関数 が呼ばれるように設定します。

Hierarchyウィンドウで各ボタンを選択
Inspectorウィンドウの「Button」コンポーネント を確認
「On Click ()」に新しいイベントを追加
GameManagerオブジェクトをドラッグしてアタッチ
関数を選択
- GuButton（グーボタン）
- ChokiButton（チョキボタン）
- PaButton（パーボタン）
- ResetButton（リセットボタン）