【連載 Unity初心者向け】歴史学習アプリを作る(2 ユーザー登録パネルの作成)

試験的連載モノ[初心者がUnityで学習アプリを作る] 2

初心者だけど少しでもそれっぽいデザインも加えてゲームを作りたい・至極単純なサンプルではなく実際に使えそうな実装をしてみたい方向けに、初心者の私が学習アプリを作る過程を記事にします。

↓本記事ではこの登録画面を作っていきます。

前回の記事はコチラ↓

matsrikagraphic.hatenablog.com

アイコンの回転とかパーティクルとかの説明をしています。

ユーザー登録の実装を考える

今回は外部サービスのニフクラmobilebackendを使用します。

登録は無料、月に100万回のアクセス以内であれば実用するのも無料です。

mbaas.nifcloud.com

どんなサービスなの？

アプリでよく使うユーザー管理機能、ランキング機能、プッシュ通知をクラウド上で管理できる様にするアプリです。

ユーザーが何人登録していて、いつログインしたのか、どのくらいスコアを伸ばしているか、などの管理がネット上でできるようになります。

今回は学習アプリなのであまり使用用途はありませんが、アクションゲームのランキング機能、RPGのギルド機能などでは良く使う機能が網羅されてると思います。

似た様なサービスでmicrosoftが提供しているPlayfabもありますが、日本語のテキストが少ないので、公式テキストが豊富なこちらのほうが初心者にはおすすめです。

登録方法、アプリの登録については公式サイトで十分理解できると思いますので割愛します。本記事では、Unityと紐づけるところからやっていきます。

Unityとニフクラを紐づける

まず、ニフクラが提供しているUnitySDKをPackageManagerからインポートします。

PackageManagerを開き、GithubのURLからDLするように選択します。

左上にある"+"をクリックして下記の通り選んでください。

下記のようにURLを入力する画面が開きます。

下記のURLをそのままコピペしてください。

https://github.com/NIFCLOUD-mbaas/ncmb_unity.git?path=ncmb_unity/Assets

Addボタンを押すと、下記の画面が表示されると思います。

インポートに成功すると、ProjectWindowのPackagesに"NCMB Unity SDK"が追加されているはずです。

この中に"Prefabs"があるので開いてください。

この"NCMBSettings"をHierarchyに追加します。

Inspectorで"NCMB Settings(Script)"がアタッチされてるのが確認できます。

この二つの項目に、NCMBで登録されたKeyを入力します。

※NCMBのアプリ登録を済ませていない方は、公式サイトを参考してください。

この記事では割愛します。

これでNCMBの機能が使える様になりました。

ユーザー登録UIを配置する

まず、スタートボタンを押したらユーザー名とパスワードを入力するパネルを表示するところまで作ります。

今まで作ったpanelとは別に、Canvas直下にpanelを新規作成します。

これを"SignUpPanel"と名付けます。

ちなみに、パネルの位置やサイズ設定のこの画面ですが、

この画面のときにmacならOptionキーを押すと、

このように表示が変わって、任意の方向の画角いっぱいに広げてくれます。

色々いじって変わり方を試してみてください。

私は以下の通りの設定にしています。

このPanelには角が丸い四角形の真っ白なsprite画像をあてこんでいます。

白い塗りつぶしの画像素材は色々と使えるのでいくつか持っていると便利です。

いくつかお試し用としてDLできるようにしました。→DLする

下のような画像を各アイコン毎にpngでDLできるように保存してあります。

これは超単純なものなので自由に使用してくださって結構です。

今回の記事で使ったのは、DLフォルダ中のicons18.png(上記の左下のアイコン)です。

白い塗りつぶし画像が便利なのはなんで？

色を自由にUnity側で設定できるからです。このシルエットだけを用いて、色はUnity側で自由に設定が可能になります。これが真っ黒なシルエットの画像だと色は直接変えられません。

このicons18.pngをあてこみ、色と透明度を画像の様にしました。

細長くしても角の丸を綺麗に維持するために設定を行う

