俺に解るように説明する "Armory Engine" 入門+

ゲームエンジン Armory Engine (Armory3D) の使い方を手探りで学んで入門しようって感じかな。

P2.玉転がし.18「UI で "Hello World"」

f:id:ore2wakaru:20190131222419p:plain

Armory で UI を扱うには、専用の Trait を持たせる必要がある。この Trait は今までのようにノードをつないでトントントン、とはしない。ちょっと注意。NodeTree ではなく Canvas というものを使う。で、・・・また面倒なことを覚えないといけないのか・・・と思わずに、ゆっくりやっていこう。

UI 用の Trait をオブジェクトに付ける

アルファの時は、UI 用の Trait はシーンにしか持たせられなかったように思ったけど、ベータになって、その辺のオブジェクトにも持たせることが出来るようになったみたいだ。

ということで、UI 用 Trait 専用のオブジェクトを何か追加し、Trait も付けてしまおう。オブジェクトは何でもイイ。だた、絵的に画面から見えないようにした方がイイかもね。

f:id:ore2wakaru:20190131194219p:plain

 ゴチャゴチャしないよう、コレクション作成。

 その中に、UI 制御用のオブジェクトとして Cube を追加。(何でもイイ)

f:id:ore2wakaru:20190131200057p:plain

 普通に Trait を付けるように、Cube を選択して > プロパティエディタ > Object タブ > Armory Traits > [+] ボタンクリック。

f:id:ore2wakaru:20190131200305p:plain

 ここで、[UI] を選択し、[OK]。(Nodes じゃないぞ。ま、つまり、UI 専用の Trait を付けたって事だ。)

f:id:ore2wakaru:20190131201425p:plain

 [New Canvas] をクリック。(いつものだと、Tree ってなってるところが、Canvas(キャンバス)ってなってるね。)

f:id:ore2wakaru:20190131201922p:plain

 (よかったら、名前を変えてもいいぞ。)で、[OK] 押す。これで、 この名前Canvas を1つ作ったという事になる。

f:id:ore2wakaru:20190131202914p:plain

 未編集の Canvas が Cube(オブジェクト)に連結されたので、[Edit Canvas] から編集に入ろう。(なんで Python のアイコン入ってんのかねー?)

ど~ん。

f:id:ore2wakaru:20190131203323p:plain

こんな感じに結構デカイ窓が別に開く。これが Canvas。あーメンドクサ、と思ったら負けだ

ザックリ Canvas

ザックリ見てみよう。

f:id:ore2wakaru:20190131212448p:plain

 ツールボタン: ここから Text とか Button とか画面に表示させたいものを持ってくる感じだな。お絵かきソフトで言うツールパレットか。

 メイン画面: ここに表示されたものがゲーム画面に表示される。ツールボタンを押して出したいモノを選んだら、メイン画面の左上にポコッと出るので、ドラッグして好きな所に持ってくる感じ。試しに Text を出して、ドラッグしてみた。

 [Save]ボタン: 出来上がったら Save しとけ。じゃないとせっかく作ってもパー。

 Canvas 自身の設定。大きさ、名前を変えられるみたい。(名前はに表示される)

 Outliner: Blender と同じだな。画面にポンポン置いたものがここに並ぶ。

 試しに置いた Text のプロパティ。[Up][Down]ボタンは、Outlinerでの表示順みたいだな。あとは、見たままだな。位置とか大きさとか色とか・・・。

 Timeline: おそらくアニメさせることが出来るんだろーなー。オープニング画像とか上から下にずらすとか。(やり方知らんけど・・・)

 Canvas の名前。。。(これ必要?)

って感じかな。ザックリだけど。

UI Text で "Hello World"

では、Canvas に置いた Text で "Hello World" してみよう。

f:id:ore2wakaru:20190131220426p:plain

 Outliner 上から、でツールボタンから追加した Text を選択。

 ココが画面表示内容。"Hello World" に変更。

 位置と大きさ変更。(なぜか、うまく大きさを変えるのは難しい・・・、ので手打ちかな)

f:id:ore2wakaru:20190201222700p:plain

(ドラッグで移動させる場合は、でスナップ設定があるので、気になる場合は変えた方がイイかも。デフォだと20づつ。)

色は赤にしたぜ。出来たら、[Save] ボタン押すの忘れないように。

で、[▶ Play]

f:id:ore2wakaru:20190131221904p:plain

表示されとるね。OK。

本日の確認
  • UI には UI 用の Trait。(Canvas
  • Canvas 作成はツールボタンクリックから。さいごは[Save]。

 次回、"Hello World" の部分をクルクルカウンターにするかな。