Unite2015 uGUIの拡張と応用

COPYRIGHT 2014 @ UNITY TECHNOLOGIES
UNITE2015
UGUIの応用と拡張
2015/4/14
マッドネスラボ時村良平

ゲームプログラマ10年生くらい
アークシステムワークスとかチュンソフトで働いてました
最近独立して個人開発してます
Twitterアカウント @rodostw
自己紹介

AssetStoreでビジュアルノベルツール「宴」を販売中
公式サイト http://madnesslabo.net/utage/
自己紹介

uGUI本「UnityゲームUI実践ガイド」を執筆
紹介サイト http://uiunity.com/
自己紹介

今回はこの二つの経験をもとに、uGUIの一歩進んだ拡張
方法をご紹介します！
今回の内容

注
ただし、ちゃんとUnityに仕様を確認したわけじゃないの
で、使用にあたっては自己責任で。
ぶっちゃけ「理屈はわからん！」「動きゃいいんだよ」
な面もありますが、そのぶん踏み込んだ内容になってい
ます。
今回の内容

• 拡張の基本
～EventTrigger、インターフェース、 UnityEvent ～
• uGUIの拡張
• 頂点をいじってみよう
• UIの位置とかを自動で設定する
• この先キケン！絵文字やルビ対応Textの作り方
目次

拡張の基本
EventTrigger 、インターフェース、 UnityEvent

「公式のButtonじゃできないことがやりたい！」
そんなときは、UIコンポーネントを自作することになると思
います。
拡張の基本

基本は、この本にも書いてますが、一応ざっとおさらい
拡張の基本

拡張しなくてもEvent Triggerでなんとかなる場合が多い
拡張の基本
指定したイベントの
タイミングで、
設定したメソッドや
プロパティを呼び出
すことができる

独自拡張する場合は、UI用のインターフェースを使うと
専用コンポーネントが作りやすい
拡張の基本
クリックしたときのイベントなら、
IPoineterClickHandlerを使う

イベント用のインターフェース一覧は英語リファレンス
UnityEngine.EventSystems
/Interface
ここをチェック
拡張の基本

OnClickみたいに呼び出すプ
ログラムを自由に設定でき
るようにするには？
拡張の基本
こんな感じに
呼び出すプログラムを
設定できるコンポーネントを
作りたい

UnityEventを使えば、独自に作れる
拡張の基本

UnityEventを継承したクラスを作れば、独自の引数を設定
することも可能。
拡張の基本

ここまで本の内容と同じ
（詳しくは読んでみてください）
拡張の基本

本の補足。
OnClickなど、UnityEventで作られているイベン
トに、スクリプトからAddListenerを使って呼び
出すメソッドを登録するときに
拡張の基本
登録できる引数は決まってい
るが、ラムダ式を使えば、好
きな引数つきでAddできる。
ただしRemoveしない前提。

UGUIの拡張
その１

頂点を
いじってみよう
UIの頂点を加工するのはとっても簡単？

標準のEffect系コンポーネントみたいなものを作る
頂点をいじってみよう

Outlineコンポーネント
テキストやスプライトにアウトライン（外枠）を表示さ
せるために使う。

ソースを読もう！
uGUIのソースコードは公開されている。
https://bitbucket.org/Unity-Technologies/ui
その中のUI / UnityEngine.UI / UI / Core / VertexModifiers
には、頂点を操作するコンポーネントが載っている。
「Bitbucket Unity UI」
でぐぐるとたぶん出てくる

ソースを読むと
縦横にズラした影を
4つ配置するだけ

縦横にズラした影を4つ配置しているだけなので、極端に
大きい距離をとるとハッキリわかる

この手法は
太いアウトラインを
取ろうとすると
すぐ破綻する

Outlineコンポーネント
を継承して、頂点操作
部分をoverrideする
影を4つに限らず、いく
つも円状に配置するよ
うにする。

デフォルト改造版

コピーする値を増やせば、太いアウトラインでも大丈夫

