蒼水家技術録

蒼水が普段制作とか勉強とかして覚えたことを復習としてまとめてるものです。 それが最適解かどうかはわからないけど、何を目的として始めて、何が必要で、実際何をやって、どうなったか、まで全部過程を残すための技術ブログです。

Unity Tips編 #15 Unity CLIとUnity Pipelineをインストールして使用する

どうも蒼水です。
AI時代が進みゆく中Unity7からよりAIを使用を前提としたような機能が追加されていきそうな感じになっているのでこれからのために少しずつ導入を進めていこうかと思います。
前回のUnity Tips記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境:Unity6(6000.1.17f1)

今回の目的

今回はUnity7の到来に備えてUnity6以降から使用可能になっているUnity CLIというものを自分のプロジェクトに導入し、コマンドラインから実際操作して理解を深めることを目的とします。
なお、今後進めていくLLMと組み合わせた使用方法までは進めず、まずはUnity CLIのみで何ができるのかを理解することを目的とします。
ClaudeCode等のAI Agentとの組み合わせについては次回記事で執筆します。

Unity CLIとは?

Unity CLIとはUnity Command-lineInterfaceのことで従来のように通常Unityエディタを操作して何かするのではなく、コマンドライン(WindowsだとPowerShell等)から操作するためのインターフェースです。
これを使用することでいつものようにUnityエディタを手動で操作するのではなくコマンドラインからあらゆる操作を実行することができるようになります。
なお、Unity CLIはUnity6以降で使用可能なもののためそれ以前のエディタでは使用できてない点に注意してください。
これはClaudeやCodex等のLLMにUnityを操作させる際に非常に役に立ちます。
docs.unity.com

Unity CLI をインストールする

docs.unity.com
上記のドキュメントを見つつ進めていきます。なお、筆者はWindosなのでその前提で書きます(MacOSの方は上サイトから確認できます。)
先に以下のcdコマンドを使用してPowerShellで使用するプロジェクトに移動しておきましょう。
自分の場合は以下のパスに本ブログ用のプロジェクトを作成しているので以下のように移動しておきました。ここは自分のプロジェクトに合わせてください。

cd D:\GitProjects\TeckBlog

次にUnity CLIを以下のコマンドでインストールします。

$env:UNITY_CLI_CHANNEL='beta'; irm https://public-cdn.cloud.unity3d.com/hub/prod/cli/install.ps1 | iex

コマンドが実行されると数秒かけてインストールが実行され、無事完了すれば下画像のようになります。
再起動してくれと指示されているのでPowerShellを再起動しましょう。

次に公式の記事にあるように以下のコマンドを実行してコマンド一覧を取得できるか確認してみましょう。

unity help

無事実行できれば下画像のような状態になります。

ここに表示されているものがUnity CLIで実行できるコマンド一覧となります(画面外にたくさんあるので各自確認してください)
試しにバージョン確認のコマンドを実行してみましょう。

unity --version

実行するとインストールしたUnity CLIのバージョンが確認できますね。現在Unity CLIはbetaとして公開されていることがわかります。

一旦これでUnity CLIを使用してUnityをコマンドラインから直接操作する基礎部分を構築することができる環境が整いました。

Unity CLIのコマンドを使用して実際に操作してみる。

では本題。ここから実際にUnity CLIを使用してUnityエディタを操作してみましょう。

Unityアカウントにログインする

認証で引っかかるとアレなので先にUnityアカウントのログインをしておきます。これもUnity CLIから可能となっており以下のコマンドから認証できます。

unity auth login

このコマンドを実行するとブラウザが立ち上がりログインを求められます。
ブラウザ側でログインすることでUnityアカウント認証を行えます。

ログインの許可が求められたらAllowします。

これで無事認証が完了しているのでPowerShellの方の戻ると「サインインしました。」と出ていれば認証成功いることを確認できます。

任意のプロジェクトを開く

プロジェクトを開くには以下のコマンドを実行します。

unity open

この際openの次にプロジェクトパスを指定する必要があるようですが、cdコマンドで既にプロジェクトの階層にいるのでopenだけで開くことができます。
任意のunityプロジェクトのパスを指定すればそのプロジェクトを開くことができます。
コマンドが成功すると「現在のディレクトリのプロジェクトを開いています」と出て、そのあとUnityプロジェクトが起動したことがわかります。

なお、openをはじめとした実行できるコマンドはこちらにリファレンスがあるのでunity help以外でもこちらで確認することもできます。
docs.unity.com

Unity Pipeline パッケージをインストールする

次にコマンドラインからUnityエディタをローカルHTTPサーバー経由で制御するためのツールであるUnity Pipelineパッケージをインストールしておきます。
インストールはコマンドラインから行うことになるので以下のコマンドを実行します。

unity pipeline install

無事インストールできれば下画像のようになりインストールされたことが確認できます。
Packages/manifest.jsonに追加、とあるのでエディタに戻るとインストールの読み込みが走ります。

読み込みが終わってPackageManagerを確認するとUnity Pipelineパッケージが発見できます。
これでコマンドラインからUnityエディタを操作する準備が整いました。
この状態になればエディタを起動した際にローカルHTTPサーバーが立ち上がりUnityエディタを操作できるようになります。

次にローカルHTTPサーバーの状態を確認するために以下のコマンドを実行します。

unity pipeline list

Unity Pipelineパッケージが正しくンストールされ、問題なければサーバーの状態が下画像のように表示されます。
これで全ての準備が整いました。

以下のコマンドを実行するとunity pipelineで実行可能なコマンド一覧を取得できます。

unity command


これからのコマンドのうち使いやすそうなものをいくつか実行してみましょう。

シーンを再生/停止する

シーンを再生するには以下のコマンドを実行します。
なお、Unity Pipleline パッケージのコマンド実行にはかならずunity cmdあるいはunity commandのあとに続けて書くようにします。

unity cmd editor_play


逆に停止する際は以下のコマンドで停止できます。

unity cmd editor_stop


おわりに

このようにUnity CLI + Unity Pipelineパッケージを使用することでUnityエディタを手動で触ることなくコマンドラインから実行できる環境を構築することができます。
今回は理解をするために手動でコマンドを実行したりしていましたが、実際のワークフローではこの環境をベースにClaude CodeやCodex等のLLMと連携し彼らAI Agent自身がコマンドを実行できるようにすることでUnityでのAIを使用したワークフローの構築に役立てます。
なので実際に手動でコマンドを人間が実行するわけではなく、これらのコマンドをLLMが認識して必要に応じてあらゆるコマンドを彼らが自動で実行するというのが実際想定しているワークフローとなります。
次回記事ではここまでで構築した環境をもとにClaude CodeやCodexといったLLMとの連携を行い実際にAI AgentにUnity開発を行わせてみます。

次回記事

<記事ができ次第追加>

Unity Tips編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

<PR>

Unity UI編 #10 ボタンのUIを理解する

どうも蒼水です。
今回は画像、テキストと触ってきて次はボタンのUIについての理解を深めていきます。
前回のUI記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境:Unity6(6000.1.17f1)

今回の目的

今回はボタンUIを実際に配置して機能を設定し、実行するところまでを触りながら理解を深めることを目的とします。
ボタンを押したときの挙動は予め自分で機能を定義することができるので結構いろいろなことができます。
ボタンはこれまでの画像とテキストの組み合わせであり、スクリプトとの連携も必要になるので前回までの内容が理解できている方が良いので必要あれば前回までの記事を参照してください。

ボタンを配置する


ボタンUIを配置するにはヒエラルキーで右クリック -> UI -> Button - TextMeshPro を選択して配置することができます。
あとはマニピュレータかRect Transformで位置を設定して任意の場所に配置します。

ボタンのオブジェクト構成を理解する


配置したボタンの中身を見てみましょう。
前回までの記事で画像やテキストを理解してきたわけですが、ボタンのUIはこれまで扱ったそれらを組み合わせたものになっています。
また、ボタン独自のコンポーネントとしてButtonというコンポーネントがアタッチされており、ボタンを押したときの挙動を設定することができます。

Button コンポーネントを理解する


ここからはButtonコンポーネントにフォーカスしていきます。
理解しておくべき箇所はボタンのルックを定義するColor関連On Click()の2か所が特に重要となります。
それぞれ確認していきましょう。

