Unity UI編 #15 ScrollbarのUIの使い方を理解する

どうも蒼水です。
今回は前回のDropDownのUIに含まれていたScrollbarについてフォーカスしていきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

今回の目的

今回はScrollbarのUIの構成を確認し、パーツとしてどう利用されているのかを理解することを目的とします。
Scrollbarは基本単体ではなくパーツとして使うのですが、どう紐付けがされていてどういった挙動をするのか、を実際に触りつつ見ていきます。
Scrollbarの公式リファレンスはこちら
docs.unity3d.com

Scrollbarの構成を理解する

Scrollbarが必要になるシチュエーションとしては上画像のように複数のコンテンツを含むUIにおいてはみ出している部分をスクロールさせるようにするような場合です。
基本的には他のUIを作成するときに一緒についてくるものではあるので自分で構成する必要はありませんが挙動においてははみ出た部分に応じてScrollbarも挙動をすることになります。

Scroll Rectについて

Scrollbarがスクロールする範囲を定義するためには親オブジェクトにScroll Rectというコンポーネントが必要になります。
Scroll RectコンポーネントにはContentを参照する部分があり、これが要するに構成要素をまとめた親オブジェクトを参照します。

また、構成要素の描画範囲を定義したViewportを参照することでスクロールの必要性やスクロール範囲を定義することができます。ViewportオブジェクトにMaskコンポーネントを付けることで描画範囲外にはみ出る部分をマスクすることができます。
Scrollbarの参照を入れることでそのScrollbarでContentのスクロールを実現します。
今回の例では縦スクロールですがHorizontalの方で設定することで横スクロールに対応することも可能です。
Scroll Rectの公式リファレンスはこちら
docs.unity3d.com

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

Scrollarの構成は理解できたので次に本体であるScrollbarコンポーネントを見ていきます。

Color関連

Color関連にはいろいろとありますが、要するにマウスの挙動に合わせてボタンのルックを定義するものです。
基本的にこれまでの他のUIのColor関連と同じです。

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

Scrollbarの挙動関連

Scrollbarの挙動周りは主にここの設定となります。
感覚的には以前解説したスライダーに近いものになりますが、スクロール特有の挙動があるので説明します。

ValueはSliderと同じですが、Scrollbarのハンドル部分の幅をSizeで定義することができます。
またNumber Of Stepsというものがあり、これはいわゆる「スクロールの滑らかさ」とみても良いと思います。
Stepsというのがいわゆる分割数みたいなもので、２以上の場合値に応じてカクカクとして挙動をするようになります。
なお、1の時は完全に上か下に張り付くようになります。
0の時は制限がなくなり最も滑らかな挙動を取るようになります。
この値の設定値ははみ出た部分+1の値を設定するとちょうど選択肢がきれいに見える状態になるのでオススメです。今回の場合はGとHの２つがはみ出ているので2+1で3を設定するのが良い、ということです。

On Value Changed (Single)

これはスクロールバーを動かしたときのハンドルの位置をfloatで返してくれるイベントになります。
前項のNumber Of Stepsの設定とも関係あるので試しに分割数を変えて動かしてみたものが上動画になります。
1/Steps-1の値がコンソールに出ていることが確認できますね。
今回は以下の関数で使用しました。

public void OnValueChanged(float value)
{
    Debug.Log(value);
}

Scrollbarのルックを変更する

これまでの他UI同様Scrollbarの各所にあるImageを差し替えることで自由にルックを変更できるようになっていますので自分のトンマナに合わせて変更しましょう。

おわりに

これでScrollbarの基本的な部分は理解できました。
Scrollbarは他の一部UI作成時に自動で作成される要素になるのであまりじっくり見ることがなく知識の穴になりそうな気はしますね...。
単体で機能しないUIなのでここで理解しておくことは大事かなーと思いました。
次回はUIの要素としては最後であり、ここまでの要素がいろいろ混ざった複雑なUIであるScroll ViewというUIについて触れていければと思います。

次回記事

＜記事ができ次第追加＞

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

＜PR＞

リンク

Unity UI編 #14 DropDownのUIの使い方を理解する

