Unity 6.3 LTS|3D的当てゲームを作ろう

未分類

Unity 6.3 LTSで、3Dの的当てゲームを作ろう。まずはCubeやPlaneを使って、自分だけの射撃場を作ります。ゲームを動かしながら、狙いやすい形へ少しずつ直していきましょう。

STEP 1

射撃場を作ろう

最初に、ゲームの舞台を作ります。床と壁、それから的を置くための台を用意しましょう。

UnityのHierarchyで3D Objectのメニューを開き、PlaneやCubeを選べる画面
Hierarchyのメニューから3D Objectを開きます。床にはPlane、壁や台にはCubeを使えます。

Planeを床にして、Cubeで壁と台を作ります。台は3つ以上を目標にしてみましょう。置く場所や大きさは、自分で決めて大丈夫です。

Planeの床とCubeの壁・台を配置したUnityのSceneビューとHierarchy
Sceneビューで全体の形を確かめます。写真は台を3つ置いた例です。
POINT|考えてみよう

台を高くしたら、狙いやすさはどう変わるかな? 台どうしの間を広げたらどうなるかな?

Gameビューに切り替え、遊ぶ人からどう見えるか確かめましょう。Sceneビューではよく見えても、Gameビューでは見えない場所があるかもしれません。

作った射撃場をUnityのGameビューから見た画面
Gameビューで、台が画面に入っているか確認します。
ヒントを見る|台が見えないとき

まずGameビューを見ながら、Sceneビューでカメラと台の位置関係を確かめよう。

MISSION

的を置ける台を3つ以上作ろう。高さと間隔は自由。Gameビューで全部見えるか、最後に確かめよう。

STEP 2

的を置こう

射撃場にSphereを置いて、狙うための的を作ります。まずは台の近くにいくつか並べ、見え方を確かめましょう。

StageとMatoに分けられたHierarchyと、4つのSphereを配置したSceneビュー
この例では、的を4個置いています。Hierarchyでは床や壁と的を分けて整理しています。

Sphereを1つ選び、InspectorのTransformを見てみましょう。Positionは場所、Scaleは大きさを変えるところです。数字を少し変えて、的がどう動くか試します。

Sphereを選択したInspectorでTransformのPositionとScaleが見える画面
Transformの数字を変えたら、SceneビューとGameビューの両方を確認しましょう。
POINT|考えてみよう

大きい的と小さい的では、どちらが当てやすそう? 近い的と遠い的ではどうかな?

大きさや位置の違う4つのSphereが射撃場のGameビューに見えている画面
Gameビューで的がすべて見えるか、台に隠れていないか確かめます。
ヒントを見る|的が見つからないとき

HierarchyでSphereを選んで、InspectorのTransformを見よう。まずはPositionを少しずつ変えてみよう。

MISSION

的を4個以上置こう。大きさや位置は自由。1つはほかと違う大きさにして、Gameビューで見え方を比べよう。

STEP 3

的に色をつけよう

色を変えると、どの的を狙うか分かりやすくなります。Material(マテリアル)は、3Dオブジェクトの見た目を決める設定です。

UnityのProjectビューでCreateメニューを開き、Materialを選べる画面
ProjectビューのAssetsで右クリックし、Create → Materialを選びます。

作ったMaterialを選び、InspectorのBase Mapにある色を変えてみましょう。そのMaterialをSphereに割り当て、Gameビューで見え方を確かめます。

URP LitのMaterialのInspectorでBase Mapの色を赤に設定している画面
この例では、Base Mapの色を赤にしています。好きな色で試してみましょう。
POINT|考えてみよう

同じMaterialを使う的をまとめて色変更すると、どうなるかな? 目立たせたい的は何色にする?

赤と青のSphereを配置した射撃場のGameビュー
赤と青の的ができました。色だけでなく大きさも変えると、狙う順番を考えたくなります。
ヒントを見る|色が変わらないとき

色を変えたMaterialが、目的のSphereに割り当てられているか確かめよう。

MISSION

2色以上の的を作ろう。色の組み合わせは自由。Gameビューでそれぞれの的を見分けられるか確かめよう。

STEP 4

マウスの動きを読み取ろう

