この記事は「C3 Advent Calendar 2024」12日目の記事です。

はじめまして、学部2年のはむです。

この記事は、初心者の方がUnityを使ったARアプリを作れるようになるためのチュートリアルとなっています。
初心者の方にわかりやすいよう丁寧にかいたつもりなので、ちょっとでもUnityに興味のある方はぜひ読んでいただけると嬉しいです！
Unityを普段から使っている人には引っかかるような表現もあるかと思いますが、温かい目で見守っていただけると幸いです。

0.事前準備

0-1.Unityのインストール

使っているパソコンによっては、インストールに数時間かかる場合もあります。
時間に余裕があるときにインストールすることをお勧めします。

※すでにUnityをインストールしている方は、0-2に進んでください。

Unityを使うには、Unityのエディターを管理するためにUnityHubをインストールする必要があります。

上のページで、ダウンロードをクリックしてUnityHubをインストールしてください。

ダウンロードが終わったら、エクスプローラーのダウンロードのところからUnityHubを起動してください。

変更を許可しますか？というメッセージがでたら、許可してください。

次に、下の写真のようなタブが出てくるので、同意してください。

そのあと、インストール先を選んでインストールします。
特にこだわりがなければデフォルトのままで大丈夫です。

完了を押したらUnityHubのインストール完了です！

次に、Unityのアカウントを作ります。
UnityHubを起動しようとすると、以下のような画面が出ると思います。

UnityHubのアイコンはこんな感じです

「アプリの機能がブロックされています」というメッセージが出たら、「プライベートネットワーク」にチェックを入れて、アクセスを許可してください。

Create accountを選んで、Unityのアカウントを作ります。
Create accountを選ぶとしたのようなページに飛ぶので、必要情報を入力してください。

入力した後送信すると、登録したメールアドレスに確認メールが届きます。

Continueをクリックすると、Unityのログインページに飛びます。

ここでサインインすると、このような画面が出るので、UnityPersonalとなっていることを確認してAgreeを押してください。

そのあと、エディターをインストールしますか？というメッセージが出ますが、今回は右下のスキップを押してください。（この後違うバージョンのエディターをインストールします。）

下のような画面になったら無事にログインできています。

0-2.Unityバージョン2021.3.37f1のインストール

こちらから、バージョン2021.3.37f1をインストールしてください。

ページ上部で、2021とLTS(デフォルト)を選択

その後下にバージョンの一覧が出てくるので、2021.3.37f1と書いてある行の青いボタンをクリックすると下の画面に移ります。

すでに2021.3.37f1をインストールしている方は下の画像のようなメッセージが出てくるので、気にせず次に進んでください。

ここで、画像のようにAndroidにチェックを付けてContinueをクリックして、下の画像のようにチェックを付けてInstallをクリックするとインストールが開始されます。

かなり時間がかかります…
気長に待ちましょう

途中で、変更を加えることを許可しますか？と聞かれたら許可してください。

完了!!

0-3.ギガファイル便でプロジェクトをダウンロード

こちらで、ダウンロード開始ボタンをクリックしてKyutXR_tutorial_Stu.zipをダウンロードしてください。

その後、[任意のフォルダ名( KyutXR_tutorial など)]に中身を展開してください。

※2024/12/12追記
ファイルのダウンロード期限を延長するため、リンクを変更しました。

チュートリアル終了後にダウンロードしたいけどギガファイル便の有効期限が切れている、という方はお手数ですがこちらのGitリポジトリの feature/tutorial_default ブランチからダウンロードお願いします
ダウンロードの仕方はここでは説明しません🙇

0-4.UnityHubから開けるようにする

展開が終わったら、UnityHubからプロジェクトを開けるようにします。
UnityHubの画面右上のAdd→Add project from diskを選択してください。

エクスプローラーが開くので、先ほど展開したフォルダの中の、KyutXR_tutorial_Stuを選択すると、以下のようにプロジェクトが追加されます。

クリックすると、下のような画面が出てきて読み込みが始まります。
最初はそこそこ時間がかかると思います。

読み込みが無事に終わると、Unityの編集画面が表示されます。
お疲れ様でした！