Color関連


Color関連にはいろいろとありますが、要するにマウスの挙動に合わせてボタンのルックを定義するものです。
上動画ではマウスカーソルを動かしてボタンUIに重ねる→クリック(長押し)→離して別の場所をクリック(非選択状態にする)
という流れの動画です。以下の各色の説明と合わせて理解してみてください。

Normal Color 通常時の色
Highlighted Color マウスカーソルと重なっているときの色
Pressed Color クリックされている状態(押しっぱなしにされているとき)の色
Selected Color クリックして選択された状態の色
Disable Color 無効化されている状態の色

On Click()

ボタンにおいて最も重要になるのがこのOn Click()です。
こちらはスクリプトとの連携が必須にはなるのですが、スクリプト側で設定した挙動をボタンを押したときにに発火させるための機能となります。
この後はサンプルスクリプトと一緒に説明していきます。

On Click()に機能を設定するためには機能を予め設定したスクリプトを用意します。
今回は以下のようにText Mesh Proのテキストを更新するスクリプトを用意しました。機能としてはText Mesh ProのTextを参照し書き換える機能となります。
ここで大事なこととしては関数はPublicに設定し、外部から呼び出せるようにしておく必要があります。また戻り値もvoid(戻り値無し)にしておきます。
引き数も1つに限り設定することができますが、それはこの後別途説明します。

public class ButtonSample : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI textMeshPro;
    
    public void OnClickSample1()
    {
        textMeshPro.text = "1番目のボタンを押しました。";
    }

    public void OnClickSample2()
    {
        textMeshPro.text = "2番目のボタンを押しました。";
    }
}


このスクリプトをどこでも良いのでアタッチします。今回はわかりやすくButtonそのものにアタッチしてみました。
On Click()の+ボタンを押すとスクリプトを参照する場所が出てくるのでスクリプトを参照し、先ほど設定した関数を選択することでその機能を呼び出すことができます。
この設定をしたボタンを押したときの挙動が下動画になります。押したボタンによってテキストが書き換えられていることがわかると思います。

また、ボタン機能には前述のように1つに限り引き数を取ることもできます。
分岐処理を1つの関数として下のような書き方をすることもできます。
ボタンの番号に合わせて処理を分岐させる処理となります。

public class ButtonSample : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI textMeshPro;
    
    public void OnClickSampleAll(int num)
    {
        switch (num)
        {
            case 1:
                textMeshPro.text = "1番目のボタンを押しました。";
                return;
            case 2:
                textMeshPro.text = "2番目のボタンを押しました。";
                return;
            default:
                return;
        }
    }
}


引き数が設定されている場合On Click()の中に引き数を設定できるフィールドが表示されるのでそこに必要な値を設定することで対象の関数に引き数を渡すことができます。
書き方は違えど挙動としては同じになるのでその辺は自分のプロジェクトでどういった設計にするかで使い分けるのが良いと思います。

ボタンのルックを変更する


標準のボタンのルックはさすがにアレなので独自のものに変更してみましょう。
今回独自のものとして上画像のような画像を用意してSprite Editorで対応したものを用意しました。
今回は枠の追加とドロップシャドウを追加しています。


用意出来た画像をButtonについているImageコンポーネントの参照に入れ替えることでルックを変更することができます。
ルックがおかしくなった場合はPixels Per Unit Multiplierの値を調整すると改善することがあります。

おわりに

これでボタンUIの基本的な設定方法は理解できたと思います。
ボタン機能は自分でスクリプトを書かないといけないのでデザイナーだとちょっと敷居が高い気もしますが、昨今はAIもあるのでClaudeとかに機能作ってもらって設定するとかもアリだと思います。
ボタンのルックはプロジェクトに合わせて良い感じの素材を用意して設定しましょう。
今回さらっとスクリプトとUIの繋ぎこみをやりましたが、このへんの話はUIの基本周り網羅したら別途記事を執筆予定です。

次回記事

<記事ができ次第追加>

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

<PR>

AI編 #逆引きまとめ

