UnityのuGUIでテキストを表示してギャルゲーっぽいのを作ろう2 テキスト変更やインスペクターオンオフなど

Unity

バーチャル3Dクリエイターの神部まゆみです(*^-^*)

 

今日は昨日の続きでボタンを追加したり、クリックされたらテキストを変えたり、インスペクターとかをクリック検知でオンオフするところまでやるよ。

スクリプト組むの初めてだから時間かかるかもしれないけど、探り探りやります( ̄▽ ̄;)

 

前回の記事はこちら。

UnityのuGUIでテキストを表示してギャルゲーっぽいのを作ろう
バーチャル3Dクリエイターの神部まゆみです(*^-^*) 今日はUnityでuGUI?とかいう機能を使って、画面にテキストを表示するよ。 あのギャルゲーみたいな、下に半透明のウィンドウが出たりしてテキストが表示さ...

————-PR———————-

現在、2021年の新作人気アセットが50%オフで買えるunityアセットリフレッシュセールをやってるみたいです(日本時間2021/10/02 PM15:59まで)。

unityアセットリフレッシュセール50% off

欲しいアセットはこの機会に買っておくと良いかも。

————————————-

 

ボタンを追加してみる

今回もこちらの先輩の記事を参考にしてやっていくよ。

UnityのUIを作ってみよう【UGUIの使い方基礎】
Unity初心者の方でも入りやすいように、UIの作成方法について解説しています。Canvasに始まり、Image,Text,Buttonについてそれぞれの説明を行っています。UGUIは今後よく使うと思うので理解を深めていきましょう。

 

キャンバスの上で右クリック → UI → ボタン を選択すればOK。

「Xボタン」と「Button – TextMeshPro」っていうのがあるけど、どっちにしてもあまり変わらなかった。

とりあえずXボタンにしておこう。

こんな感じで追加された。

 

imageとbuttonっていうコンポーネントで構成されてるみたい。

imageのソース画像を変えればボタンの画像も変えられるみたいだから、ちょっと適当な画像に変えておこうかな。

 

今のところ、押しても何も起きないね( ̄▽ ̄;)

押したらスクリプトが起動するテストをやってみる

でもこれでonclickでスクリプトを呼び出したりできると思うから、スクリプトを書けばテキストを変えたりできると思う。

こちらの先輩のページの簡単なスクリプトを書いてみよう。

UnityのUIを作ってみよう【UGUIの使い方基礎】
Unity初心者の方でも入りやすいように、UIの作成方法について解説しています。Canvasに始まり、Image,Text,Buttonについてそれぞれの説明を行っています。UGUIは今後よく使うと思うので理解を深めていきましょう。

 

メモ帳で書いたけど、こんな感じかな。

publicにしておけば外部のオブジェクトやスクリプトからも呼び出せるらしい。

Debug.Logは以前本屋で立ち読みした時に見た気がするけど、コンソール画面のことかな。

あとはこのスクリプトを適当な画面にアタッチして、Buttonのところで読み出せばいいみたい。

 

最初TestClick.csってファイル名にしたら、「クラスとファイル名を一致させてください」ってエラーが出た。

だからクラス名の NewBehaviourScript にしたらOK。

とりあえずキューブ作ってアタッチしたけど、なんか黄色い線が出てるのはちょっと気になる。

クリック時 のところにスクリプトを追加する

英語だとonClick。

+を押したら追加したキューブをD&Dして、さっき書いたスクリプトからTestClickを指定すればOK。

 

これでゲーム画面を実行してみると…いけた!

ボタンを押すという条件は作れたわけだから、あとは Debug.Log(“”); のところさえ書き換えれば何でもボタン制御できそう。

というかキー入力や左クリック検知でもいいのでは…?

やっておいてなんだけど、私の用途ならボタンよりもキー入力やクリックのほうがいいかも( ̄▽ ̄;)

ボタンは選択する時とかは有効だけど、ざっくりと切り替えだけしたい場合はキー入力とかクリックのほうがいいね。

キーを押されたらテキストを変えるようにしてみる

こちらの頭のいい先輩のページを参考にしたよ。

[Unity] CanvasにTextを配置して文字変更
Unityは3D/2Dのオブジェクトを主に使ってゲームを作りますが、テキストで説明したり、ポイントを表示したりする必要もあります。Textの設定方法について確認してみましょう。 

 

スクリプトアタッチしてテキストを指定しただけなんだけど、もうできた!

これはZキーを押したらテキストがENDに切り替わるって言うスクリプト。

なんかゲームオーバーになったみたいな感じだけど(笑)、これならキーの部分だけ書き換えれば簡単に制御できそう。

キーを押して行って、次々とテキストを切り替えていく感じにできるか?

これ、サウンドノベルとかこういう紙芝居系のギャルゲーっぽいゲームとか、内部的にどう処理してるのが多いんだろう?

方式としては、

  1. 変数を作り、キーが押されたら+1して、ifかcase文みたいに書く
  2. 長いテキストファイルを作って、 。 とか 」 があったら区切って配列か何かに格納して、forかwhileで回して出力する。
  3. 配布されてるライブラリを使う

