[Unity] Visual Scripting でつくる電車ゲーム No.1 電車&路線を作る
![サムネ Unityビジュアルスクリプティングでつくる鉄道ゲームNo,1 電車を走らせ切替器付き線路を作る](https://digilab.tech/materials/wp-content/uploads/2023/11/サムネ.jpg)
教室で一人は必ずいると言っても過言ではない鉄道好きの子、そしておそらく「電車ゲーム」を作りたいと言われたことがあるでしょう。そんなときのためにUnity Visual Scripting使った鉄道ゲーム制作例を紹介いたします。
Cinemachineを使った線路を作る
まず、線路を作っていきます。今回はCinemachineをつかって線路をつくります。Unity Cinemachineといえば、カメラ制御で有名ですが、そのカメラ制御機能の一部 [ Dolly Cart ] を使って線路を作ります。
環境
・Intel Mac
・Unity 2022.3.12f1
1.アセットなどで線路を作って見かけの線路を作ります。
![VisualScriptingTrainGame-02 線路の見かけを作る](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-02.png)
2.次に見かけの線路に合わせてCinemachineのDolly Cartを作っていきます。
![VisualScriptingTrainGame-01 Cinemachine Dolly Cart を作る](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-01.png)
まず、HierarchyのCreate Emptyで空のゲームオブジェクトを作ります。
![VisualScriptingTrainGame-03 Cinemachine Dolly Cart を作る](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-03.png)
今回は作ったオブジェクトの名前を[CinemachinePath01]とします。
![VisualScriptingTrainGame-04 Cinemachine Dolly Cart を作る](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-04.png)
Inspectorで作ったオブジェクトにCinemachinePathコンポーネントを加えます。
![VisualScriptingTrainGame-04-02 CinemachinePath add compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-04-02.png)
![VisualScriptingTrainGame-05 Add CinemachinePath Compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-05.png)
↓のようにChinemachinePathができます。
![VisualScriptingTrainGame-06 Add CinemachinePath Compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-06-300x175.png)
CinemachinePathを目的の形にしていきます。
CinemachinePathはWaypoints(ウェイポイント)と呼ばれるもので形を作っていきます。
CinemachinePathはWaypoints(ウェイポイント)と呼ばれるもので形を作っていきます。
![VisualScriptingTrainGame-07 Add CinemachinePath Compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-07.png)
まず一周回転する線路を作ってきます。全部で8このウェイポイントを作って形をつくます。今回は↓のように設定してきます。
![VisualScriptingTrainGame-08 Add CinemachinePath Compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-08.png)
ゲームオブジェクトをPathにそってはしらせてみる
このCinemachin Pathを使うと簡単にオブジェクトを線路に合わせて動かすことができます。Cubeなどのゲームオブジェクトを作成しCinemachine Dolly Cartコンポーネントを追加し設定します。それだけでげーオブジェクトが線路に合わせて動き出します。
それでは、実際に動かしてみましょう。
Cubeなどのゲームオブジェクトを作り、Cinemachine Path上におきます。
![VisualScriptingTrainGame-09 Add CinemachinePath Compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-09.png)
![VisualScriptingTrainGame-12 Add CinemachinePath Compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-12-300x192.png)
Path上においたオブジェクトにCinemachine Dolly Cartコンポーネントを追加します。
![VisualScriptingTrainGame-10 Add CinemachinePath Compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-10.png)
Pathオプションに作ったCinemachine Pathを設定します。また、Speedを10(お好きな数字)にします。
![VisualScriptingTrainGame-11 Add CinemachinePath Compornent](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-11.png)
![VisualScriptingTrainGame-13 Cinemachine Dolly Cartを走らせてみた](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-13.gif)
電車をコントロールする
Visual Scriptingを使って電車をプレイヤーががコントロールできるようにしましょう。
電車のスピードをスライダーを使ってコントロールできるようにします。
まず、UIスライダーを追加しましょう。
まず、UIスライダーを追加しましょう。
![VisualScriptingTrainGame-14 Add UI Slider UIスライダーを追加](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-14.png)
インスペクターで位置を調整します。
![VisualScriptingTrainGame-15 Add UI Slider UIスライダーを追加](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-15.png)
邪魔にならない位置に配置します。
![VisualScriptingTrainGame-16 Add UI Slider UIスライダーを追加](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-16-300x244.png)
今回は↓のように右下に配置されるようにします。
![VisualScriptingTrainGame-17 Add UI Slider UIスライダーを追加](https://digilab.tech/materials/wp-content/uploads/2023/11/VisualScriptingTrainGame-17-1024x600.png)
つぎに電車(Cube)にVisual Scriptingを追加します。
まず、Cubeを選択します。
インスペクタ(Inspecter)でScript Machineコンポーネントを追加します。
インスペクタ(Inspecter)にScript Machineコンポーネントの他にVariablesというコンポーネント自動的に追加されます。
次に、Newボタンをおして新しいGraphを作ります。
次に、Newボタンをおして新しいGraphを作ります。
*Visual ScriptingではプログラムファイルのことをGraphとよびます。
表示されたウィンドウにGraph名(TrainController)を入力して保存します。
Edit Graphボタンを押すとGraphエディタが起動して編集できるようになります。
Sliderを代入するための変数(Variable)を作成します。
変数のValueにSliderを設定します。
スライダーを使ってスピードをコントロールしてきます。まずは、単純にスライダーの値をDolly Cartのスピードに代入して動かしてみましょう。
■もう少しだけ本格的な制御を作ってみましょう
【機能】
1.ワンハンドルマスコン風の操作をSliderで仮再現する
2.空気抵抗などの抵抗を簡易的に実装する
【機能】
1.ワンハンドルマスコン風の操作をSliderで仮再現する
2.空気抵抗などの抵抗を簡易的に実装する