シンプルなストップウォッチギミックをつくる手順 #cluster

シンプルなストップウォッチの作り方を教えて欲しいと相談されたのでまとめてみました。
分:秒 表示ができるストップウォッチを作る事ができます。

あと、globalギミックを使わないので ワールド内に複数 配置しても動作するようになります。

https://youtu.be/ib1Vjsz_Lvc

設置先ワールド

シンプルなストップウォッチギミック
https://cluster.mu/w/28836e20-675f-47ed-84dd-8ef1f5d762ea

Creator Kit 使うコンポーネント

Item Timer

Item Logic

Set Text Gimmick

Interact Item Trigger

ストップウォッチ アイテム 概要

下記の内容の アイテムを作成していきます。

1. Startシグナルを受け取りタイマー開始 1秒毎 に実行する
2. 変数 isActive が true か確認 CountUp シグナルを発行する
3. CountUp ジグナルを受け取ったら 変数 Countを加算する
4. Startスイッチをインタラクトするとこでカウント開始
5. 停止スイッチをインタラクトすることでカウント停止
6. リセットスイッチをインタラクトするとでカウントリセット

Stopwatch ギミックを作る

1. Hierarchyで右クリック GameObject を作成して Stopwatch と名前を変更する
   1. Transformを調整
      Pos X:0 Y:1.5 Z:0 Scale 0.02

2. 1秒ループするタイマーを作成します。Inspector で Add Component で Item Timer を追加
   1. Key: Start
   2. Triggers を 2項目 追加
      1. Key: Fire Type: Signal <- 1秒ごとに Fire シグナルが発行される
      2. Key: Start Type: Signal

3. 変数 isActive の値が true か確認するロジックを作ります。Inspector で Add Component で Item Logic を追加
   1. Key: Fire <- 1秒ごとに Fire シグナルを受け取る
   2. • を押してロジックを追加
        Target:this Key: CountUp Type: Signal
        演算子: = 引数: RoomState Bool this isActive

4. CountUp ジグナルを受け取ったら 変数 Countを加算するロジックを作ります。
   Inspector で Add Component で Item Logic を追加
   1. Key: CountUp <- CountUp シグナルを受け取る
   2. • を押してロジックを追加
        Target:this Key: Count Type: Integer
        演算子: Add
        引数: RoomState Integer this Count
        引数: Constant Integer 1000 <- 表示フォーマットで日時として利用するために1000を加算する

Stopwatch 時間を表示する

シンプルなストップウォッチ表示として テキストエリアに 00:00 の分秒を表示できるようにしてみましょう。

1. Hierarchy の Stopwatch 以下に UI -> Canvas を追加
   2. Hierarchy 上に不要な EventSystem オブジェクトができるので削除する
   3. Canvas の設定を調整
   Render Mode: World Space <- 重要なので忘れずに!
   Rect Transform X:0 Y:0 Width: 200 Height: 60
2. Hierarchyの Canvas 右クリック UI -> Legacy -> Text でテキスト欄をつかする
   3. Text の設定を調整
   Rect Transform X:0 Y:0 Width: 200 Height: 60
   Text: 00:00 Alignment: 中央よせ Best Fit: true (チェックをつける)
3. Canvas -> Text に 変数 Count を表示するコンポーネントを追加数る
   Inspector で Add Component で Set Text Gimmick を追加
   Target: Item Key: Count Item: Stopwatch
   Type: Signal
   Format: {0:mm:ss} <- Signal を 分秒 で表示する文字フォーマットを指定

開始スイッチ

インタラクトすると タイマーが開始される スイッチを作ります。

1. Hierarchyで右クリック GameObject を作成して StartSwitch と名前を変更する
2. Cube を追加
   Pos X:-1 Y:1 Z:0 Scale 0.03
3. StartSwitch に Inspector で Add Component で Interact Item Trigger を追加
   1. • を押して trigger を追加
        Target: SpecifiedItem Key: isActive Value: Bool true(チェックをつける)
        Target Item: Stopwatch <- Hierarchy の Stopwatch を設定
   2. • を押して trigger を追加
        Target: SpecifiedItem Key: Start Value: Signal
        Target Item: Stopwatch <- Hierarchy の Stopwatch を設定

停止スイッチ

インタラクトすると タイマーが停止される スイッチを作ります。

1. Hierarchyで右クリック GameObject を作成して StopSwitch と名前を変更する
2. Cube を追加
   Pos X:0 Y:1 Z:0 Scale 0.03
3. StartSwitch に Inspector で Add Component で Interact Item Trigger を追加
   1. • を押して trigger を追加
        Target: SpecifiedItem Key: isActive Value: Bool false(チェックを外す)
        Target Item: Stopwatch <- Hierarchy の Stopwatch を設定

リセット

インタラクトすると タイマーがリセットされる スイッチを作ります。

1. Hierarchyで右クリック GameObject を作成して ResetSwitch と名前を変更する
2. Cube を追加
   Pos X:1 Y:1 Z:0 Scale 0.03
3. StartSwitch に Inspector で Add Component で Interact Item Trigger を追加
   1. • を押して trigger を追加
        Target: SpecifiedItem Key: Count Value: Integer 0
        Target Item: Stopwatch <- Hierarchy の Stopwatch を設定
   2. • を押して trigger を追加
        Target: SpecifiedItem Key: isActive Value: Bool false(チェックを外す)
        Target Item: Stopwatch <- Hierarchy の Stopwatch を設定

まとめ

Item Logic を利用することで不具合が少なくシンプルにストップウォッチを作ることができます。
停止スイッチの処理を On Collide Item Trigger にするとクリアまでにかかった時間を表示したりにも使えるはず。

表示処理の文字フォーマット 複合書式指定 の使い方も覚えると他でもつかて便利だと思います。

( シンプルなので 🍆さんや🐸さんもこれでストップウォッチが作れるハズ... )