9日目：デジタル時計とウェルカムボードで学ぶテキスト表示とアバター情報取得

この記事はアドベントカレンダー「【VCI】テーマパークを作ろう 」の9日目の記事です。

今回の内容

今回はデジタル時計とウェルカムボードを作成しながら以下の内容を学んでいきます。
　・VCI専用のTextオブジェクトの使い方
　・自分のアバター情報の取得方法

VCITextの設定

VCIでテキストを扱いたい場合はVCI専用のTextオブジェクトを使用します。
詳細は以下の公式ページを参照ください。
　・ VCI Text

今回は時間の表示用と名前の表示用の2つを作っていきたいと思います。

VCIテキストはHierarchyで右クリック>VCI>Textから作成できます。
初めて作成する場合は以下のウィンドウが表示されますので、上から順番に押して行って下さい。

すると「Text」というオブジェクトが作成されます。なぜかわかりませんが選択した位置ではなくRootに作成されるので適切な場所へ移動して下さい。

いろいろと設定項目がありますが、Vキャスには反映されない項目も多数あります。
詳細は公式wikiを御覧ください。
今回はフォントサイズ・色・太字あたりを変更しました。

時計の方は1つですが、ウェルカムボードの部分は右寄せ・中央・左寄せを使い分けたかったため3つに分けて重ねてます。
上段が固定文字「ようこそ」、中段はユーザーの名前表示用、下段が固定文字「さん」です。

コードの設定

ここからはVキャス及びエディタでの作業となります。

時計の表示(マルチ動作未確認)

今回はテキストを表示したいため、以下のページを参考にコードを書いていきます
　・ vci.assets
　　(SetTextという関数を使います)

上記ページを参考に作成したコードが以下のようになります。

---すべてのユーザーで毎フレーム呼ばれる
function updateAll()
  -- Text_Clockに時間を表示する。"%H:%M:%S"は00:00:00のフォーマットで文字を出力するということ
  vci.assets.SetText("Text_Clock",os.date("%H:%M:%S"))
end

updateというVCIの所有者のみ実行される関数内で_ALL_SetTextを呼ぶ方法もありますが、おそらくそちらは所有者で処理⇒他の人に反映という形なので、各自処理する上記の例のほうが軽いと思います。
また上記の例だとタイムゾーンが異なっても各自正しい時間が出ると思います(確認中)

■ 補足：処理の軽減について
今回は毎フレーム処理をしていますが、実際には秒単位までしか表示がないので、ほとんどのフレームは同じ内容で上書きをする無駄な処理となっています。1秒に1回または0.5秒に1回くらいの更新頻度にすれば結果はほぼ変えずテキスト更新回数を削減することができます。(詳細は こちら 参照)
試してないですがコルーチンという機能を使用しての作成も可能だと思います。
ただし、今回とは違い処理が重めの場合は、処理するフレームを減らすと逆に処理するフレームだけ他のフレームに比べピンポイントで重くなるためカクカクするように感じてしまうかもしれません。やりながら調整していきましょう。

ウェルカムボードの名前表示(マルチ動作未確認)

今回は各ユーザーの名前を表示するため、以下のページを参考にコードを書いていきます。
　・ vci.studio(ExportStudio)
　　(GetLocalAvatarという関数を使います)

上記ページを参考に作成すると以下のようになります。

-- コードを実行しているアバターの情報を取得
local avator = vci.studio.GetLocalAvatar()
-- 取得した名前をTextに反映
vci.assets.SetText("Text_Welcome",avator.GetName())

しかし、アバター読込中などの場合はGetLocalAvatar()が取得できずにnil(空)が帰ってくる場合があります。
そのため、毎フレームアバター情報が取得できているかをチェックし、アバター情報が取得できたら名前を反映するようにコードを以下のように修正しました。(時計のコードも入ってます)

--名前を反映したかのフラグ
local isLoadedName = false

---アイテムを生成したユーザーで毎フレーム呼ばれる
function updateAll()
  --名前を反映したフラグが立っていなければ処理を実施
  if not isLoadedName then
    local avator = vci.studio.GetLocalAvatar()
    --アバターが取得できてれば処理を実施
    if avator then
      -- 取得した名前をTextに反映
      vci.assets.SetText("Text_Welcome",avator.GetName())
      --名前を取得したフラグを立てる
      isLoadedName = true
    end
  end
  -- Text_Clockに時間を表示する。"%H:%M:%S"は00:00:00のフォーマットで文字を出力するということ
  vci.assets.SetText("Text_Clock",os.date("%H:%M:%S"))
end

■ 補足
おそらく今回のような「なにか条件に当てはまるまで繰り返し実施し、条件に当てはまったら1回だけ実施してその後はなにもしない」様な処理の場合は、すこし難しいですがコルーチンという機能を使って書くほうが適しているかと思います
時間があったらコルーチンの例も記載しようと思います

動作確認

あとはVキャスに入って実際の動作を確認すれば完了です。
※今回はマルチでの動作確認はできておりません。

今回は以上です

終わりに

いかがでしたでしょうか？
今回は自分のアバター情報を取得しましたが、別の関数を使えばRoom内のアバターの位置情報や名前情報を取得することが可能です。
次回はスカイドームの作り方について書く予定です。