P2.玉転がし.18「UI で "Hello World"」
Armory で UI を扱うには、専用の Trait を持たせる必要がある。この Trait は今までのようにノードをつないでトントントン、とはしない。ちょっと注意。NodeTree ではなく Canvas というものを使う。で、・・・また面倒なことを覚えないといけないのか・・・と思わずに、ゆっくりやっていこう。
UI 用の Trait をオブジェクトに付ける
アルファの時は、UI 用の Trait はシーンにしか持たせられなかったように思ったけど、ベータになって、その辺のオブジェクトにも持たせることが出来るようになったみたいだ。
ということで、UI 用 Trait 専用のオブジェクトを何か追加し、Trait も付けてしまおう。オブジェクトは何でもイイ。だた、絵的に画面から見えないようにした方がイイかもね。
❶ ゴチャゴチャしないよう、コレクション作成。
❷ その中に、UI 制御用のオブジェクトとして Cube を追加。(何でもイイ)
❸ 普通に Trait を付けるように、Cube を選択して > プロパティエディタ > Object タブ > Armory Traits > [+] ボタンクリック。
❹ ここで、[UI] を選択し、[OK]。(Nodes じゃないぞ。ま、つまり、UI 専用の Trait を付けたって事だ。)
❺ [New Canvas] をクリック。(いつものだと、Tree ってなってるところが、Canvas(キャンバス)ってなってるね。)
❻ (よかったら、名前を変えてもいいぞ。)で、[OK] 押す。これで、 この名前のCanvas を1つ作ったという事になる。
❼ 未編集の Canvas が Cube(オブジェクト)に連結されたので、[Edit Canvas] から編集に入ろう。(なんで Python のアイコン入ってんのかねー?)
ど~ん。
こんな感じに結構デカイ窓が別に開く。これが Canvas。あーメンドクサ、と思ったら負けだ
ザックリ Canvas
ザックリ見てみよう。
❶ ツールボタン: ここから Text とか Button とか画面に表示させたいものを持ってくる感じだな。お絵かきソフトで言うツールパレットか。
❷ メイン画面: ここに表示されたものがゲーム画面に表示される。ツールボタンを押して出したいモノを選んだら、メイン画面の左上にポコッと出るので、ドラッグして好きな所に持ってくる感じ。試しに Text を出して、ドラッグしてみた。
❸ [Save]ボタン: 出来上がったら Save しとけ。じゃないとせっかく作ってもパー。
❹ Canvas 自身の設定。大きさ、名前を変えられるみたい。(名前は❽に表示される)
❺ Outliner: Blender と同じだな。画面にポンポン置いたものがここに並ぶ。
❻ 試しに置いた Text のプロパティ。[Up][Down]ボタンは、Outlinerでの表示順みたいだな。あとは、見たままだな。位置とか大きさとか色とか・・・。
❼ Timeline: おそらくアニメさせることが出来るんだろーなー。オープニング画像とか上から下にずらすとか。(やり方知らんけど・・・)
❽ Canvas の名前。。。(これ必要?)
って感じかな。ザックリだけど。
UI Text で "Hello World"
では、Canvas に置いた Text で "Hello World" してみよう。
❶ Outliner 上から、でツールボタンから追加した Text を選択。
❷ ココが画面表示内容。"Hello World" に変更。
❸ 位置と大きさ変更。(なぜか、うまく大きさを変えるのは難しい・・・、ので手打ちかな)
(ドラッグで移動させる場合は、❹でスナップ設定があるので、気になる場合は変えた方がイイかも。デフォだと20づつ。)
色は赤にしたぜ。出来たら、[Save] ボタン押すの忘れないように。
で、[▶ Play]。
表示されとるね。OK。
本日の確認
■ 次回、"Hello World" の部分をクルクルカウンターにするかな。