プロジェクトを開くと、すべての文字が英語で表示されていると思います。日本語にすることもできますが、ネットなどで分からないことを調べるときは英語で出てくることが多いので、個人的には英語をお勧めします。
この記事では、英語のままで説明していきます。
日本語化したい人は、調べればすぐ出てくると思うので調べてみてください。

1.色を動的に変えられるようにしよう

1-1.シーンの表示

Projectタブから、Assets/Create/Scenes を選び、CubeSceneをダブルクリックで開いてください。

Projectタブが見つからない方は、いずれかのタブの右上に出ている3つの点のマークをクリックして、AddTab→Project を選択してProjectタブを出してください。

以降も、タブが見つからない場合はこの操作を行ってください。

そのあと、Gameタブを選んで、赤い立方体が表示されたら成功です！

各タブの配置、大きさ等の違いは気にしなくて大丈夫です。
ただし、これ以降ではすべてこの配置で説明していくので、慣れていない人はこの配置にしてから進めることをお勧めします。
※ブラウザで複数画面を出しているときのように、タブの名前のところをドラッグして移動、タブの端にカーソルを合わせると矢印が出てサイズの変更ができます！

次に、ゲームの表示画面の大きさをスマホサイズに合わせます。Gameタブ左上のFreeAspectをクリックしてください。

クリックすると、下の写真みたいになります。

FreeAspectがない場合は、下の写真の中のいずれかが表示されていると思うので、それをクリックしてください。

次に、上の写真の一番下の＋マークをクリックしてください。

上のようなタブが出てくるので、TypeをAspectRatio、xを10、yを18にしてOKをクリックしてください。
これで、画面をスマホの大きさに対応させることができました！

1-2.色の変更

立方体の色を変えていきます。
Projectタブで、Assets/Create/Materialsを選択してください。

Unityでもの(オブジェクト)の色を変えるときには、新しくマテリアルを用意してそれをオブジェクトに適用(アタッチ)します。
今回はすでに緑色のマテリアルを用意しているので、それをCubeにアタッチします。

まず、Sceneタブを開いてください。
そのあと、HierarchyタブでCubeを選択してダブルクリックしてください。すると、下の写真のような感じになると思います。

このように、編集したいオブジェクトがどこにいったか分からなくなったときはHierarchyタブでダブルクリックすることによって表示できます。

ProjectタブのMaterialsフォルダの中にある GreenMaterial をSceneタブのCubeにドラッグすることで、Cubeの色を変更することができました！

何か変更、作成したときは、今開いているシーンの名前の右上にアスタリスクが表示されます。

このままUnityを閉じると変更が保存されないので、上のメニューバーからFile→Saveを選んで保存しておいてください。(CtrlキーとSを同時に押しても保存できます)

アスタリスクが無くなっていたら保存できています！

１回ごとに保存する必要はありませんが、データが消えると悲しくなるので作業がひと段落つくごとに保存することをお勧めします。

1-3.新しいマテリアルを作る

マテリアルを自分で作ってみましょう。Materialsフォルダの中で右クリックして、Create→Materialを選択してください。

下のように、新しいマテリアルができていると思います。

次に、マテリアルを編集していきます。
Inspecterタブを開いた状態で編集したいマテリアルを選択すると、下の写真のようになります。

この画面で編集できます。
Albedoと書いてある行の右の白い長方形を選択すると、下のようなタブが出てきて色を変更できます。

今回は黄色にしました。
色だけでなく透明度や光沢も変更できますが、今回はいじらないでおきます。
興味のある人は調べてみてください。

最後に、作ったマテリアルに名前を付けます。
Projectタブで、作ったマテリアルの上で右クリックし、Renameを選択することで名前を変更できます。
今回はYellowMaterialにしました。

先ほどと同様に、CubeにYellowMaterialをドラッグすることで色を変更できます。

1-4.ボタンを作る

マテリアルの用意はできたので、次は動的に変更するための準備が必要です。
まずはボタンを作ります。

Hierarchyタブの＋を選択して、UI→Button-TextMeshProを選択してください。

新しく、CanvasとButtonが作られているはずです。

TextMeshProをインポートしますか？というメッセージが出てきたら、インポートしてください。
おそらく２回する必要があると思います。