AI編記事の概要の逆引きでまとめていますので目的に応じてご利用ください。
記事が更新されるたびこちらのまとめ記事も随時更新されていきます。

Claude / Claude Codeの基本的なあれこれ

Claudeのパーソナライズについて知りたい

▶Claudeのパーソナライズについてはこちら
atelier-aomi.hatenablog.com

Unityとの連携事例

AIを使ったツール開発事例(ツール公開あり)

Google WorkSpaceとの連携事例

以下記事追加予定地

随時追加

Unity UI編 #逆引きまとめ

Unity UI編記事の概要の逆引きでまとめていますので目的に応じてご利用ください。
記事が更新されるたびこちらのまとめ記事も随時更新されていきます。

基礎編

UIに関する基本的なことを知りたい

▶UIの基礎はこちら
atelier-aomi.hatenablog.com

UIと画面解像度の関係性を知りたい(Canvas Scaler)

▶UIと画面解像度の関係性についてはこちら
atelier-aomi.hatenablog.com

UIの当たり判定について知りたい(Raycast)

▶ UIの当たり判定についてはこちら
atelier-aomi.hatenablog.com

UIの位置や大きさの調整方法について知りたい(Rect Transform)

▶UIの位置や大きさの調整方法についてはこちら
atelier-aomi.hatenablog.com

テキスト編

以下記事追加予定地

随時追加

Unity UI編 #9 TextMeshProの色やマテリアル設定を理解する

どうも蒼水です。
今回は前回に引き続きTextMeshProのお話でテキストのマテリアル周りの理解を深めていきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境:Unity6(6000.1.17f1)

今回の目的

前回の記事ではTextMeshProの基本的な使い方は理解できたのでそのあとのお話であるテキストUIのマテリアル周りについて掘り下げてテキストの見た目周りの設定を理解することを目的とします。

フォントのマテリアルについて


フォントのマテリアルは前回の記事で作成したFont Asset中に作成されており、それがTextMeshProが設定されているオブジェクトに自動でアサインされます。
このマテリアルの設定では色やアウトライン等テキストを加工できる設定があり、ここを調整すればある程度文字の加工を行うことができます。

フォントの色を設定する


フォントの色設定はTextMeshProコンポーネントとマテリアルとの2種類の設定方法がありますが、挙動が違うのでまずそこは理解しておきましょう。
上動画のようにTextMeshProコンポーネント側での色設定ではオブジェクト単位での設定になりますが、マテリアル側を設定する場合はそのフォントを使用しているすべてに影響する点に注意しましょう。
そのため原則はTextMeshProコンポーネント側での設定が推奨されます。

マテリアル側を設定するシチュエーションとしてはアプリケーション全体で使用する共通仕様として設定する場合になると思います。
例えば「基本テキストカラーは白である」「全ての文字はアウトラインやドロップシャドウが必要である」といった共通仕様である部分はマテリアルで設定するのが良いかなと。

単色を設定する

TextMeshProコンポーネントで設定する場合は特定の文字列だけ赤で強調したい、とかコンポーネント単位で共通仕様から逸脱した設定を行う場合に設定すると良いと思います。
例えば下画像のようにあえてTextMeshProコンポーネントを分けることで一部のテキストのみ色を変更したりする場合ですね。

グラデーションを設定する

またColor Gradientにチェックを入れることでグラデーションを付けることができます。
このColor Gradientでは四隅を基準に指定した色をグラデーションさせることができます。

もっと凝りたいとき


もっと凝りたい...?そんな時はもはやTextMeshProを使用するべきではなく画像として貼ってしまえばよい場合もあります。
ロゴといったガッツリとデザインされた文字列はさすがにフォントで対応するのはなかなか難しいのでそこはもう素直にImageコンポーネントのUIで文字を表示させましょう。

アウトラインを付ける


アウトラインを付ける場合はマテリアル側で設定します。
TextMeshProコンポーネントにはアウトライン設定はないので共通仕様として必要になるのであればこちらで設定します。
アウトラインと次項のドロップシャドウ等はSDFという概念を使用します。
フォントのSDFについてはこちらに目を通しておくと良いと思います。
docs.unity3d.com
youtube.com


なお、SDFはFont Asset CreatorのRender ModeでSDFの設定ができるのでそこが有効になっていれば基本は問題ないと思いますが、Padding設定が0になってしまっているとSDFのための領域が確保されないためSDFに必要な部分が描画されないという問題が起こる点に注意してください。
のドロップシャドウも含めSDFが正常に描画されていない場合アウトラインもドロップシャドウも機能しない問題が発生します。

ドロップシャドウを付ける


ドロップシャドウを落とすにはマテリアル設定側のUndelayにチェックを入れ各種設定を行うことで影を落とすことができます。
開発しているアプリケーションの振ニキにもよりますが、個人的にはドロップシャドウを有効にするのは結構おすすめしています。
というのもドロップシャドウがあることで視認性の向上やややリッチ感を出すことができるのでUX向上という意味ではおすすめです。
フォトショでデザインしてるときとかもドロップシャドウはそこそこ使うのでその感覚でつけたりつけなかったりするのが良いと思います。


体感白背景に黒テキストの時はあった方が良いなーと感じます。逆に黒背景白文字の時はその恩恵はほぼないの気がしています。
黒い影ならそれはそうだし、あえて白い影的にずらしのような表現としても使えますが個人的にはうーんという感じ。

おわりに

TextMeshProはただテキストを配置するだけでなくある程度加工もできるのでフォトショ通さなくてもそれなりの文字デザインが可能になっています。
これやろうと思えば自分でテキスト用シェーダー描いておもろいこともできそうな気がしているのでそのうち試してみたいですね。

次回記事

atelier-aomi.hatenablog.com

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

<PR>

Unity UI編 #8 TextMeshProの使い方と日本語フォントに対応する

どうも蒼水です。
今回はテキストを表示するUIをTextMeshProを使用して作成していきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境:Unity6(6000.1.17f1)

今回の目的


今回はUnity標準で用意されているTextMeshProというものを使ってテキストUIを作成することを目的とします。
また、標準フォントでは日本語がサポートされていませんので日本語の扱い方も含め解説していきます。

Text Mesh Proの使い方



hierarchyで右クリック -> UI -> Text - TextMeshProがあるのでそこから作成できます。
作成するとText Mesh Proというコンポーネントがついているのでそこにテキストを入力することでUIとしてテキストを表示することができます。色やフォントサイズなどフォトショとかでできるような操作は概ねできるのとそんなに難しいものでもないのでここは割愛します。
Color Grading等色設定に関しては触れておきたいのでそれは次回記事で触れます。

使い方自体はとても簡単ですが、ちょーっとデフォルトだとダサさがやばいですね!というわけで次項以降でフォントの変更方法などにも触れていってみようと思います。

前提:使用するフォントについて

フォントはデフォルトではLiberationSansが使用できるようになっていますが、これを別のフォントにすることができます。
基本的に契約して使用するタイプのフォント類は結構いろいろめんどくさいので自分はよくGoogle FontsというGoogleが無料で提供してくれているフォントを使用しています。
もちろんゲームに使用することも可能になっているので非常に重宝しますので今回はこちらを使って解説していきます。
実際自分のプロジェクトで使えそうなフォントがあるならこちらからの取得をおすすめします。神です。
なお、ほとんどのGoogle FontsはSIL Open Font License (OFL)というライセンスが適用されています。商用利用やソフトウェアへの組み込みもOKです。
fonts.google.com

前提:日本語文字サポートについて

UnityのText Mesh Proは標準では日本がサポートされていません。
後述しますが、Font Assetを作成する際に必要な文字を羅列する必要があります。
ASCIIやJIS規格などいろいろありますがググると色々出てきますが、大体の日本語をサポートできる一覧をGithubにまとめてくださっている方がいらっしゃったのでこちらをいつも利用させていただいております(いつもありがとうございます)
gist.github.com

フォントを用意する


フォントの用意については前述したGoogleFontsに行き使用したいフォントをダウンロードして使用します。
今回はわかりやすくドット感のあるフォント(Dot Gothic16)を使ってみることにします。
右上のGet Fontをクリックして次に進みます。
fonts.google.com




すると遷移先のページからダウンロードができるので必要なフォントをダウンロードします。


