Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unite2015 uGUIの拡張と応用

19,075 views

Published on

Unite2015で発表した「uGUIの応用と拡張」のスライドです。
uGUIでわかりづらい、AutoLayout機能の説明と、UIコンポーネントの拡張方法と実例について。
「UnityゲームUI実践ガイド」よりも踏み込んだ内容になっています。

Published in: Technology
  • Be the first to comment

Unite2015 uGUIの拡張と応用

  1. 1. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UNITE2015 UGUIの応用と拡張 2015/4/14 マッドネスラボ 時村良平
  2. 2. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ゲームプログラマ10年生くらい アークシステムワークスとかチュンソフトで働いてました 最近独立して個人開発してます Twitterアカウント @rodostw 自己紹介
  3. 3. COPYRIGHT 2014 @ UNITY TECHNOLOGIES AssetStoreでビジュアルノベルツール「宴」を販売中 公式サイト http://madnesslabo.net/utage/ 自己紹介
  4. 4. COPYRIGHT 2014 @ UNITY TECHNOLOGIES uGUI本「UnityゲームUI実践ガイド」を執筆 紹介サイト http://uiunity.com/ 自己紹介
  5. 5. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 今回はこの二つの経験をもとに、uGUIの一歩進んだ拡張 方法をご紹介します! 今回の内容
  6. 6. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 注 ただし、ちゃんとUnityに仕様を確認したわけじゃないの で、使用にあたっては自己責任で。 ぶっちゃけ「理屈はわからん!」「動きゃいいんだよ」 な面もありますが、そのぶん踏み込んだ内容になってい ます。 今回の内容
  7. 7. COPYRIGHT 2014 @ UNITY TECHNOLOGIES • 拡張の基本 ~EventTrigger、インターフェース、 UnityEvent ~ • uGUIの拡張 • 頂点をいじってみよう • UIの位置とかを自動で設定する • この先キケン!絵文字やルビ対応Textの作り方 目次
  8. 8. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 拡張の基本 EventTrigger 、インターフェース、 UnityEvent
  9. 9. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 「公式のButtonじゃできないことがやりたい!」 そんなときは、UIコンポーネントを自作することになると思 います。 拡張の基本
  10. 10. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 基本は、この本にも書いてますが、一応ざっとおさらい 拡張の基本
  11. 11. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 拡張しなくてもEvent Triggerでなんとかなる場合が多い 拡張の基本 指定したイベントの タイミングで、 設定したメソッドや プロパティを呼び出 すことができる
  12. 12. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 独自拡張する場合は、UI用のインターフェースを使うと 専用コンポーネントが作りやすい 拡張の基本 クリックしたときのイベントなら、 IPoineterClickHandlerを使う
  13. 13. COPYRIGHT 2014 @ UNITY TECHNOLOGIES イベント用のインターフェース一覧は英語リファレンス UnityEngine.EventSystems /Interface ここをチェック 拡張の基本
  14. 14. COPYRIGHT 2014 @ UNITY TECHNOLOGIES OnClickみたいに呼び出すプ ログラムを自由に設定でき るようにするには? 拡張の基本 こんな感じに 呼び出すプログラムを 設定できるコンポーネントを 作りたい
  15. 15. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UnityEventを使えば、独自に作れる 拡張の基本
  16. 16. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UnityEventを継承したクラスを作れば、独自の引数を設定 することも可能。 拡張の基本
  17. 17. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ここまで本の内容と同じ (詳しくは読んでみてください) 拡張の基本
  18. 18. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 本の補足。 OnClickなど、UnityEventで作られているイベン トに、スクリプトからAddListenerを使って呼び 出すメソッドを登録するときに 拡張の基本 登録できる引数は決まってい るが、ラムダ式を使えば、好 きな引数つきでAddできる。 ただしRemoveしない前提。
  19. 19. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UGUIの拡張 その1
  20. 20. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 頂点を いじってみよう UIの頂点を加工するのはとっても簡単?
  21. 21. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 標準のEffect系コンポーネントみたいなものを作る 頂点をいじってみよう
  22. 22. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Outlineコンポーネント テキストやスプライトにアウトライン(外枠)を表示さ せるために使う。 頂点をいじってみよう
  23. 23. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ソースを読もう! uGUIのソースコードは公開されている。 https://bitbucket.org/Unity-Technologies/ui その中のUI / UnityEngine.UI / UI / Core / VertexModifiers には、頂点を操作するコンポーネントが載っている。 頂点をいじってみよう 「Bitbucket Unity UI」 でぐぐるとたぶん出てくる
  24. 24. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ソースを読むと 縦横にズラした影を 4つ配置するだけ 頂点をいじってみよう
  25. 25. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 縦横にズラした影を4つ配置しているだけなので、極端に 大きい距離をとるとハッキリわかる 頂点をいじってみよう
  26. 26. COPYRIGHT 2014 @ UNITY TECHNOLOGIES この手法は 太いアウトラインを 取ろうとすると すぐ破綻する 頂点をいじってみよう
  27. 27. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Outlineコンポーネント を継承して、頂点操作 部分をoverrideする 影を4つに限らず、いく つも円状に配置するよ うにする。 頂点をいじってみよう
  28. 28. COPYRIGHT 2014 @ UNITY TECHNOLOGIES デフォルト 改造版 頂点をいじってみよう
  29. 29. COPYRIGHT 2014 @ UNITY TECHNOLOGIES デフォルト 改造版 頂点をいじってみよう
  30. 30. COPYRIGHT 2014 @ UNITY TECHNOLOGIES コピーする値を増やせば、太いアウトラインでも大丈夫 頂点をいじってみよう
  31. 31. COPYRIGHT 2014 @ UNITY TECHNOLOGIES • そもそもOutlineクラス の構造は? • BaseVertexEffectクラ スが重要 頂点をいじってみよう BaseVetexBuffer • 頂点をカスタムする Shadow • 頂点を丸ごとコピー • ちょっとだけズラして表示する OutLine •4方向にShadow処 理をする
  32. 32. COPYRIGHT 2014 @ UNITY TECHNOLOGIES uGUIのソースはお手本にもなる 目を通してみると色々と発見が ただし、ソース内部が変更され たり、リスクもあるので注意 頂点をいじってみよう
  33. 33. COPYRIGHT 2014 @ UNITY TECHNOLOGIES BaseVertexEffectを継承したクラスを作り、 public abstract void ModifyVertices(List<UIVertex> verts); 内に、頂点を操作するロジックを記述すれば、UIの頂点をいじれる。 影やアウトラインをつける以外にも UIVertex内のUV座標をいじってUVスクロールさせたり、 頂点座標をいじってゆがませたり、 色々とできる。 頂点をいじってみよう
  34. 34. COPYRIGHT 2014 @ UNITY TECHNOLOGIES さらに深くみるとポイントは IVertexModifier らしい uGUIは、基本設計として 「拡張用のインターフェースをもつコンポーネントを作る」 ことで、拡張しやすいようになっているらしい 頂点をいじってみよう
  35. 35. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UGUIの拡張 その2
  36. 36. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ・・・の前に
  37. 37. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UGUIの応用
  38. 38. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを 自動で設定する とてもよくわからない AutoLayoutのお話
  39. 39. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 基本機能だけで リストビューの作ってみる
  40. 40. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 基本コンポーネントだけで リストビューを作ってみる にはどうすればいいか? リストビューの作り方
  41. 41. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ヒエラルキーはこんな構造 リストビューの作り方
  42. 42. COPYRIGHT 2014 @ UNITY TECHNOLOGIES リストビューの作り方 まず、リストビューの外枠部分
  43. 43. COPYRIGHT 2014 @ UNITY TECHNOLOGIES リストビューの外枠部分 リストビューの作り方
  44. 44. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Contentは スクロールで動く部分 リストビューの作り方
  45. 45. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 枠(背景)の表示はImage コンポーネントで リストビューの作り方
  46. 46. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Maskコンポーネントを併用 して範囲外を非表示に リストビューの作り方
  47. 47. COPYRIGHT 2014 @ UNITY TECHNOLOGIES リストビューの作り方 ここまでは 使い方を知ってるかどうか だけの問題なので、 難しくはない
  48. 48. COPYRIGHT 2014 @ UNITY TECHNOLOGIES リストビューの作り方 次に、 アイテムの数が 増えたり減ったりする部分
  49. 49. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 分かりすいように マスクを解除して赤枠表示 リストビューの作り方 まず、アイテムは 縦や横に自動的に並べたい
  50. 50. COPYRIGHT 2014 @ UNITY TECHNOLOGIES リストビューの作り方 スクロールの範囲が決まるので、大きさが重要 アイテムが全て収まるような大きさにしたい
  51. 51. COPYRIGHT 2014 @ UNITY TECHNOLOGIES リストビューの作り方 つまり、 アイテムが増えたら Contentの サイズを 大きくする 必要がある
  52. 52. COPYRIGHT 2014 @ UNITY TECHNOLOGIES リストビューの作り方 ・子オブジェクトを縦や横に自動で整列させる ・子オブジェクトを並べる範囲の大きさに、自 分のサイズを自動で設定する ということが必要になる。
  53. 53. COPYRIGHT 2014 @ UNITY TECHNOLOGIES リストビューの作り方 さて、 そんな機能あったかな?
  54. 54. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを 自動で設定する とてもよくわからない AutoLayoutのお話
  55. 55. COPYRIGHT 2014 @ UNITY TECHNOLOGIES uGUIには「AutoLayout」 という、UIを自動的にレ イアウトするための仕組 みがある。 UIの位置とかサイズを自動で設定する
  56. 56. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 縦に並べるなら、 VerticalLayoutGroup というのが使えそう UIの位置とかサイズを自動で設定する
  57. 57. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する VerticalLayoutGroupを 使ってみる
  58. 58. COPYRIGHT 2014 @ UNITY TECHNOLOGIES …orz UIの位置とかサイズを自動で設定する 数が少ないと、 勝手にボタンの 大きさが伸びて 数が大いと、 勝手にボタンの 大きさが縮む
  59. 59. COPYRIGHT 2014 @ UNITY TECHNOLOGIES どうもVertical Layout Groupは、 「一定範囲の中に納まるように、子オブジェクトの大きさを 変えて縦に並べる」という機能らしい。 Windowsのタスクバーでいう 「ウィンドウを上下に並べて表示」 に近い UIの位置とかサイズを自動で設定する
  60. 60. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 子オブジェクトの大きさ 変えてほしくないよ・・・ UIの位置とかサイズを自動で設定する もっと ひどくなった・・・ 子を強制的に伸ばす? こいつか原因? チェックはずしてみる
  61. 61. COPYRIGHT 2014 @ UNITY TECHNOLOGIES わけがわからないよ・・・ UIの位置とかサイズを自動で設定する
  62. 62. COPYRIGHT 2014 @ UNITY TECHNOLOGIES そもそも、Auto Layoutとはなんなのか? UIの位置とかサイズを自動で設定する
  63. 63. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Auto Layout とは 対象オブジェクトのLayout Propertiesを元に 各コンポーネントごとの計算によって 自動的にUIの位置やサイズを設定する機能 UIの位置とかサイズを自動で設定する
  64. 64. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Layout Propertiesってなに? UIの位置とかサイズを自動で設定する
  65. 65. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する 実はインスペクターの 下部表示はこんな感じ に切り替えられる Layout Properties をチェック Layout Propertiesの中 身が表示される
  66. 66. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する 最小サイズ 基本的に参照するサイズ あまり部分の 重み付けみたいなもの
  67. 67. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する uGUIのAuto Layoutは この値をもとに、 位置やサイズを計算する。 通常のwidthやheightは大抵 無視されてしまう ポイント
  68. 68. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する 「いくつかの値が Vertical LayoutGroupによっ て決められている」 と書いてある 自動設定された 値はグレーアウトして、 手動設定できなくなる
  69. 69. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する 各子オブジェクトの Layout Properties を参照 Vertical LayoutGroup 子オブジェクト ① ①を元に、位置やサイズを 計算して設定 ②
  70. 70. COPYRIGHT 2014 @ UNITY TECHNOLOGIES じゃあ実際どうすりゃいいの? UIの位置とかサイズを自動で設定する
  71. 71. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 子オブジェクトの大きさが 小さいのは・・・・ UIの位置とかサイズを自動で設定する チェックはずした場合
  72. 72. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 子オブジェクトの大きさが 小さいのは・・・・ UIの位置とかサイズを自動で設定する Layout Propertiesが10とか なってるから 高さが10くらいしかない
  73. 73. COPYRIGHT 2014 @ UNITY TECHNOLOGIES なんで10しかないのか? UIの位置とかサイズを自動で設定する Slice設定のイメージだと 最小の大きさが Preferredのサイズになるらしい 5 + 5 ↓ 10
  74. 74. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Sliceじゃない Simple設定のImageなら UIの位置とかサイズを自動で設定する Spriteのサイズそのまま Preferredのサイズになるらしい
  75. 75. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ボタンにSliceを使わずに リストビューを作れと? UIの位置とかサイズを自動で設定する
  76. 76. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 流石にそれは無理なので ちゃんと手段があります UIの位置とかサイズを自動で設定する
  77. 77. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Layout Propertiesを デフォルトの値ではなく、 独自に設定すればいい UIの位置とかサイズを自動で設定する
  78. 78. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Layout Elementコンポーネントを 使うと、Layout Propertiesの値を 上書きできる UIの位置とかサイズを自動で設定する 「Layout Elementによって 値が決まっている」とわかる
  79. 79. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する 子オブジェクトのサイズ設定は Layout ElementをAddして設定 ちゃんと表示されるように なった・・・・・・
  80. 80. COPYRIGHT 2014 @ UNITY TECHNOLOGIES めでたし めでたし ・・・? UIの位置とかサイズを自動で設定する
  81. 81. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する あれ・・・・・・ Content(赤枠)の サイズ設定どうしよう
  82. 82. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Vertical Layoutを使っても、 自分自身(Content)の大きさは 自動設定されない・・・ UIの位置とかサイズを自動で設定する グレーアウトしてない つまり、手動設定が必要・・・?
  83. 83. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 自分自身のサイズを いい感じに自動設定してくれる コンポーネントがほしい UIの位置とかサイズを自動で設定する
  84. 84. COPYRIGHT 2014 @ UNITY TECHNOLOGIES あります UIの位置とかサイズを自動で設定する
  85. 85. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 「Content Size Fitter」 これを使うと、 自分自身のLayout Propertiesで サイズが自動設定される UIの位置とかサイズを自動で設定する
  86. 86. COPYRIGHT 2014 @ UNITY TECHNOLOGIES しかも、Vertical Layout Groupは 子オブジェクトを囲む大きさで、 Layout Propertiesの値が すでに設定されている! UIの位置とかサイズを自動で設定する
  87. 87. COPYRIGHT 2014 @ UNITY TECHNOLOGIES なので、 Content Size FitterをAddして、 Preferred SizeにするだけでOK UIの位置とかサイズを自動で設定する
  88. 88. COPYRIGHT 2014 @ UNITY TECHNOLOGIES これで、 子オブジェクトの 数をいくら増やしても 自動的に縦ならびに配置 Contentのサイズも自動で 変更されるようになる UIの位置とかサイズを自動で設定する
  89. 89. COPYRIGHT 2014 @ UNITY TECHNOLOGIES まとめ UIの位置とかサイズを自動で設定する
  90. 90. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する Height要素のみの設定 Widthも同じ要領で調整可能
  91. 91. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 「とてもよくわからない」 AutoLayoutのお話 でした。 UIの位置とかサイズを自動で設定する
  92. 92. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 「WidthやHeightは無視されて Layout Properties が参照される」 というのがポイントです UIの位置とかサイズを自動で設定する
  93. 93. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ・・・・・・正直難しいですよね・・・ なんで、素直にWidthやHeight を元にレイアウトされないのか・・・ UIの位置とかサイズを自動で設定する
  94. 94. COPYRIGHT 2014 @ UNITY TECHNOLOGIES もっと簡単に使えるのがほしいので・・・ UIの位置とかサイズを自動で設定する
  95. 95. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UGUIの拡張 その2
  96. 96. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを 自動で設定する とてもよくわからない AutoLayout のをお話を使わなくてすむように、 使いやすいコンポーネントを 自作する話
  97. 97. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する グレーアウトしてるこれを自作する
  98. 98. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 普通にUpdateとかで位置設定してもいいんだけど、 このグレーアウト機能を使うメリットもある。 グレーアウトの部分は変更されてもシーンファイルが更新されない。 無駄にシーンファイルが変わらないので 「ちょっとシーン開いただけで、シーンファイルが変更される」 という事態を避けられる。(NGUIとかで経験ありません?) UIの位置とかサイズを自動で設定する
  99. 99. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 色々作ってみた UIの位置とかサイズを自動で設定する
  100. 100. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UIの位置とかサイズを自動で設定する リストビューのために、 素直にこれだけやるコンポーネントを作ってみた ・子オブジェクトを縦や横に自動で整列 ・子オブジェクトを並べる範囲の大きさに、 自分のサイズを自動で設定
  101. 101. COPYRIGHT 2014 @ UNITY TECHNOLOGIES LayoutPropertiesも、 ContentSizFitterもいらない。 ボタンのサイズも変更しない し、その大きさで並べる UIの位置とかサイズを自動で設定する
  102. 102. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 子オブジェクトのサイズは変わ らない。 位置とアンカーだけ自動設定。 UIの位置とかサイズを自動で設定する
  103. 103. COPYRIGHT 2014 @ UNITY TECHNOLOGIES さらに、せっかくなので、スケールエフェクトつきので 並べるのとか作ってみた UIの位置とかサイズを自動で設定する
  104. 104. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 工夫次第で独自の自動設定を することが出来て便利! たとえば、自作のレターボッ クスコンポーネントと連動す るCanvasScalerとかも作れる UIの位置とかサイズを自動で設定する
  105. 105. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ポイント 自動設定するRectTransformのパラメー ターの種類を、 DrivenRectTransformTrackerというのを 使って設定する必要がある。 詳細はuguiのソースを読もう。 UnityEngine.UI / UI / Core / Layout / 詳しくは公開されているソースを読む UIの位置とかサイズを自動で設定する
  106. 106. COPYRIGHT 2014 @ UNITY TECHNOLOGIES UGUIの拡張 その3
  107. 107. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応 TEXTの作り方
  108. 108. COPYRIGHT 2014 @ UNITY TECHNOLOGIES • 去年のUnite2014 開発中のuGUIについてのセッション 講演の後で聞いてみた 絵文字やルビ対応TEXTの作り方
  109. 109. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Q 「テキストを日本語表示用に拡張する必要があるんだけ ど、それってできる?」 A 「できるよ。そういうの、もうやってるところあるし」 絵文字やルビ対応TEXTの作り方
  110. 110. COPYRIGHT 2014 @ UNITY TECHNOLOGIES マジかよ uGUI最高だな 絵文字やルビ対応TEXTの作り方
  111. 111. COPYRIGHT 2014 @ UNITY TECHNOLOGIES やってみた 絵文字やルビ対応TEXTの作り方
  112. 112. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応TEXTの作り方
  113. 113. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応TEXTの作り方
  114. 114. COPYRIGHT 2014 @ UNITY TECHNOLOGIES できはする できはするが、凄く・・・・・・大変・・・・・・でした 絵文字やルビ対応TEXTの作り方
  115. 115. COPYRIGHT 2014 @ UNITY TECHNOLOGIES この先キケン!
  116. 116. COPYRIGHT 2014 @ UNITY TECHNOLOGIES • BaseVertexBufferで・・・・・・? • どの頂点が、どの文字の情報かとかわからない • 文字数で予測しようとしても、表示されない頂点もあ るっぽい(リッチテキストのタグ<size>とかの文 字?) • ルビとかのテキスト本文にない文字を描くには? 絵文字やルビ対応TEXTの作り方
  117. 117. COPYRIGHT 2014 @ UNITY TECHNOLOGIES そもそも絵文字とかルビとかするには オリジナルのタグが必要 Unityはリッチテキストの解析はどうやってるんだろう? ルビとかはともかく、普通にリッチテキストタグつきのテキ ストを文字送り表示しようとすると大変な気が? 絵文字やルビ対応TEXTの作り方
  118. 118. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Textクラスのソース は公開されている 絵文字やルビ対応TEXTの作り方
  119. 119. COPYRIGHT 2014 @ UNITY TECHNOLOGIES TextGenerator! リッチテキストの解 析とか、自動改行と か配置とか頂点作成 とか全部やってるっ ぽい? 絵文字やルビ対応TEXTの作り方
  120. 120. COPYRIGHT 2014 @ UNITY TECHNOLOGIES TextGeneratorを拡張できれば あっさりいく? 絵文字やルビ対応TEXTの作り方
  121. 121. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ソースは非公開・・・・・・ しかもsealedクラス 継承してoverrideできない 絵文字やルビ対応TEXTの作り方
  122. 122. COPYRIGHT 2014 @ UNITY TECHNOLOGIES あきらめてはいけない 絵文字やルビ対応TEXTの作り方
  123. 123. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 自力で全部プログラムすれば いい! sizeとかのデフォルトのタグ も解析・実装しなおしになる ので、完全に車輪の再発明 絵文字やルビ対応TEXTの作り方
  124. 124. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 構文解析がおわったら 次はテキスト表示用 絵文字やルビ対応TEXTの作り方
  125. 125. COPYRIGHT 2014 @ UNITY TECHNOLOGIES ダイナミックフォントを使った文字配置を自力で実装 ・・・あれ?なんかうまくいかない 絵文字やルビ対応TEXTの作り方 微妙にY座標がズレる Y座標がズレると 当然レイアウトが崩れて 読めなくなる部分が
  126. 126. COPYRIGHT 2014 @ UNITY TECHNOLOGIES あきらめてはいけない 絵文字やルビ対応TEXTの作り方
  127. 127. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 目コピーすればいいんだ! 「目コピー」・・・・・・ゲーム画面の見た目から内部挙動を推測してプログラムする手法 プログラムを書いては画面でチェックという試行錯誤をやるだけ。 ゲーム業界における標準技術。オープンソース?技術共有?なにそれ? 絵文字やルビ対応TEXTの作り方
  128. 128. COPYRIGHT 2014 @ UNITY TECHNOLOGIES • 文字化けするよ! 絵文字やルビ対応TEXTの作り方
  129. 129. COPYRIGHT 2014 @ UNITY TECHNOLOGIES あきらめてはいけない 絵文字やルビ対応TEXTの作り方
  130. 130. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 試行錯誤だっ そもそもダイナミックフォントは実行中に、 ・TTFフォントから文字情報を取得 ・テクスチャに文字を画像として書き込み ・動的に生成されたテクスチャをText描画で使用 という構造になっている この辺は古くからのゲームプログラミングの手法の一つ 絵文字やルビ対応TEXTの作り方
  131. 131. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 試行錯誤だっ テクスチャに書き込む文字がいっぱいになると いったんテクスチャをクリアして文字テクスチャを描きなおす その際に 「テキスト描画で使う頂点も作り直さないといけない」 文字化けの原因はたいていこの 「テクスチャが作り直された」ときの処理が おかしくなっている。 ゲーム全般にわたって影響するので他のAsset(NGUIとか) と同時に使うと起きやすい? 絵文字やルビ対応TEXTの作り方
  132. 132. COPYRIGHT 2014 @ UNITY TECHNOLOGIES • そもそも本家がバグってない?(4.6.2のみ。5では大丈夫?) 絵文字やルビ対応TEXTの作り方
  133. 133. COPYRIGHT 2014 @ UNITY TECHNOLOGIES あきらめてはいけない 絵文字やルビ対応TEXTの作り方
  134. 134. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 試行錯誤をやるんだっ! 日本語の自動改行は禁則処理とかが必要なので、 改行処理はどの道自作(ていうか全部自作) 絵文字やルビ対応TEXTの作り方
  135. 135. COPYRIGHT 2014 @ UNITY TECHNOLOGIES Unity5で仕様が変わったよ!やったね! ダイナミックフォント系のクラスが Unity5から変更 旧クラスはWarningがでる。 しかも取得できるデータが新旧で違う・・・ 絵文字やルビ対応TEXTの作り方
  136. 136. COPYRIGHT 2014 @ UNITY TECHNOLOGIES あきらめてはいけない 絵文字やルビ対応TEXTの作り方
  137. 137. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 試行錯誤だっ!! 試行錯誤だっ!! 絵文字やルビ対応TEXTの作り方 Unity5とUnity4の違いを吸収する ラップ処理を書いて内部でdefine分岐 理屈はわからんけど、内部処理を書く
  138. 138. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 他にもいろいろ注意点はある ・・・色々大変なので省略 あきらめ・・・ 絵文字やルビ対応TEXTの作り方
  139. 139. COPYRIGHT 2014 @ UNITY TECHNOLOGIES • 正直、あきらめるのが無難 • 仕様的にどうしてもやらなきゃいけない人は宴使ってみ てください。自力でやると大変だと思います。 絵文字やルビ対応TEXTの作り方
  140. 140. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 宴でやったのを一部紹介 絵文字やルビ対応TEXTの作り方
  141. 141. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応TEXTの作り方
  142. 142. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応TEXTの作り方
  143. 143. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応TEXTの作り方
  144. 144. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応TEXTの作り方
  145. 145. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応TEXTの作り方
  146. 146. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 絵文字やルビ対応TEXTの作り方
  147. 147. COPYRIGHT 2014 @ UNITY TECHNOLOGIES 詳しくは宴のサイトで ルビや絵文字など高度なテキスト表示をする 絵文字やルビ対応TEXTの作り方
  148. 148. COPYRIGHT 2014 @ UNITY TECHNOLOGIES おしまい

×