FPS風の視点を作る前に、マウスの動きがゲームに届いているか試します。まずは動かした量をConsoleに表示しましょう。

MouseCheck.csを作り、次のコードを書いてMain Cameraに付けます。

using UnityEngine;
using UnityEngine.InputSystem;

public class MouseCheck : MonoBehaviour
{
    void Update()
    {
        if (Mouse.current == null) return;

        Vector2 move = Mouse.current.delta.ReadValue();
        if (move != Vector2.zero)
        {
            Debug.Log(move);
        }
    }
}

このコードはマウスが動いた量を読み取り、動きがあったときだけConsoleに数値を出します。

Main CameraにMouse Checkスクリプトを付けたUnityのInspector
Main CameraのInspectorに「Mouse Check (Script)」が追加されています。

再生してGameビューでマウスを動かし、Consoleを見てください。数値が出たら入力の確認は成功です。

マウスを動かした量がUnityのConsoleに数値で表示されている画面
マウスを動かすと、移動した方向や量によって数値が変わります。
POINT|考えてみよう

数値は出ました。でも、ゲームの画面はまだ動きません。視点を動かすには、この数値を何に使えばよいでしょう?

ヒントを見る|数値が出ないとき

スクリプトをMain Cameraに付けたか、Gameビューでマウスを動かしているか確かめよう。

MISSION

マウスを左右と上下に動かし、Consoleの数値がどう変わるか比べよう。

STEP 5

マウスで視点を回そう

STEP 4ではマウスの動きを数値で見ました。今度は、その数値を使ってカメラの向きを変えてみましょう。

Main CameraのMouse CheckスクリプトからRemove Componentを選ぶ画面
まず、確認用のMouse CheckをMain Cameraから外します。

MouseLook.csを作り、次のコードを書いてMain Cameraに付けます。

using UnityEngine;
using UnityEngine.InputSystem;

public class MouseLook : MonoBehaviour
{
    public float sensitivity = 0.1f;
    float yaw;
    float pitch;

    void Start()
    {
        yaw = transform.eulerAngles.y;
        pitch = transform.eulerAngles.x;
    }

    void Update()
    {
        if (Mouse.current == null) return;

        Vector2 move = Mouse.current.delta.ReadValue();
        yaw += move.x * sensitivity;
        pitch = Mathf.Clamp(pitch - move.y * sensitivity, -80f, 80f);
        transform.rotation = Quaternion.Euler(pitch, yaw, 0f);
    }
}

マウスを横に動かすと左右、縦に動かすと上下の向きが変わります。上下には回しすぎを防ぐ範囲を付けています。

Main CameraにMouse Lookスクリプトを付け、Sensitivityが0.1になっているInspector
Main CameraのInspectorでMouse Lookが付いていることを確かめます。

再生してGameビュー内でマウスを動かしましょう。的を画面の真ん中に合わせられるか試します。

マウスを動かすとUnityのGameビューの向きが変わる操作例
視点を動かす操作例。左右・上下に動かし、的の見え方を確かめましょう。
POINT|考えてみよう

マウスを大きく動かすと、視点はどうなるかな? 速すぎる、または遅すぎると感じたらSensitivityを変えて比べよう。

ヒントを見る|視点が回らないとき

Main CameraにMouse Lookが付いているか、再生中のGameビューでマウスを動かしているか確かめよう。

MISSION

左右・上下を向いてみよう。次にSensitivityを変え、的を狙いやすい速さを探そう。

STEP 6

クリックを「SHOT」にしよう

次は射撃ボタンを作ります。まずは左クリックをしたときだけ、Consoleに「SHOT」と表示させましょう。

ShootCheck.csを作り、次のコードを書いてMain Cameraに付けます。

using UnityEngine;
using UnityEngine.InputSystem;

public class ShootCheck : MonoBehaviour
{
    void Update()
    {
        if (Mouse.current == null) return;

        if (Mouse.current.leftButton.wasPressedThisFrame)
        {
            Debug.Log("SHOT");
        }
    }
}

このコードは、左クリックした瞬間に「SHOT」と知らせます。まだ的に当たったかどうかは調べていません。