zipファイルがダウンロードされるのでその中にある.ttfというものがフォント本体であり、これをUnityにインポートして使用します。
これでUnityに持ち込むところまでは完了です。OFLというファイルは入れなくても動作的には問題ないです(ライセンスが書かれたテキストファイルです)
次項で実際にUnityで使用するためのFont Assetというデータを作成していきます。

Font Assetを作成する


Font Assetを作成するには window ->Text Mesh Pro -> Font Asset Creatorで開くことができるFont Asset Creatorを使用する必要があります。


先ほどインポートしたttfファイルをSource Fontを参照させて諸々設定します。
基本デフォルトの設定でも問題ないですが目的の環境によって解像度とかは下げたりすることがあります。
準備ができたらGenerate Font Atlasボタンを押すと読み込みが始まるのでしばし待つと下画像のようになるのでSave as...で作成されたFont Assetを任意の場所に保存します。



保存先はデフォルトで入っているLiberationSansのFont Assetと同じ場所で良いと思います。
これでFのアイコンのFont Assetが作成できました。
このアセットがあることでUIで日本語フォントを使用できるようになります。

フォントを変更する


Font Assetの用意はできているのであとはText Mesh Proコンポーネントにあるフォントの参照をLibarationSansから今回用意したDot Gothic16に変更します。
これにより日本語もサポートされたFont Assetですので漢字である「蒼水家技術録」というテキストも正常に描画されてることが確認できます。
サポートされない文字は□□□□□のような描画になってしまうのでそれが解消されていますね。

なお、先ほどの日本語サポート文字一覧でも漏れている文字や記号があったりするのでそういった場合は先ほどの一覧に自分で必要な文字を追加することで対処可能です。
もし新しくフォントを今回の流れで導入した後でも□□□□□が現れた場合はサポートされていない文字が使用されている、ということなのでそこは適宜追加しましょう。

余談:Font Assetの最適化について


Font Assetの中身についてのお話になりますが、Font Assetにはサポートする全ての文字を含めたテクスチャとマテリアルが含まれます。
これは先ほどのFont Asset Creatorで設定できる解像度と関係があり、当然解像度が大きければ綺麗に文字を出せます。
一方で、あまりにも大きいとテクスチャサイズが大きくなりすぎてメモリを圧迫することがあります。フォントだけで数十MB持ってかれる場合もありアプリケーションを軽量にする意味でも解像度は適切に設定する必要があります。
また、文字数が多ければ多いほどきれいに出すための必要テクスチャサイズは大きくならざるを得ないのでアプリケーションで使用しない文字列は排除し、必要最低限の文字だけで構成することが望ましいです。
試作段階であったりする場合は気にしなくてよいと思いますがビルドして実機動作させる場合はこの辺りは最適化しておくと良いでしょう。


上画像は2048pix と1024pixの解像度でのFont Assetのルックの差になります。
あまりに小さくなりすぎると文字がボケボケになり、UXに支障をきたしますのであくまでも適切なサイズ感にとどめUXは保てる最低ラインを確保しましょう。

おわりに


最後にそれっぽい感じの会話テキスト表示を作ってみました。これでテキストUIの基本は理解できました。
また日本語のサポートもできたので概ねテキスト周りで困ることはなく開発が来出ると思います。
次回はテキストのマテリアル周りについて深堀していければと思います。
テキストにはアウトラインを付けたりドロップシャドウを付けたりすることができるようになっているのでそのあたり触れていければと思います。

次回記事

atelier-aomi.hatenablog.com

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

<PR>

Unity UI編 #7 Sprite Editorを使ったUI作成を理解する

どうも蒼水です。
今回は前回の続きでSprite Editorを使ったUI素材の用意/設定方法とそれを実際に使った少し実践的なUI Imageの作成方法を解説していきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境:Unity6(6000.1.17f1)

今回の目的

前回は単純に用意した画像をそのままUIとして使用しました。
その応用版として1枚に複数の画像を並べてそれぞれを切り出したり、画面によって変わるようなUIのサイズを1つの画像でサポートできるようにすることができるSprite Editorについての理解を深めることを目的とします。
Spirteは2D/3D開発ともに使用する頻度が高めです。
2Dではあらゆるものに、3Dでは主にUIの作成で多用されます。