とか?

そんなにテキスト表示しないような気がするから、単純に1でもいけそうだけども。

コードは長くなるけど単純ではある。

2は、ファイル読み取り系の関数とかでそういう機能なかったっけな?わかんないけど。

単純なif文で切り替えていくことに成功!

上の先輩のコードを改変したやつだけど、改変したから引用で載せてもいいよね。

 

あれ、ワードプレスだとプラグインか何か入れないとスペースは削除されちゃうみたい?

これは改変だからアレだけど、あんまり自分でコード書いていくようならGithubで公開するようにしていこうかな。

 

これでこんな感じに、zキーを押して行ったらint変数pageが+1されていって、pageの値によってテキストを変えられるようになった。

せっかくだからギャルゲーっぽく書き換えてみよう( *´艸`)

はみでちゃったからテキストオブジェクトのサイズ自体を変えたけど、どうだろ。

なんか微妙にサイズが変わってるように見えなくもないような…?気のせいかな。

 

ちなみにこれ静止しているアニメーションを適用してるだけだから、ちゃんと動かすこともできるんだからね。勘違いしないでよね(///)

一応「私3Dだし当然動けますけど?アピール」もしておく(笑)。

 

あとはテキストだけじゃなく、アニメーターを切り替えたり、オブジェクトのパラメーターを書き換えたりすれば、動画作るには十分だと思う。

流石に全部アニメーションで作ってやるってのはきついしね( ̄▽ ̄;)

Zキー以外のキー入力をしたい場合はどうする?

単純に、 Input.GetKeyDown(KeyCode.Z) のZを他のキーに変えればいい感じかな。

Unityの公式ページにKeyCodeの一覧が載ってるから、Zの部分をここに載ってるキーに切り替えればなんでも使えそう。

KeyCode - Unity スクリプトリファレンス
Key codes returned by Event.keyCode. These map directly to a physical key on the keyboard.

 

……試しにA、Home、Spaceに変えてみたら、問題なく動作した。

キー入力はこれで問題なさそうだな。

マウスのクリック検知は?

この前ObiFluid使ってた時使った、左クリックで液体発射するサンプル作ってくれた先輩のスクリプトだと、 if( Input.GetMouseButton(0) ) って書いてあったけど。

キーだと Input.GetKeyDown(KeyCode.Z) でカッコ内にKeyCode指定してたけど、マウスボタンは左と右と中央の3つが標準だから、番号で管理してるのかな?

ゲーミングマウスとかの多ボタンマウスは、専用のソフトやドライバでボタンを割り当てることが多いし。

 

unity公式サイトによると、

  • 0 : 左クリック
  • 1 : 右クリック
  • 2 : 中央ボタン

みたい。

Input-GetMouseButton - Unity スクリプトリファレンス
マウスボタンが押されているかどうかを返します

 

じゃあコードを左クリック検知に書き換えてみる。

これでも問題なく動作したよ(*^-^*)

anyKeyで何かしらのキーかクリックがされた時だけ動かすのもアリかな

Input-anyKey - Unity スクリプトリファレンス
現在なんらかのキーかマウスボタンが押されているかどうか(読み取り専用)

 

とりあえず画面を進めたいとか、ざっくり1か0かで判断すればいいならこれでもいいかも。

やってみたらちゃんと動作した!

どのキー押してもいいから、個別指定や選択する必要が無ければこれでも十分。

とりあえずこれでキーとマウス入力インプット関係は完璧かな。

あとはホイールとかマウス移動とかもあるけど、視点変更とかしないなら必要ないかな。

動画撮影中に手動で視点変更とかは、FirstPersonControllerでやってみたけど流石にきつかったし( ̄▽ ̄;)

とりあえずキーとマウスクリック入力さえ拾えれば十分だと思う。

キー入力などに応じて、インスペクターオンオフやパラメーター変更とかもできるか?

キーとマウス入力は拾えるようになったけど、問題は何を切り替えるか?だよね。

やりたいのは…

  • インスペクターオンオフ
  • コンポーネントオンオフ
  • ターゲットディスプレイ変更
  • LookAnimatorの視線追従先変更
  • アニメーター切り替え
  • ObiFluid起動
  • その他パラメーター切り替え

このくらいかな。

そうすれば揺れをその場で変えたりできるから、手軽に動きに変化を作れて単調さをなくせるしね。

インスペクターオンオフ SetActiveでいける

こちらの頭のいい先輩のページによると、 SetActive(false); でオフにできるみたい。

【Unity】オブジェクトをSetActiveを使って表示・非表示にする【アクティブ・非アクティブ】|Unishar-ユニシャー
【Unity】オブジェクトを表示・非表示に切りかえることができる。GameObjectをアクティブな状態にすることでオブジェクトが表示、非アクティブな状態にすることでオブジェクトが非表示にされる。アクティブな状態の説明と非アクティブな状態の説明、スクリプトを使ってオブジェクトを表示、非表示にする方法を説明する。

 

……キャンバスのテキストのところにsetactiveのコードだけ組み込んで服の一部を消そうとしたけど、オブジェクトが宣言されていないからエラーで動かなかった。

これは別にスクリプトごと組み込んだほうがいいね。

 

先輩のコードのオブジェクト部分だけ書き換えてみた。

まゆみのprefabにスクリプトをアタッチして、リボンを消したり表示したりさせることに成功!

これはえっちな使い方ができそうだね( *´艸`)

 