Main CameraにMouse LookとShoot Checkのスクリプトを付けたInspector
Main Cameraに、視点用のMouse Lookとクリック確認用のShoot Checkを付けます。

再生してGameビューをクリックし、Consoleを確かめましょう。

左クリックのたびにSHOTが並んだUnityのConsole
クリックするたびに「SHOT」が表示されました。
POINT|考えてみよう

「SHOT」は出るのに、的はまだ変化しません。クリックした先に何があるかを調べるには、何が必要でしょう?

ヒントを見る|SHOTが出ないとき

Main CameraにShoot Checkが付いているか確認し、再生中のGameビュー内でクリックしよう。

MISSION

左クリックを3回して、Consoleに「SHOT」が3回出るか確かめよう。

STEP 7

クリックした先を調べよう

画面の真ん中から見えない線を飛ばし、最初に当たったものを調べます。このしくみを「Raycast(レイキャスト)」といいます。

ShootCheck.csを次のように書きかえ、Main Cameraに付けたまま再生しましょう。

using UnityEngine;
using UnityEngine.InputSystem;

public class ShootCheck : MonoBehaviour
{
    Camera cameraComponent;

    void Start()
    {
        cameraComponent = GetComponent<Camera>();
    }

    void Update()
    {
        if (Mouse.current == null ||
            !Mouse.current.leftButton.wasPressedThisFrame) return;

        Ray ray = cameraComponent.ViewportPointToRay(
            new Vector3(0.5f, 0.5f, 0f));

        if (Physics.Raycast(ray, out RaycastHit hit))
        {
            Debug.Log(hit.collider.gameObject.name);
        }
    }
}

クリックすると、カメラから画面中央へ線を作り、何に当たったか調べます。当たった物の名前をConsoleに表示します。まだ物は消えません。

Gameビューで的が見えていて、Consoleにはクリック先としてPlaneが表示されている
このときは「Plane」と表示されました。床に線が当たっているようです。
POINT|考えてみよう

的が見えているのに、なぜ「Plane」と出たのでしょう? マウスカーソルの位置ではなく、Gameビューの真ん中がどこを向いているか確かめよう。

ヒントを見る|Sphereを当てるには

Gameビューの中央にSphereが来るように視点を動かしてから、クリックしてみよう。的が中央より上に見えるなら、視点を上へ向けてね。クリックする場所を変えるだけでは、Raycastの向きは変わりません。

MISSION

視点を動かしてSphereを狙い、Consoleに「Sphere」または「Sphere (1)」などの名前を出してみよう。

STEP 8

当たった物を消してみよう

命中した物の名前が分かったら、今度はその物を消してみます。まずは「何に当たっても消える」状態で試しましょう。

ShootCheck.csのDebug.Logのすぐ下に、次の1行を追加します。

Debug.Log(hit.collider.gameObject.name);
Destroy(hit.collider.gameObject);

Destroyは、Raycastが当たった物をシーンから消します。

再生してSphereを撃ってみましょう。さらに床やCubeを撃つと、何が起きるでしょう?

再生中にPlaneと一部のCubeが消え、ConsoleにPlaneとCubeの名前が表示されている
床のPlaneやCubeも消えてしまいました。命中判定はできていますが、まだ「的だけ」という条件がありません。
POINT|考えてみよう

床や台は残して、的だけを消すには、物をどうやって見分ければよいでしょう?

ヒントを見る|物を見分ける方法

Inspectorの上のほうにある「Tag」を見てみよう。Tagは物に付けられる目印です。

MISSION

Sphere、床、Cubeをそれぞれ撃ち、何が消えるか確かめよう。確認したら再生を止め、次は「的だけ消す」方法を考えよう。

STEP 9

的だけを消そう

床まで消えた問題を直しましょう。Tag(タグ)は物に付ける目印です。Sphereにだけ「Target」という目印を付けます。

SphereのInspectorでTagのメニューを開き、Add Tagを選べる画面
SphereのInspectorでTagのメニューを開き、「Add Tag…」から「Target」を作ります。

作った「Target」を4つのSphereすべてに設定します。PlaneとCubeのTagは変えません。

ShootCheck.csでは、Destroyの行を次の条件で囲みます。

