uGUIのUI制作で便利なエディタ拡張をまとめました。Photoshop連携、アウトライン、カーニング、フォント置換など、実際に使って便利だったものを紹介します。
Unityから直接Photoshopを開く
UI組み込み後にPhotoshopで画像を修正することがありますが、エクスプローラーを経由するのは手間です。Unityから直接開けるようにしましょう。
設定方法
- Unityで「Editor」フォルダを作成
- 下記リンクからEditorOpenInPhotoshop.csを作成してEditorフォルダに格納
- Projectウィンドウで画像を右クリック → Open in Photoshop
参考：https://qiita.com/r-ngtm/items/18f31d728e168bcc2477
きれいなアウトラインを付ける方法
デフォルトのOutlineコンポーネントは品質が低いため、CircleOutline.csを使うときれいなアウトラインが付けられます。
負荷の比較
CircleOutlineはコピーで重ねる回数が増えるため、頂点数が2.5倍以上になります。使用箇所を限定するなど注意が必要です。
参考：https://gist.github.com/FreelyApps/e9f3f4a4d89882bcb50c
文字間隔（カーニング）を調整する方法
uGUIにはデフォルトでカーニング機能がありません。LetterSpacing.csを使うと文字間隔を調整できます。
導入方法
- LetterSpacing.csをAssetsに入れる
- テキストを作成
- Add Component → UI → Effects → Letter Spacingで追加
参考：https://forum.unity.com/threads/adjustable-character-spacing-free-script.288277/
Spacingの値を調整するだけで文字間隔が変わります。
テキストを縦書きにする方法
RotateText.csを使うとテキストを縦書きにできます。
参考：http://madgenius.hateblo.jp/entry/2017/05/11/122857
手順
- テキストを作成
- RotateTextをアタッチ
- Z方向-90度回転
※文字が縦に向かない場合はTextのチェックを外して再度チェックを入れると描画し直されます。LetterSpacing.csとの併用も可能です。
テキストボックスを文字サイズに合わせる方法
テキストボックスをテキストのサイズにぴったり合わせたい場合の方法です。
ContentSizeFitterを使用する場合
- テキストにContentSizeFitterコンポーネントをアタッチ
- Horizontal FitとVertical FitをPreferred Sizeに設定
スクリプトで自動更新する場合
コンポーネントをアタッチした瞬間にサイズが合い、文字変更時も自動更新するスクリプトもあります。
UIのワイヤーフレームを見やすくする方法
白い背景でUIパーツを調整するとき、非常に見えづらい問題があります。
Rect Toolを使う
ショートカットTキーでRect Toolに切り替えると、白い背景でもパーツのワイヤーが確認できます。サイズ調整、位置調整、回転、Alt押しながら中心からスケールなども可能です。
カラーやグラデーションを付ける「uGUI-Effect-Tool」
白黒の素材でも頂点カラーやアルファを付けることで、差分の素材を作成できます。
ダウンロード：https://github.com/WestHillApps/uGUI-Effect-Tool
ボタンの色やサイズを変更するエディタ拡張
ボタンを選択して、メニューから予め指定した色に変更できます。
RGB値を指定したい場合は255fで割ります。foreach (GameObject obj in Selection.gameObjects)で複数選択にも対応できます。
指定したパーツ名にリネームするエディタ拡張
オブジェクトを特定の命名に変更する簡易リネーマーです。
便利なコード：
Undo.RecordObject(label, "Undo Rename");– 変更を取り消し可能にGUILayout.Space(20);– ボタンの間隔を開けるGUI.color = Color.yellow;– ボタンに色を付ける
フォントをまとめて置換する方法
選択したテキストだけ置換する場合
- Hierarchyから虫眼鏡をクリックしてTypeを選択
- 「text」と検索
- 置換したいテキストを選択してInspectorのFontから置換
全部置換する場合
FontReplacer.csを使用します。
- Assets/EditorにFontReplacer.csを置く
- メニュー → Tool → Replace All Fontsからウィンドウを起動
- Fontを選んでReplace All Fontsボタンをクリック
自動で画像を9スライス化「OnionRing」
Unityに画像を入れると、自動で9スライス用の画像を生成してくれるツールです。
ダウンロード：https://github.com/kyubuns/OnionRingUnity
設定方法
- GitHubからデータをダウンロード
- OnionRing.csとOnionRingSampleImporter.csをEditorフォルダに格納
- 出力元（In）、出力先（Out）のフォルダを作成
- OnionRingSampleImporter.csのパスを変更
- Inフォルダに画像を入れるとOutフォルダに9スライス化された画像が生成
自動でスライスの設定もされるので、調整が簡単です。
まとめ
- Photoshop連携：右クリックから直接開ける
- CircleOutline：きれいなアウトライン（負荷に注意）
- LetterSpacing：文字間隔の調整
- RotateText：縦書き対応
- ContentSizeFitter：テキストボックスの自動調整
- Rect Tool（Tキー）：ワイヤーフレームの可視化
- uGUI-Effect-Tool：カラー・グラデーション追加
- FontReplacer：フォント一括置換
- OnionRing：自動9スライス化