このスクリプトはpublicでオブジェクトをD&Dで設定できる方式だから、他の関係ないオブジェクトにアタッチしてもいけるかも。まぁ管理しにくいからやらないけど。

ただ、テキスト表示のほうをanykeyにしたままでやったら、非表示はできたけど表示されずに詰んだ( ̄▽ ̄;)

入力処理がダブると不具合の原因になりそうだから、キーやマウス入力によって動かす部分は細かく分けたほうがいいかも。

コンポーネントオンオフ

GetComponentを使えばいけるっぽい。

ただ、クラスとか型?がよくわからず、LookAnimatorをオフにしようとしたけどできない(-_-;)

Rigidbodyとかの、デフォルトでunityにあるようなコンポーネントは制御できた。

別のオブジェクトにアタッチしておいて、オブジェクトごと消す…とかはインスペクターオンオフで行けると思うけど。

私の知識ではまだちょっと難しいかな。

ターゲットディスプレイ変更

これは普通にできそう。

こちらの先輩のページが詳しいと思う。

【Unity】カメラの切り替えをスクリプトで実現しよう!|Camera入門② | XR-Hub
» 【Unity】カメラの切り替えをスクリプトで実現しよう!|Camera入門②

 

サンプル通りやったら普通に動いた!

カメラ増やして、setactiveでオンオフを切り替えてるだけみたい。

視点変更は単純な割に動画にメリハリを作れるから、積極的に使っていきたいね。

追記:これはターゲットディスプレイを変えているのではなく、全てディスプレイ1に表示してカメラをオンオフして切り替えているだけ

みたい。

↑の先輩のコードを参考にして、自分で切り替えのスクリプトを書いてみて気付いた( ̄▽ ̄;)

Unityでカメラ切り替えをするスクリプトを書いたよ。5つのカメラを数字キーで切り替え
バーチャル3Dクリエイター神部まゆみです(*^-^*) Unityでカメラ切り替えをするスクリプトを書いたから、自分用にメモしておくよ。 「動けばいい」と考えて書いただけだからスマートなコードじゃないけど、参考に...

 

まぁカメラは切り替わるから、今のところ機能は果たせているんだけども。

ターゲットディスプレイを指定して何かする機能を使っていた場合、不具合が出る可能性があることは頭に入れておいた方がいいかも。

LookAnimatorの視線追従先変更

LookAnimatorのコンポーネントへのアクセスすらできてないのでちょっと無理っぽい( ̄▽ ̄;)

ゲーム実行中に手動でやるか、適当なオブジェクトに追従させてアニメーションさせるのが無難かな。

というかそっちのほうが手軽だからいいかな?

アニメーター切り替え

これはゲーム作成に普通に使う機能だろうから、サンプルは豊富そう。

アクションゲームとかは、キーによって攻撃とかジャンプとかアニメーションを切り替えてるわけだし。

この先輩のページあたりが詳しいかな。

【Unity】Animator Controllerを用いたアニメーション切り替え方法 | XR-Hub
» 【Unity】Animator Controllerを用いたアニメーション切り替え方法

 

ただ、ここについては簡単に書ける感じじゃないかも( ̄▽ ̄;)

長くなりそうだし、別記事で書こうかな。

追記:キー入力でアニメーションを切り替えられるようにした!でもどう動かすか?が重要かも

UnityのAnimatorControllerをスクリプトで切り替える!Anystateからキー入力で切り替え
バーチャル3Dクリエイター神部まゆみです(*^-^*) 今日はunityのアニメーターをスクリプトで切り替える方法をやっていくよ。 キー入力を検知して、アニメーションを切り替えられるようにするよ。 最初に言...

 

Anystateならどのアニメーション遷移中でも発動させられるみたい。

だけどどう動かすか?を決めておくほうが重要かも。

キーはたくさんあるから、いい感じに切り替えていけばなかなか良い映像になるとは思うんだけど。

もう少しアニメーションを作って切り替えて見ないとなんとも言えないけどね。

おわりに

ここまでできれば表示を動的に切り替えられるから、かなり表現の幅が広がるかな。

個人なら原則無料でこんな凄いソフトが使えるなんて凄い時代だね。

ただ、まだやり方が分かっただけだから、使いこなすには慣れが必要かも。

 

次回はアニメーターコントローラーでアニメーション遷移させるやつをやろうかな。

いい感じにアニメーションを条件分岐で繋げられれば、短いアニメーションをたくさん作っていい感じに長い動きが作れると思うんだよね。

まぁ頑張ってみるよ。

 

タイトルとURLをコピーしました