テキストのエフェクトを作る際の注意点 便利なアセットの紹介

1. uGUIのテキストエフェクト
を作ってみたりした
2016.11.19 Unity Fukuoka 12

2. 自己紹介
オノッチ
Twitter: onotchi_
ブログ: Onoty3D
http://onoty3d.hatenablog.com/
仕事：業務システム開発(C#,VB.NET)
趣味：Unity
暮井慧(プロ生ちゃん)ファンクラブ

3. プロ生ちゃん

4. 最近はParticleのTrailとNoiseにハマってた

5. uGUI Textをちゃんと触ったきっかけ
→他勉強会でUnityをスライド代わりにしてLTした。

6. uGUI Text 標準で出来る装飾
 フォントの変更(TrueType(.ttf) / OpenType(.otf) )
 リッチテキスト(i,b,color,size)
テスト
<i>これは斜体</i>
<b>これは太字</b>
<color=#ff0000ff>色</color>
<size=40>サイズ</size>

7. uGUI Text 標準で出来る装飾
 エフェクト(コンポーネントとしてオブジェクトにセット)
 影
 アウトライン

8. uGUI Text 標準で出来る装飾
 エフェクト(コンポーネントとしてオブジェクトにセット)
 マスク

9. ものたりない

10. 無いなら作ろう
UIBehaviour, IMeshModifierを実装したクラス
BaseMeshEffectを継承したクラス
で作ることができる

11. 無いなら作ろう
ここを見たらだいたい出来ます。
テラシュールブログ
【Unity】UIで表現するテキストを１文字ずつ”動かす”
http://tsubakit1.hateblo.jp/entry/2016/04/15/230553

12. ブログを参考に自分が作ってみたもの

13. 頂点を操作している

14. 頂点を操作している

15. 頂点を操作している
①
⑥
②
③
④
⑤

16. 頂点を操作している
public void ModifyMesh (VertexHelper verts)
{
var stream = new List<UIVertex>();
verts.GetUIVertexStream (stream);
//streamをループさせながら操作
※6つの頂点が1文字になることを意識
※1,6番目と3,4番目の頂点は同じ位置であることを意識
…
}

17. 低コスト化
public void ModifyMesh (VertexHelper verts)
{
var stream = ListPool<UIVertex>.Get ();
verts.GetUIVertexStream (stream);
//streamをループさせながら操作
…
}

18. ListPool
 一度作ったオブジェクトをstatic領域に確保
したまま使いまわすクラス
 Internalなので、外部から使えない…
 Bitbucketでソースは公開されているので、
利用可能
＜参考＞Unity用ビジュアルノベルツール「宴」
http://madnesslabo.net/utage/?page_id=6042

19. ところでこんなアセットがあります
シンプルで強力なUIテキストのための
アニメーションツール

20. 出来ること
移動・回転・拡縮・フェード・カラー

21. さらに
複数文字の場合、タイミングをずらしたり
同時にアニメーションしたり出来る。
一度きり・ループ・ピンポンの指定が可能
変化はAnimationCurveで指定可能

22. ・・・。
も
う
全
部
あ
い
つ
一
人
で
い
い
ん
じ
ゃ
な
い
か
な

23. アセットで “ぼよん”もほぼ再現出来た

24. 再現するために
AnimationCurveのプリセットにペナーイージングを加える
http://qiita.com/nobutaka-
takushima/items/dadba594ea3862953e51

25. こんなのは出来ないので要自作