読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

UnityのuGUIでアナウンス的な表現を作ってみる

2D Unity GUI(uGUI/NGUI/旧UI) おもしろ演出、演出の強化

以前にもチラっと紹介しましたが、改めてuGUIでのアナウンス表示の作成について紹介しておきます。

 

内容はこんな感じです。

f:id:tsubaki_t1:20150217224746g:plain


逆引き、UnityのuGUIのレイアウトトレーニング(uGUI RectTransform入門その2) - テラシュールブログ

 

作り方について

まずゲーム画面があるとします。

f:id:tsubaki_t1:20150217225659p:plain

次にGameObject>UI>TextでTextを作成します。作成したTextにはAnimatorコンポーネントContentSizeFitterを追加します。

ContentSizeFitterはHorizonalFitとVerticalFitをPreferred Size*1に設定します。

 

f:id:tsubaki_t1:20150217230028p:plain

アニメーションを作成します。TweenがあるならTweenでも良いですし、コードベースで直しても良いです*2。今回はアニメーションを使います。

UnityのuGUIで「UIのアニメーション制御」 - テラシュールブログ

 

まず時間が0の時はAnchorMin.xとAnchorMax.xは0、pivotは-0.1、時間が3*3の時はAnchorMin.xとAnchorMax.xは1、pivotは0に設定します。

あと適当にテキストの色に透明を付与します。

f:id:tsubaki_t1:20150217230531p:plain

f:id:tsubaki_t1:20150217230639p:plain

これで完成です。テキストを適当に変更しても、最後まで表示されるアナウンスが出来ました。

理屈と調整

簡単に言えばRectTransformのAnchorとpivotの位置を調整して作ります。例えば下のGifが分かりやすいです。

AnchorとPivotの位置が最初は左下にあり、最終的には右端となる事がわかると思います。Anchorは「親のRectTransformを基準にUIの座標を設定するもの」、Pivotは「UI内の起点座標を0-1の間で設定するもの」なので、この2つを使うと「親を起点にUIの左端と右端を設定するもの」が作れます。

f:id:tsubaki_t1:20150217225014g:plain

後はContentSizeFitterでRectTransfromの大きさを内包するコンテンツのサイズにまで広げてやれば、長い文章でも最初から最後まで表示できるアニメーションを作ることが出来ます。

f:id:tsubaki_t1:20150217225426g:plain


UnityのuGUIのレイアウト調整機能について解説してみる(RectTransform入門) - テラシュールブログ

不要なキー(例えばAnchorMin.yやpivot.y等)は削除してしまえば、画面上のアナウンスと画面下のアナウンスが単一のAnimationClipから作れるので若干便利です。

f:id:tsubaki_t1:20150217231841p:plain

 
pivotの位置を「アニメーション終了時にUiが画面外にあるような値を設定」すると、最終的にすべての文字が画面外へ行くアナウンスが作れます。

f:id:tsubaki_t1:20150217231620g:plain

速度を操作するにはCurveモードで設定すればOKです。Curveモードの角度調整云々はマニュアル「曲線の編集」が分かりやすいです。

f:id:tsubaki_t1:20150217231220p:plain

f:id:tsubaki_t1:20150217232026p:plain

*1:preferred size:推奨サイズ

*2:要するに中間補正出来る方法ならなんでも良いです

*3:スクロール時間