Sprite Editorについて



Sprite Editorでは1つのUI画像素材を切り分けることができる機能です。
Sprite EditorはUI素材のInspectorでTexture Typeを Sprite ( 2D and UI )を選択した状態で [ Open Sprite Editor ] から開くことができます。
公式リファレンスはこちら
docs.unity3d.com

詳しくは次項から説明していきますが、いろいろな素材を並べたSprite Sheetから1つ1つ切り出したり、 サイズ調整を柔軟にできるようにするために使用するものと覚えておけばよいと思います。
今回は例として下のような2種類の画像をそれぞれ用意しているのでこれで実際に挙動を見ていきます。

Sprite Sheetから画像を切り出して使用する


こちらの場合はSprite ModeをSingleではなくMultipleにしておきます。


次に上動画のように左上にあるSliceから任意の方法で画像を切り出すことができます。
今回は規則的にタイリングされているのでGrid By Cell Count を使用して切り出してみました。
こちらの設定を行うと赤い線が表示され、その位置で切り出しますよ!という感じです。
切り出しが完了したら右上のApplyををして完了です。

切り出しが完了するとアセットが展開できるようになり、中に切り出した分の画像が格納され、それぞれ個別でUI画像素材として使用することができます。
このように1つの画像アセットから切り出して使用することで1枚1枚画像を用意するよりまとめたテクスチャを用意して使用することでメモリに優しいデータにすることができます。

一応それぞれの切り出し方を確認しておきましょう。

Automatic


自動で切り出してくれるもの、ではあるのですがこの画像では1枚の画像として扱われてしまって使い物になりませんでした。
素直に次以降の設定方法で切り出した方が良さそうです。
なお、公式リファレンス的には透明度を参照しているため、今回は背景黒塗のためうまく機能していないと思われます。

Grid By Cell Size


こちらでは切り出す画像1つあたりの画像サイズ(Pixel)で幅を決定します。
今回の例ではこの画像は512*512のサイズですのでそれを5分割すればよいわけなので102.4になります(*Pixel数だと整数のみ扱えるため102となっています)
綺麗に割り切れない場合は次項のCountのほうが良さそうです。

Grid By Cell Count


こちらは分割数で幅を決定できます。タイリングされたものであればこれが一番確実だと思います。
今回の例では5分割することを前提としているので縦横それぞれ5で設定すれば綺麗に5分割してくれます。

Isometric Grid


これは独立的にスライスできるもののようではあるんですが、グリッドを前提としている以上上記2つで十分であり、ほぼ使うことがなさそうだなと思うためこちらは割愛します。
触ってみた感じもちょっとよくわからない...。

サイズ変更に柔軟な分割を行う

本項を理解するには画像の構成について理解しておく必要があるので説明します。
今回この画像を用意したのはそれをわかりやすくするためのものです。


サイズ変更を柔軟にする、というのは上動画のように固有部分は本来のサイズ感を保ちつつ、引き延ばしても問題ない部分を延ばせるようにすることであらゆるサイズに対応させる、ということです。


実際のスライス方法は上画像のようになります。
またこの場合は先ほどはMultipleにしていましたがSingleで設定を行います。Singleの場合先ほどの左上のSliceはグレーアウトされているので右下のBorderで調整します。
Borderha上下左右(Left / Right / Top / Bottom)からどれくらい離れた位置にボーダーラインを引くか、と考えればOKです。
今回固有部分は四隅の色分けした四角形の部分で、とかの部分は引き延ばしても良い共通部分なのでこのような設定になります。


また、この設定を行ったUI画像素材はUI ImageのImage TypeをSlicedにしておく必要がある点に注意してください。


Simpleにしている場合は上画像のように固有部分もサイズ調整に合わせて伸び縮みしてしまいます。

おわりに


このようにSprite Editorを使ってUI画像素材を加工することで効率的にUI制作を行うことができますので積極的に使っていきましょう。
次回は文字(Text)に関するUIについて触れていきます。

次回記事

atelier-aomi.hatenablog.com

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

<PR>