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

投稿者:

「Creators Guide」は、バーチャルSNS「cluster」で「つくる」ことにチャレンジしてみたい方に向けた導入ガイドです。

Creators Guideで読むことができるすべての情報はこちらにまとめています。


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

上:24h 表示、中:日月表示、下:デフォルト表示

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

目次

サンプルパッケージ

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

ダウンロードはこちら

clusterにアップロードするための事前準備

まず、clusterにワールドをアップロードできる環境を事前に用意してください。
準備は下記リンク先を参考にしてください。

はじめてのワールド作成

上記で紹介する方法以外ではテンプレートプロジェクトを利用するのがおすすめです。下記のページからテンプレートプロジェクトをダウンロードして、Unityで開くことで、clusterへアップロードする環境まで一気に準備することができます。

https://docs.cluster.mu/creatorkit/download/template-project/

時計を表示するための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 マニュアルを参考にサイズを変更してください。

Canvas の設定項目

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

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

  • さきほど作成した Canvas 内にある Canvas Scaler の Dynamic Pixel Per Unit を3 にします。
左:Dynamic Pixel Per Unit を 1 に設定
右: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 からはみ出てしまっていても表示されるようになります。

Text の設定項目

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” を設定します。
TimeTrigger の設定項目
  • 先ほど作成した 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}」を入力してください。これが現在時刻の表示になります。
Set Text Gimmickの設定項目

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

正しく表示された状態

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

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

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

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

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

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



最後に公式による記事や多くのクリエイターの皆さんによるドキュメントやコミュニティを紹介します。
ぜひ活用して自分だけのワールドを制作してみましょう!

▼ 「Cluster Creator Kit」の全てが分かる公式ドキュメント
Cluster Creator Kit ドキュメントhttps://docs.cluster.mu/creatorkit/

▼ クリエイターによる投稿記事まとめ
ワールド制作部https://note.com/cluster_official/m/m1fd772ab8f45
アバター制作部https://note.com/cluster_official/m/m6b18e343f35c
イベント制作部https://note.com/cluster_official/m/m7155e6f6887f

▼ 分からないことがあればコミュニティを活用してみましょう!
Cluster Creator Community Discord
https://discord.gg/DHQmAfDhkt