UnityのVisual Scriptingで作ったミニゲームの中身(グラフ)を書き残しておきます。

私と同じ初心者の方のなにかしらの参考になればいいのですが……(私がゲーム作りを始めたころは、完成しているゲームの中身を解説している記事が少なく困っていたので)。

C♯は現時点では全く分かりませんし、正規のプログラミング教育は受けていません。趣味でやってる初心者の成長記録です。


作品はこちら ブラウザで無料で遊べます。

このゲームはあほげー(1日であほなゲームを作るイベント)のお題「たる」で制作しました。

反省文(振り返り)も書きました。

Unityのバージョン:2021.3.21f1


概要

タルが10個並んでいて、裏に漢字のへんやつくり(全8種)がランダムに書いてあり、それをあわせて「木尊」にするゲームです。あわなくてもそれはタルになるという世界線です。

全てのたるをめくるか「木尊」を作るとクリアです。

作り始め

3Dテンプレートを選択して始めます。

素材(アセット)の配置や文字の配置方法などは割愛します。素材はほとんどアセットストアといらすとやで用意しました。

下準備

  • 本編のCameraのインスペクターにPhysics Raycastを追加(クリックしたときにレイを飛ばす)
  • タルのインスペクターにMesh Colliderを追加(これがないとタルをクリックしても反応しない)
  • 空のオブジェクトにグラフとAudio sourceを追加
  • DOTweenのノードが出るように設定しておく

下記の記事が大変見やすいです。

DOTweenは無料版の機能しか今回使っていませんが、Pro版がおすすめです。ノーコード民にも優しいほぼ必須アセット。

シーン

タイトルとゲーム部分でシーンを分けています。思い返せばシーンは1つで十分でした。

タイトル部分

左の樽はDOTweenのインスペクターで動かしています。

ここでは「はじめる」ボタンと、音量調整のスライダーがあります。空のオブジェクトを作り、インスペクターでVisualScriptingのグラフを追加します。また、同じくAudio Sourceを追加し、オーディオクリップに任意のBGMを入れておきます。

音量調節

画面右のグラフインスペクターでAppの変数に「audiovol」を作ります。0~1の範囲で音量を調節できるようにするためです。最初の値は0.8にします。

スライダーの値が変更されたら変数の値が変わり、BGMの音量も変わるようになっています。(スライダーはmin 0、max 1の値にしておきます。)

(オーディオミキサーの使い方は分かっていません)

(On Startで変数の値が音量に反映されるようになっていますが、スライダーには反映されていません。この記事を書いていて気づきました。これでは音量0にしてクリア後にタイトルに戻った時、音量は0のままなのにスライダーだけ初期値になっているという状態です。細かいミスです。1日で作るイベントの成果物なので、小さいミスは出来るだけ残しておく所存です。)

はじめるボタン

On Button Clickにボタンを設定し、Load Sceneでゲームシーンに移行します。(ゲームシーンの名前は色々あってMain3です。紆余曲折あったんです)

途中で演出として、爆発の効果音が鳴り、1秒かけて暗転します。Set Activeで暗転するパネル(Dotweenのフェードを利用)を出し、Play One Shotで効果音を鳴らします。Wait For Secondsで1秒待ちます。先頭のOn Button Clickのコルーチンにチェックを入れておかないと、Waitできないので必ずチェックしておきます。

タイトル画面は以上です。


ゲーム本編

グラフ1枚で作っていて、全体像はこんな感じです。1つの大きいグラフで作ると重くなるので、少しづつの部品で作ったほうがいいみたいなのですが現状困っていないので……。本職の人が見たら怒るかもしれません。ゆるして。

はじめにタルの裏面をランダムに配置。

タルを2つめくった時点でマッチ不成立(へんとへん、つくりとつくり)ならたるを元に戻す。

マッチ成立なら足元からオブジェクトがせり出し、タルは上昇。

「木尊」が成立したらカメラが移動し終了。

あとはやり直しボタン(シーン再読み込み)とタイトルへのボタンくらいです。

これが全てではありますが、使ったノードなどを少し詳しく書いておきます。

タルの裏側をランダムにする

解説したいのにグラフがぐちゃぐちゃでした。Sequenceで10回繰り返すというゴリ押しをしています……。(当時Loopの使い方が良く分かりませんでした)

それぞれの漢字(木、魚、土、など8種類)に数字を割り当てる。

グラフインスペクターでグラフ変数を10個作る。

