テラシュールブログ

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

GUI(uGUI/NGUI/旧UI)

【Unity】逆引き自動レイアウトのトレーニング。UIをLayoutGroupで並べる

今回は自動レイアウトの動作を把握するために、色々とトレーニングしてみました。 自動レイアウトでUIを並べる UIのサイズが固定、もしくは親に合わせて子のサイズが変動する場合は、簡単 Imageを並べる(左から詰める) Imageを並べる(等間隔) 高さにフィ…

【Unity】uGUIの自動レイアウトが分かりにくいと評判なので解説してみる

uGUIには自動レイアウトなシステムが積まれています。ただ、このシステム便利ではあるんですが色々と複雑なので、少し補足です。 UIの大きさを動的にフィットさせる、オートレイアウト UIの大きさはLayoutElementで決まる Minは最低限サイズ、Preferredは変…

【Unity】「Unity5.6のわりと地雷なバグ」についての補足

下で紹介された内容は、どちらも解決したみたいです。*1 madnesslabo.net 先日リリースされた「Unity 5.6」について、幾つか地雷なバグがあるそうなので見てみましたが、内容が少し気になったので調べてみました。 AddComponentでImageを足した際に、OnDisab…

【Unity】公式の「テキストベースなアドベンチャーゲーム」を作るチュートリアル

