テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

GUI(uGUI/NGUI/旧UI)

【Unity】Unityでトランジションを使用した綺麗な場面転換(uGUI対応版)

以前に紹介した「場面転換」をよりスムーズな感じで行う処理ですが、uGUIに対応させるついでにUI単位で削除出来るようにしました。 UnityでuGUIのトランジション。パターンはマスク画像(白黒画像)を使用。トランジションするUIの下にあるUIも一緒に消える …

【Unity】uGUIのテキストがボケる問題の対策について

Unityの新しいUIシステム、通称uGUIでフォントがボケる問題についてです。 以前に UnityのuGUIのテキスト表示機能について解説してみる で解説していますが、もう少し詳しく紹介します。 目次 目次 uGUIでフォントがボケる問題の対策 ScreenSpaceの場合 Worl…

【Unity】uGUIのシェーダーを改造してシェーダーを練習…のススメ

目次 目次 シェーダーの用意 シェーダーのカスタマイズの準備 シェーダーの改造(色を変える) パラメータをシェーダーの外から設定する その他 関連 シェーダーの用意 まずはuGUI用のシェーダーを用意します。 UnityのビルトインシェーダーはUnityのダウン…

【Unity】各要素の高さが変動するスクロールビューを使ってチャットっぽい何かを作る

「高さの要素が異なる&テキストにある程度のマージンがあるリストビュー」を作る方法について紹介します。 リストビューを作る方法については、下の記事参照。 tsubakit1.hateblo.jp 作り方 こんな感じのスクロールビューを作ります。 各要素の高さに合わせ…

【Unity】モデルより奥にあるスプライトやUIをモデルより手前に表示させる

モデルよりUIやスプライトの方を手前に配置したい時があります。例えば、ダメージエフェクトであったり、その他諸々であったり。 これを実現するもっともシンプルな方法は、カメラをもう一台用意して追記する事です。Layerを分ける必要が出ますが、後から追…

【Unity】ArborとuGUIの連携について

【Unity】期間限定で無料になったビジュアルスクリプティングのアセット「Arbor」で遊んでみた - テラシュールブログtsubakit1.hateblo.jp 先日紹介したビジュアルFSMアセットのArborですが、今回はuGUIと連携してみました。 uGUIとの連携のキモとなるのはUn…

【Unity】とりあえずメニューを作るサンプルにはなる、Game Jam Menu Template

店主!とりあえずメニューくれ! みたいな事はやったことが無いのですが(居酒屋とか怖すぎる)、とりあえずメニューが欲しくなる事があります。具体的にはゲームジャムとか。 それを作る手間は正直それ程では無いのですが、あると何かと参考になるかなーと…

エディター操作で登録するのが面倒なボタンのクリックイベントを、スクリプトで登録する

Unityのボタン等のイベントをシーン内に登録/保持するには、UnityEditor.EventsのUnityEventToolsを使用します。 エディタ上でメソッドを登録するメリットは3つです。 実行時にイベントの登録処理を必要としない EventListenerの引数とマッチしないメソッド…

UnityのuGUIでボタンと一緒に後ろのオブジェクトが押されないようにする

UnityのuGUIのボタンを押した際、背面にあるオブジェクトも一緒に押されるケースの対策について紹介します。 これを回避するには、EventSystems.EventSystem.IsPointerOverGameObjectでボタンを選択中か判定し、選択中なら押さない事にする…といった形で修正…

シーンビューのオブジェクトをタップしても選択できない

最近シーンビューのオブジェクトを選択しようとした際、何故か上手く選択できないケースが発生しました。 これはどうやらCanvasを選択してしまっている為に発生していました。Hierarchyビューをよく見ると、ボールを選択したつもりがCanvasがアクティブにな…

Unityの2DやuGUIのパフォーマンス最適化についての7つのTips

最適化というか、改善する話です。 モバイル向けに作った時に妙に遅かった場合、この辺りの要因が絡んでいるケースが多い印象です。この辺りは作る際に確認しながら作ると、後々痛みが少なくて良いかなと思います。 目次 目次 プロファイラで確認する エディ…

iOSアプリだと思った?残念、uGUIちゃんでした!

iOSのUIを真似る事は昔からよくありました。例えば何故かiOSのヘッダーやフッダーを真似て作成されているWebサイトや(iphoneのsafariで見ると二重にヘッダーが表示される)、AndroidなのにiOSそっくりなUIを持ったアプリ等々。 確かに「UIの統一感」は一昔前…

UnityのuGUIとImageとSpriteとスライスについて

uGUIのスライスは覚えておくと便利な機能です。 今回はコレを作ろうと思いましたが、スライス部分が予想以上に色々と出来たので分割します。コレの作り方は次回。 目次 目次 スライスする方法 大きさを調整する 真ん中を塗りつぶさないでフィルレートを節約…

UnityのuGUIでコンボボックス(或いはドロップダウンリスト)を作る