• そもそもOutlineクラス
の構造は？
• BaseVertexEffectクラ
スが重要
BaseVetexBuffer • 頂点をカスタムする
Shadow
• 頂点を丸ごとコピー
• ちょっとだけズラして表示する
OutLine
•4方向にShadow処
理をする

uGUIのソースはお手本にもなる
目を通してみると色々と発見が
ただし、ソース内部が変更され
たり、リスクもあるので注意

BaseVertexEffectを継承したクラスを作り、
public abstract void ModifyVertices(List<UIVertex> verts);
内に、頂点を操作するロジックを記述すれば、UIの頂点をいじれる。
影やアウトラインをつける以外にも
UIVertex内のUV座標をいじってUVスクロールさせたり、
頂点座標をいじってゆがませたり、
色々とできる。

さらに深くみるとポイントは
IVertexModifier らしい
uGUIは、基本設計として
「拡張用のインターフェースをもつコンポーネントを作る」
ことで、拡張しやすいようになっているらしい

UGUIの拡張
その２

･･･の前に

UGUIの応用

UIの位置とかサイズを
自動で設定する
とてもよくわからない
AutoLayoutのお話

基本機能だけで
リストビューの作ってみる

基本コンポーネントだけで
リストビューを作ってみる
にはどうすればいいか？
リストビューの作り方

ヒエラルキーはこんな構造

まず、リストビューの外枠部分

リストビューの外枠部分

Contentは
スクロールで動く部分

枠（背景）の表示はImage
コンポーネントで

Maskコンポーネントを併用
して範囲外を非表示に

ここまでは
使い方を知ってるかどうか
だけの問題なので、
難しくはない

次に、
アイテムの数が
増えたり減ったりする部分

分かりすいように
マスクを解除して赤枠表示
まず、アイテムは
縦や横に自動的に並べたい

スクロールの範囲が決まるので、大きさが重要
アイテムが全て収まるような大きさにしたい

つまり、
アイテムが増えたら
Contentの
サイズを
大きくする
必要がある

・子オブジェクトを縦や横に自動で整列させる
・子オブジェクトを並べる範囲の大きさに、自
分のサイズを自動で設定する
ということが必要になる。

さて、
そんな機能あったかな？

uGUIには「AutoLayout」
という、UIを自動的にレ
イアウトするための仕組
みがある。
UIの位置とかサイズを自動で設定する

縦に並べるなら、
VerticalLayoutGroup
というのが使えそう

VerticalLayoutGroupを
使ってみる

…orz
数が少ないと、
勝手にボタンの
大きさが伸びて
数が大いと、
勝手にボタンの
大きさが縮む

どうもVertical Layout Groupは、
「一定範囲の中に納まるように、子オブジェクトの大きさを
変えて縦に並べる」という機能らしい。
Windowsのタスクバーでいう
「ウィンドウを上下に並べて表示」
に近い

子オブジェクトの大きさ
変えてほしくないよ･･･
もっと
ひどくなった･･･
子を強制的に伸ばす？
こいつか原因？
チェックはずしてみる

わけがわからないよ・・・

そもそも、Auto Layoutとはなんなのか？

Auto Layout とは
対象オブジェクトのLayout Propertiesを元に
各コンポーネントごとの計算によって
自動的にUIの位置やサイズを設定する機能

Layout Propertiesってなに？

実はインスペクターの
下部表示はこんな感じ
に切り替えられる
Layout Properties
をチェック
Layout Propertiesの中
身が表示される

最小サイズ
基本的に参照するサイズ
あまり部分の
重み付けみたいなもの

uGUIのAuto Layoutは
この値をもとに、
位置やサイズを計算する。
通常のwidthやheightは大抵
無視されてしまう
ポイント

「いくつかの値が
Vertical LayoutGroupによっ
て決められている」
と書いてある
自動設定された
値はグレーアウトして、
手動設定できなくなる