どうも蒼水です。
今回はDropDownという所謂複数の要素のうち１つを選択するためのUIの挙動を実際に触りつつ理解を深めていきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はDropDownのUIを配置して複数の要素を扱う方法を理解することを目的とします。
なお、本記事はTextMeshProやImageの知識が前提となりますので過去のこちらの記事を先に読んでおくことをお勧めします。
atelier-aomi.hatenablog.com
atelier-aomi.hatenablog.com
公式リファレンスはこちら
注：概ね同じですが本記事ではTextMeshProのDropDownについて説明しています。
docs.unity3d.com

DropDownを配置する

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

DropDownの構成を理解する

DropDownは基本的にはImage（画像UI）とTextMeshPro の組み合わせで構成されます。
要素が多く、想定範囲外まではみ出す場合にはスクロールバーのUIを使用してスクロールできるようになります。

スクロールバーについては次の記事で詳しく解説します。

DropDownの中にはTemplateというものがあり、その中にContentとScrollbarが格納されています。
一番親のDropDownで定義できるOptionsの内容に応じて再生時に展開した際にこのTemplateの中のItemが複製されて格納されます。
各要素について次項から個別に見ていきましょう。

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

Color関連

Color関連にはいろいろとありますが、要するにマウスの挙動に合わせてボタンのルックを定義するものです。
基本的にこれまでの他のUIのColor関連と同じです。

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

Temlate関連

Templateの参照は最初から入っているのでそのままでOKで、Templateの中のItemが要素の数だけTemplateをもとに作成されます。
ここで知っておくべきはCaptionとItemのTextとImageの方です。

Captionの方はDropDownが表示されていない本体部分のTextとImageです。
Itemの方はDropDownで展開された中にあるTextとImageです。

なお、Caption / Item Imageに関してはDropDownを配置した段階ではImageUIがないので自分で追加して参照させる必要がある点に注意してください。
Imageを配置してTextの横とかにアイコンを表示させたい場合等で使用することが多いのかなと思います。

Options：要素について

OptionsはItem1つ1つを定義します。
要素は下の「＋」「ー」ボタンから増減させることができるので必要な分だけ調整して使用します。
Valueは上から順に0, 1, 2,,,とIndexが振られており、値を指定することで選択を変更することができます。
MultiSelectを有効にすれば複数選択にも対応できます。

Optionsで設定できるTextとImageは前項のCaption / Item と関連しており、ここで設定したものがそのまま反映されるようになります。
Colorは設定したImageに乗算する色です。

On Value Changed (Int32)

これは選択肢を選択したときに呼ばれるイベントです。
上動画でわかるように、引き数は選択した要素のIndexが渡されています。
Indexを取得することができるのでSwitch-Caseとかで分岐処理させるとかが可能ですね。
特定の選択肢が選ばれたら予めプリセットとして用意した設定を反映する、など。
今回は以下の関数で使用しました。

public void OnValueChanged(int index)
{
    Debug.Log(index + "を選択");
}

DropDownのルックを変更する

これまでの他UI同様、DropDonwも各所にあるLabel（Text）でフォントを変更したり、Imageを差し替えることで自由にルックを変更することが可能になっていますので自分のトンマナに合わせて変更しましょう。

おわりに

これでDropDownの基本的な部分は理解できました。
次回は今回さらっと流してしまったScrollBarについてフォーカスしてUIパーツとして理解しておこうと思います。
Sliderと似たようなものではあるのでそんなに重い内容でもないので軽めになる予定です。

次回記事

atelier-aomi.hatenablog.com

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

＜PR＞

リンク

Unity UI編 #13 InputFieldのUIの使い方を理解する

どうも蒼水です。
今回はInputFieldという所謂文字を入力するためのUIの挙動を実際に触りつつ理解を深めていきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はInputFieldのUIを配置して文字入力周りの挙動を理解することを目的とします。
なお、本記事はTextMeshProの知識が前提となりますので過去のこちらの記事を先に読んでおくことをお勧めします。
atelier-aomi.hatenablog.com
公式リファレンスはこちら
注：概ね同じですが本記事ではTextMeshProのInputFieldについて説明しています。
docs.unity3d.com

InputFieldを配置する

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

InputFieldの構成を理解する

