Lesson 3 | プロジェクトを洗練、公開する

この時点で、3D ギャラリー・ プロジェクトには、衝突検出機能を備えたプレイヤーコントローラーと、デカール、ライティング、サウンドを含む詳細な 3D 環境が含まれています。このチュートリアルでは、あなたが含めたい要素を表示するためのユーザーインターフェースを作成します。以下の動画では、Unity エデュケーターである Mark Shufflebottom 氏が、彼自身の 3D ギャラリープロジェクトで画像の詳細を表示するためのユーザーインターフェースの作成方法を紹介しています。ユーザーがギャラリーの特定のアイテムに近づくと、画面上にテキストが表示され、ユーザーにそれぞれの作品についての情報を提供します。このプロセスをどのように応用して、自分の個人プロジェクトに文脈と意味を加えることができるかを考えてみてください。

1. トップメニューから、GameObject > UI > Text の順にクリックします。Game ビューに切り替えて、画面左下のテキストがどのように表示されているかを確認します。
2. Hierarchy パネルで Canvas>Text の順に選択されていることを確認します。
3. 次に、Rect Transform の下の Inspector パネルで、Anchor アイコンをクリックし、Alt キーを押したまま「left/top」をクリックします。
4. Width を 500 に変更しますが、Height は 30 のままにしておきます。Anchor アイコンを再度クリックし、Alt キーを押したまま「left/top」をクリックします。
5. Text コンポーネントで、Font Size を 18 に増やして Color を黄色に変更し、実際の Text を「Title」に変更します。
6. Rect Transform コンポーネントで、Pos X を 280 に、Pos Y を -30 に変更します。
7. Inspector の上部にあるテキスト要素に「ArtTitle」という名前を付けます。
8. 「Untagged」と書いてあるところをクリックして、「Add Tag」を選択します。タグを追加するには、プラス（+）をクリックして、それを「ArtTitle」という名前にします。 これを「Auth」と「Description」に対して繰り返すと、３つのタグになります。 これらの 3 つのタグは、正しい大文字表記を含めて、正確に「ArtTitle」、「Auth」、「Description」と綴られていることが不可欠です。
9. Hierarchy パネルで ArtTitle を選択し、Inspector でタグを「Untagged」から「ArtTitle」に変更します。
10. ステップ 1-6 とステップ 8 を繰り返して、さらに 2 つのテキストボックスを作成します。それらに「Author」と「Desc」という名前を付け、それぞれ「Auth」と「Description」というタグを付けます。また、これらのテキスト要素の長さと位置に合わせて、Height と Pos Y を変更する必要があります。

1. プロジェクトパネルでアセットを選択し、+ アイコンをクリックしてポップアップメニューから「Folder」を選択します。このフォルダーを「Textures」という名前にします。
2. Project パネルに戻ってアセットを選択し、+ アイコンをクリックしてポップアップメニューから「New Folder」を選択します。フォルダー名を「Scripts」とします。
3. ダウンロードしたアセットから、2 つのテクスチャを新しい Textures フォルダーにドラッグします。
4. 次に、ダウンロードしたアセットから Proximity.cs スクリプトを新しい Scripts フォルダーにドラッグします。
5. Scene タブを選択して Scene ビューに戻り、トップメニューから GameObject > 3D Object > Plane の順にクリックします。Textures フォルダーから「da3」テクスチャを Plane にドラッグします。
6. Inspector パネルで、Transform コンポーネントの Rotation プロパティを見つけ、平面が X 軸で 90°、Y 軸で -90° になるようにフィールドを変更します。
7. シーン内の壁の上のパネルの位置を移動ツールで変更します。
8. X 軸で 0.5、Z 軸で 0.5 に拡大/縮小します。
9. Hierarchy パネルで Direction Light を見つけ、Inspector の Light のチェックを外して無効にします。
10. シーンを明るくするには、最初の Light をクリックし、Shift キーを押しながら最後の Light をクリックして、Light グループのすべての Lights を選択します。
11. Inspector パネルで、 intensity（明度）を 2 に上げます。