各子オブジェクトの
Layout Properties を参照
Vertical LayoutGroup 子オブジェクト
①
①を元に、位置やサイズを
計算して設定
②

じゃあ実際どうすりゃいいの？

子オブジェクトの大きさが
小さいのは････
チェックはずした場合

子オブジェクトの大きさが
小さいのは････
Layout Propertiesが10とか
なってるから
高さが10くらいしかない

なんで10しかないのか？
Slice設定のイメージだと
最小の大きさが
Preferredのサイズになるらしい
5
+
5
↓
10

Sliceじゃない
Simple設定のImageなら
Spriteのサイズそのまま
Preferredのサイズになるらしい

ボタンにSliceを使わずに
リストビューを作れと？

流石にそれは無理なので
ちゃんと手段があります

Layout Propertiesを
デフォルトの値ではなく、
独自に設定すればいい

Layout Elementコンポーネントを
使うと、Layout Propertiesの値を
上書きできる
「Layout Elementによって
値が決まっている」とわかる

子オブジェクトのサイズ設定は
Layout ElementをAddして設定
ちゃんと表示されるように
なった･･････

めでたし
めでたし
・・・？

あれ･･････
Content（赤枠）の
サイズ設定どうしよう

Vertical Layoutを使っても、
自分自身（Content）の大きさは
自動設定されない･･・
グレーアウトしてない
つまり、手動設定が必要･･･？

自分自身のサイズを
いい感じに自動設定してくれる
コンポーネントがほしい

あります

「Content Size Fitter」
これを使うと、
自分自身のLayout Propertiesで
サイズが自動設定される

しかも、Vertical Layout Groupは
子オブジェクトを囲む大きさで、
Layout Propertiesの値が
すでに設定されている！

なので、
Content Size FitterをAddして、
Preferred SizeにするだけでOK

これで、
子オブジェクトの
数をいくら増やしても
自動的に縦ならびに配置
Contentのサイズも自動で
変更されるようになる

まとめ

Height要素のみの設定
Widthも同じ要領で調整可能

「とてもよくわからない」
AutoLayoutのお話
でした。

「WidthやHeightは無視されて
Layout Properties が参照される」
というのがポイントです

･･････正直難しいですよね･･･
なんで、素直にWidthやHeight
を元にレイアウトされないのか･･･

もっと簡単に使えるのがほしいので･･･

UIの位置とかサイズを
自動で設定する
とてもよくわからない
AutoLayout のをお話を使わなくてすむように、
使いやすいコンポーネントを
自作する話

グレーアウトしてるこれを自作する

普通にUpdateとかで位置設定してもいいんだけど、
このグレーアウト機能を使うメリットもある。
グレーアウトの部分は変更されてもシーンファイルが更新されない。
無駄にシーンファイルが変わらないので
「ちょっとシーン開いただけで、シーンファイルが変更される」
という事態を避けられる。（NGUIとかで経験ありません？）

色々作ってみた

リストビューのために、
素直にこれだけやるコンポーネントを作ってみた
・子オブジェクトを縦や横に自動で整列
・子オブジェクトを並べる範囲の大きさに、
自分のサイズを自動で設定

LayoutPropertiesも、
ContentSizFitterもいらない。
ボタンのサイズも変更しない
し、その大きさで並べる

子オブジェクトのサイズは変わ
らない。
位置とアンカーだけ自動設定。

さらに、せっかくなので、スケールエフェクトつきので
並べるのとか作ってみた

工夫次第で独自の自動設定を
することが出来て便利！
たとえば、自作のレターボッ
クスコンポーネントと連動す
るCanvasScalerとかも作れる

ポイント
自動設定するRectTransformのパラメー
ターの種類を、
DrivenRectTransformTrackerというのを
使って設定する必要がある。
詳細はuguiのソースを読もう。
UnityEngine.UI / UI / Core / Layout /
詳しくは公開されているソースを読む

UGUIの拡張
その３

絵文字やルビ対応
TEXTの作り方