0から9の範囲でランダムにリストから番号(木など)をとり、9のタル変数に代入し、タル裏の画像をセットします。選んだ字はRemove Itemでリストから削除します。次に0から8の範囲でランダムにリストから番号を取り、8のタル変数に代入し、裏の画像を変更します。これを繰り返し、0番のタルが終わったら配置完了です。

ListのGet Itemはとても便利です。また、Set Variableでの変数代入はよく使います。ランダムに数字を出してくれるRange(Random)はFloat型とInt型があり、今回はInt型にしています(Float型にすると小数点が出てきてしまいます)。

タルをクリック

On Pointer Clickでタルをクリックしたときの反応を書いていきます。演出上待ち時間を作るので、全てコルーチンにチェックしておきます。これを10個作りました。どのタルを選んだのか「nowselect」というグラフ変数で管理しました。今回は10個なので力技でどうにかなりましたが、これ以上の数の処理は自信がありません。

 このグラフの先で、「1個目のタル」か「2個目のタル」の変数に代入します。

タルをひっくり返す

樽本体と裏面の文字を一緒にした親オブジェクトをひっくり返します。Dotweenで0.5秒かけて回し、めくったときの効果音を鳴らします。

グラフの範囲外の補足として、めくっている演出の間はタルをクリック出来ないように、透明なパネルを0.7秒だけ出しています。また、同じタルをクリックするとブザーが鳴るようにしました。

2個目のタルをめくる

Sequenceで1個目のときと同じようにタルをめくる演出をします。

あとはifのゴリ押しで結果を判定します。ここはいくらなんでももう少しやりようがあったと思います。へんとつくりで変数のケタを分けるとか……。でも1日で作るイベントだからそこまで気が回らないし……。だからといってゴリ押し過ぎるのでは……。このグラフをコピペで4つ作りました……。間違いではないものの最適解には遠いのでは……。

特に解説は不要かと思います。魚 と 尊 なら鱒の結果が表示されるようにします。結果はSpriteとTextで表示されます。(今回はListで済んでいますが、大量のテキストが必要な場合は予め文章を用意し、任意の記号で区切り、変数欄にコピペしてSplitで取り出しています。専用アセットを使うなど、もっといい方法があるんだろうなと思いつつ……。)

結果に対応したオブジェクトがDotweenでせり出し、選ばれた樽はDotweenでどこかに飛んでいきます。マッチ不成立ならタルは元に戻り、変数は破棄されます。

クリア

「木尊」が完成したら、従来の黒背景のメッセージウィンドウを非表示にし、春らしい色のメッセージウインドウを表示します。カメラをDo Local Rotateで回し、ずっと画面奥で回っていた巨大タルが画面に表示されます。

世界はたるで満ちた

すべてのタルをめくったら終了です。今回は5回結果が表示されたら左下に文字が表示され、ボタンの文言も変化するようにしました。木尊が成立しなくても失敗ではないのです。

「魚」と「尊」は多めに出てくるようになっていて、鱒が2回出せます。URLもmasuにし、BGMもますにしました。1日で作るゲームなので色々限界でした。


不具合の原因……

完成できた!と思ってビルドしてunityroomにアップロードしたらゲームシーンで反応しなくなってしまいました。原因が分からず機能を少しずつ削ってアップロードし原因を探りました。結果、「List of float」のノードが入ったグラフがアクティブになっていると反応しなくなってしまうようでした。ノードを繋いでいなくても、このノードがあるだけで駄目みたいでした。リストをfloatからInt?に変えたら無事動きました。私の使い方のせいなのかエディターの不具合なのか初心者なので判断できません。とにかく動いたからセーフです。(エディターをアップデートしたおかげか、最近作ったプロジェクトでは大丈夫でした。)

ビジュアルスクリプティングではエラーになった個所がエディターですぐ見て分かるようになっていて便利ですが、ビルドした後の不具合への対応は大変だなあと思いました。エディターでは動いているのにビルドしたら動かないということはよくあるようなので、こまめな動作確認が必要だと実感しました。

こまめな保存も大切……。

おわりに

現時点でも色々反省点がありますが、イベントの「1日で作ったあほなゲーム」という免罪符はとても強いです……。ゲームの中身についてもそういうことなので色々許してほしいです。

Unityを使ったゲーム作りにVisual Scriptingを使ってみようかなと思っている初心者の方の参考になったらいいなと思います。あるいは反面教師、他山の石……。

Categories: