View
4.419
Download
1
Category
Preview:
Citation preview
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
ゲームプログラマ 10 年生くらい
アークシステムワークスとかチュンソフトで働いてました
最近独立して個人開発してます
Twitter アカウント @rodostw
自己紹介
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
AssetStore でビジュアルノベルツール「宴」を販売中公式サイト http://madnesslabo.net/utage/
自己紹介
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
uGUI 本「 Unity ゲーム UI 実践ガイド」を執筆紹介サイト http://uiunity.com/
自己紹介
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
注
ただし、ちゃんと Unity に仕様を確認したわけじゃないので、使用にあたっては自己責任で。
ぶっちゃけ「理屈はわからん!」「動きゃいいんだよ」な面もありますが、そのぶん踏み込んだ内容になっています。
今回の内容
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
• 拡張の基本 ~ EventTrigger 、インターフェース、 UnityEvent ~• uGUI の拡張
• 頂点をいじってみよう• UI の位置とかを自動で設定する• この先キケン!絵文字やルビ対応 Text の作り方
目次
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
「公式の Button じゃできないことがやりたい!」
そんなときは、 UI コンポーネントを自作することになると思います。
拡張の基本
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
拡張しなくても Event Trigger でなんとかなる場合が多い
拡張の基本
指定したイベントのタイミングで、
設定したメソッドやプロパティを呼び出
すことができる
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
独自拡張する場合は、 UI 用のインターフェースを使うと専用コンポーネントが作りやすい
拡張の基本
クリックしたときのイベントなら、IPoineterClickHandler を使う
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
イベント用のインターフェース一覧は英語リファレンスUnityEngine.EventSystems
/Interface
ここをチェック
拡張の基本
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
OnClick みたいに呼び出すプログラムを自由に設定できるようにするには?
拡張の基本
こんな感じに呼び出すプログラムを
設定できるコンポーネントを作りたい
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
本の補足。
OnClick など、 UnityEvent で作られているイベントに、スクリプトから AddListener を使って呼び出すメソッドを登録するときに
拡張の基本
登録できる引数は決まってい
るが、ラムダ式を使えば、好
きな引数つきで Add できる。ただし Remove しない前提。
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
ソースを読もう!
uGUI のソースコードは公開されている。https://bitbucket.org/Unity-Technologies/ui
その中の UI / UnityEngine.UI / UI / Core / VertexModifiers
には、頂点を操作するコンポーネントが載っている。
頂点をいじってみよう
「 Bitbucket Unity UI 」でぐぐるとたぶん出てくる
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
Outline コンポーネントを継承して、頂点操作部分を override する
影を 4 つに限らず、いくつも円状に配置するようにする。
頂点をいじってみよう
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
• そもそも Outline クラスの構造は?
• BaseVertexEffect クラスが重要
頂点をいじってみよう
BaseVetexBuffer
•頂点をカスタムするShadow
•頂点を丸ごとコピー•ちょっとだけズラして表示する
OutLine
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
uGUI のソースはお手本にもなる
目を通してみると色々と発見がただし、ソース内部が変更されたり、リスクもあるので注意
頂点をいじってみよう
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
BaseVertexEffect を継承したクラスを作り、 public abstract void ModifyVertices(List<UIVertex> verts);
内に、頂点を操作するロジックを記述すれば、 UI の頂点をいじれる。
影やアウトラインをつける以外にもUIVertex 内の UV座標をいじって UV スクロールさせたり、頂点座標をいじってゆがませたり、色々とできる。
頂点をいじってみよう
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
さらに深くみるとポイントはIVertexModifier らしい
uGUI は、基本設計として「拡張用のインターフェースをもつコンポーネントを作る」ことで、拡張しやすいようになっているらしい
頂点をいじってみよう
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
リストビューの作り方
・子オブジェクトを縦や横に自動で整列させる
・子オブジェクトを並べる範囲の大きさに、自分のサイズを自動で設定する
ということが必要になる。
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
uGUI には「 AutoLayout 」という、UI を自動的にレイアウトするための仕組みがある。
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
…orz
UIの位置とかサイズを自動で設定する
数が少ないと、勝手にボタンの大きさが伸びて
数が大いと、勝手にボタンの
大きさが縮む
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
どうも Vertical Layout Group は、「一定範囲の中に納まるように、子オブジェクトの大きさを変えて縦に並べる」という機能らしい。
Windows のタスクバーでいう「ウィンドウを上下に並べて表示」に近い
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
子オブジェクトの大きさ変えてほしくないよ・・・
UIの位置とかサイズを自動で設定する
もっとひどくなった・・・
子を強制的に伸ばす?こいつか原因?
チェックはずしてみる
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
Auto Layout とは対象オブジェクトの Layout Properties を元に各コンポーネントごとの計算によって自動的に UI の位置やサイズを設定する機能
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
UIの位置とかサイズを自動で設定する
実はインスペクターの下部表示はこんな感じに切り替えられる
Layout Propertiesをチェック
Layout Properties の中身が表示される
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
UIの位置とかサイズを自動で設定する
uGUI の Auto Layout はこの値をもとに、位置やサイズを計算する。通常の width や height は大抵無視されてしまう
ポイント
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
UIの位置とかサイズを自動で設定する「いくつかの値が
Vertical LayoutGroup によって決められている」
と書いてある
自動設定された値はグレーアウトして、手動設定できなくなる
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
UIの位置とかサイズを自動で設定する
各子オブジェクトのLayout Properties を参照
Vertical LayoutGroup 子オブジェクト
①
①を元に、位置やサイズを計算して設定②
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
子オブジェクトの大きさが小さいのは・・・・
UIの位置とかサイズを自動で設定する
Layout Properties が 10 とかなってるから
高さが 10 くらいしかない
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
なんで 10 しかないのか?
UIの位置とかサイズを自動で設定する
Slice 設定のイメージだと最小の大きさが
Preferred のサイズになるらしい
5 + 5 ↓ 10
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
Slice じゃないSimple 設定の Image なら
UIの位置とかサイズを自動で設定する
Sprite のサイズそのままPreferred のサイズになるらしい
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
Layout Element コンポーネントを使うと、 Layout Properties の値を上書きできる
UIの位置とかサイズを自動で設定する
「 Layout Element によって値が決まっている」とわかる
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
UIの位置とかサイズを自動で設定する
子オブジェクトのサイズ設定はLayout Element を Add して設定
ちゃんと表示されるようになった・・・・・・
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
Vertical Layout を使っても、自分自身( Content )の大きさは自動設定されない・・・
UIの位置とかサイズを自動で設定する
グレーアウトしてないつまり、手動設定が必要・・・?
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
「 Content Size Fitter 」これを使うと、自分自身の Layout Properties でサイズが自動設定される
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
しかも、 Vertical Layout Group は子オブジェクトを囲む大きさで、 Layout Properties の値がすでに設定されている!
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
なので、Content Size Fitter を Add して、Preferred Size にするだけで OK
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
これで、子オブジェクトの数をいくら増やしても自動的に縦ならびに配置Content のサイズも自動で変更されるようになる
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
「 Width や Height は無視されてLayout Properties が参照される」
というのがポイントです
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
・・・・・・正直難しいですよね・・・なんで、素直に Width や Height
を元にレイアウトされないのか・・・
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
UI の位置とかサイズを自動で設定するとてもよくわからないAutoLayout のをお話を使わなくてすむように、
使いやすいコンポーネントを自作する話
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
普通に Update とかで位置設定してもいいんだけど、このグレーアウト機能を使うメリットもある。
グレーアウトの部分は変更されてもシーンファイルが更新されない。
無駄にシーンファイルが変わらないので「ちょっとシーン開いただけで、シーンファイルが変更される」という事態を避けられる。( NGUI とかで経験ありません?)
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
UIの位置とかサイズを自動で設定するリストビューのために、素直にこれだけやるコンポーネントを作ってみた
・子オブジェクトを縦や横に自動で整列・子オブジェクトを並べる範囲の大きさに、自分のサイズを自動で設定
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
LayoutProperties
も、 ContentSizFitter もいらない。
ボタンのサイズも変更しないし、その大きさで並べる
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
工夫次第で独自の自動設定をすることが出来て便利!
たとえば、自作のレターボックスコンポーネントと連動する CanvasScaler とかも作れる
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
ポイント自動設定する RectTransform のパラメーターの種類を、DrivenRectTransformTracker というのを使って設定する必要がある。詳細は ugui のソースを読もう。
UnityEngine.UI / UI / Core / Layout /
詳しくは公開されているソースを読む
UIの位置とかサイズを自動で設定する
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
Q
「テキストを日本語表示用に拡張する必要があるんだけど、それってできる?」
A
「できるよ。そういうの、もうやってるところあるし」
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
• BaseVertexBuffer で・・・・・・?• どの頂点が、どの文字の情報かとかわからない• 文字数で予測しようとしても、表示されない頂点もあ
るっぽい(リッチテキストのタグ< size>とかの文字?)
• ルビとかのテキスト本文にない文字を描くには?
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
そもそも絵文字とかルビとかするにはオリジナルのタグが必要
Unity はリッチテキストの解析はどうやってるんだろう?ルビとかはともかく、普通にリッチテキストタグつきのテキストを文字送り表示しようとすると大変な気が?
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
TextGenerator !
リッチテキストの解析とか、自動改行とか配置とか頂点作成とか全部やってるっぽい?
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
自力で全部プログラムすればいい!
size とかのデフォルトのタグも解析・実装しなおしになるので、完全に車輪の再発明
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
ダイナミックフォントを使った文字配置を自力で実装・・・あれ?なんかうまくいかない
絵文字やルビ対応TEXTの作り方
微妙に Y座標がズレる
Y座標がズレると当然レイアウトが崩れて
読めなくなる部分が
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
目コピーすればいいんだ!
「目コピー」・・・・・・ゲーム画面の見た目から内部挙動を推測してプログラムする手法 プログラムを書いては画面でチェックという試行錯誤をやるだけ。 ゲーム業界における標準技術。オープンソース?技術共有?なにそれ?
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
試行錯誤だっ
そもそもダイナミックフォントは実行中に、・ TTF フォントから文字情報を取得・テクスチャに文字を画像として書き込み・動的に生成されたテクスチャを Text描画で使用という構造になっているこの辺は古くからのゲームプログラミングの手法の一つ
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
試行錯誤だっ
テクスチャに書き込む文字がいっぱいになるといったんテクスチャをクリアして文字テクスチャを描きなおすその際に「テキスト描画で使う頂点も作り直さないといけない」文字化けの原因はたいていこの「テクスチャが作り直された」ときの処理がおかしくなっている。ゲーム全般にわたって影響するので他の Asset ( NGUI とか)と同時に使うと起きやすい?
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
試行錯誤をやるんだっ!
日本語の自動改行は禁則処理とかが必要なので、改行処理はどの道自作(ていうか全部自作)
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
Unity5 で仕様が変わったよ!やったね!
ダイナミックフォント系のクラスがUnity5 から変更
旧クラスは Warning がでる。しかも取得できるデータが新旧で違う・・・
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
試行錯誤だっ!!試行錯誤だっ!!
絵文字やルビ対応TEXTの作り方
Unity5 と Unity4 の違いを吸収するラップ処理を書いて内部で define 分岐理屈はわからんけど、内部処理を書く
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
•正直、あきらめるのが無難• 仕様的にどうしてもやらなきゃいけない人は宴使ってみ
てください。自力でやると大変だと思います。
絵文字やルビ対応TEXTの作り方
COPYRIGHT 2014 @ UNITY TECHNOLOGIES
詳しくは宴のサイトで
ルビや絵文字など高度なテキスト表示をする
絵文字やルビ対応TEXTの作り方
Recommended