このimageをそのまま引き伸ばすと、角丸も一緒に伸びて比率が変わり汚くなってしまいます。これを、比率を綺麗に維持する様に設定をしておきます。

Projectで画像データそのもの（DLした方は"icons18.png"）をクリックすると、Inspector上に画像データの設定項目が現れます。

このInspector上で"SpriteEditor"をクリックして、四隅の間隔を維持する様に設定しておきます。この設定は他の解説サイトでも良く出てるので、詳細の解説はしません。

画像だけ載せておきます。これは"SpriteEditor"内のウィンドウ画面です。

こんな感じで緑の線が、四隅のカーブの内側にきていればOKです。

パネルをよりくっきり見せるためにOutlineを追加する

背景画像との境界をくっきりさせるために、Outlineコンポーネントも追加しています。

若干、黒い線が周りにできているのがわかるでしょうか。

細かいところですが、こういうところは簡単にできて且つユーザーにとっても見やすくなるポイントだと思います。

ですが、あまり入門書には書いていないので、ぜひ試してみてほしいポイントです。

パネル内にInputfieldとtextを配置する

特筆すべきところは無いので、画像だけのせておきます。

このような感じで配置します。

"NAME :"と"PASS :"も字間を15に設定して広げています。

OKボタンのSpriteも、パネルと同じicons18.pngの角丸のspriteです。

これで素材の配置は完了です。

コードでStartButtonを押したら表示させるようにする

これはものすごく簡単です。

まず、Scene内に"TitleManager"という空のGameObjectと、

同じく"TitleManager.cs"というスクリプトを新規作成してアタッチします。

TitleManager.csの中身は下記のコードを記述します。

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

public class TitleManager : MonoBehaviour
{
    [SerializeField]
    public GameObject SignupPanel;

    void Start()
    {
        SignupPanel.SetActive(false);
    }

    void Update()
    {

    }

    public void OnStartClick()
    {
        SignupPanel.SetActive(true);
    }
}

 コードはひとまず、これだけです。

このGameObjectであるTitleManagerをInspectorで確認し、

"Signup Panel"となっているところへ、先ほど作成したSignUpPanelをあてこみます。

[SerializeField]とコード内で記述したので、(publicでも表示はされる)Inspector内で、このように定義が可能になるのです。

そして、スタートボタンのところへ、

先ほど作成したTitleManagerの"OnStartClick"を設定します。

ここまですれば、アニメーションはまだですが、パネルの表示と非表示の制御ができました。

次に、SignUpPanelのアニメーションを設定してきます。

アニメーションは、コード内でSetActiveがfalseの場合は動きません。

今回はButtonがクリックされたらSetActiveがtrueになり、パネルが表示されます。

アニメーションはSetActiveがtrueになったときに一回だけ(またはループで)再生されますので、コード内での制御は今回必要ありません。

アニメーションクリップの作成

Assetsフォルダへ、"Animations"というフォルダを作っておきます。

そこへ、新規作成→"Animation"を作成して、"signupRotate"という名前で保存します。

↑のアイコン

それを、SignUpPanelへアタッチすると、自動的に"SignUpPanel"というAnimationClipが同じフォルダへ作成されます。

Inspectorもみるとしっかりアタッチされてますね。

GameObjectの"SignUpPanel"を選択した状態で、

上部メニューバー"Window"を開きます。

その中の"Animation"→"Animation"を選択します。

そうすると、下の様な画面が出てきたでしょうか。

↑はすでに設定を済ませていまっていますので、多分みなさんのウィンドウは、下記の記したところが無い状態だと思います。

この状態で、左上の赤い丸ボタンを押してください。

そうすると録画が始まります。

縦の線が一番左にあるのを確認してから、SignUpPanelのRotationXを90に変更します。

そして、縦の線を"0.35"のところまでドラッグします。

そしたら、RotationXの値を0に打ち直します。

そして、赤い丸を押すと録画が終わりますので、これで完了です。

