Unite2015 uGUIの拡張と応用

COPYRIGHT 2014 @ UNITY TECHNOLOGIES

UNITE2015

UGUI の応用と拡張2015/4/14

マッドネスラボ　時村良平


ゲームプログラマ 10 年生くらい

アークシステムワークスとかチュンソフトで働いてました

最近独立して個人開発してます

Twitter アカウント　 @rodostw

自己紹介

https://twitter.com/rodostw

https://twitter.com/rodostw


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

自己紹介

http://madnesslabo.net/utage/


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

自己紹介

http://uiunity.com/


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

今回の内容


注

ただし、ちゃんと Unity に仕様を確認したわけじゃないので、使用にあたっては自己責任で。

ぶっちゃけ「理屈はわからん！」「動きゃいいんだよ」な面もありますが、そのぶん踏み込んだ内容になっています。

今回の内容


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

• 頂点をいじってみよう• UI の位置とかを自動で設定する• この先キケン！絵文字やルビ対応 Text の作り方

目次


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


「公式の Button じゃできないことがやりたい！」

そんなときは、 UI コンポーネントを自作することになると思います。

拡張の基本


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

拡張の基本


拡張しなくても Event Trigger でなんとかなる場合が多い

拡張の基本

指定したイベントのタイミングで、

設定したメソッドやプロパティを呼び出

すことができる


独自拡張する場合は、 UI 用のインターフェースを使うと専用コンポーネントが作りやすい

拡張の基本

クリックしたときのイベントなら、IPoineterClickHandler を使う


イベント用のインターフェース一覧は英語リファレンスUnityEngine.EventSystems

/Interface

ここをチェック

拡張の基本

http://docs.unity3d.com/ScriptReference/EventSystems.IBeginDragHandler.html


OnClick みたいに呼び出すプログラムを自由に設定できるようにするには？

拡張の基本

こんな感じに呼び出すプログラムを

設定できるコンポーネントを作りたい


UnityEvent を使えば、独自に作れる

拡張の基本


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

拡張の基本


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

拡張の基本


本の補足。

OnClick など、 UnityEvent で作られているイベントに、スクリプトから AddListener を使って呼び出すメソッドを登録するときに

拡張の基本

登録できる引数は決まってい

るが、ラムダ式を使えば、好

きな引数つきで Add できる。ただし Remove しない前提。

https://msdn.microsoft.com/ja-jp/library/bb397687.aspx


UGUI の拡張その１


頂点をいじってみよう

UI の頂点を加工するのはとっても簡単？


標準の Effect 系コンポーネントみたいなものを作る



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



ソースを読もう！

uGUI のソースコードは公開されている。https://bitbucket.org/Unity-Technologies/ui

その中の UI / UnityEngine.UI / UI / Core / VertexModifiers

には、頂点を操作するコンポーネントが載っている。


「 Bitbucket Unity UI 」でぐぐるとたぶん出てくる

https://bitbucket.org/Unity-Technologies/ui




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



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



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



Outline コンポーネントを継承して、頂点操作部分を override する

影を 4 つに限らず、いくつも円状に配置するようにする。



　デフォルト　　　　　　　　　　改造版



　デフォルト　　　　　　　　　　改造版



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



• そもそも Outline クラスの構造は？

• BaseVertexEffect クラスが重要


BaseVetexBuffer

•頂点をカスタムするShadow

•頂点を丸ごとコピー•ちょっとだけズラして表示する

OutLine


uGUI のソースはお手本にもなる

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



BaseVertexEffect を継承したクラスを作り、 public abstract void ModifyVertices(List<UIVertex> verts);

内に、頂点を操作するロジックを記述すれば、 UI の頂点をいじれる。

影やアウトラインをつける以外にもUIVertex 内の UV座標をいじって UV スクロールさせたり、頂点座標をいじってゆがませたり、色々とできる。



さらに深くみるとポイントはIVertexModifier 　らしい

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



UGUI の拡張その２


･･･の前に


UGUI の応用


UI の位置とかサイズを自動で設定する

とてもよくわからないAutoLayout のお話


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


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

リストビューの作り方


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




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


リストビューの外枠部分



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



枠（背景）の表示は Image

コンポーネントで



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




ここまでは使い方を知ってるかどうか

だけの問題なので、難しくはない



次に、アイテムの数が

増えたり減ったりする部分


分かりすいようにマスクを解除して赤枠表示

リストビューの作り方まず、アイテムは

縦や横に自動的に並べたい


リストビューの作り方スクロールの範囲が決まるので、大きさが重要

アイテムが全て収まるような大きさにしたい



つまり、アイテムが増えたら

Content のサイズを

大きくする必要がある



・子オブジェクトを縦や横に自動で整列させる

・子オブジェクトを並べる範囲の大きさに、自分のサイズを自動で設定する

ということが必要になる。



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


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

AutoLayout のお話


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 は大抵無視されてしまう

ポイント


UIの位置とかサイズを自動で設定する「いくつかの値が

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 のサイズも自動で変更されるようになる



まとめ



UIの位置とかサイズを自動で設定するHeight要素のみの設定

Width も同じ要領で調整可能


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

でした。



「 Width や Height は無視されてLayout Properties が参照される」

というのがポイントです



･･････正直難しいですよね･･･なんで、素直に Width や Height

を元にレイアウトされないのか･･･



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



UGUI の拡張その２


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

使いやすいコンポーネントを自作する話



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


普通に Update とかで位置設定してもいいんだけど、このグレーアウト機能を使うメリットもある。

グレーアウトの部分は変更されてもシーンファイルが更新されない。

無駄にシーンファイルが変わらないので「ちょっとシーン開いただけで、シーンファイルが変更される」という事態を避けられる。（ NGUI とかで経験ありません？）



色々作ってみた



UIの位置とかサイズを自動で設定するリストビューのために、素直にこれだけやるコンポーネントを作ってみた

・子オブジェクトを縦や横に自動で整列・子オブジェクトを並べる範囲の大きさに、自分のサイズを自動で設定


LayoutProperties

も、 ContentSizFitter もいらない。

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



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



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



工夫次第で独自の自動設定をすることが出来て便利！

たとえば、自作のレターボックスコンポーネントと連動する CanvasScaler とかも作れる



ポイント自動設定する RectTransform のパラメーターの種類を、DrivenRectTransformTracker というのを使って設定する必要がある。詳細は ugui のソースを読もう。

UnityEngine.UI / UI / Core / Layout /

詳しくは公開されているソースを読む


https://bitbucket.org/Unity-Technologies/ui/src/fd5d3578da8c33883b7c56dd2b2f4d4bbc87095b/UnityEngine.UI/UI/Core/Layout/?at=4.6


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 分岐理屈はわからんけど、内部処理を書く


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

あきらめ・・・



•正直、あきらめるのが無難• 仕様的にどうしてもやらなきゃいけない人は宴使ってみ

てください。自力でやると大変だと思います。



宴でやったのを一部紹介















詳しくは宴のサイトで

ルビや絵文字など高度なテキスト表示をする


http://madnesslabo.net/utage/?page_id=1319

http://madnesslabo.net/utage/?page_id=1319


おしまい

Technology

Unite2015 uGUIの拡張と応用