730 Views
October 20, 17
スライド概要
2017/10/8に開催されたUnity道場 札幌スペシャル2の講演動画です。
講師:山村達彦(ユニティ・テクノロジーズ・ジャパン合同会社)
講演動画:https://youtu.be/MbtHP_d0apg
最近、無料で利用可能になったテキスト レンダリング アセット「TextMesh Pro」。この大人気アセットを使用することで、単純な文字の表示だけでなく、綺麗な演出や 面白い表現が可能になりました。このセッションではTextMesh Proの機能紹介だけでなく、TextMesh Proを使ったオモシロ表現方法について紹介します。
こんな人におすすめ
・TextMesh Proでフォント表現の幅を広げたい方
得られる知見
・TextMesh Proの使い方
・TextMesh Proで出来る事
Unityのイベント資料はこちらから:
https://www.slideshare.net/UnityTechnologiesJapan/clipboards
リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。
文字でカッコいい画面を作ろう。 そう…TextMesh Proならね 1
山村 達彦 ユニティ・テクノロジーズ・ジャパン @tsubaki_t1 2
文字、拘ってますか?
4
意外と重要 フォントは 5
ゲームの雰囲気を伝える 6
カッコいい vs 読みやすい 7
8
文字は意味を伝える 9
文字のレイアウトで見栄えが変わる 10
フォントを揃える事で統一感を出す
文字…フォント…大事…大事… 12
uGUIでは不十分 13
14
Text Mesh Proって どんな事が出来るの?
TextMeshProの凄い所 16
① 拡大してもフォントが滲まない 17
① 拡大しても輪郭がボケずに綺麗 18
uGUI uGUI TextMeshPro 19 TextMeshPro
② 様々なレイアウト調整機能 20
② 様々なレイアウト調整機能 カーニング有 カーニング無 21
カーニング? ●文字の組み合わせで 文字のスペースを詰める ●フォントの文字同士の 間隔(アキ)を調整する技法 ●文字の形状に合わせて 個別に文字間の距離を微調整する タイポグラフィ手法
文字の間隔調整 23
禁則処理 24
③ 文字に表情を付ける効果が良い 25
③ 文字に表情を付ける効果が良い フワっとした影 アウトライン グロー 26 模様
アウトライン uGUI TextMeshPro
設定・変更は即座に反映される 28
④ この素晴らしい文字に演出を 29
④ この素晴らしい文字に演出を 30
Lightからの影響を受けるオプションも 31
⑤ タグによるリッチテキスト制御 32
⑤ タグによるリッチテキスト制御 • 太字 • イタリック • アンダーライン • 取り消し線 • 文字の大きさ • マージン • ハイライト • アイコン表示 33
文字にアイコンを埋め込むことも出来る 34
自作タグ 35
すごいぞTextMeshPro! ① 拡大してもフォントが滲まない ② 様々なレイアウト調整機能 ③ 文字に表情を付ける効果が良い ④ 文字に凹凸感のある演出 ⑤ タグによるリッチテキスト制御
どうやって使うの?
38
変換 フォント 1 登録 Font Asset Text Mesh 2 3 39 コンポーネント
ゲームアプリの数学@GREE GameDevelopers' Meetup 40
x1 x1.5 x2 41 x3
42
uGUIは? ゲームが使用してる文字をフォントから取得 一杯になったら一旦リセット ttf/otf 43
変換 フォント 1 登録 Font Asset Text Mesh 2 3 44 コンポーネント
45
46
47
48
49
変換 フォント 1 登録 Font Asset Text Mesh コンポーネント 2 50 3
51
52
変換 フォント 1 登録 Font Asset Text Mesh 2 3 53 コンポーネント
54
55
マテリアルを増やす 56
57
58
59
60
61
どんな風に使うの?
63
64
65
66
67
68
アウトラインで、背景に依存せず綺麗に見える 左の桁が前面に表示される 69
70
71
72
1 2 3 73
74
75
76
uGUIとText Mesh Proの使い分け
VS 78
uGUI ズームしても輪郭が綺麗 解像度が一致してれば綺麗 フォントテクスチャの再構築による スパイクが無い ダイナミックフォント対応 (フットプリントが最小限) 禁則処理とかアイコン表示が出来る 事前に使用する文字を登録する必要がある フォント更新時(追加時ではない) にスパイクが起こる
既にUGUIで作ってるなら… Replace box with image TextMeshProReplacer https://github.com/jackisgames/TextMeshProReplacer
81
フォント協力:モリサワ Q&A