InputFieldは基本的にはImage（画像UI）とTextMeshProの組み合わせで構成されます。
一番親のInputFieldで入力欄の画像UIとInputFieldを定義しています。
子にあるPlaceHolderとTextがありますが、PlaceHolderは入力前の「Enter Text...」を表示するためのテキストUIで、Textが実際にユーザーが入力したときに使用されるテキストUIとなります。

実際に入力してみると上動画のような挙動を取ります。

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

ここからはInputFieldコンポーネントにフォーカスしていきます。
今回重要な部分としてはやはりTextに関わる部分とイベント関連（On Value ChangedやEnd Edit）あたりでしょうか。

Color関連

Color関連にはいろいろとありますが、要するにマウスの挙動に合わせてボタンのルックを定義するものです。
基本的にこれまでのボタンやトグルのColor関連と同じです。
ただPressedは動画を見てもわかるようにほぼ出てこないと思っても良いと思います。

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

Text関連

この項で主にテキスト周りの設定を行います。

Text Viewpprt / Component

Viewportはまず大枠としてテキストを描画できる範囲を定義します。
Text AreaオブジェクトがRectTransformでいつも通り範囲を設定し、さらにRect Mask 2Dというコンポーネントを使用してそこからはみ出た部分をマスクすることができます。
それを行っているのがこの部分です。
またここで参照しているText Componentが子階層にいるユーザーが入力する実体と連携しているようです。

Input Field Settings

ここではInputFieldに関する設定を行えます。
使用するフォントであったりサイズや最大文字数等もここで設定します。
概ね見ればわかるので割愛しますがCaretについてだけ実際に挙動を見ながら説明しておきます。

Caret（キャレット）はあまり聞きなれない言葉ですが、いわゆる入力中に今どこにいるのかを表す縦線みたいなやつです。
ここではBlink Rate（明滅速度）とWidth（縦線の幅）を設定することができます。
基本的にはデフォルトで問題ないとは思いますが調整はできますって感じですね。

Control Settings

ここも基本的には見ればわかりそうなのとデフォルトのままで問題ないので割愛します。
主に制御周りのON/OFFみたいなところですね。

EventはInputFieldでは４つ存在します。
それぞれ見てみましょう。

OnValue Changed (String)

これは1字入力するたびに呼ばれるイベントとなります。
渡される引き数はその時点での入力済みの文字を渡します。
上動画のように1字入力するたびにイベントが発火されているのがわかると思います。
実際の実装では1字ごとに呼ぶ必要は基本あまりないと思いますが、例えば使用禁止文字が入った瞬間に警告を出す、とかで使ったりはできる気がしますね。

On End Edit (string)

これは入力が終わったとき、つまりユーザーがEnterキーを押したとき、あるいはUI以外をクリックしてフォーカスが外れたときに呼ばれるイベントなります。
渡される引き数はEnterを押した時点の入力済み文字列を渡します。
実際の実装ではおそらくこれが最も利用されそうな気がしますね。
例えば名前を入力させたとしたら引き数として渡された文字列をユーザーのデータに渡して記録させたりとかが該当しますね。

On Select / On Deselect (string)

これはマウスでUIを選択したときにOn Select、UI以外をクリックして他にフォーカスが移ったときにDeselectが呼ばれます。
渡される引き数はSelectの時は既に入力済みの文字列（空白なら空白 = "”）が渡され、Deselectの時はその時点で入力されていた文字列が渡されます。
この選択状態にかかわるイベントでは主に入力に専念させるためにそれ以外の一部機能を制限させたり、入力後に戻したりするときに使用されます。

なお、これらの挙動確認では以下のスクリプトを使用しました。
これを参照させて実行することでコンソールに出しています。

public void OnInputChanged(string t)
{
    Debug.Log("Current Value: " + t);
}

public void OnEndEdit(string t)
{
    Debug.Log("End Value: " + t);
}

public void OnSelect(string t)
{
    Debug.Log("Select: " + t);
}

public void OnDeselect(string t)
{
    Debug.Log("Deselect: " + t);
}

InputFieldのルックを変更する

