Unity-uGUI

【Unity】uGUIで画像の比率を維持しながらサイズを変更する方法

スケール値で画像のサイズを変えるのは好きじゃないので、 標準機能で画像の比率を維持しながらサイズを変更する方法です。 やり方 その1 Rect Tool その2 Aspect Ratio Fitter やり方 その1 Rect Tool TキーでRect Toolツールにして、Alt+Shift押しながらサ…

【Unity】uGUIでテキストを縦書きにする方法

テキストを縦書きにする方法を調べてみました。 参考 やり方 補足 参考 こちらのスクリプト(RotateText.cs)を使用しています。 UnityのuGUIで縦書きテキスト表示 - 園児ニアのメモ やり方 テキストを作成「CGメソッド」 RotateTextをアタッチ Z方向-90度回…

【Unity】unitettcでフォント(.ttc)を分割して.ttfにして使用する方法

unitettcでフォントを分割する方法です。 複数フォント格納されている.ttcフォントをUnityで使いたい時は.ttcに分割して使用します。 ※Unityは.ttcをサポートしていないので、.ttfに変換! ※プロポーショナルフォントや等幅フォントが格納されているフォント…

【Unity】フォント「Font Awesome」を使ってアイコンを表示する方法

数百個のアイコンが格納されているフォント「Font Awesome」を使ってアイコンを表示する方法です。 これを上手く使うと、アイコン探さなくてもすぐに仮素材できるのではと思い試してみました。 フォントのダウンロード Unityで表示する方法 Unicodeで表示す…

【Unity】uGUIでカラーやグラデなどの加工を付ける方法

素材は白黒でも頂点カラーやアルファを付けることで差分の素材を作成してみます。 素材 色つけ 白いボタン ピンクのボタン 青のボタン 緑のボタン まとめ 素材 ボタン用の素材を用意 色つけ 白いボタン 先程の素材を9スライスで引き伸ばしたもの。 ピンクの…

【Unity】uGUIで意図した座標にぴったり配置する方法

UIパーツのトランスフォームの値を意図した場所で、きれいな整数にしたかったので、テスト。 Unityの基本機能のみ使用。 スナップ設定 座標調整用アンカー・ピボット設定 座標調整 アンカー・ピボット設定 スナップ設定 Edit>Snap settings からスナップさ…

【Unity】psdデータからuGUIにコンバートする方法

psdデータからuGUIにコンバートするアセットはストアに幾つかあるのですが、 無料なのと、以前自動で9スライスされるOnionRingも良かったので、Baum2を試してみました。 www.cg-method.com 参考&データダウンロード 環境構築 エラーが出た場合 参考 Photosh…

【Unity】uGUIでUIのワイヤーフレームを見やすくする方法

白い背景の上でUIのパーツを微調整したときに、非常に見えづらくてやりづらかったので解決方法 というか、そもそも基本ツールのRect Toolの存在を忘れていたのでメモ 移動ツール時のUIの見栄え Rect Tool 移動ツール時のUIの見栄え 白背景で通常の移動ツール…

【Unity】uGUIでテキストボックスを文字のサイズに合わせる方法

テキストを作成した時に、テキストボックスがぴったりテキストに合わさってほしい時が個人的にあります。 その解決方法。 テキストボックスのとテキストのサイズの状態 ContentSizeFitterを使用する場合 参考 スクリプトを使用する場合① 少し調整 スクリプト…

【Unity】スプライトパッカー(SpritePacker)の作成方法

前回、Unity2017のスプライトアトラスのやり方を書きましたが 【Unity】スプライトアトラス(Sprite Atlas)の作成方法 - CGメソッド Unity 5系のスプライトパッカーの作成方法も調べてみました。 SpritePackerの有効 Packing Tagを入れる パックする 再生し…

【Unity】uGUIでビットマップフォントを表示する方法

uGUIの通常のテキストは、アウトラインやドロップシャドウはつけられるものの、装飾としてはまだまだ足りない物があります。 ですので、Photoshopなどで装飾した文字画像をフォントとして表現できるビットマップフォントを作成してみました。 素材の作成 Sho…

【Unity】uGUIでフォントをまとめて置換する方法

選択したテキストだけ置換する場合 やり方 全部置換する場合 やり方 参考 選択したテキストだけ置換する場合 デフォルトの機能を使います。 ちなみにこれだけでも全置換も可能 やり方 Hierarchyから虫眼鏡をクリックして、Typeを選択 textと検索 置換したい…

【Unity】uGUIでタイリング(Tiled)する方法

