猫でもわかるUnity入門(第13回 玉転がし作成 その5)

f:id:enia:20210228230354p:plain

初めに

えにあです。猫もでも分かるUnity入門の第13回を進めていきます。
前回はフィールドに壁を追加しましたね。 今回はマリオにおけるコインのように、プレイヤーが収集するためのオブジェクトを配置していきます。
Unityの操作にもだいぶ慣れてきたと思うので、既出の操作については説明を短めにしたいと思います。

目次

ピックアップオブジェクトを作成しよう

まず新しいキューブオブジェクトを作成し、名前を「Pick Up」とします。 f:id:enia:20210302072457p:plain

作成したピックアップオブジェクトはリセットして位置を(0, 0, 0)に戻しておいてください。 f:id:enia:20210302072536p:plain

ヒエラルキービューでピックアップオブジェクトを選択した状態で「Shift + F」を押してみてください。 シーンビューの中心に今作成したピックアップオブジェクトが表示されたでしょうか。 f:id:enia:20210302073215p:plain

これからピックアップオブジェクトを編集していきますが、このままではプレイヤーオブジェクトが少し邪魔ですね。 プレイヤーオブジェクトを非アクティブにすることで、一時的に非表示にしましょう。 非アクティブにするには、インスペクターで名前の横のチェックボックスを外します。
f:id:enia:20210302073357p:plain

すると、シーンビューからプレイヤービューが消えましたね。
f:id:enia:20210302073449p:plain

このキューブが、このゲームで収集していくアイテムの基本形になります。

収集アイテムっぽくしていこう1

さて、ピックアップオブジェクトも、初めてプレイヤーオブジェクトを作成した時と同じように地面に埋まってしまっていますね。 キューブのデフォルトサイズは、スフィアと同様に(1, 1, 1)です。 つまり、0.5ポイントだけY軸方向にずらせば、ちょうど地面の上に乗りますね。 f:id:enia:20210302073712p:plain

これだと、まだ収集できるアイテムのようには見えませんね。 サイズを少し小さくて、(0.5, 0.5, 0.5)に変更してみましょう。 するとピックアップアイテムが少し宙に浮きます。
※カメラの角度を変えると、浮いているのが分かりやすいと思います。 f:id:enia:20210302074154p:plain

このように、小さくして浮かばせると収集アイテムっぽさが出てきます。 さらに、回転を(45, 45, 45)に設定して傾けてみましょう。

ピックアップオブジェクトのTransformは以下のように設定されていればOKです。 f:id:enia:20210302074413p:plain

おぉ、よりアイテムっぽくなりましたね。 f:id:enia:20210302074351p:plain

収集アイテムっぽくしていこう2

ピックアップオブジェクトがクルクルと回転していたら、各段に収集アイテムっぽさが増しますね。 こんな時はスクリプトの出番です。

スクリプトの追加はインスペクターから「コンポーネントの追加」->「新しいスクリプト」で行い、オブジェクトへのアタッチまでワンステップで行います。 名前は「Rotator」にしましょう。 スクリプトファイルの位置を「Scripts」フォルダの下に移動するのを忘れずに!

今回はオブジェクトに力を加えるわけではなく、フレームごとに回転させるだけなのでUpdateメソッドを使います。

スクリプトを以下のように修正してみましょう。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Rotator : MonoBehaviour
{
    void Update()
    {
        transform.Rotate(new Vector3(15, 30, 45));
    }
}

transformクラスは以前にもしれっと使われていましたが、オブジェクトの位置や角度を変えるためのメソッドが用意されているクラスです。 ドキュメントはこちらにあります。 UnityEngine.Transform - Unity スクリプトリファレンス

フレームごとに、自身の角度を(15, 30, 45)だけ回転させているわけですね。 プレイモードに変更して、実際に動かしてみましょう。

 ・
 ・
 ・

いかがでしたか?ものすごいスピードでピックアップオブジェクトが回転してしまいましたね。 毎フレームごとに(15, 30, 45)の角度で回転しているので、当然と言えば当然です。

回転速度を調整する必要がありそうです。 Updaetメソッドを、以下のように修正してみましょう。

  void Update()
    {
        transform.Rotate(new Vector3(15, 30, 45) * Time.deltaTime);
    }

