Creator Kitを使って、デジタル時計をつくる

今回はCreator Kitを用いて、24時間表示や日付を表示するデジタル時計を作成します。つくり方は簡単なので、ワールドにぜひ取り入れてみてください！

▼ 本記事で紹介する手順を動画でも公開しています。

サンプルパッケージ

実際にこの記事でつくるデジタル時計を配布します。
記事を見ながら、アイテムの構成を確認してみてください。

ダウンロードはこちら

時計を表示するためのCanvasを用意する

それでは、デジタル時計を作成していきます。
まずは時計を表示するためのCanvasを準備します。

• まず最初に Hierarchy で右クリックか上部メニューの「GameObject」から「UI→Text」でテキストを表示するための Canvas と Text を作成します。

同時に生成される Event System は削除しておいてください。cluster では、残ったままだとワールドアップロード時にエラーが表示されアップロードができなくなってしまいます

Layer を Default に変更しておくとワールドにした際にも、テキストUI を cluster 内のカメラで撮影できるようになります。

• 次にCanvasコンポーネントの Render Mode を Screen Space から World Space にします。
• World Space に変更すると Width , Height が編集可能になるのでそれぞれ 800 に変更します。
• Canvas の Scale は (x, y, z) = (0.0025, 0.0025, 0.0025) に調節しておきます。

この値に設定することによって 2m ✕ 2m の Canvas を作成することができます。さらに大きさを調節したい場合は、Unity マニュアルを参考にサイズを変更してください。

• World Space UI の作成 – Unity マニュアル

くっきりとしたテキストUIにする

このまま進めてしまうと表示される時計がぼやけてしまうので、くっきり表示されるように設定していきます。

• さきほど作成した Canvas 内にある Canvas Scaler の Dynamic Pixel Per Unit を3 にします。

これでくっきり表示されるようになりました。テキストのサイズも調整しておきます。

• 次に Text の Width に 800 、 Height に 120 を入力します。
• 任意の文章をText 欄に入力し、Font Size を “100” に設定します。

この数値にしたときテキストUIは 0.2 x 0.2 m くらいの大きさになります。

• もし文字が途中で途切れたり、表示されなかったときは、Horizontal Overflow / Vertical Overflow の項目をどちらとも “Overflow” に変更しましょう。

これを行うことでテキストが Canvas からはみ出てしまっていても表示されるようになります。

Creator Kitを使ってデジタル時計をつくる

最後にCreator Kitを使って時間を表示するようにしていきます。

• Hierarchy を右クリックし、Create Empty を選択して空のゲームオブジェクトを作成します。
• 名前は TimeTrigger に変更します。
• Add Component から On Create Item Trigger と Item Timer を追加します。

※On Create Item Trigger は設定されたアイテムが生成された時に通知するトリガーです。
ワールド上に置いてある場合、最初に人が入室したタイミングでメッセージが通知されます。
https://docs.cluster.mu/creatorkit/trigger-components/on-create-item-trigger/

※Item Timer は指定時間後にアイテムへメッセージを通知するオペレーションです。
Item Timerは、メッセージを読み取り、指定時間後にそれがついているアイテムへメッセージを通知します。
https://docs.cluster.mu/creatorkit/operation-components/item-timer/

• On Create Item Trigger と Item Timer の Target を This 、Value を Signal に変更して、Key を “UpdateTime” に設定します。
• Item TimerのTriggersのSizeを1に変更すると、Targetが表示されるので “UpadateTime” を設定します。

• 先ほど作成した Text を選択します。Text に Add Component から「Set Text Gimmick」をアタッチします。

※Set Text Gimmick は読み取ったメッセージをTextコンポーネントに設定するギミックです。
https://docs.cluster.mu/creatorkit/gimmick-components/set-text-gimmick/

• Target を Item、 Key を “UpdateTime”、Parameter Type を Signal にします。
• Item の欄には先程作成した TimeTrigger をドラッグアンドドロップして割り当ててください
• Formatには「{0}」を入力してください。これが現在時刻の表示になります。

これで時間を表示できるようになりました。
ここで正しく機能しているのか確認してみましょう！動画では[2:38]からのシーンです。画面上部の再生ボタン「▶」を押してプレビューモードにしてください。正しくトリガーを設定できていると Scene 上に配置した Text が現在時刻を表示します。

ちゃんと表示されましたね！

また、Set Text Gimmick は Signalメッセージの送られたタイミングなどの表示もできます。
例えば Format 欄に「{0:t}」を入力すると24時間表示になります。「{0:d}」と入れると年月日表示になります。

他にも違う形式で時刻を表示する方法もあります。

詳しくは「Set Text Gimmick」のドキュメントをご覧ください。

標準の日時書式指定文字列
カスタム日時形式文字列

以上、Creator Kitを用いて24時間表示や日付を表示するデジタル時計を作成する方法の紹介でした。ぜひワールドづくりに取り入れてみてください！