ButtonをSceneタブで表示すると、こんな感じになると思います。

このままでは見づらいので、下のように視点を切り替えてみましょう。

Sceneタブでは、右クリック長押しで視点の回転、マウスホイール長押しで視点の移動、マウスホイール回転で視点のズームができます。

ここで、一度Gameタブを開いてみましょう。Gameタブでは、実際のゲーム画面での見え方を確認することができます。

ボタンが、先ほどのSceneタブと同じ位置にあることがわかると思います。

では、ボタンを移動させてみます。
Sceneタブでボタンを選択(Hierarchyタブでボタンをダブルクリック)し、左のところで十字の矢印を選択すると、下の写真のように色のついた矢印が出てきます。この状態で矢印や青い四角をドラックすると、ボタンを動かすことができます。

矢印をドラッグするとその方向にのみ、四角をドラッグするとその平面を固定した状態で自由に、オブジェクトを動かすことができます。

好きな位置に動かして、Gameタブにも反映されていることを確認してください。

次に、ゲームを再生してみましょう。
上の方にある再生ボタン（三角マーク）を押すと、ゲームが再生されます。

再生した状態でボタンをクリックすると、ボタンが少し黒くなるのを確認できると思います。
これからスクリプトを作って、ボタンが押されたときの処理を作成していきます。
再生ボタンが青くなっているときは再生中なので、もう一回再生ボタンを押して再生を止めておきましょう。

1-5.色を動的に変更する

スクリプトを作っていきます。マテリアルを作ったときと同じように、Assets/Create/Scripts　を選んで、Scriptsの中で右クリック→create→C#Scriptを選択してください。

新しいスクリプトができました！

名前を変更したいので、右クリック→Renameを選択してください。
名前は、CubeColorChange　にしてください。

次は、スクリプトを編集していきます。
CubeColorChange をダブルクリックして、エディターを開いてください。

最初にエディターを開くときには上のような画面が出てきます。好きなものを選んで大丈夫です。
この記事では、VisualStudioCode を使用します。

選択すると、下のようなスクリプトが表示されると思います。

このままでは動かないので、書き換えていきましょう。
下のスクリプトをコピペしてください。

CubeColorChange.cs

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

public class CubeColorChange : MonoBehaviour
{

    [SerializeField]//これを付けると、Inspectorで編集できる！(publicの場合は不要)
    private Material[] materialArray = new Material[3];//マテリアルを入れる配列を宣言
    int count;
    void Start()//Startは、ゲーム開始時に一回だけ呼び出される
    {
        count = 0;
    }
    
    public void ChangeColor()
    {
        count++;
        if (count >= materialArray.Length)//配列の長さ以上になると0に戻る
        {
            count = 0;
        }
        GetComponent<MeshRenderer>().material = materialArray[count];//マテリアルの変更
    }
}

エディター上で保存した後Unityに戻ると下のような画面が出て、少し待つと消えます。

以上でスクリプトの作成ができました！

スクリプトを作成しただけでは何も起こらないので、Cubeにスクリプトをアタッチしていきます。

HierarchyタブでCubeを選択すると、InspectorタブでCube選択された状態になります。
その状態でInspectorタブの一番下のAddComponentをクリックし、CubeColorChangeを選択することでアタッチできます。

Inspectorタブに追加されてたら成功です！

次に、スクリプトに対してマテリアルをアタッチしていきます。
上の画像のCubeColorChangeの中のMaterialArrayをクリックして開いてください。

Element０~２にマテリアルをアタッチします。右の丸をクリックすると先ほどと同じく検索画面が開くので、それぞれのマテリアルを選択してください。

ボタンがクリックされたときにこのスクリプトを呼び出したいので、ボタンも編集していきます。
まず、名前がわかりにくいので、ColorChangeButtonという名前に変えておきます。
HierarchyタブでButtonを右クリックして、マテリアルやスクリプトのときと同じように名前を変更してください。

次に、HierarchyタブでColorChangeButtonを開いて、Text (TMP)を選択してください。

Inspectorタブのこの部分でボタンに表示されるテキストを変更できるので、テキストをColorChangeに変更します。

Gameタブでも、テキストが変更されているのが確認できると思います。