InputFieldのルックは一番親のInputField(TMP)オブジェクトにImageコンポーネントがいるのでそこの画像を差し替えればOKです。

またさらっと先ほど流しましたがフォントはTextMeshPro - InputFieldコンポーネントの中にあるInput Field Settingsの一番上にフォントを参照できる部分があるのでそこで任意のフォントを選択して使用することができます。

おわりに

これでInputFieldの基本的な部分は理解できました。
実際の実装ではここで入力された文字列をもとに制御スクリプト等と連携して設定を反映させたりすることになります。
次回はDropdownという所謂複数あるアイテムから１つ選択できるようなUIについて触れていきます。

次回記事

＜記事ができ次第追加＞

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

＜PR＞

リンク

Unity UI編 #12 スライダーのUIの使い方を理解する

どうも蒼水です。
今回はスライダー（Slider）という値を扱うことのできるUIの挙動を実際に触りつつ理解を深めていきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はスライダーUIを配置して実際にハンドルを動かした際に起こっている挙動を理解することを目的とします。
なお、今回も前回のボタンと同様にスクリプトの実装が必要なUIとなりますのでそこも含め解説していきます。
公式リファレンスはこちら
docs.unity3d.com

スライダーを配置する

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

トグルのオブジェクト構成を理解する

スライダーは主に一番上にあるSliderコンポーネントを持つものと、その子の中に背景/ハンドル/塗りつぶしの4つの要素で構成されます。
挙動としてはハンドル部分をドラッグすることで背景部分の範囲でハンドルを動かすことができます。
またその範囲内における値を設定することができます（詳細については後述）

ちなみにちょっとわかりにくいなと思ったものとして塗りつぶし（Fill Area）についてで、これはハンドルと背景の中間にあるオブジェクトでハンドルの位置に連動して横に引き伸ばすことで塗りつぶしを表現しているようです。

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

ここからはSliderコンポーネントにフォーカスしていきます。
今回重要な部分としてはスライダー特有のDirectionやValue周りととOn Value Changedの2カ所でしょうか。
それぞれ確認していきましょう。

Color関連

Color関連にはいろいろとありますが、要するにマウスの挙動に合わせてボタンのルックを定義するものです。
基本的にこれまでのボタンやトグルのColor関連と同じです。

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

Directionと値の範囲設定

Directionはいわゆる値の方向、デフォルトではLeft To Rightなので左から右にかけてMin Value <-> Max Valueになります。
Min Value / Max Valueでスライダーの両端の範囲の設定ができます。
またインスペクタにあるValueのスライダー自体がUIのスライダーと連動しておりインスペクタで動かせばシーンのUIも動きます。

DirectionをTop/Bottom系にすることでスライダーは自動的に縦方向のスライダーにすることも可能です。

なお、この辺の値をスクリプトから動的に設定することもできます。
以下の例では引数で値を渡すとその値にハンドル位置を設定したり、MinMaxを動的に設定することができるようなものです。

public void SetSliderRange(float value)
{
　slider.minValue = 0;
　slider.maxValue = 100;
　slider.value = value;
}

On Value Changed（Float）

ハンドルを移動させるたびにその時点の位置に連動した値をfloat型で渡します。
スクリプトの実装の際はハンドルの位置に連動した値を受け取ることが可能です。
今回は値の取得をするだけのスクリプトを作成してみたものが以下です。

[SerializeField] private Slider slider;

public void GetSliderValue(float value)
{
    Debug.Log(value);
}

前回記事のトグルと同様にSliderのイベント設定でもDynamicとStaticの2つが存在しています。
Dynamicはどの時点のハンドル位置での値を返すのに対して、Staticはハンドル位置がどこにあろうがインスぺクタで設定した値を返します。

スライダーのルックを変更する

スライダーに関してもボタンやトグル同様に子階層にある画像（Image）コンポーネント３種をそれぞれ画像を差し替えてしまえばOKです。

スライダーの値をテキストとして出してみる

最後に実際にスライダーの値を取得してテキストとして表示してみる、というのをやってみます。
テキストUIが必要なのでSliderの子にTextMeshProを配置して仮で文字を入れてた状態にしておきます（なくても問題はないですが）
次に以下の関数を用意し、On Value Changedに設定します。