ここまでやって起動ボタンを押し、Startボタンを押すと、冒頭のようになるはずです。

もしも、一回だけでなく何度も回転を繰り返してしまう場合は、

下記の様にAnimationsフォルダから"signupRotate"を選択して、

inspectorを確認し、

"Loop Time"をオフにすれば一回だけのアニメーションになるはずです。

ここまでで本記事は終わります。

次の記事で実際にNCMBを使用したユーザー登録を実装します。

【連載 Unity初心者向け】歴史学習アプリを作る(1 titleUI作成)

試験的連載モノ[初心者がUnityで学習アプリを作る] 1 

初心者だけど少しでもそれっぽいデザインも加えてゲームを作りたい・至極単純なサンプルではなく実際に使えそうな実装をしてみたい方向けに、初心者の私が学習アプリを作る過程を記事にします。

↓本記事ではこのタイトル画面を作っていきます

前記事はこちら↓

matsrikagraphic.hatenablog.com

画像の用意

3つの画像を用意します。

・背景

・タイトルロゴ(透過png推奨)

・回るアイコン(透過png推奨)

画像の用意が難しい方は公開せず練習用のみの使用に限り記事と同じものをDLしてくださって結構です→ DLする

なぜタイトルロゴも画像で用意するの？

例えばPCに元々入ってるようなフォントやAdobeフォント、googleフォントは組込NGですが、画像として使用するのであればOKの場合が多いです。

タイトルは特にデザインにはこだわりたいと思います。お好きなフォントを使用して、画像として使用するようにしたいところです。入門者向けのUnity解説だとテキストで作る場合が多いので、本記事は画像で用意します。

画像をspriteで使える様にする

Resourcesにフォルダを二つ作りました。

img_UI は、今後UIで良く使いそうな画像を保存する予定

TitleAssets は、タイトル画面のみで使う素材（画像に限らず)を保存する予定

※さきほど素材をDLした方は、Shuriken.pngのみをimg_UIに、残り二つはTitleAssetsに入れておいてください。

3Dprojectの場合、UIとして画像を使うようにするには一つ設定をします。

画像をdrag&dropしただけだと、下記のような表示になってると思います。

通常2Dprojectだとこうなってるはずです。

▶︎マークがないですよね。

入れた画像を全て選択して、Inspectorを確認してください。

一番上の"Texture Type" が "Default"になってると思います。

これを、"Sprite (2D and UI)"に変えます。

Spriteを配置していく

前記事ではCanvasまで作成ができてると思います。

そのCanvas直下にPanelを追加します。このPanelのImageはRemoveしてしまいます。(この辺りはお好みだと思います。私はイラレのガイドと同じ感覚で使っています)

透明なパネルができました。

この直下にimageを追加します。

そして新規作成したimageに背景画像(TitleBG)を当てます。

"Set Native Size"を選択すると、アタッチした画像の原寸サイズに戻してくれます。

TitleBGは二倍の大きさになってると思うので、調節して好きな範囲を画角に入れてください。

私はこんな感じにしました。

これは誰ですか？　大谷刑部さんです。私が描きました。

同じ様にimageを新規作成して配置、タイトルロゴを配置してください。

こんな感じ。

お好みではありますが、背景が強すぎると思ったので私はここで真っ黒なimageを透過させて配置し、背景を暗くしました。後にパーティクルを入れるので暗めが良いと思います。

StartButtonの配置

Buttonを新規作成して配置、その横にアイコンも配置します。

Buttonのテキストがなんだかしっくりこない理由

(1)タイトルロゴとフォントデザインが違いすぎるとちぐはぐになります。

(2)普通にテキストを配置すると、ボタンなどで使うには字間が狭すぎて窮屈に見えます。

今までは字間はコードで設定しなければなりませんでしたが、2021Verだと字間がInspectorで簡単に設定できるようになりました！！積極的に調整しましょう！

違いをみるとわかるはずです。

左は窮屈ですよね。右が字間を広げた後です。

パーティクルを実装する