次に、ColorChangeButtonのInspectorを開き、OnClickというところを探してください。

+マークを押すと、このような画面が出てきます。

None(Object)の丸をクリックするとおなじみの検索画面が出てくるので、AssetsではなくSceneを選択してからCubeを選んでください。

すると、NoFunctionのところからボタンをクリックしたときに呼び出す関数を選ぶことができます。
今回は、CubeColorChange→ChangeColorを選択してください。

以上で完成です！
ゲームを再生してボタンを押すと、Cubeの色が変化するのを確認できると思います。

2.回転させよう

次は、Cubeを回転させていきます。
Scriptsフォルダの中に、CubeRotateというスクリプトを新しく作ってください。
そしてエディターを開き、中身を以下のように変更してください。

CubeRotate.cs

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

public class CubeRotate : MonoBehaviour
{
    public float RotateSpeed;//publicにしてるからSerializeFieldは要らない
    void Update()//Updateは、毎フレームごとに呼び出される
    {
        transform.Rotate(0, RotateSpeed * Time.deltaTime, 0);//Cubeを回転させる
        //フレーム数が違う端末でも同じように動作するように、Time.deltaTimeをかけている
    }
}

変更できたら、スクリプトを保存してUnityに戻ってきます。
そして、Cubeにアタッチしましょう。
そのあとCubeのInspectirをみるとCubeRotateのRotateSpeedが0になっていると思うので、好きな数に変えておきましょう。これが、Cubeの回転するスピードになります。

ここでは、10に変更しました。

この状態で再生ボタンをおすと、Cubeが回転します。
CubeRotateの数値をいじって、回転スピードを自由に変えてみましょう！

次に、回転の向きをボタンで変えられるようにします。
ColorChangeButtonを作ったときと同じように、今度はCubeRotateButtonを作りましょう。
ボタンのテキストは、CubeRotateとしておきます。
Sceneタブで、以下のようにボタンの位置を変更します。

そうしたら、次はボタンをクリックしたときの処理を追加していきます。
CubeRotateを、以下のように変更してください。

CubeRotate.cs

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

public class CubeRotate : MonoBehaviour
{
    public float RotateSpeed;
    
    void Update()
    {
        transform.Rotate(0, RotateSpeed * Time.deltaTime, 0);
    }

    public void RotateDirectionChange()//追加した関数
    {
        RotateSpeed *= -1;//スピードの符号を変える→逆向きに動く
    }
}

新しく、RotateDirectionChangeという関数を追加しました。

それが終わったら、ボタンにアタッチしていきます。
CubeRotateButtonのInspectorから、クリックしたときにRotateDirectionChangeが呼び出されるようにしましょう。
以下のようになっていたら成功です。

ゲームを再生して、ボタンを押すとCubeの向きが変わるか確認してみましょう。

これで完成です。
次は、実際にスマホで動かしてみましょう！

3.実機で実行しよう

スマホ(Android)で実行します。

まず、ビルドをするために設定を変更します。
画面左上のメニューバーから、File→BuilSettingsを選んでください。

以下のようなタブが出てきます。

今回はAndroidでビルドするので、左側のPlatformでAndroidを選んで、右下のSwitchPlatformをクリックしてください。

少し時間がかかりますが、完了すると先ほどWindowsのところについていたUnityのマークがAndroidに移動していると思います。

次は、実際に使うAndroidとパソコンをUSBケーブルでつなぎます。

データを転送できるUSBケーブルを使用してください！
僕は充電のみができるケーブルを使っててかなりの時間を無駄にしました…

つないだ後、RunDeviceのところのRefreshを押して選択肢を開くと自分のスマホの名前が出てくるので選んでください。

多分一番下にあるはずです。

その状態でBuildAndRunをクリックすると、保存する場所を聞かれるので好きな場所を選んでください。
しばらく待つと、スマホで実行されます！

ボタンの大きさや位置を変えたり、回るスピードを上げるボタンを作ったり、自由に改造して楽しんでください！

おわりに

ここまで読んでいただいてありがとうございました！
皆さんがUnityに興味をもつきっかけになれていたらとてもうれしいです。

明日はとたんさんの記事です、お楽しみに！