[SerializeField] private TextMeshProUGUI text;

public void SetTextCurrentValue(float value)
{
　text.text = (int)value + " / " + slider.maxValue;
}

上記関数ではスライダーの値を引き数として受けとり、Int型にキャストしてテキストと結合させます。
Int型にキャストしているのは小数点を丸めるためで、別に丸めなくてよいのであればそのままFloatでも問題はないです（個人的に小数点あると気持ち悪いので整数で扱いました）
slider.maxValueとすることでスライダーの最大値の変動に対応しています。
これによりその時の値をテキストとして表示できるようになりました。

おわりに

これでスライダーの基本的な部分は理解できました。
各種設定系でよく使われる要素なのでその辺はこれだだいたい何とかなります。
次回は任意の文字を入力できるInputFieldについて触れていきます。

次回記事

＜記事ができ次第追加＞

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

＜PR＞

リンク

Unity Shader編 #30 上を向いた面を検出してマスクを作成する | 積雪表現の実装

どうも蒼水です。
最近某ゲームをやっていて積雪表現ええなぁとなっている今日この頃。そんな中あれ自分で実装したいなと思って作ってみたのでそのお話を書いていきます。
所謂モデルの上側だけに雪を積もらせる、すなわちその部分を検出するマスクを作る方法ですね。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

上画像のような積雪表現を実装する前提知識としてモデル上面検出とそれを利用したマスクの作成ロジックを理解し、積雪表現の実装を行うまでを目的とします。
今回は積雪表現の実装を目的としていますが、上面検知はいろいろと利用価値があり、上面に草を生やしたり苔むしたような表現など用途は考えようによっては無限大なのでその基礎になる部分を理解していければと思います。

上面検出ロジック

上面検知は過去にやったライティング等と同じように内積で実装することができます。
この際に使用するベクトルが「モデル法線」と「任意の法線」を使用します。「任意の法線」という書き方をしているのは表現の幅を持たせるためにそうしています（次項で説明します）
上画像のように２つのベクトルの内積を取ることで任意のベクトル側を白くするマスクを作成することができます。
これが上面検出の基本的な考え方です。そしてこのマスクを使用してベースカラーと塗分けたり加算や乗算などの処理をすることで上面にのみ何か処理を行うことができます。

ここまでのコードが以下です（部分抜粋）

Properties 
{
    // 任意の法線（ベクトル）をプロパティに宣言
    _MaskDirection ("Mask Direction (world)", Vector) = (0,1,0,0)
}

--中略--

// 最低限の頂点と法線を構造体に宣言
struct Attributes
{
　float4 positionOS : POSITION;
　float3 normalOS   : NORMAL;
　float2 uv         : TEXCOORD0;
};

struct Varyings
{
　float3 normalWS   : TEXCOORD0;
　float2 uv         : TEXCOORD1;
　float4 positionCS : SV_POSITION;
};

// 頂点シェーダーも最低限実装した状態
Varyings Vertex(Attributes input)
{
　Varyings output;

　output.positionCS = TransformObjectToHClip(input.positionOS.xyz);
　output.normalWS = TransformObjectToWorldNormal(input.normalOS);
　return output;
}

// フラグメントシェーダーで内積処理
half4 Fragment(Varyings input) : SV_Target
{
　float3 normalWS = normalize(input.normalWS); // モデル法線
　float3 up       = normalize(_MaskDirection.xyz); // 任意の法線
　half d = half(dot(normalWS, up)); // 2つのベクトルの内積を取る
　half mask = saturate(d); // 内積が0以下になる部分は0に丸める
　return half4(mask.xxx, 1.0);
}

任意の法線について

前項で上方向のベクトルを使用するにあたり任意の法線としてプロパティを宣言するようにしているのですが、このように値を上ベクトルに固定せず任意の値を設定できるようにすることでマスクを作成する向きを調整できるようにしておくことができます。
例えば雪なのであれば強風で吹雪いていて上に積もるのではなく側面に積もる場合もあるでしょう。そういった場合でも柔軟に対応できるようにここは任意のベクトルを使用できるようにしておくことがおすすめですね。

ノイズを加える