1. Scripts フォルダから Proximity.cs スクリプトを Hierarchy 内の Plane にドラッグします。
2. Proximity スクリプトの Inspector の関連フィールドに、絵画のタイトル、作者、説明のためのテキストを書き込んでください。あるいは、このテキストを別のテキスト文書にすでに持っている場合、それを直接コピーして貼り付けることもできます。
3. 再生ボタンを押して、ギャラリーの作品に近づいて、UI 内にテキストが表示されることを確認しましょう。

Unity で作業をしていると、どうしても問題が発生したときにデバッグをしなければなりません。3D ギャラリープロジェクトの小さなバグに気付いたかもしれませんね。タイトル、作者、説明は、平面から離れた後も画面上に残っています。これは、これからデバッグする Proximity.cs スクリプトの問題です。

1. スクリプトフォルダーへ移動し、Proximity スクリプトをダブルクリックして、Unity に関連付けられた主要な IDE（統合開発環境）である Visual Studio で開きます。
2. コードをすべて選択して削除します。
3. 以下の更新されたコードをコピーして貼り付けてください：

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

public class Proximity : MonoBehaviour
{
    public string newTitle;
    public string newAuthor;
    public string newDesc;
    private Transform other;
    private Text myTitle;
    private Text myAuthor;
    private Text myDesc;
    private float dist;
    private GameObject player;
    private GameObject message1;
    private GameObject message2;
    private GameObject message3;
    private bool check;

    // Start is called before the first frame update
    void Start()
    {
        player = GameObject.FindWithTag("Player");
        other = player.GetComponent<Transform>();
        message1 = GameObject.FindWithTag("ArtTitle");
        message2 = GameObject.FindWithTag("Auth");
        message3 = GameObject.FindWithTag("Description");
        myTitle = message1.GetComponent<Text>();
        myTitle.text = "";
        myAuthor = message2.GetComponent<Text>();
        myAuthor.text = "";
        myDesc = message3.GetComponent<Text>();
        myDesc.text = "";
        check = false;
    }

    // Update is called once per frame
    void Update()
    {
        if (other)
        {
            dist = Vector3.Distance(transform.position, other.position);
            print("Distance to player: " + dist);
            if (dist < 4)
            {
                myTitle.text = newTitle;
                myAuthor.text = newAuthor;
                myDesc.text = newDesc;
                check = true;
            }
            if (dist > 4 && check == true)
            {
                Start();
            }
        }
    }
}

この更新された Proximity.cs スクリプトは、プレイヤーがスクリプトがアタッチされているオブジェクトから離れたときに UI が消えないという問題を解決します。スクリプトのデバッグは、Unity プロジェクトで使用されている言語である C# でのコーディング方法を学ぶことで、簡単ではないですが、やりがいのあるプロセスになります。C# でのコーディング方法を学ぶには、Create with Code などの Unity Learn の他のチュートリアルをチェックしてみてください。

個人プロジェクトの完成おめでとうございます！

最終的な個人プロジェクトを Unity Learn で仲間のプロジェクト参加者と共有することができるようになりました。最も簡単な方法は、プロジェクトの実行中のスクリーンキャプチャを作成し、以下の手順でその動画を共有することです：

1. Unity で画面上部の「再生」ボタンを使って個人プロジェクトをテストしてみましょう。動作することを確認してください！
2. プロジェクトをテストする際に、画面の動画を以下の方法でキャプチャします：
   1. Mac の場合は、内蔵アプリ「Quicktime」を使えば OK です。こちらの手順に従ってください：
   2. Windows では、スクリーンキャプチャのための無料オプションがいくつかあります。提案については、こちらをチェックしてください
   3. どのオプションを使用しても、最高の結果を得るために、MP4 形式で動画をエクスポートすることを確認してください
3. 実行中のプロジェクトの動画をキャプチャしたら、下の「Your submission」フィールドで動画を共有し、タイトルと説明文を追加してください

個人プロジェクトを共有したら、他の学習者の提出作品を見て回り、コメント機能を使って建設的なフィードバックを提供しましょう。