AI編記事の概要の逆引きでまとめていますので目的に応じてご利用ください。
記事が更新されるたびこちらのまとめ記事も随時更新されていきます。
▶Claude Codeを使用したUnityでのシステム開発事例はこちら
atelier-aomi.hatenablog.com
Unity UI編記事の概要の逆引きでまとめていますので目的に応じてご利用ください。
記事が更新されるたびこちらのまとめ記事も随時更新されていきます。
どうも蒼水です。
今回は前回に引き続き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設定が０になってしまっているとSDFのための領域が確保されないためSDFに必要な部分が描画されないという問題が起こる点に注意してください。
のドロップシャドウも含めSDFが正常に描画されていない場合アウトラインもドロップシャドウも機能しない問題が発生します。
ドロップシャドウを落とすにはマテリアル設定側のUndelayにチェックを入れ各種設定を行うことで影を落とすことができます。
開発しているアプリケーションの振ニキにもよりますが、個人的にはドロップシャドウを有効にするのは結構おすすめしています。
というのもドロップシャドウがあることで視認性の向上やややリッチ感を出すことができるのでUX向上という意味ではおすすめです。
フォトショでデザインしてるときとかもドロップシャドウはそこそこ使うのでその感覚でつけたりつけなかったりするのが良いと思います。
体感白背景に黒テキストの時はあった方が良いなーと感じます。逆に黒背景白文字の時はその恩恵はほぼないの気がしています。
黒い影ならそれはそうだし、あえて白い影的にずらしのような表現としても使えますが個人的にはうーんという感じ。
TextMeshProはただテキストを配置するだけでなくある程度加工もできるのでフォトショ通さなくてもそれなりの文字デザインが可能になっています。
これやろうと思えば自分でテキスト用シェーダー描いておもろいこともできそうな気がしているのでそのうち試してみたいですね。
どうも蒼水です。
今回はテキストを表示するUIをTextMeshProを使用して作成していきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)
今回はUnity標準で用意されているTextMeshProというものを使ってテキストUIを作成することを目的とします。
また、標準フォントでは日本語がサポートされていませんので日本語の扱い方も含め解説していきます。
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を作成するには 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 Creatorで設定できる解像度と関係があり、当然解像度が大きければ綺麗に文字を出せます。
一方で、あまりにも大きいとテクスチャサイズが大きくなりすぎてメモリを圧迫することがあります。フォントだけで数十MB持ってかれる場合もありアプリケーションを軽量にする意味でも解像度は適切に設定する必要があります。
また、文字数が多ければ多いほどきれいに出すための必要テクスチャサイズは大きくならざるを得ないのでアプリケーションで使用しない文字列は排除し、必要最低限の文字だけで構成することが望ましいです。
試作段階であったりする場合は気にしなくてよいと思いますがビルドして実機動作させる場合はこの辺りは最適化しておくと良いでしょう。
上画像は2048pix と1024pixの解像度でのFont Assetのルックの差になります。
あまりに小さくなりすぎると文字がボケボケになり、UXに支障をきたしますのであくまでも適切なサイズ感にとどめUXは保てる最低ラインを確保しましょう。
最後にそれっぽい感じの会話テキスト表示を作ってみました。これでテキストUIの基本は理解できました。
また日本語のサポートもできたので概ねテキスト周りで困ることはなく開発が来出ると思います。
次回はテキストのマテリアル周りについて深堀していければと思います。
テキストにはアウトラインを付けたりドロップシャドウを付けたりすることができるようになっているのでそのあたり触れていければと思います。
どうも蒼水です。
今回は前回の続きでSprite Editorを使ったUI素材の用意/設定方法とそれを実際に使った少し実践的なUI Imageの作成方法を解説していきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)
前回は単純に用意した画像をそのままUIとして使用しました。
その応用版として1枚に複数の画像を並べてそれぞれを切り出したり、画面によって変わるようなUIのサイズを１つの画像でサポートできるようにすることができるSprite Editorについての理解を深めることを目的とします。
Spirteは2D/3D開発ともに使用する頻度が高めです。
2Dではあらゆるものに、3Dでは主にUIの作成で多用されます。
Sprite Editorでは１つのUI画像素材を切り分けることができる機能です。
Sprite EditorはUI素材のInspectorでTexture Typeを Sprite ( 2D and UI )を選択した状態で [ Open Sprite Editor ] から開くことができます。
公式リファレンスはこちら
docs.unity3d.com
詳しくは次項から説明していきますが、いろいろな素材を並べたSprite Sheetから１つ１つ切り出したり、 サイズ調整を柔軟にできるようにするために使用するものと覚えておけばよいと思います。
今回は例として下のような２種類の画像をそれぞれ用意しているのでこれで実際に挙動を見ていきます。
こちらの場合はSprite ModeをSingleではなくMultipleにしておきます。
次に上動画のように左上にあるSliceから任意の方法で画像を切り出すことができます。
今回は規則的にタイリングされているのでGrid By Cell Count を使用して切り出してみました。
こちらの設定を行うと赤い線が表示され、その位置で切り出しますよ！という感じです。
切り出しが完了したら右上のApplyををして完了です。
切り出しが完了するとアセットが展開できるようになり、中に切り出した分の画像が格納され、それぞれ個別でUI画像素材として使用することができます。
このように１つの画像アセットから切り出して使用することで１枚１枚画像を用意するよりまとめたテクスチャを用意して使用することでメモリに優しいデータにすることができます。
一応それぞれの切り出し方を確認しておきましょう。
自動で切り出してくれるもの、ではあるのですがこの画像では１枚の画像として扱われてしまって使い物になりませんでした。
素直に次以降の設定方法で切り出した方が良さそうです。
なお、公式リファレンス的には透明度を参照しているため、今回は背景黒塗のためうまく機能していないと思われます。
こちらでは切り出す画像１つあたりの画像サイズ（Pixel）で幅を決定します。
今回の例ではこの画像は512*512のサイズですのでそれを５分割すればよいわけなので102.4になります（＊Pixel数だと整数のみ扱えるため102となっています）
綺麗に割り切れない場合は次項のCountのほうが良さそうです。
こちらは分割数で幅を決定できます。タイリングされたものであればこれが一番確実だと思います。
今回の例では５分割することを前提としているので縦横それぞれ５で設定すれば綺麗に５分割してくれます。
これは独立的にスライスできるもののようではあるんですが、グリッドを前提としている以上上記２つで十分であり、ほぼ使うことがなさそうだなと思うためこちらは割愛します。
触ってみた感じもちょっとよくわからない...。
本項を理解するには画像の構成について理解しておく必要があるので説明します。
今回この画像を用意したのはそれをわかりやすくするためのものです。
サイズ変更を柔軟にする、というのは上動画のように固有部分は本来のサイズ感を保ちつつ、引き延ばしても問題ない部分を延ばせるようにすることであらゆるサイズに対応させる、ということです。
実際のスライス方法は上画像のようになります。
またこの場合は先ほどはMultipleにしていましたがSingleで設定を行います。Singleの場合先ほどの左上のSliceはグレーアウトされているので右下のBorderで調整します。
Borderha上下左右（Left / Right / Top / Bottom）からどれくらい離れた位置にボーダーラインを引くか、と考えればOKです。
今回固有部分は四隅の色分けした四角形の部分で、とかの部分は引き延ばしても良い共通部分なのでこのような設定になります。
また、この設定を行ったUI画像素材はUI ImageのImage TypeをSlicedにしておく必要がある点に注意してください。
Simpleにしている場合は上画像のように固有部分もサイズ調整に合わせて伸び縮みしてしまいます。
このようにSprite Editorを使ってUI画像素材を加工することで効率的にUI制作を行うことができますので積極的に使っていきましょう。
次回は文字（Text）に関するUIについて触れていきます。
どうも蒼水です。
Claude CodeにおけるSkillsを触り始めたので備忘録的にまとめておこうと思います。
AI編の前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
前回まででClaude Code自体は理解したので次はClaude Codeで使用できるSkillsが何なのか、そして作り方から使い方まで理解することを目的とします。
また、Claude のデスクトップアプリを使用していますので予めご了承ください。
Skillsについては公式からもドキュメントは出ていますのでそちらも参照しましょう。
support.claude.com
code.claude.com
Claude CodeにおけるSkillsは一言でいうなら「業務手順書的なものを渡しておいて、特定のタスクが振られたらその手順に従って作業をしてくれるようにするもの」という感じです。
SKILL.mdという手順書をあらかじめ作成しておくことでClaudeは振られたタスクから必要性を判断して手順書を読みに行き、それに従ってタスクを処理します。
例えばコードレビューをさせると都度いろんな書き方をしてきますが、それを決まったフォーマットに落とし込んでいつでもそのフォーマットでレビューさせたりすることができます。
コードレビューは一例ですが、このような日々何度もClaudeにやらせることが多いようなタスクはスキルとして手順を作成しておいて常に読ませるようにしておくことで普段の開発に大いに役立てることができます。
SKILL.mdには決まった書き方があるのでそれに従って記述しますが、実際に自分でゼロベースで書く必要はなく、スキルの指示を記述する方法と対話しながら作成する方法があります。
今回はSkillsの作成方法から実行してみるところまでをメモしておきます。
ユーザーが「Skillsを作成したい」あるいはそれに等しいようなことを言われた場合に呼ばれて、この手順書にしたがってClaudeがSkillsを作成してくれます。
画像を見るとわかると思いますが、skill-creatorのSKILL.mdがあり手順書を実際に読むことができます。
これから作成するSkillsは同様にこういったSKILL.mdをClaudeに作成させます。
画面左上の「Customize」に入るとスキルがあるので「＋」ボタンを押すことでスキルの作成を行うことができます。
では早速Skillsを作成していきましょう。
まずは割とシンプルなので先にこちらを見てみます。
こちらの方法では予め決まった形式のウィンドウが出るのでそこに自分で手書きすることでSKILL.mdを作成するとができます。
個人的にはここで自分で手書きするよりは対話しながら作成する方がお手軽なのでそちらをお勧めします。（書くのめんどくさいし...
ここの内容でもわかるようにSKILL.mdにはスキル名とその説明（概要）、そして実際の手順を記述することでSKILL.mdを作成することになります。
先に説明しておきますが、こちらの方法で作成する場合はアカウントの設定としてSkillが保存されているのでローカル環境や特定プロジェクト用のスキルの作成は出来なそうな気がしています。
もしそういった目的がある場合は次項で説明する対話での作成方法を実行推奨です。
上画像のように前回の記事で行った「Claudeへの指示」をユーザーに提示するスキルを試しに作成してみます。
1つだけだと手順の確認として微妙なので追加でそのその指示を確認した時刻も記載させるタスクを振ってみます。
ここから追加したSkillsがもともとあったskill-creatorと同様に追加されていることがわかりますね。
この状態でClaudeからこのスキルを使用してみます。
Claudeへの指示を確認して
特にスキルを使うよう指示しなくてもClaudeは文脈から必要なスキルを判断し、自分で読みに行きます。
上画像は処理中のものですがSKILL.mdを読みにっていることがわかります。
先ほど指示した通りの出力をしてくれていることが確認できますね。
本来指示を確認するだけであれば最後に時間を記載したりはしませんがSKILL.mdを通していることでその手順が踏まれることでこういった出力になります。
こちらの方法ではskill-creatorのウィンドウからではなく、普段やっている対話形式でのスキル作成を行うことができます。
また、こちらの方法をとることでClaude Codeで対話を行うことでローカル環境にSKILL.mdを作成したりプロジェクト固有のスキルを作成することも可能なので個人的にはこちらの方法を推奨しています。
今回はClaude Codeを使用してローカル環境にSKILL.mdを作成していきます。
本プロジェクト用にスキルの作成を行いたい。
まずはプロジェクトを指定したらスキルを作成したい旨を伝えます。
するとskill-creatorが呼ばれ、どういったものを作成したいか訊かれるので概要を伝えます。
今回はコードレビューや改善できるところを提示してくれるスキルを作成してみましょう。
指定したスクリプトをコードレビューし、改善できるところを見つけて案を提示してほしい。
すると、詳細な内容について訊かれるので対話しながら進めていきます。
スクリプトの種類を聞かれているのでUnity開発で必要になるC#をHLSL等を指定しました。
次にレビューする際の観点を聞かれたのでひつようなものにチェックを入れました。
パフォーマンスは軽量なコードにできると良さげ、可読性は言わずもがな読みやすい方が良い、バグチェックはもはや必須なのでチェックを入れます。
最後に提示形式を聞かれたので修正コードも提示するように指示します。
すると諸々の実行に許可を求められるので許可します。
この時点でSKILL.mdのドラフトを作成してくれて中身も見ることができます。
きちんと手順や優先度、出力ガイドラインなどが示されていますね。
問題ないので本プロジェクト用に格納しておくように伝えます
内容OKなのでドラフトのやつを本プロジェクト用に格納しておいて。
これで本プロジェクト固有のスキルとして今回作成したスキルが使用可能になりました。
Unityプロジェクト内にSKILL.mdが格納されていることが確認できますね。
最後に実際に１つコードレビューさせてみましょう。
InputSystemClickEffect.csのコードレビューを試しにしてみて
最初と最後だけのキャプチャですが、SKILL.mdで指示しておいたフォーマットでレビューされていますね。
このようなコードレビュー等の何度も行うようなことをスキルとして作成しておくことで常に同じ形式での回答を得ることが可能となります。
また、対話形式で作成することでClaudeはより細かく書くべきことを考慮し、全て書いてくれるので自分が書かなくても良いので個人的には圧倒的に対話による作成推しです。
なお、作成後に調整したい部分とかがあれば自分で追記したり修正しても問題ないのでそのへんは良い感じにいじりましょう。Claudeに書き直せさせても良いです。
またスキルはClaudeだけの概念ではなくほかのLLMにもある概念なので別のLLMを使用している場合でもスキルは適宜必要なものは設定しておくと良いと思います。
どうも蒼水です。
今回はClaudeで設定できる項目のうちパーソナライズ、すなわちClaudeを使う上であらかじめ考慮しておいてほしいことを設定する方法についてメモしておこうと思います。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
今回はClaudeで開発を行っていくにあたり、初めにやっておくと良い設定を行うことで毎回の会話の開始時に書かなくてもClaudeが考慮してくれるようにするための設定方法について理解することを目的とします。
なお、本記事ではClaudeのデスクトップアプリを使用しているので予めご確認ください（ブラウザ版でも変わりはしないと思いますが念のため。）
左下のアカウントのところをクリックして設定の画面に飛び「一般」の中に「Claudeへの指示」という項目があるのでそこに予めClaudeが考慮するべき事項ついて記述しておきます。
例えば自分は画像のように以下のような指示を出しています。
指示の意図としてまず「Unityを使用している開発者である」ということは必ず考慮されるべきであり、それが全ての会話において必要であるがゆえにここに記述します。
さらに、Unityはバージョンによって使用する関数が変更される場合もあり、自分が現状使用しているUnityバージョンを明示しておくことでClaudeはそれに対応した関数を拾ってくれるようになります。
また自分の場合はシェーダー開発を行っていることもあり、レンダリングパイプラインについてもURPを使用していることを明示することでURPに対応したシェーダーの開発や拡張もしやすくなります。
使用する言語についてもC#とHLSLを使用している旨を伝えておきます。HLSLPROGRAMで書けと伝えているのは結構CGPROGRAMで出してくることが多いため、明示的にそこを回避するために記述しています。
これによりClaudeはユーザーの開発環境をすべての会話において予め考慮してくれるようになり、スムーズに開発を開始することが可能となります。
これはあくまでも1例なので必要なことがどんどん書いておくと良いと思います。会話をしていって「これ毎回言わなくちゃいけないのか？」となるようなことがあればここに書いておくと良いです。
ここを設定した状態でClaudeにその指示が伝わっているか確認することもできるので聞いてみましょう。
設定でClaudeへの指示を出してあるけどちゃんと理解しているかい？
きちんと伝わっているのが確認できますね。
つまり一番最初の会話で考慮しておいてほしいことをここに記述することで毎回その記述をする必要はなくなり、Claudeが出してくる回答の正確さの向上に役立てることができます。
詳細は公式ドキュメントを参考してください。
support.claude.com
しれっとこんな指示まで書いていますが、Claudeの指示にこういうこと書いておくとちゃんとその話し方をしてくれます。
会話相手はかわいいほうがええやろ！よっしゃ調教したろ！（Claude以外のLLMでも調教できます）
Claude、というかAI(LLM)全般にはメモリーという概念が存在します。
左下のアカウントのところをクリックして設定の画面に飛び「機能」の中に「メモリー」という項目があるのでそこでメモリーの使用に関しての設定を行うことができます。
ユーザーが会話をするたびにLLMは会話内容をメモリーとして記憶を保持し、それ以降の会話へ考慮させます。
前項ではClaudeの指示として明示していますが、それに加えて会話をすればするほどユーザー傾向を蓄積・学習させることでよりパーソナライズされていきます。
また、過去にした会話を考慮することで新しく開始した会話でも別の会話を引っ張ってきて継続性を持たせたりすることも可能になっています。
これは便利である一方で逆に考慮してほしくない場合もあり、そういった場合は検索・参照を切っておくと良いでしょう。
全く前提のない状態での会話をしたいシチュエーションというのもまぁそこそこあるのでそこは適宜設定や指示をすると良いと思います。
詳細は公式ドキュメントを参考してください。
support.claude.com
AIはそのまま使うのではなく調教しよう！というお話でした。
AI(LLM)は大量の学習があってのアウトプットという大前提があるので自分のことも学習させておきましょう、ということです。
使い方や目的は十人十色、Claudeを自分色に染めて最高のパートナーに調教してあげましょうね。