戦火をイメージしてパーティクルを降らせたいので、パーティクルを追加しましょう。

パーティクルが出てきましたが、戦火のキラキラにはほど遠いです。

画面いっぱいに横から飛ばしたいです。

まず、画像の上に出てくるように設定しましょう。

Inspectorをみるとたくさんの設定が出てきますが、一番下の"Renderer"をクリックして開いてみてください。下記の画面が出ます。

下から3段目、Order in Layer が 0 になっています。ここを1以上にすると手前に出てくれます。

とりあえず10にしました。Gameviewをみると、白いチリがきちんと出ています。

しかしこれでは全くかっこよくありません。できるだけ簡単に設定していきます。

Inspectorから"Shape"を探してクリックしてください。

この中の、Scaleを試しに以下のようにしてみてください。

そうすると画面いっぱいに広がります。

最終的には、こんな感じの数値にしてみてください。

また、一番上の"Particle"をクリックして、画像のような設定項目を開いてください。

下から5番目、"Max Particles"が1000になってると思います。

お好みですが、私はこれを20にしました。

また上から5番目、"Start Speed"を30にしました。

これで完成です。

起動すると、冒頭のようなパーティクルになると思います。

アイコンを回転させるコードを実装する

Scriptsフォルダを作成してなかったら作ってください。

そこにNew Scriptとして"RtateiconController.cs"を作成します。

これをアイコンにアタッチして、下記のコードを書きます。

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

public class RotateiconController : MonoBehaviour
{
    RectTransform mytransform;

    // Start is called before the first frame update
    void Start()
    {
        mytransform = GetComponent<RectTransform>();
    }

    // Update is called once per frame
    void Update()
    {
        mytransform.Rotate(0, 0, 0.2f);
    }
}

これだけで回転し続けてくれます。

起動してみると、UIが完成できたと思います。

本記事は以上です。

いかがでしたでしょうか。

一工夫でなんとなくそれっぽいUIができました。

次記事ではボタンを押すとユーザー登録ができるパネルを表示させたいと思います。

【連載 Unity初心者向け】歴史学習アプリを作る(下準備)

試験的連載モノ[初心者がUnityで学習アプリを作る] 1 

自分自身のトレーニングのためによく使う機能をできるだけ入れてこうと思っています

作業開始前の下準備

私はこのようなレイアウトが好きなのでこのレイアウトですすめます。

レイアウトの保存と読込は右上からできます。

"myLayout"が自作のレイアウトですね。

ちなみにProjectウィンドウのアイコンは左下のバーで最小化できます。

Resourcesフォルダを作っておく

Resourcesフォルダは、unityで決められた命名規則のあるフォルダです。

これを作ると、スクリプト内で簡単に中のものにアクセスできます。

Resourcesフォルダについては賛否両論あるみたいですが、簡単なアプリなら使用して問題ないと思います。最初のうちは難しいことは考えずにまず簡単なアプリをたくさん作ることを考えましょう。自分も見やすくなって管理しやすくなります。

Assets直下に置いておきます。

私はここでScriptsフォルダも作っておきます。

画面サイズを設定する

ある程度どの機種にも対応したいので、その設定をしていきます。

まず、iosかandroidのプラットフォームにしておきます。

時間がかかります。下の画像のように右下にある警告文が消えるまで待ちましょう。

Canvasを追加して微調整する

とりあえず作る上では1080x1920の縦長にしようかなぁとなったら、

まずCanvasを追加。

Inspector上で下記の画面のように設定します。

変えたのは以下です。

・Render Mode を Screen Space - Camera にする

・Render Camera に Main Cameraをアタッチする

・UI Scale Mode を Scale With Screen Size にする

・Reference Resolutionを任意のサイズにする

こうすると大体はレイアウトが保持されますが、これだけだと極端に比率が変わるとレイアウトが崩れたり見せたくない部分は見えてしまいます。

他サイト様等で解決方法がいくつか出てるので、ググって他サイトを参考にしてみてください。