• 去年のUnite2014
開発中のuGUIについてのセッション
講演の後で聞いてみた
絵文字やルビ対応TEXTの作り方

Q
「テキストを日本語表示用に拡張する必要があるんだけ
ど、それってできる？」
A
「できるよ。そういうの、もうやってるところあるし」

マジかよ uGUI最高だな

やってみた

できはする
できはするが、凄く･･････大変･･････でした

この先キケン！

• BaseVertexBufferで･･････？
• どの頂点が、どの文字の情報かとかわからない
• 文字数で予測しようとしても、表示されない頂点もあ
るっぽい（リッチテキストのタグ＜size＞とかの文
字？）
• ルビとかのテキスト本文にない文字を描くには？

そもそも絵文字とかルビとかするには
オリジナルのタグが必要
Unityはリッチテキストの解析はどうやってるんだろう？
ルビとかはともかく、普通にリッチテキストタグつきのテキ
ストを文字送り表示しようとすると大変な気が？

Textクラスのソース
は公開されている

TextGenerator！
リッチテキストの解
析とか、自動改行と
か配置とか頂点作成
とか全部やってるっ
ぽい？

TextGeneratorを拡張できれば
あっさりいく？

ソースは非公開･･････
しかもsealedクラス
継承してoverrideできない

あきらめてはいけない

自力で全部プログラムすれば
いい！
sizeとかのデフォルトのタグ
も解析・実装しなおしになる
ので、完全に車輪の再発明

構文解析がおわったら
次はテキスト表示用

ダイナミックフォントを使った文字配置を自力で実装
･･･あれ？なんかうまくいかない
微妙にY座標がズレる
Y座標がズレると
当然レイアウトが崩れて
読めなくなる部分が

目コピーすればいいんだ！
「目コピー」･･････ゲーム画面の見た目から内部挙動を推測してプログラムする手法
プログラムを書いては画面でチェックという試行錯誤をやるだけ。
ゲーム業界における標準技術。オープンソース？技術共有？なにそれ？

• 文字化けするよ！

試行錯誤だっ
そもそもダイナミックフォントは実行中に、
・TTFフォントから文字情報を取得
・テクスチャに文字を画像として書き込み
・動的に生成されたテクスチャをText描画で使用
という構造になっている
この辺は古くからのゲームプログラミングの手法の一つ

試行錯誤だっ
テクスチャに書き込む文字がいっぱいになると
いったんテクスチャをクリアして文字テクスチャを描きなおす
その際に
「テキスト描画で使う頂点も作り直さないといけない」
文字化けの原因はたいていこの
「テクスチャが作り直された」ときの処理が
おかしくなっている。
ゲーム全般にわたって影響するので他のAsset（NGUIとか）
と同時に使うと起きやすい？

• そもそも本家がバグってない？（4.6.2のみ。5では大丈夫？）

試行錯誤をやるんだっ！
日本語の自動改行は禁則処理とかが必要なので、
改行処理はどの道自作（ていうか全部自作）

Unity5で仕様が変わったよ！やったね！
ダイナミックフォント系のクラスが
Unity5から変更
旧クラスはWarningがでる。
しかも取得できるデータが新旧で違う･･･

試行錯誤だっ！！
試行錯誤だっ！！
Unity5とUnity4の違いを吸収する
ラップ処理を書いて内部でdefine分岐
理屈はわからんけど、内部処理を書く

他にもいろいろ注意点はある
･･･色々大変なので省略
あきらめ・・・

• 正直、あきらめるのが無難
• 仕様的にどうしてもやらなきゃいけない人は宴使ってみ
てください。自力でやると大変だと思います。

宴でやったのを一部紹介

詳しくは宴のサイトで
ルビや絵文字など高度なテキスト表示をする

おしまい

Unite2015 uGUIの拡張と応用

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Unite2015 uGUIの拡張と応用

Ähnlich wie Unite2015 uGUIの拡張と応用 (20)

Unite2015 uGUIの拡張と応用