if (hit.collider.gameObject.CompareTag("Target"))
{
    Destroy(hit.collider.gameObject);
}

CompareTagで当たった物のTagを調べ、「Target」のときだけ消します。Tagが違う物は残ります。

SphereのTagがTargetで、ConsoleにCubeとSphereの命中名が出ている。Sphereが一つ消え、床とCubeは残っている
Cubeを撃っても残り、Sphereを撃つと消えました。床と台も残っています。
POINT|考えてみよう

見た目の色や名前を変えても、同じTagの的なら消せるかな?

ヒントを見る|消えない的があるとき

そのSphereのInspectorでTagが「Target」になっているか確かめよう。Tagを付ける作業は再生を止めてから行おう。

MISSION

4つの的をすべて撃って消そう。PlaneとCubeが残っていることも確かめよう。

STEP 10

画面の真ん中に照準を置こう

弾が飛ぶのはGameビューの真ん中です。狙う場所が分かるように、小さな白い四角を置きます。これを「照準」といいます。

HierarchyでUIのImageを作ります。Canvasの子になったImageのRect Transformで、アンカーを中央、Pos XとPos Yを0、大きさを10×10にしてみましょう。

Canvasの子のImageが中央アンカー、位置0と0、幅と高さ10に設定されたInspector
Imageの位置を中央に合わせます。名前を「Crosshair」にすると、後から見つけやすくなります。

再生してGameビューを確かめましょう。照準をSphereに重ねて撃ちます。

Gameビュー中央に白い四角の照準が見え、床と台が残っている射撃場
中央に白い照準が見えます。撃った後も床と台は残っています。
POINT|考えてみよう

照準の大きさや色を変えると、狙いやすさは変わるかな?

ヒントを見る|照準が中央からずれるとき

ImageのRect Transformを見直そう。中央アンカーになっているか、Pos XとPos Yが0か確かめよう。

MISSION

照準を的に重ねて撃とう。的が消え、床と台が残るか確認しよう。

STEP 11

視点を元の向きに戻そう

的を探して視点を動かしたあと、最初の向きへ戻せるようにします。右クリックか、マウスホイールを押し込んだときに戻すしくみを試しましょう。

MouseLook.csに、最初の角度を覚える変数を加えます。Start()では、今あるyawとpitchを設定したあとに保存します。

float startYaw;
float startPitch;

// Start() の中
startYaw = yaw;
startPitch = pitch;

ゲームを始めたときの左右と上下の向きを覚えます。

Update()では、Mouse.current == nullの確認のすぐ下、マウスの移動量を読む前に次を追加します。

if (Mouse.current.rightButton.wasPressedThisFrame ||
    Mouse.current.middleButton.wasPressedThisFrame)
{
    yaw = startYaw;
    pitch = startPitch;
    transform.rotation = Quaternion.Euler(pitch, yaw, 0f);
    return;
}

右ボタンかホイールの押し込みを検出すると、覚えた角度に戻します。ホイールを回す操作ではありません。

MouseLookの開始角度保存と右ボタンまたは中央ボタンの判定が書かれたコード画面
右ボタンと中央ボタンの判定を書いた例。マウス移動より前に判定を置いて試しましょう。
照準を表示したGameビューで視点を動かし、的を狙う様子
照準を見ながら視点を動かす様子。自分の画面で、各ボタンを押したときの向きを確かめましょう。
POINT|考えてみよう

リセットしても向きが少しずれるなら、どのタイミングで最初の角度を覚えているかを見直そう。

ヒントを見る|元に戻らないとき

Mouse LookがMain Cameraに付いているか、再生中にGameビューを操作しているか確認しよう。右クリックとホイールの押し込みを一つずつ試そう。

MISSION

視点を動かして右クリックで戻そう。もう一度動かし、今度はホイールを押し込んで戻そう。

自分だけの射撃場を作ろう

CHALLENGE
  • 的をもっと小さくしてみよう。
  • 近い的と遠い的を作り、狙いやすさを比べよう。
  • 色の違う的を増やしてみよう。
  • Cubeも的にできるかな?
  • 自分だけの壁や台の並べ方を考えよう。

コメント

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