Cameraも下記の様に設定しておきます。

Clear Flags を Solid Color,

色を真っ白にしました。好きな色でOKです。

これが背景色になります。

Gameビューをみると真っ白。

＊"Game"を"Simulator"に変えておくと実機画面比率で確認できます。

ここまででやっと下準備が完了しました。

次に冒頭に紹介したタイトル画面を作っていきます。

やることは

・画像配置

・パーティクル配置

・ボタンの実装

・画像を回転し続ける

どれも早めに覚えておいたほうが良い内容。

次の記事で解説します。

【Unity】列挙型enumを使ってメニュー画面を作る

列挙型のenumをunityで活用してみる。

何が利点なのか

テキストは通常、キャンバス-パネル-テキスト,,,というように、子や孫オブジェクトに入ることが多く、ヒエラルキー上で変更するときにぽちぽちするのが面倒です。

この方法なら、親オブジェクトのインスペクター上で操作可能です。しかもオブジェクトを何個増やしてもコードを追記する必要はありません。

文字列を変えたい場合は、コードを書き換えるだけです。

サンプル

例えば下の様なコピペして羅列しただけの画面が、

再生ボタンを押すと自動的に、下のようになります。

 

やり方

まず、新しくscript"StudyGenre.cs"を作成して、下の様なコードを書きます。

public class StudyGenre
{
    public enum Genre
    {
        WORD,
        SPEAK,
        KANJI,
        GRAMMAR,
        NUMBER,
        OTHER,
    }
}

enum型はC#の型なので、MonoBehaviourはいらないです。usingも特に必要ないので上記のコードが全文です。

まずこれはこれで保存してunityに戻ります。

文字列を変えたいpanelがHierarchy上に複数あるとします。

下の様な感じで、選択中のものが全て同じ構成のパネルになっています。

同じ構成になっていることが重要です。

便宜上、Word,Speak,Kanji,,,と名前を変えていますが、これは全てpanelです。子要素に"ContentLabel"という名前のテキストが配置されています。

このPanelのほうに、新しいscript"StudyMenuController.cs"を新規作成します。

下記の様なコードを書きます。

    //StudyGenreが、enumを定義したスクリプトStudyGenre.csです。
    //ここでは必ずSerializeFieldしてください。
    [SerializeField]
    StudyGenre.Genre genre;

    void Start()
    {
        Settitle();
    }

    //TitleをStudyGenre.Genreのenumからセットする
    void Settitle()
    {
        //Panelにある子オブジェクトのTextを、
        //配置されてる順番で取得する。(transform〜は定形文として覚える)
        GameObject child = transform.GetChild(1).gameObject;

        //取得したGameObjectのtextmesh~componentを取得
        TextMeshProUGUI title = child.GetComponent<TextMeshProUGUI>();

        //textの値をinspector上で設定したenumの値に変換
        title.text = genre.ToString();
    }

このコード内の、

transform.GetChild(1).gameObject;

この部分です。

panelの子オブジェクトになっている２番目に配置されてるテキストコンポーネントがあるオブジェクトを取得しています。

これですね。

panel（例えば上記画面のWord）を選択してみます。

アタッチされたStudyMenuControllerに、enumと同じ文字列が選択できるようになっているはずです。

これを各パネルで選択しておくだけで、起動すると下記の様にテキストが変換されます。

親パネルを開いて、テキストのあるオブジェクトをクリックして、テキストを変えて、、、という作業が、親パネルからリストで選択するだけで変えられるようになるので、とっても簡単。

【C# 超基礎】カスタムクラスとコンストラクタについて

最初にコードサンプル

Program.csと、Hero.csという二つのcsファイルがあります。

Program.csのコード

using SampleConsole;

Hero nyannyan = new Hero();
Hero wanwan = new Hero("inu", 5, 10);

Console.WriteLine("仲間が増えた!");
Console.WriteLine(nyannyan.GetHero());
Console.WriteLine(wanwan.GetHero());

Console.ReadLine();

続いて、Hero.csのコード

