【Unity】VisualScriptingでStopWatch作ってみた

たたら

2024年12月22日 09:08

　こんにちは、今回からUnityで製作したものを紹介していこうと思います。初回はStopWatchを作ってみました。
バージョンは6000.0.26f1。テンプレートはUniversal2Dを使用しています。

GUIの作成

タイマー

　最初にヒエラルキービューに時間を表示するTextオブジェクトを追加します。

　選択するとCanvasオブジェクトが作成され、その下にTextオブジェクトが追加されます。この時にTMP(Text Mesh Pro)データのインポートが求められるのでインポートします。

　描画位置をCanvasオブジェクトに合わせます。Canvasオブジェクトのインスペクタービュー内にある「Canvas」コンポーネント内の「Rendaring Mode」を「Screen Space - Camera」に変更し、その下に飛び出してきた「Render Camera」の項に「Main Camra」オブジェクトを設定します。これでMain Camraオブジェクトの描画範囲がCanvasオブジェクトに重なります。

　Textオブジェクトの「Rect Transform」コンポーネント内をPos X : 0、Pos Y : 90、Pos Z : 0 。Width : 800、Height : 200に変更します。

　位置を決めたのでTMPコンポーネントの設定をしていきます。デフォルトの「New Text」から「00:00:00.000」に、フォントを太字化、中央揃え、サイズに変更します。

ボタン

　ストップウォッチの画面が出来たので次に次にボタンを作成します。Textオブジェクトオブジェクトと同様の手順でButtonオブジェクトを作成し、そのオブジェクトをプロジェクトビューにD&Dでプレハブ化します。
　プレハブ化したオブジェクトをヒエラルキービューに複製し、それぞれのオブジェクト名とTextを「START / STOP」、「RESET」に変更します。

「START / STOP」がPos X : 210、Pos Y : 120Pos Z : 0。「RESET」はPos Yを反転。
フォントサイズは45．

Visual Scripting

　GUIはこれで完成なので次はVisualScriptingでプログラミングしていきます。
　時間表示のオブジェクトとプレハブ化したButtonオブジェクトのインスペクタービューにScript Machineコンポーネントを追加します。これでヒエラルキービューにある二つのButtonオブジェクトにもScript Machineコンポーネントが追加されます。

　次にプロジェクトビューにScript Graphを三個追加し、名前を「Timer」、「Switch」、「Reset」とします。これらのGraphをそれぞれ「Timer」オブジェクト、「ON / OFF」オブジェクト、「RESET」オブジェクト内のScript Machineコンポーネントの欄にD&Dします。

シーン変数の作成

　Graphのいずれかを開くとScript Graphビューが開きます。開いたビュー端のグラフビューで変数を作成することが出来ます。ここで「Switch」、「Reset」、「Seconds」、「Minutes」、「Hour」とシーン変数を作成します。

それぞれの変数型は、「Switch」をBoolean,、
「Reset」と「Seconds」はFloat、
「Minutes」と「Hour」はInteger 。

Timerスクリプトの作成

　では経過時間を表示するTimerを設定します。

上段
　ノード
　「On Update」⇒「Float To String」(Format:00,000)
　「Float To String」⇒「Integer To String」(Format:00)①
　「Integer To String」①⇒「Integer To String」(Format:00)②
　「Integer To String」②⇒「Text Mesh Pro Set(UGUI) Set Text」
　
　値
　「Float To String」⇒「Set Variable」(Seconds)
　「Integer To String」①⇒「Set Variable」(Minutes)
　「Integer To String」②⇒「Set Variable」(Hour)
　「Text Mesh Pro Set(UGUI) Set Text」⇒「Formula」(引数：3)
　　「Formula」 A⇒「Integer To String」②
　　「Formula」 B⇒「Integer To String」①
　　「Formula」 C⇒「Float To String」

下段
　ノード
　「On Update」⇒「If」(True)①
　「If」①⇒「Set Variable」(Minutes)①
　「Set Variable」①⇒「Set Variable」(Seconds)②
　「Set Variable」②⇒「If」(True)②
　「If」②⇒「Set Variable」(Hour)③
　「Set Variable」③⇒「Set Variable」(Minutes)④
　
　値
　「If」①⇒［Greater or Equal」
　　［Greater or Equal」⇒「Get Variable」(Seconds)
　　［Greater or Equal」⇒「Float Literal」(Value：60)
　「Set Variable」(Minutes)①⇒「Add」(引数：2)
　　「Add」⇒「Get Variable」(Minutes)
　　「Add」⇒「Integer Literal」(Value：1)
　「Set Variable」②⇒「Float Literal」(Value：０)

　「If」②⇒［Greater or Equal」
　　［Greater or Equal」⇒「Get Variable」(Minutes)
　　［Greater or Equal」⇒「Integer Literal」(Value：60)
　「Set Variable」③⇒「Add」(引数：2)
　　「Add」⇒「Get Variable」(Hour)
　　「Add」⇒「Integer Literal」(Value：1)
　「Set Variable」④⇒「Integer Literal」(Value：0)

内容はSeconds変数が60になるとMinutes変数に1を足し自身を0に、Minutes変数が60になるとHour変数に1を足し自身を0に。

Switch スクリプトの設定

上段
　ノード
　「On Button Click」⇒「If」
　「If」(True)⇒「Set Variable」①
　「If」(False)⇒「Set Variable」②

　値
　「If」⇒「Equal」
　　「Equal」⇒「Get Variable」(Switch)
　　「Equal」⇒「Boolean」(False)
　「Set Variable」①⇒「Boolean」(True)
　「Set Variable」②⇒「Boolean」(False)
　
下段
　ノード
　「On Update」⇒「If」
　「If」⇒「Set Variable」(Seconds)

　値
　「If」⇒「Equal」
　　「Equal」⇒「Get Variable」(Switch)
　　「Equal」⇒「Boolean」(True)
　「Set Variable」(Seconds)⇒「Equal」
　　「Equal」⇒「Get Variable」(Seconds)
　　「Equal」⇒「Get Delta Time」

　内容は、ボタンが押された時のBoolian変数の正否時の処理と、正だった時は変数Secondsに経過する時間を足すスクリプトです。

Resetスクリプトの設定

　ノード
　「On Button Click」⇒「Set Variable」(Switch)
　「Set Variable」(Switch)⇒「Set Variable」(Seconds)
　「Set Variable」(Seconds)⇒「Set Variable」(Minutes)
　「Set Variable」(Minutes)⇒「Set Variable」(Hour)
　
　値
　「Set Variable」(Switch)⇒「Boolean Literal」(Value：OFF)
　「Set Variable」(Seconds)⇒「Float Literal」(Value：0)
　「Set Variable」(Minutes)⇒「Integer Literal」(Value：0)
　「Set Variable」(Hour)⇒「Integer Literal」(Value：0)

　内容はボタンが押された時Boolean関数をOFFに、Seconds関数、Minutes関数、Hour関数を0に。