新たに登場したTime.deltaTimeについて考える前に、再度プレイモードに変更して実際に動かしてみましょう。 今度はゆっくりと回転するようになりましたね?

このdeltaTimeについて公式のチュートリアルでは特に解説がありませんでしたが、なぜこの数字を掛け算するのか考えていきましょう。

回転の速度を遅くしたいだけなら、例えばnew Vector3(15, 30, 45) * 0.01f); でも良いはずですよね?
こうすると、毎フレームごと(0.15, 0.3, 0.45)だけ回転することになります。
実際に試してみると、ゆっくりと回転することが分かるはずです。

しかし、キレイに回転させようと思うと「この毎フレームごと」というのが問題です。
実は、1フレームにかかる時間というのは一定ではありません。

  1フレーム -> (0.016秒) -> 2フレーム -> (0.018秒) -> 3フレーム・・・

というように、フレームとフレームの間で実際にかかっている時間は毎回異なります。

ということは、1秒間に含まれるフレーム数は一定ではないということです。 1秒間に100フレームの場合もあれば、200フレームの場合もあるかもしれません。
(※分かりやすく大げさにしていますが、そこまで差が出ることはないのでしょう)

先ほどのように0.01fを掛ける方法だと、100フレーム/秒の場合は1秒で(15, 30, 45)だけ回転し、200フレーム/秒の場合は1秒で(30, 60, 90)回転する、というように1秒ごとの回転量が一定になりません。 これでは、滑らかに回転しているようには見えないですよね?

滑らかに回転させるためには、1フレームごとの回転量を一定にするのではなく、1秒ごとの回転量を一定にする必要があるのです。


そこで、deltaTimeの出番です。 deltaTiemにはフレーム間の「時間差」が設定されています。単位は秒です。

距離 = 速度×時間の公式を思い出しましょう。 ここでは移動ではなく回転を扱っていますが、(15, 30, 45)が1秒当たりの回転量だと考えれば、これは回転速度と捉えられますね。 そして、フレーム間の時間はTime.deltaTimeです。 この二つを掛け算すれば、1フレームごとの移動距離(回転量)が求められます。

結果として、滑らかに、1秒かけて(15, 30, 45)の角度だけ回転するようになるわけです。

deltaTimeの理解に関しては下記のブログを参考にさせていただきました! thinline196.hatenablog.com

収集アイテムを増やしていこう1

基本となるピックアップオブジェクトの形は出来てきました。 収集するアイテムが一つだけでは寂しいので12個に増やしていきます。

その前に1つやることがあります。 ピックアップオブジェクトをプレハブ(prefabs)にすることです。

プレハブとはオブジェクトの設計図です。 1つのプレハブ(設計図)からたくさんのインスタンス(実体)を作ることで、設計図を変更するだけで全ての実体に変更を反映させることが可能になります。

プロジェクトビューに、Prefabsフォルダを追加します。 f:id:enia:20210302085726p:plain

そして、ヒエラルキービューからPick Upオブジェクトをドラッグし、プロジェクトビューのPrefabsディレクトリにドロップします。 PrefabsディレクトリにPickUpオブジェクトが格納されたでしょうか? f:id:enia:20210302085833p:plain

次に、これから作成する12個のPick Upオブジェクトのフォルダとなる、「Pick Ups」という空のオブジェクトを作成します。 東西南北の壁をまとめるためにWallsオブジェクトを作ったのと同じですので手順は割愛しますね。 Pick Upsオブジェクトをリセットして、原点に位置させるのを忘れずに。

壁を作成した時と異なり、今回は親である「Pick Ups」より先に、既に子である「Pick Up」が存在します。 このような場合は、ヒエラルキービューで「Pick Up」をドラッグし、「Pick Ups」にドロップすればOKです。

以下のように、親子関係になったでしょうか。
f:id:enia:20210302090813p:plain

次に、ピックアップオブジェクトを配置してみます。 ヒエラルキービューで「Pick Up(子の方)」を選択し、シーンビューに表示される、赤・緑・青(X・Y・Z)の線を引っ張ればオブジェクトを移動させることができます。

インスペクターで位置を設定する方法でもオブジェクトを移動できますが、今回の方法ですとグラフィカルに位置を変えることができます。

試しに赤い線を引っ張ってみると、斜めに移動してピックアップオブジェクトが空中に飛び出してしまいました。 f:id:enia:20210302091704p:plain

これは、ピックアップオブジェクトは(45, 45, 45)に回転しているので、その軸をベースに移動してしまうためです。 「ctrl + Z」、または「編集」->「Undo Mode」で元の位置に戻しておきます。

地面に沿って、水平に移動させる場合はグローバルモードを使います。 トップメニューの下に「ローカル」という表示がありますね。
f:id:enia:20210302092538p:plain

ここをクリックすると「グローバル」に変わります。
f:id:enia:20210302092553p:plain

グローバルモードにすると、表示される軸が縦・横・高さの一般的な方向に戻り、水平に移動できるようになります。 f:id:enia:20210302092728p:plain

ローカルモードはそのオブジェクトの中でのX・Y・Z軸を基準にし、グローバルモードはゲーム全体の世界でのX・Y・Z軸を基準にするということですね。

ピックアップオブジェクトを配置する際、カメラを上から移すと位置関係が分かりやすいです。 シーンビューの右上にカメラの方向が映っています。 緑色のYを押してみてください。 f:id:enia:20210302093413p:plain

すると、このように真上からの撮影に切り替わりますね。 f:id:enia:20210302093551p:plain

NOTE:
Yが表示されていない場合はX、Zなどを押してみればYが表示されるはずです。

この状態でヒエラルキービューで「Pick Up」を選択してみてください。 図のように青軸と赤軸の間に正方形が表示されると思います。
f:id:enia:20210302093827p:plain

ここを左クリックしながらマウスを動かすと、平面上を自由にオブジェクトを動かすことができます。

収集アイテムを増やしていこう2

前準備は完了です。ではPickUpオブジェクトを増やしていきましょう。 ヒエラルキービューで「Pick Up(子の方)」を選択し「Ctrl + d」を押してみてください。

オブジェクトが複製(duplicate)され、以下のようになるはずです。 f:id:enia:20210302094029p:plain

同様の手順でPick Upオブジェクトを12個に増やし、配置してきます。 円作るのが下手すぎてすみません。 f:id:enia:20210302094726p:plain

さあ、プレイモードに変更して試してみましょう。 12個のピックアップオブジェクトが回転していますね!

収集アイテムに色をつけよう

オブジェクトに色を付ける場合、オブジェクト鬼マテリアルをアタッチする必要があります。 地面に色をつける際に一度やりましたね。

まずはピックアップオブジェクト用のマテリアルを作成しましょう。 一から作成してもよいですが、地面用のマテリアルをコピーして再利用します。 プロジェクトビューでMaterialsフォルダを開き、Backgroundマテリアルを選択して「ctrl + D」で複製します。
f:id:enia:20210302101218p:plain

このマテリアルの名前をPick Upに変更します。
名前の変更はマテリアルを右クリックして「名前の変更」、またはF2で行います。
f:id:enia:20210302101303p:plain

地面と同じ色では見づらいので、黄色に変更してきます。
色の変更方法は、インスペクターでアルベドの欄にある四角をクリックです。
f:id:enia:20210302101522p:plain

RGBを(255, 255, 0)に変えましょう。
f:id:enia:20210302101543p:plain

次にこのマテリアルをピックアップオブジェクトに適用していきます。 ここで、先ほどピックアップオブジェクトをプレハブにしたことが生きてきます。 プレハブ(設計図)に色の変更を適用すれば、12個のピックアップオブジェクト全てに変更が反映されるのです。

まず、プロジェクトビューの表示方法を切り替えます。 プロジェクトタブを右クリックして、1列レイアウトにします。
f:id:enia:20210302102135p:plain

アセットが、このように縦に表示されるようになりましたね?
f:id:enia:20210302102211p:plain

次に、Materialsの「Pick Up」をドラッグし、Prefabsの「Pick Up」にドロップします。 ピックアップオブジェクトの色が変わったでしょうか?

NOTE:
公式チュートリアルではドロップした瞬間にシーンビューの色が変わりましたが、私の場合ドロップした時点では変わりませんでした。
その場合、プレイモードに一度変更すると反映されると思います。

さあ、プレイモードにして確認してみましょう。 12個の黄色い立方体が、くるくると回転していますね!

今回はここまで!