using System;
namespace SampleConsole
{
	//Heroという名のカスタムクラス
	//色々な変数を持たせたオブジェクトを作りたいときに使用する仕様書みたいなもの
	public class Hero
	{
		//Heroクラスに持たせたい変数を定義する
		string name;
		int hp;
		int mp;

		//Heroというクラス(仕様書)を使って、設計図を書く(1体目)
		public Hero()
		{
			this.name = "Neko";
			this.hp = 10;
			this.mp = 5;
		}

        　　　　//Heroというクラス(仕様書)を使って、設計図を書く(2体目)
        　　　public Hero(string n,int h, int m)
        　　　{
			this.name = n;
			this.hp = h;
			this.mp = m;
        　　　}

		//実際にHeroオブジェクトを表示させる
		public string GetHero()
		{
			return "NAME:" + this.name + "HP:" + this.hp.ToString() + "mp:" + this.mp.ToString();
		}
    }
}

実行すると、以下の様になります。

仲 間 が 増 え た !
NAME:Neko　HP:10　mp:5
NAME:inu　HP:5　mp:10

何をしているのか

カスタムクラスを作り、

コンストラクタを使い、

オブジェクトを生成しています。

わかりますか...?未だ私は瞬時に組み立てられません。。。

もっとざっくり言うと

Hero.csは、作りたい物、やりたい物に関する仕様書and材料保管庫みたいなものです。

Program.csが、Hero.cs仕様書を見ながら足りない材料があれば、それを集めて実際にHeroを二体作っています。

もっともっとざっくり(?)言うと

Hero.csは畑と一次工場です。

Programは二次工場と店舗です。

 

カレーで例えると

Curry.cs下請工場で、材料を羅列します。

string yasai1;

string yasai2;

string spice;

とか。

そして、材料であるyasai1とかyasai2とかを何にするか決めて生産し、一次加工します。

public Curry()

{

yasai1 = "rangiriJaga";

yasai2 = "rangiriNinjin";

spice = "chickenspice";

}

とか。

ここまでCurry.cs工場が作ったら、それをProgram.csレストランに出荷します。

Program.csは、それを元にカレーを作ります。

Curry ChickenCurry = new Curry();

ここにはCurry.cs工場が作ったcurryがそのまんま入ります。

しかし時に、Program.cs側が材料も決めて調達したくなる場合もあります。

その場合は、とりあえずこんな感じのもので私作りたいから設計図とかその他ラインを合わせて作っといてねというアバウトなオーダーをCurry.cs下請け工場に出します。

下請け工場のCurry.csは、Program.csが何を作ろうとしてるかわからないけどnew curryがきちんと完成するように、仮設計図を作っておきます。

public Curry(string y1,string y2,string s)

{ //とりあえず、これら↑を材料と仮定して、、、

 this.yasai1 = y1; 

 this.yasai2 = y2;

 this.spice = s;

}

といった感じに。

それで仮CurryをProgram.csに出荷します。

Program.csは、もらった仮Curryに、自分で調達した材料を当てはめてnew Curryを作っていきます。

Curry NattoCurry = new Curry("Natto","Renkon","BeefSpice");

Curry SeafoodCurry = new Curry("Ika","Tako","SeaSpece");

仮設計図なのでProgram.csはどんどん好きな材料で好きなnew Curryを作れます。

最後に、下請けCurry.cs工場が作った盛り付け例(returnのところ)を見ながら店舗にラインナップしてきます。

と言う感じです。

おわかりいただけただろうか・・・

【C# 超基礎】戻り値と引数のおさらい~"渡す"とか"返す"とか

主に自分用の備忘録として

渡すとか返すとか引数とか戻り値とかさらっと説明されても具体的なイメージと使い所が明確でなかったので整頓しました。

//引数も戻り値もなし
none();
void none()
{
    int a = 1;
    int b = 2;
    Console.WriteLine(a + b);
}

//戻り値あり
Console.WriteLine(sample1());
int sample1()
{
    int a = 10;
    int b = 20;
    int sum = a + b;
    return sum;
}