タイリングのやり方、ど忘れしてしまったのでメモ。 タイリング用の画像の作成方法 Unityでの設定 タイリング用の画像の作成方法 繰り返したい所は3マス分確保して画像を作成 Unityでの設定 Spriteで編集で、中心から1個半位をスライス Imageを作成して、ス…

【Unity】uGUIで文字間隔(カーニング)調整する方法

NGUIではできたカーニング。 uGUIではデフォルトでいまだになさそうなので 調べて、文字間隔(カーニング)調整するスクリプトを見つけました。 導入方法 調整方法 参考 導入方法 下記のLetterSpacing.csをAssetsにいれる テキストを作成 Add Component > UI…

【Unity】uGUIできれいなアウトラインを付ける方法

アウトラインの比較 負荷の比較 参考記事 uGUIで文字に縁をつけてみたのですが、デフォルトのOutlineコンポーネントはきたない! ということがわかったので、きれいにする方法を探してみました。 アウトラインの比較 負荷の比較 参考記事 アウトラインの比較…

【Unity】スプライトをシェーダーで明るくしたり暗くしたりする方法

昔使っていたスプライトをシェーダーで明るくしたり暗くしたりするシェーダー。 そもそも中身を知らないまま使っていたので、調べてみました。 シェーダーのダウンロード シェーダーのカスタマイズ シェーダー名の変更 一箇所コードの追加 まとめ 画像の表示…

【Unity】画像を繰り返してマスクで区切る方法

某ゲームの影に斜線が入っているUIを見て、真似してみました。 描画付加的に良くないですが、タイリングしてマスクで区切るシェダーを作成して、UIの下にずらして敷いています。 テクスチャをリピートしてマスクで区切る方法 ボーダーのテクスチャ作成 シェ…

【Unity】スプライトアトラス(Sprite Atlas)の作成方法

Unity2017をインストールしたので、Sprite Atlasを試してみました。 感想としては、すごく簡単でわかりやすいです! SpriteAtlasの特徴 SpriteAtlasの設定 SpriteAtlasの作り方 参考 SpriteAtlasの特徴 パッキングするので、再生時、描画回数(Batchse)が減…

【Unity】自動で画像を9スライス化「OnionRing」の紹介

Unityに画像を入れると、自動で9スライス用の画像を生成してくれる「OnionRing」を試してみました。 9スライスとは サンプルデータのダウンロード 導入方法 テスト 9スライスとは スプライトの途中を繰り返して伸ばす機能です。 詳細はこちらの記事がわかり…

【Unity】これだけ覚えればプロトタイピングができる!シーン遷移のやり方

Unityの基本操作とシーン遷移のやり方とビルド方法がわかれば、 画像置いて、遷移範囲きめて、遷移先指定してと、プロトタイピングできます。 Unityはじめて触る人でも、少ない学習コストでできるようになります。 そのシーン遷移のやり方について。 シーン…

【Unity】 uGUI(Screen Space - Overlay)の前にparticleを表示させる方法

uGUI(Screen Space - Overlay)のcanvasのSort Orderの値で、復数のcanvas(ugui)の描画順を調整することはできますが、 Screen Space - Overlay の場合はUIが必ず最前面に来るため、パーティクルを前に表示することはできません。 実用性はないのですが、レン…

【Unity】シーンロードで複数画面切り替える方法

SceneManager.LoadSceneを使って、デザイナーでもできそうな簡単な画面遷移を作成していました。 ちなみによく本に載っているApplication.LoadLevelはUnity 5.3 から非推奨になりました。 で、作っている間に、より良いものを見つけてしまったのでそこまでに…

【Unity】 Canvas Scalerで比率の違う端末解像度に対応する方法

触ってみないとちゃんと理解できないなということで、Canvas Scalerで比率の違う解像度に対応をやってみました。

【Unity】uGUIでコードを書かずに画面遷移する方法

uGUIでコードを書かずに画面遷移する方法。 やり方 UIパーツの作成 アニメーションの作成 メカニムでのUIの遷移設定 ボタンを押すとアニメーションする設定 感想 参考 やり方 UIパーツの作成 ボタンの作成 GameObject>UI>Button 平面の作成 GameObject>UI>In…

【Unity】uGUI クロスフェードトランジション

カメラを2つ使ったクロスフェードトランジション。uGUIを適当にいじって見つけたものとネットで調べたもの2つ紹介。

【Unity】uGUIの基本要素とカンバスについて

uGUIの事を知らなすぎなのでちょっとずつ 勉強します。

【Unity】古い本に載っているGUITextではなく、uGUIのTextで表示する方法

GUITextではなくuGUIのTextで表示する方法。