uGUIのUI制作では、標準機能でできる作業と、追加ツールが必要な作業を分けると導入先を選びやすくなります。文字間隔はTextMeshPro（TMP）、文字に合う枠は自動レイアウト、角を保つ背景はSpriteのBorderとImageのSlicedから確認します。旧Text向けの拡張をTMPへそのまま追加する手順にはしません。
参照資料はuGUI 2.0.0、TMP APIの一部は別版のTextMeshPro 3.0.1です。導入済みパッケージの版とコンポーネントを先に確認してください。改稿時にUnity Editorでの操作・外部ツール導入・速度や頂点数の測定は行っていません。既存画像は2017〜2018年等の旧版資料で、現在の画面や修正版の動作証拠ではありません。UI Toolkitはこの記事の対象外です。
目的別：標準機能と追加ツールの選び方
| 目的・症状 | 選択・確認する機能 |
|---|---|
| 文字の輪郭・間隔 | 旧TextならOutlineなどのuGUI効果、TMPならそのFont Asset/Material・Spacingを確認。文字間隔とカーニングを区別する。 |
| 文字に合う枠 | 単独TextならContentSizeFitter、親がLayout Groupなら親側のサイズ制御とLayout Elementを確認。 |
| 複数ボタンの色・寸法 | 共通項目はInspectorの複数選択を先に試す。Color Tintの状態色とImage.color、レイアウト制御を分ける。 |
| フォントの一括置換 | TextとTextMeshProUGUIを別々に選ぶ。Scene内の選択と全Prefab Assetの変更は別作業。 |
| 角丸背景の伸縮 | Sprite EditorのBorderとImage Type=Sliced。大量の画像処理はAuto9Slicerを少数のコピーで試す。 |
| 名前・Prefabの整理 | 一般のEditor拡張ガイド、Prefab CSV/PNGの記事へ。UI専用効果とSceneの一括編集を混ぜない。 |
導入前に確認するUIと変更範囲
- Inspectorで対象がUnityEngine.UI.Text、TextMeshProUGUI、Image、RawImageのどれかを確認します。Canvas上のuGUIとUI ToolkitのVisualElementは同じ拡張ではありません。
- プロジェクトのUnity版とuGUI/TMP関連の導入済み版を記録し、Consoleの既存エラーを先に確認します。新しい拡張は複製した検証用Scene・素材のコピーへ導入します。
- Scene内の選択、子孫も含む選択、Prefab Asset全体のどれを変更するか決めます。実行前の対象数を確認し、Undo・保存・再読込の結果を少数対象で照合します。
- Editor専用のメニューやEditorWindowはEditor側へ置きます。一方、描画効果としてアタッチするコンポーネントは実行時にも必要なため、名前に拡張とあるだけでEditorフォルダーへ移さないでください。
UnityからPhotoshopで画像を開く旧拡張
Projectから元画像を開くメニューの元記事は作者のOpen in Photoshop解説です。EditorOpenInPhotoshop.csでUnityのAssetパスを取得し、外部アプリへ渡す用途です。UIの見た目を変える描画コンポーネントではありません。
- 外部アプリで元画像を開くだけなら、まずProjectの画像を開く標準動作で目的を満たせるか確認します。
- 旧拡張を導入する場合は作者の全文を読み、Photoshop実行ファイルのパス、対象OS、空の選択や画像以外の選択への処理を確認します。以前のPCの固定パスを流用しません。
- 画像のコピーを1つだけ選び、意図したアプリとファイルが開くか試します。保存後にUnityへ戻り再インポート結果を確認します。購入比較やOS全体の関連付けの説明は、このUI用メニューの範囲には含めません。
次は旧Open in Photoshopメニューの画像です。現在のPhotoshopやUnityで動作を確認した画面ではありません。
Outline：旧TextとTMPの輪郭を分ける
旧TextやImageのOutlineはuGUIのメッシュ効果です。TMPの輪郭は対応するFont AssetのMaterial設定で扱うため、旧Text用のCircleOutlineをTMPへそのまま追加することを前提にしません。まず現在のコンポーネントと必要な輪郭幅を確認します。
旧CircleOutlineの配布は作者のGistです。円周方向に頂点を複製する方式の旧拡張で、画像はその比較資料です。標準機能はuGUI Outline公式資料を参照します。
元記事の「頂点数が標準Outlineの2.5倍以上」という一律の比率は、対象文字列・分割数・Unity版の測定条件を追跡できないため採用しません。次の旧比較画像も現在の性能測定ではありません。必要なら同じ文字列・Font・輪郭幅で標準Outline、追加効果、TMPの候補を比較し、Frame DebuggerやProfilerの条件と結果を記録します。文字が増えたとき、Maskの中、スマホ実機でも目的の表示を確認します。
文字間隔：LetterSpacingとTMPのSpacing
文字全体へ追加する間隔と、特定の文字ペアの間隔を補正するカーニングは別です。TMPのcharacterSpacingは文字間へ追加する間隔として説明され、TMP_Textの資料にはカーニングの有効化も別項目としてあります。これらはTMP 3.0.1の資料であり、Unity 6.3の導入済み版と同じと仮定しません。
- TextMeshProUGUIを使っているなら、Inspectorの文字間隔（Character Spacing等、版によって表示名が異なる）を少し変えます。文字列・サイズを固定し、変更前後の幅を確認します。
- 折返し、長い日本語、数字・英字、Auto Sizeを使う場合をそれぞれ確認します。追加間隔で折返し位置や必要高さも変わるため、枠の高さとOverflowも確認します。
- 旧UnityEngine.UI.Textでは、TMP専用のプロパティを使えません。旧LetterSpacingを継続するかTMPへ置き換えるか決め、移行時はFont Asset・サイズ・改行の違いを別に確認します。
LetterSpacing.csの元リンクは旧Unity Forumです。取得時にHTTP403で全文・現在の配布条件を確認できなかったため、ダウンロードやAdd Componentの階層を現在の手順として保証しません。次は旧Text用の操作画像で、TMPの設定画面ではありません。
縦書き：旧RotateTextの対応範囲
2017年のRotateText紹介は旧Textの文字の向きとRectTransformの回転を組み合わせる例です。RectTransformをZ=-90度へ回転しただけでは、日本語の縦書き組版が完成するとは判断しません。旧画像では全角文字の見た目を示していても、句読点・括弧・長音・半角英数字・複数列の処理は別に確認が必要です。
旧プロジェクトで再現する場合は、作者の対象コンポーネントとコードを確認し、コピーしたTextへ適用します。「あいうえお」だけでなく「（文章）、。ーABC123」と改行を含め、文字の向き・行送り・はみ出しを照合します。Textのオン/オフで見た目が変わる場合も、更新タイミングの問題を解決できたかを文字列変更で再確認します。TMPへの適用・LetterSpacingとの併用は、この改稿では確認していません。
ContentSizeFitter：横幅固定と自動幅を使い分ける
ContentSizeFitterは同じGameObjectのレイアウト情報に基づき、自分自身のRectTransformを制御します。公式の内容サイズへのフィットと各Fit項目を参照します。両軸Preferred Sizeは単独Textで幅と高さを内容へ合わせる例であり、すべてのUIへ無条件に付ける設定ではありません。
次は旧Textの枠の資料です。何を固定するかを決めてから設定します。
- 単独の短いラベルを内容の幅・高さへ合わせたい場合は、Textと同じGameObjectへContentSizeFitterを付け、両軸をPreferred Sizeへします。親のLayout Groupが同じ軸を制御していない条件で試します。
- 本文を指定幅で折返したい場合は、横幅をRectTransformや親側で決め、Horizontal Fit=Unconstrained、Vertical Fit=Preferred Sizeを候補にします。Text側の折返しを有効にし、長文へ変えて幅が動かず高さが変わるか確認します。
- 親Layout Groupが子の寸法を制御する構成では、子のContentSizeFitterと同じ軸を取り合わないよう整理します。親側のChild Control Size/Child Force Expand、必要なら子のLayout Elementを確認します。
- ボタンの背景を子Textと余白へ合わせたい場合は、親Button側のLayout GroupとContentSizeFitterの構成を公式の例で確認します。子にも機械的にFitterを追加しません。
- Pivotが左上なら右・下へ、中央なら両方向へ広がることを確認します。空文字・短文・長文・画面幅変更・Play中の文字列変更でも切れや重なりがないか確認します。
次の旧画像は両軸Preferred Sizeと画像内の自動更新コードの資料です。画像だけでは全文をコピー・コンパイルできないため、新しい導入用コードとして掲載しません。標準レイアウトで解決できる範囲を先に確認し、毎フレームの強制更新が必要と決めつけないでください。
Rect Tool：UIはScaleではなく枠の寸法を調整する
uGUIの矩形をSceneで調整する標準ツールがRect Toolです。既定のTが使えない場合はツールバーから選び、Shortcut設定を確認します。白い背景で選択枠が見づらいときも、追加コードを導入する前に選択対象とツールを確認します。
- Hierarchyで対象のRectTransformを選び、ツールバーのRect Toolへ切り替えます。UIはPivot/Localを基準に操作するところから確認します。
- 矩形の内側で移動、辺・角でWidth/Height、角の外側で回転を調整します。RectTransformの枠変更は通常Scaleを変えず、文字サイズを拡大する操作とは違います。
- 親の寸法変更に追従させるならAnchorsを確認します。左右にStretchしている場合はWidth欄ではなくLeft/Rightの余白が表示されるため、固定幅の画像と同じInspectorにはなりません。
- 寸法が戻る場合はLayout Group/ContentSizeFitterなどの制御元を先に確認します。ScaleだけでUIの幅を合わせず、幅・アンカー・余白の役割を分けて調整します。
操作の根拠はuGUI Basic Layoutです。次の2画像は旧版のツール表示で、現在のUIやショートカットを固定するものではありません。
グラデーション：uGUI-Effect-Toolの旧版とTMP
uGUI-Effect-Toolの作者READMEにはGradientColor/GradientAlphaなどがあり、元の確認版はUnity 5.4.0f3と記載されています。MITライセンスの旧ツールで、今回Unity 6.3への導入や互換性を確認していません。追加効果の対象が旧Text/Imageなのか、使用中のUIコンポーネントで確認します。
TMPを使うなら、まず導入済み版のVertex Color Gradient/Material設定で目的を満たせるか確認します。Mask下や複数効果の併用、透明度、色空間の条件で結果を比較し、旧uGUI効果をそのまま重ねる手順にはしません。次は旧素材の色付け画像です。
ボタンの色・寸法と名前をまとめて変更する
同じ種類のButtonを少数選び、Inspectorの共通項目を編集できるか先に確認します。Buttonの公式資料のTransitionとTarget Graphicを確認し、Color TintのNormal/Highlighted/Pressed/Disabled等の状態色と、Imageそのものの色を混同しないでください。寸法はRectTransformですが、Layout Groupに制御されていればその親側が変更先になります。
- Hierarchyで対象Buttonだけを選び、選択数と共通のコンポーネントを確認します。親・子・Prefab Instanceが混じっていないか確認します。
- 必要な共通色または寸法だけを変更し、Play中に通常・ポインター移動・押下・無効状態を確認します。Undoで戻し、Scene保存後の再読込も確認します。
- 旧記事の独自一括メニューは次の画像の資料です。全文コードと現在の配布先を追跡できないため、この画像を新しい実行可能コードとして扱いません。Editor拡張を自作する場合はUndo、PrefabのOverride、子を含める範囲を明示します。
Colorの浮動小数点値へ8bit RGBを変換する場合は各値を255fで割ります。これは値の変換で、Buttonの状態色・Image.color・Materialのどれを編集するかを決める代わりにはなりません。
名前の一括変更は一般のEditor拡張ガイドのMulligan Renamerへ集約します。Sceneで選んだ対象だけか、子も含むか、Asset名も変更するかを確認してください。次は旧命名ルール用リネーマーの画像です。GUI.colorやGUILayout.Spaceはウィンドウの描画設定であり、名前の変更・Undo・保存を行うコードの代わりにはなりません。
フォント置換：Text・TMPとScene・Prefabを分ける
旧TextのFontはUnityEngine.Font、TMPのFont AssetはTMP_FontAssetです。同じAssetを同じ欄へ入れる操作ではありません。Font Assetと日本語文字の扱いはuGUIフォント設定の個別ガイドで確認してください。TMPのfontプロパティの型はTMP_Text資料でも確認できます。
- Hierarchyで対象型を絞り、旧TextとTextMeshProUGUIを別々に選びます。検索文字列にtextがあるだけでは型を区別できたことにならないので、Inspectorで確認します。
- 少数の旧Textなら共通のFont欄へUnityEngine.Fontを、TMPならFont Asset欄へ対応するTMP_FontAssetを割り当てます。変更対象の選択数を確認します。
- 日本語・数字・記号・未収録文字で欠け、Fallback、サイズ、折返し、Material Presetの見た目を確認します。同じFont Sizeの数字でも同じ見た目になると仮定しません。
- Scene内のPrefab Instanceだけを変えた場合はOverrideが残ることがあります。Project全体へ反映したい場合は、保存するPrefab Assetの範囲、Variantの継承、個別Overrideの扱いを先に決めます。
次は旧Type検索の画面です。現在の検索UIと同じ形であることは確認していません。
元記事のFontReplacer.csは全文コード・配布元・対応版を追跡できず、Sceneだけか全Prefabか、保存・Undo・Variantの処理も確認できませんでした。次の旧ウィンドウと結果画像だけを根拠に「全プロジェクトのフォントが安全に置換できる」とは判断しません。少数選択の標準Inspectorで確認する手順と、全Assetを編集する専用ツールの設計を分けます。
9スライス：OnionRingの旧手順とAuto9Slicer
角を保って背景を伸ばす基本は、SpriteのBorderを設定してImageのImage TypeをSlicedにすることです。uGUI Visual ComponentsとImageの仕様を参照します。RawImageのTexture表示にSpriteのBorderを設定する手順ではありません。
- まずコピーした角丸背景1枚をSprite（2D and UI）でインポートします。Sprite Editorが必要な場合は対応パッケージを確認します。
- Sprite Editorで角を含むBorderを設定してApplyし、uGUI ImageのSource Imageへ入れます。Image Type=Slicedにし、RectTransformの幅と高さをそれぞれ変えます。
- 角が保たれ、中央・辺が目的どおり伸びるか確認します。Borderが角の絵を切っていないか、最小サイズでつぶれないか、Pixels Per UnitやCanvasの設定も確認します。
旧リンクOnionRingUnityは現在Auto9Slicerの作者リポジトリへ転送されます。READMEはUnity 2019.4以上、MIT、Package ManagerからのGit URLとTesterを説明しています。旧OnionRing.cs/OnionRingSampleImporter.csとIn/Outフォルダーの手順を、現在のAuto9Slicerへそのまま当てはめないでください。
以下は作者READMEと取得したAuto9SliceTester.csを読んだ導入・確認手順です。実際のUnity実行は未確認です。Testerは同じフォルダーの画像を処理し、条件に合う元ファイルとImport設定を書き換えるため、コピー素材の専用フォルダーで試します。
- 作者README記載のGit URL
https://github.com/kyubuns/Auto9Slicer.git?path=Assets/Auto9SlicerをPackage Managerで追加します。導入する版とGit利用条件を確認し、Consoleのエラーを解消します。 - 専用の検証用フォルダーへ小文字.png等のコピー画像1枚を置き、そのフォルダーでAssets/Create/Auto 9Slice/TesterからTesterを作成します。READMEのTesterが存在しない場合は旧OnionRingファイルを探すのではなく、導入版を確認します。
- 取得したTesterコードは同じフォルダー直下の小文字.png/.jpg/.jpeg、名前に.originalを含まない画像を候補にし、既存spriteBorderが0でない対象をスキップします。子フォルダーの画像や大文字.PNGも同じ条件とは仮定しません。
- Create Backupを確認してRunを押します。取得コードの初期値はtrueで、元画像名に.originalを付けたバックアップを書きますが、同名バックアップも含めて事前にコピーを残してください。処理は元画像への書込とImport設定変更を含み、SceneのUndoだけで元ファイルへ戻るとは判断しません。
- Consoleの対象名、処理した画像、Sprite Borderを確認し、Image Type=Slicedで伸縮結果を照合します。誤った境界・元画像の変更があればコピー/バージョン管理から画像とImport設定を戻し、手動BorderまたはOptionsを見直します。
次の3画像は旧OnionRingのフォルダー・結果・テスト資料です。現在のAuto9Slicerの導入、別Outフォルダーへの自動出力、現在のUnityでの成功を示す画像ではありません。
失敗時の確認と関連ガイド
| 目的・症状 | 選択・確認する機能 |
|---|---|
| 旧効果をTMPへ追加できない | Text用のメッシュ効果とTMPの描画/Font Asset/Materialを区別する。対象コンポーネントを確認する。 |
| 文字が切れる・枠が動く | Overflow・折返し・Pivot・親Layout Group・ContentSizeFitterの担当軸を確認する。 |
| 色変更が一部状態で違う | ButtonのTransition/Target Graphic、状態色とImage.colorを確認する。 |
| 置換したフォントが□になる | 文字収録、TMP Font Asset/Fallback、Material Presetと折返しを確認する。 |
| 9スライスが変わらない | SpriteとImage/Sliced、Border、対象フォルダー、既存Borderによるスキップ、拡張子、Consoleを確認する。 |
この改稿は参照先と全文の整理です。Unityでの標準Inspector操作、旧ツールのコンパイル、描画結果、TMP移行、Auto9Slicerの導入・画像加工・復元は未確認です。旧画像を現在の操作結果にせず、上の小さい確認用対象で版・条件・手順・期待結果を記録してから対象を増やしてください。
UIの前提はCanvasの描画モード・画面サイズ・アンカー、文字はuGUIのフォント設定、Scene編集や共有はEditor拡張の一般ガイドへ。画面をPNGへ残す用途はuGUI PrefabのPNG出力で対象ImageとCanvas条件を確認します。
エディタ拡張の記事は、ほかにもあります。