//引数あり
sample2(100, 200);
void sample2(int c, int d)
{
    Console.WriteLine(c + d);
}


Console.ReadLine();

これを実行すると単純に以下のようになります。

    3
    30
    300
    

”戻り値”ですが、

Console.WriteLine(sample1());

int sample1()

{

int a = 10;

int b = 20;

int sum = a + b;

return sum;

}

こうなってます。

Console.WriteLineから、

sample1のメソッドを呼び出して、

呼び出されたsample1は、

sumという変数の結果のみを

Console.WriteLineに"戻して"います。

次に引数は、

sample2(100, 200);

void sample2(int c, int d)

{

Console.WriteLine(c + d);

}

こうなっています。

sample2()を呼び出すと同時に100と200という値を定義しています。

void sample2は、int c と int d という変数は持っていますが、実際の値はまだ入っていません。なので最初にsample2メソッドを呼び出すときに、100と200を指定して、void sample2がそれを"引っ張って"きています。

これを"100と200を渡してやればいいわけです"みたいに表現されてるということ。

使い所はどこなのか

戻り値の使い所

このタイミングでこのメソッドの結果だけ取得したいな、というときに使う。

引数の使い所

同じメソッドを複数回使うけど、状況によって値を変えたいな、というときに使う。

【Unity】UIのButtonで滑らかに360度移動の操作をする

※有料のAssetを使います。

アセットストアからUltimateJoyStickを購入します。

11$(1500円程度)ですので無料にこだわる方でなければ是非DLしてみてほしいアセットです。

assetstore.unity.com

Import後、アセットを制作された会社名(Tank & Healer Studio)のフォルダが追加されます。

この中のPrefabsフォルダにあるものがJoyStickです。いくつかあるのはデザインの違い（だけだと思う）のですが、今回は、一番下のUltimate Joystickをヒエラルキーに追加します。

追加したPrefabをクリックすると、一番下にUltimateJoystickのスクリプトがアタッチされていて、画像のように4項目に分かれた設定リストがあります。

Positioningでは位置を調整できます。

この左下にあるのがUltimateJoystick

SettingsではJoystickの挙動の微調整ができるみたいです。

VisualOptionsは触ってないのでわかりませんが見た目（色味）の調整ですよね。

一番下のScriptReferenceに、JoystickNameを入力する欄があるので、ここに任意の名前をつけてください。

公式Youtube動画に倣って「Movement」とします。これで基本設定完了です。

その後、動かしたいオブジェクトに新規作成したスクリプトをアタッチします。

スクリプトの内容は以下をそのままコピペでOKです。

usingの追加も必要ありません。

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

public class StarIconManager : MonoBehaviour
{
    RectTransform mytransform;

    [SerializeField]
    float movespeed = 300f;

    // Start is called before the first frame update
    void Start()
    {
        mytransform = GetComponent<RectTransform>();
    }

    // Update is called once per frame
    void Update()
    {
        mytransform.Rotate(0, 0, 0.1f);

        /*通常の移動(キーボードWASDキーでの移動コード)
         *mytransform.position = mytransform.position + new Vector3(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"), 0) * movespeed * Time.deltaTime * -1;
        */
        mytransform.position = mytransform.position + new Vector3(UltimateJoystick.GetHorizontalAxis("Movement"), UltimateJoystick.GetVerticalAxis("Movement"), 0) * movespeed * Time.deltaTime;
    }
}

これだけでOK。再生ボタンを押すと、、

Joystickで動くようになりました。

利点は、360度タップしたまま方向転換できること。

また、通常のWASDの移動と同じように使えるので、サンプルのように回転させながらとか、他の挙動も一緒に実装できるのでとっても使いやすいです。

他にもカメラの向きを変えるアセットや、良くある円形のメニューアセットもあるのでそれらを使ってUIを少しいじるとかなりクオリティの高いゲームができそう。

スターフォックスみたいな操作も可能になります。