現状のマスクでは境界部分がまっすぐであったり塗りがのっぺりしているのでここにノイズを加えて少し質感を持たせていきます。
ノイズは内部生成しても良いですが、今回はテクスチャを使用して乗せるためプロパティの追加とノイズを先ほどのマスクに統合する処理（乗算）を追加実装します。
マスクは強度が調整出来たほうが良いので合わせて調整します。
以下を実装することで上動画のような質感を出すことができます。

Properties 
{
    _MaskDirection ("Mask Direction (world)", Vector) = (0,1,0,0)

    // 法線（ノーマル）マップに関わるプロパティを追加
    _NoiseMap ("Noise Map (R)", 2D) = "linearGrey" {}
    _NoiseStrength ("Noise Strength", Range(0,1)) = 0.25
}

Varyings Vertex(Attributes input)
{
　Varyings output;

　output.positionCS = TransformObjectToHClip(input.positionOS.xyz);
　output.normalWS = TransformObjectToWorldNormal(input.normalOS);
　output.uv = TRANSFORM_TEX(input.uv, _NoiseMap); // ノーマルマップを追加
　return output;
}

half4 Fragment(Varyings input) : SV_Target
{
　float3 normalWS = normalize(input.normalWS);
　float3 up       = normalize(_MaskDirection.xyz);
　half d = half(dot(normalWS, up));

    // ノイズ処理を追加実装
　half noise = SAMPLE_TEXTURE2D(_NoiseMap, sampler_NoiseMap, input.uv).r;
    d += (noise - half(0.5)) * _NoiseStrength;

　half mask = saturate(d);
　return half4(mask.xxx, 1.0);
}

Shader Graph でも実装する

もちろんShaderGraphでも上面検出してマスク作成を行うことができます。
上画像のように組むことでコードベースと同じ結果を得ることができます。

この出力をマスク作成処理としてSubGraph化すればあらゆるシェーダーで上面マスクを適用することもできます。

実践：積雪表現を実装してキャラモデルに組み込む

最後に自分のシェーダーにこのマスク作成処理をキャラモデルに組み込んだ状態が上動画の状態になります。
任意のベクトルが使用できることで任意の方向に積雪ができるようになっています。また上面検知ではその時のモデル法線で処理するわけなのでキャラが動いても常に上部分にのみ積雪表現が描画されます。
モデルUVベースのテクスチャ書き込みではこういったことができないのでこの処理の実装をすることでこういった表現が可能となります。

おわりに

こういった細かいこだわり、とても良い...。
雨に濡れる、雪が積もるなど環境適用の視覚効果はキャラを背景空間になじませるうえでも非常に重要な表現だと思っているのでこういったこだわりは是非入れたいですね...。

次回記事

＜記事ができ次第追加＞

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

＜PR＞

リンク

Unity Tips編 #17 Claude Codeに公式Unity Pluginを導入してより快適な開発環境を構築する

どうも蒼水です。
AI Agentの進化がどんどん進んでいくなか先日CLIとPipelineの導入を行う記事を書いたんですが早速さらに進化してClaude CodeとCodex向けに公式プラグインが登場してきたので早速使っていこうと思います。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

実行環境：Unity6(6000.1.17f1)

今回の目的

今回は新たに登場したUnity公式PluginをClaudeCodeに導入してより快適な開発環境を整え、実際に動かしてみることを目的とします。
またCodexについては今回は使いませんので予めご了承ください。
前回までの記事の内容、もはやすっ飛ばして良いのでは...?

また本記事は公式から出されているこちらの記事を参考にしていきます。
unity.com

プラグインの導入方法

Unity公式プラグインはClaude Desktopを使用している場合は設定にあるプラグインからUnityで検索をかければ出てきますので追加を押すだけでインストールすることができます。
なお、本プラグインはローカル環境ではなくネット上でアカウントと紐づいているので複数の作業環境で使用できるので別途インストールは不要そうです。

インストールされる中身を見ることができるのですが、このプラグインには現状31個のスキルが入っていることが確認できますね（公式HPには29とあったが今後増えていきそうな予感）

さらにスキルのタブをクリックすればその内容も詳しく見ることができます。
今回ClaudeCode向けに導入していますが、Codexも含まれているのでおそらくCodex側での導入でも同じものが導入されそうな感じですね。