先日、ついにUnity公式のテキストベースなアドベンチャーゲームのチュートリアルがチュートリアルムービー一覧に追加されました。 「テキストベース」なアドベンチャーゲーム テキストベースなアドベンチャーと言えば、現状日本製のモバイル・コンソール(AA…

【Unity】知らないと面倒くさい事になるかもしれないAnimatorの「Write Defaults」の動作について

今回はWrite Defaultsについて。 この挙動は少し分かりにくいので、少し補足します。 Write Defaultsという項目 キーが未定義なアニメーションは起動時のパラメータをデフォルト値として使う Write Defaultsという項目 注意点 デフォルト値が保持されるケー…

【Unity】uGUIのWorld Spaceを楽に配置したい

uGUIのWorld Spaceを楽に配置したい場合によく使ってるTipsです。 World SpaceのUI Word SpaceとUI解像度 個人的によくやっている方法 関連 World SpaceのUI CanvasはScreenSpace-Overlay(常に画面最前面)やScreenSpace-Camera(指定のカメラに映るように…

【Unity】uGUIのImageとSprite Rendererの使い分け

今回はuGUIのImageとSprite Rendererの使い分けについてメモします。 ImageとSprite Renderer Sprite Rendererの振る舞い uGUI Imageの振る舞い 最適化に関するアプローチの違い SetPassの削減に関する振る舞いの比較 フィルレート・オーバードロー削減に関…

【Unity】VR向け?のリストビュー List View Framework

少し面白いアセットを見かけたのでメモ。 VR向けなList View Framework リストビュー、しかしuGUIでは無い 要素は使い回すタイプ 使い方はまた今度 関連 VR向けなList View Framework List View Frameworkは、リストビューを構築するのに便利なアセットです…

【Unity】uGUIのコードを編集して動作を改変する

今回はUnityの標準UIシステムであるuGUIの改造方法についてです。 uGUIのコンポーネントを改造する バックアップ uGUIのプロジェクトを取得 プロジェクトの設定 更新されたか確認する デバッグする 注意事項 関連 uGUIのコンポーネントを改造する uGUIの各コ…

Windows 10で動かすUnityエディタで、ゲーム内のUIに四角い穴が表示される問題について

Unityで色々と操作をしていた際、なんだかUIやGizmoに穴が空いたような感じになってしまいました。ゲームをプレイする等により復帰しますが、まぁ、なんというか気持ちが悪いです。 Windows 10の問題かもしれない 相談したところ、Streamにて同様の報告が上…

【Unity】「モダンなUIの提案と実装」

先日行われた「Unity道場05 モダンなUIの提案と実装」にて配布されたスライドが公開されていました。 スライド 要するに大雑把な内容 イベントのレポート 関連 スライド 前後半に分かれ、前半はUIについての進化、後半は実装したサンプルの例です。 spea…

【Unity】画面外のターゲットを追跡するカーソル

今回は画面外に移動したプレイヤーを追跡するカーソルを作ってみます。 画面外と画面内の判定 アイコンにキャラクターを追跡させる 追跡するアイコンにターゲットを映す 関連 画面外と画面内の判定 まず、キャラクターが画面外に移動した際の判定を行います…

【Unity】UIで表現するテキストを1文字ずつ”動かす”

今回はUnityのUIのテキストを動かしてみます。 テキストを動かす テキストを動かす テキストを揺らす テキストの大きさを変える テキストを動かすの基本 テキストを動かす UnityのUIシステムであるuGUIですが、実はテキストを表現するためのポリゴン…頂点を…

【Unity】リングコマンド的にUIを円形に配置する

今回はUIを円形に配置する方法について紹介します。 UI要素を円形に並べる 色々と試作してみる この「回転するUIの名前」 関連 UI要素を円形に並べる せっかくなので、ILayoutGroupを使用して円形に配置するレイアウトグループを作ってみます。ILayoutGroup…

【Unity】ノベルゲームの立ち絵表現で、キャラクターの表情だけ切り替えて、メモリとロード時間を節約する

ついにユニティちゃんの立ち絵素材が公開されましたよ。超可愛いユニティちゃんとユーコちゃん*1、あとミサキちゃんの立ち絵が使えるようになった!ヤッタネ☆ さらに嬉しい事に解像度は1620×2048と非常に高解像度で、キャラクター全体像をのイメージが使用さ…

【Unity】テキストをぴょんぴょんさせたりフェードしながら表示する、Typeface Animator

文字を表示する際、テキストを一括で表示させるのではなく、アニメーションさせながら・フェードしながら表現したいといった希望がある事があります。 今回はその辺りをやってくれるアセットの紹介です。*1 Typeface Animator とは 割と簡単に使える 関連 Ty…

【Unity】高解像度のゲーム画面向けにゲームビューを調整する

Unity 5.4(現在ベータ中)の機能の一つに、ゲーム画面のズーム機能が追加されました。GameViewのScaleを調整することで、ゲーム画面をズームする事が出来ます。 このズームですが、実は解像度を直接指定することでゲームビュー以上の解像度を指定することが…

【Unity】【uGUI】Screenの座標とWorld(3D)座標の変換について

HUDのように、UIをキャラクターの上に表示する方法について、少し悩んだのでメモします。 World SpaceとScreen Spaceについて World座標をUIの座標へ変換する World Space を Screen Space Overlayへ World Space を Screen Space Cameraへ World SpaceをWor…

【Unity】Googleのマテリアルデザインっぽい表現をuGUIで作るMaterialUI

マテリアルデザインをUnityで再現するMaterialUIについてです。上のGif画像のような感じの操作を再現する事が出来ます。 MateialUI マテリアルデザインとは何ぞや? 関連 MateialUI MaterialUIはマテリアルデザインをUnityのUIで楽に使うためのアセットです…

【Unity】3D空間にUIをメッシュのように表示する

uGUIを使用して3D空間上にUIを使用するアプローチとその注意点についてです。 3D空間にUIを配置 間接光の影響を受けられない 描画順 感想 関連 3D空間にUIを配置 CanvasのRender modeをWorld Spaceに変更すると、UIをワールドスペースつまり3D空間上に配置す…

【Unity】UIに立体的に見せるライティングを付ける

要するにuGUIにノーマルマップを適応してみた所、少し面白い感じになったので紹介します。ドット絵のようなものは、もう少しマトモなノーマルマップを適応するともう少し綺麗になるかも。 ノーマルマップ 3Dモデルでモデルを立体に見せる手法の一つにノーマ…

【Unity】uGUIのボタンクリック後のハイライトを消す

UnityのuGUIでボタンを作った時、クリック後にハイライトが消えない事があります。この場合、例えば下のような感じで動きます。対象をクリック後、明らかにハイライトが残っているのが分かります。 このハイライトが残っているのは、単純にUIがゲームパット…

【Unity】uGUIでスプライトアニメーションするには

uGUIでスプライトアニメーションを行う方法についてです。難しい事は全くないのですが、気づかないと分からないかもしれないので、一応ここに書いておきます。 下のGIFはキャラクターアニメーションをuGUIで行って居るので影付けたりアウトライン付けたり、…

【Unity】5.3に追加されたマルチ・シーン・エディティングで出来る事

今回はマルチシーンエディティングについてです。 マルチシーンエディティング ステージやギミック毎にシーンを分割して同時編集 ステージを複数のシーンに分割して編集・平行構築 シーン毎にUIを作成して加算読込とか管理 本番シーンに機能を移植 マルチシ…

【Unity】uGUIドロップダウンメニュー(コンボボックス)の使い方

ドロップダウンについてです。 ドロップダウン(或いはコンボボックス)とは、よくある「ボタンを押したら選択肢が出てきて、その中から選択する」的なアレです。 目次 目次 とりあえずの使い方 カスタマイズ 要素を増やす UIの表示を変える 関連 とりあえず…

【Unity】パフォーマンスが良いらしいUIのマスク、RectMask2Dについて

Maskと異なり四角形でしか切り抜けませんが、Maskよりかなり高速に動作するRectMask2Dが何時ごろか追加されました。 このRectMask2DはRectTransformの範囲で切り抜きを行うためMaskで必要だった「画像」を必要としませんが、その代わり高速で動作するみたい…

【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を使…