Unity3m

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(Unity)uGUIテキストをコンソールみたいにスクロールさせる

ScrollTextリアルタイムにテキストを追加可能
Unityゲーム制作技術の備忘録を書いていきます。

最近、コンソール画面っぽい物をuGUIで作ったので、その作り方です。このUIの特徴は、「テキストが増えるとテキストがどんどん長くなる」「画面外のテキストは表示されない」「スクロールできる」という感じです。
チャット表示などにも使えるかもしれないですね。

それでは作っていきましょう!



- PanelとTextの作成 -
メニューの「GameObject -> UI」から、PanelとTextを作成します。TextはPanelの子として配置します。
こんな感じで。
text1.png
PanelとTextのRectTransformは次のように設定しています。参考までに。特に、TextのstretchとPivotに注意です(Panelにサイズを合わせている・基準点を左上にしている)。
text3.png

text4.png

実際にGameを見てみましょう。文章が途切れてしまっています。
text2.png

- Textのサイズを自動で変える -
Textの文字数によってサイズが自動で変わるようにします。
Textに、AddComponentでLayoutを選び、ContentSizeFilterを追加してください。
追加したContentSizeFilterコンポーネントのVerticalFitをPreferredSizeにしてください。
text6.png

サイズが自動で変わったので文字が見えるようになりました。
test5.png

しかし、はみ出てしまっていますね・・・

- はみ出たTextを表示しない -
Panelに、AddComponentでUIを選び、Maskを追加してください。
text7.png

はみ出た部分が消えてしまいますが、透明なだけで存在はしています。大丈夫です。
text8.png

- スクロール可能にする -
Panelに、AddComponentでUIを選び、ScrollRectを追加してください。Contentには最初に作ったTextオブジェクトをドラッグしてください。Horizontal(横移動)のチェックを無効にしてください。
text9.png

これでGameを再生すると、マウスホイールをクルクルしたりテキストをドラッグしてスクロールできます。
text10.png

- スクロールバーをつける -
メニューの「GameObject -> UI」から、Scrollbarを作成します。DirectionをBottomToTopに変え、縦方向のバーに直します。
text11.png

RectTransfrormをいい感じに変更し、位置や高さを調整します。
text13.png

PanelのScrollRectコンポーネントの、VerticalScrollbarに先ほど作成したScrollbarをドラッグします。
text12.png

これで、スクロールバーでテキストがスクロールするようになります。また、リアルタイムに文字が増えても、自動でスクロール領域が大きくなります。
text14.png

Panelの大きさ等を調整して見た目を変えることが出来ます。
以上です、お疲れ様でした。
関連記事

テーマ : フリーゲーム
ジャンル : ゲーム

tag : Unity

コメントの投稿

非公開コメント

参考になりました

できなくて困っていたやりたいことと、
全く同じ内容だったので、参考にさせていただきました。

望み通りの挙動ができました。
ありがとうございます。
プロフィール

DAIKI

Author:DAIKI
Unityゲーム作ってる大学生。PC・Androidゲームを制作してます。
+ twitter
+ Facebook
+ GooglePlayゲームリスト

カテゴリ
カウンター
検索フォーム
リンク
気になるサイトなど・・・
メールフォーム

名前:
メール:
件名:
本文:

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。