また入っているスキルも軽く見てみると先日の記事でもあったCLIの導入方法とかも含まれていることが確認できます。

CLIとPipleineを導入する

公式的には導入すればそれだけでOK！みたいな感じに見えたんですが実際のところはそうではなさそうなので以下の手順を踏む必要がありそうです。
上画像では前回まででCLIは導入しているのではいっているけどPipepineが入ってないよ！という状態（CLIが入っているのでは前回までで入れているから）
本プラグインはあくまでもUnityを操作するめのSkillsを導入するものであり、Pipelineを直接導入するものではないという点については注意しておきましょう。Claudeに訊いてみても同じこと言ってました。

もしCLIも入っていない場合は入れて！って言えば併せて入れてくれると思います（SKILL.mdの中にインストールの記述があります）
というわけなので、本プラグインにそのスキルを使うように指示出ししてPipelineを導入させることが必要です。

コマンドを実行してもらうとしっかりPipelineが導入されていることが確認できました。

疎通確認を行う

さて、ここまでで前回記事で扱ったCLIとPipelineの導入ができたので疎通確認を行ってみるときちんとできていることが確認できます。
画像の通り、本プラグインを導入していることでUnity公式が用意してくれている多数のコマンドを正しく理解して使用できるようになるのでより正確なコマンドを実行できることが期待できますね。
スキルを見た感じではUIを含む2D/3Dはもちろん、それらのレンダリング、物理処理、音声制御、最適化、マネタイズなど開発に必要になる基本的なものは網羅的に入っていそうな感じですね。

実際に作らせてみる

シーンの作成からオブジェクトの配置

上の通りの指示で試験的にシーンを新規作成させたうえで、そのシーンでキューブを規則的に大量に配置させてみます。

すると前回の記事と同様に作業結果をスクショして共有してくれた上で問題なく作業が完了していることが確認できました。

アニメーションを作成させてみる

これだけだとアレなので今回はこの大量のキューブにアニメーションを付けてもらってみました。
これもClaudeが全部作ってくれたので人の手は一切入ってないです。

個人的に結構面白いなと思ったのは、このアニメーションのキーやオブジェクトの構造を見ると作りやすい構造にしてから最低限のキーを打っているところだなと。
どういった構造が作りやすいのかの理解もあるのか...という気持ちになりましたね。

Timelineを構築させる

さらにこのアニメーションを使ってTimelineの構築までさせてみました。
TrackGroupを作成させ、AnimationClipがその子になるように作ってもらってみました。これも問題なくきれいに行けてますね。
せっかくなのでさらに手を加えてもらって回転も加えてクオリティアップしてみようと試みてみたら下のようなものになりました。すんごい。

おわりに

前回記事とはまた違った導入方法ではありますがこっちのほうが少し楽ですね。
なんだかんだ指示出ししてのCLIとPipelineのインストールは必要とはいえ基本的にはClaudeDesktop完結で疎通できる状態までの環境構築まではやってくれるので良い感じかなと！
おそらくCodexでも似たような手順で導入できると思います。プラグインさえ入れてしまえば環境構築は全部やってくれるので。
また、公式提供のSkillがあるおかげかなんとなくこれなしの時よりも正確に出力がなされている感じがしています。もっといろいろ数こなして確認する必要がありますが、少なくとも今回は意図したものがきちんと出てきたな、という印象がありました。ありがとうUnity...。

次回記事

＜記事ができ次第追加＞

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

＜PR＞

リンク

Blender Tips編 #19 Blender 公式MCPを使用してClaude CodeでBlenderを操作する

どうも蒼水です。
今回はBlender公式から出されているMCPを導入してClaudeCodeにBlenderを操作できるようにする方法について解説します。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

使用Blenderバージョン：5.2.1LTS

今回の目的