UnityのuGUIには現状コンボボックスが無いです。それは作ろうと思えば作れますが、正直面倒なのでコミュニティのナレッジより拝借します。 A working, stylable combo box (drop down list) | Unity Community A working, stylable combo box (drop down lis…

UnityのuGUIでアナウンス的な表現を作ってみる

以前にもチラっと紹介しましたが、改めてuGUIでのアナウンス表示の作成について紹介しておきます。 内容はこんな感じです。 逆引き、UnityのuGUIのレイアウトトレーニング(uGUI RectTransform入門その2) - テラシュールブログ 逆引き、UnityのuGUIのレイ…

UnityのuGUIで複数のスクロールビューを切り替える演出の作り方

FacebookのUnity助け合い所で質問があったので、ちょっと書いておきます。(件の問題は解決済み) とりあえず、こんな感じのを作ります。今回はボタンで制御しますが、画面端からのスワイプやスクロールバー自体のスワイプといったギミックで差替えても良い…

UnityのuGUIで「UIのアニメーション制御」

目次 目次 UnityのuGUIで「UIのアニメーション制御」 uGUIでアニメーション アニメーションの作成手順 画面の準備 AnimatorとAnimationClip作成 キーフレームの登録 AnimationControllerの設定 AnimationControllerをスクリプトで制御する 感想 ライセンス …

UnityのuGUIで階層構造を持ったスクロールビューを作る

目次 目次 階層構造を持ったスクロールビュー ソースコード 使い方 感想 階層構造を持ったスクロールビュー 今回はスクロールビュー(横)の中にスクロールビュー(縦)があるような構造のスクロールビューを作成します。 uGUIは子がScrollRectを持っている…

Unity uGUIでスライダーについて解説してみる

uGUIのスライダーについて解説します。 目次 目次 スライダーの作り方 スライダーの範囲調整 画像の調整 挙動の調整 スライダーの作り方 スライダーを作るにはCreate>UI>Sliderを選択します。 スライダーの範囲調整 スライダーは合計6個のオブジェクトで構成…

逆引き、UnityのuGUIのレイアウトトレーニング(uGUI RectTransform入門その2)

RectTransformの座標指定についてです。 内容は以前に書いた入門の焼き直し+αです。理屈については大体書いてるので、そっちを参考にしてくれると助かります。 UnityのuGUIのレイアウト調整機能について解説してみる(RectTransform入門) - テラシュールブ…

UnityのGameObjectを非アクティブにするとAnimatorがリセットされる挙動、その対処法

マニュアルに書いてあったか記憶が微妙なのですが、UnityのAnimatorはGameObjectが非アクティブになるとリセットされます。 ここで言うリセットとはアニメーションが最初に戻るだけ等の生易しい物ではなく、パラメータの持つ値やトリガー状況、アニメーショ…

UnityのAnimatorControllerにAnimationClipを内蔵する

ことUIにAnimatorを使う場合、ほとんど使いまわす事ができずプレハブもしくはシーンに従う形でAnimationControllerが 作られ、AnimationControllerが参照するAnimationClipは参照という形を取りながら完全に専用アニメーションとして扱われ ます。 そのためA…

UnityのCollider2DやColliderに対してクリックやドラッグのイベントを使う

Unity4.6よりUnityにはEventSystemが追加されました。これは例えばドラッグやクリックといった基本的な挙動を登録することが出来ます。 例えばダブルクリックを検知するコード。 // ダブルクリックを検知する これをColliderがアタッチされているオブジェク…

UnityのuGUIのクリック範囲を広げたり制限したりする方法

Unityのボタンは画像の範囲でクリック判定を行います。 この範囲は基本的にGraphicクラスが表示されている範囲に適応されます。要するに「画像が表現されている範囲(の四角)」に適応されます。 この当たり判定の範囲を絞るには、ICanvasRaycastFilterを使…

UnityのuGUIで無限にスクロール出来るスクロールビューを作る

使い方 アイテムの内容調整 制限付きスクロールビューのやり方 以前UnityのuGUIでスクロールビューを作る方法を紹介しました。 UnityのuGUIでスクロールビューを作る - テラシュールブログ UnityのuGUIでスクロールビューを作る - テラシュールブログ 今度は…

フォントに含まれない文字を使うときの動作

UnityはテキストのフォントとしてArialやその他ttfフォーマットのフォントを使用して文字を表現します。しかし、この手のフォントには全てのフォントは含まれていません。 そんなときの挙動として、Unityはフォールバックしてデバイスに含まれるフォント(所…

UnityのuGUIのテキスト表示機能について解説してみる

UnityのuGUIでテキスト表示の扱いについて解説します。 目次 目次 Textの機能 文字のエフェクト 自動改行と禁則処理 フォントサイズと描画範囲 フォントがぼやける問題(uGUIの場合) Textの機能 TextはuGUIでテキストを表示する機能です。 作成するには、以…

Unityの新GUI、UGUIのイベント制御について

Unityの新GUIシステム、(通称)UGUIのイベント制御について紹介します。 エディタのGUI上での設定 ソースコードでの操作 エディタ操作をスクリプトで設定 参考 関連 エディタのGUI上での設定 UGUIのボタンのコールバックは、AnimationEventのようにオブジェ…

UnityのuGUIのレイアウト調整機能について解説してみる(RectTransform入門)

uGUIのレイアウトシステムの調整機能…の基礎であるRectTransformの調整についてについて解説します。今回はGUIで触れる範囲。 目次 目次 Pivot(中心点)の設定 Pivotを動かす Pivotの挙動 Anchorの設定 アンカーとUIのサイズ 画面サイズ(親サイズ)とアン…

UnityのuGUIでスクロールビューを作る

Unity4.6で追加したuGUIでスクロールバーを作る方法について紹介します。 大体こんな感じのスクロールバーを作ります。 作り方 まず、リストに表示するノードのプレハブを用意していきます。 適当な横長のImageを用意します。名前はNodeとします。 左の方に…