今回はBlender公式から出されているMPCを導入してClaude CodeがBlenderを操作できるような環境を構築し、各種操作やアドオン開発の役に立てることを目的とします。
MCPを導入することでAIエージェントがBlenderを操作できるようになるためアドオン開発時のBlender関連のモジュール（bpy等）を読めるのはもちろん、開発後の実機動作確認などまでほぼ自動で開発することができるようになります。
アドオン開発以外でも3DView等を直接操作することができるのでモデリング等もさせることも可能です（ちゃんとしたモデル作るなら人の手は介入させた方が良いとは思いますが）
なお、本記事は公式ページのこちらを参考にしています。
www.blender.org

前提知識：MCPって何？

エンジニアの方等で普段からAIを使用した開発をしている人とかでは馴染みある人が多いと思いますが、モデラー等のデザイン系の方にはあまりなじみがないと思われるので先に説明しておきます。
MCPとはModel Context Protocolの頭文字をとった言葉で、つまりClaude CodeやCodexといったLLM（AIエージェント）と接続するためのプロトコル（共通規格）のことです。
今回扱うBlender MCPでは公式MCPをBlenderにアドオンとして追加することでLLMがBlenderを操作できる環境を構築します。

Blender公式MCP導入手順

Blenderバージョンの確認

Blender公式MCPを使用するにはBlenderのバージョンが最低でもBlender5.1以上であることが要件となっているのでまず自分が使用しているBlenderのバージョンを確認しましょう。
自分は基本LTSを使用しているため、Blender5.2.1LTSを使用しています。
Blender5.2.1LTSは以下ページからインストールできます。
www.blender.org

MCPアドオンを導入する

まず先に編集->プリファレンスのシステムからネットワークにあるオンラインアクセスを許可にチェックを入れておく必要があるのでここの設定をしておきます。

次に公式MCPのページにある青い破線の部分をBlenderに2回ドラッグ＆ドロップします。
www.blender.org

1回目ではBlender Labのリポジトリの追加のみが行われます。
何やらいろいろ出てきますが基本そのまま進めばOKです。

2回目でアドオンの追加が行われます。
ここまで完了すればアドオンが追加されており、アドオンの一覧にMCPというアドオンが入っていることが確認できます。
AutoStartにチェックが入っているので一度導入すれば再度Blenderを開いたときに自動的にMCPサーバーが立ち上がりLLMとの接続が可能な状態となります。

Claude CodeからBlenderを制御してみる

ではここから先はClaudeCodeに移ります。
仮にアドオン開発をするものとして自分の場合はDドライブにBlender_Toolsというフォルダを作成してそこで作業するのでClaudeCodeではそのフォルダを指定して作業するものとします。

Blenderコネクタを追加する

ClaudeがBlenderを操作するにあたり、コネクタというものを追加しておく必要があります。

追加方法はチャット欄の下にある「＋」からコネクタを参照、Blenderで検索すればコネクタが出てくるのでそれを追加します。

Blenderを選択してインストールからコネクタを追加できます。

疎通確認

準備ができたのでMCPサーバーとの疎通確認を行ってみます。
今の状態とかも聞いたのでいろいろな情報が拾えていることがわかりますね。
前回の記事で開発したアドオンの情報とかも見れてますね。

実際に何か動かしてみる（モデリング）

上の例ではデフォルトキューブを配置してXYZに45度の回転を入れるように指示してみたものです。
結果として指示通りの操作が行われ、その結果のスクリーンショットも撮影して共有してくれます。
このようにBlender MCPを導入することでモデリング作業を行うことができます。

実際に何か動かしてみる（アドオン開発/実機確認）

また、モデリングだけでなくアドオンの開発もMCPを使用することで実機確認を行うことができます。
試しに前回の記事で開発したOrigin to Face Normal（原点操作アドオン）を操作させてみましょう。
その結果、きちんと指示通りにアドオンの機能が実行・設定され検証結果の報告も行ってくれました。

おわりに

アドオン開発に関してはもはやコーディングから手動テスト/デバッグはほぼ自動化され自分の欲しいアドオンを都度開発してしまうことまでも可能となります。
これからはもう自分でアドオン開発する時代ですねぇ！
プログラムがわからなくてもそれなりのアドオンはそれなりに作れてしまうのでデザイン系の人でもぜひこのMCP＋AIAgentでの制作は試してみて欲しいですね！

次回記事

＜記事ができ次第追加＞

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

＜PR＞

リンク