Unityに関連する記事です

 この手順より、ゲームの演出について制御処理を実装していきます。

 まずは最初に、花輪をくぐった際の演出を2つの工程に分けて順番に実装を行います。


<完成動画>
https://gyazo.com/b1771b5fb7ecf41a191064566aa84e66


 以下の内容で順番に実装を進めていきます。

手順19 −花輪をくぐった際の演出を実装ー
30.花輪を通過した際に花輪をキャラの中心に集める演出を追加する
31.花輪がキャラの中心に集まったら獲得用のエフェクトを生成する



 新しい学習内容は、以下の通りです。

 ・Collider.enabled 変数 
 ・transform.SetParent メソッド
 ・DOTweenの補間機能と実装例ぁ Sequence処理、DOScaleメソッド、DOLocalMoveメソッドー



30.花輪を通過した際に花輪をキャラの中心に集める演出を追加する

1.設計


 キャラが花輪をくぐった際の演出を考えていきます。
色々なものが考えられると思いますので、ここでの実装はその一例として考えてください。
また自分でよい演出をおもいついたら、これらの演出ではなく、自分で考えた演出を実装するためのロジックを考えて実装してみてください。
 
 ここでは2つの方法で演出を行います。

 まずはキャラが花輪をくぐったら、花輪がキャラの中心に向かって集まってくる演出です。
そちらの実装が完成したら、中央に集まったあとに、花輪をくぐったことを知らせる光の演出を追加します。

 この手順では、花輪がキャラの中心に集まる方法を考えていきます。

 花輪の中央部分にはコライダーが設置してあり、キャラはその中であればどの部分を通過してもくぐったことになります。
そのため花輪の方だけで集まる位置を決定することはできません。その都度、キャラがどの地点を通過するか分からないためです。

 こういう場合にも親子関係を利用します。
親子の関係はヒエラルキー上でゲーム開始前に設定する以外に、スクリプトから動的に変更して、親子関係を構築したり、解除することが出来ます

 花輪を通過したら、花輪をキャラの子オブジェクトになるように親子関係を作ります。ヒエラルキーではこのような状態になります。


ヒエラルキーの状態(ゲーム実行中に、この状態になるように制御する)



 こうすることにより、花輪の座標情報は、ワールド座標ではなく、ローカル座標、つまり、キャラからみてどの位置にいる、という情報に置き換わります
このローカル座標の情報を元にすることで、花輪をキャラの中心へ移動させる、という処理が実装出来ます。


Penguin ゲームオブジェクトの位置



FlowerCircle ゲームオブジェクトのワールド座標の位置(通常)



FlowerCircle ゲームオブジェクトのローカル座標の位置(親オブジェクトである、Penguin ゲームオブジェクトから見てどの位置にいるかを表している)



 実際にどのような処理が制御されているか、ヒエラルキーとインスペクターを見ながら確認します。


<実装動画 ローカル座標に置き換えてから集める処理を行う>
https://gyazo.com/0ade58db4d88c4ecabc8cac006507e38


 ここではこの親子関係を構築して、花輪をキャラの中心に移動させる、というロジックを実装します。
花輪をキャラの中心に移動させるには、DOTweenの処理の1つである、DOLocalMoveメソッドを利用します。
この時に移動させる座標を (0, 0, 0)に設定すれば、親オブジェクトであるキャラの中心に花輪が移動します。


2.FlowerCircle スクリプトを修正する


 宣言フィールドには、花輪をくぐった際の重複判定防止用にコライダーをオフにする操作を実装したいので、花輪にアタッチされている BoxCollider 型の変数を宣言します。
SerializeField属性で宣言しておくことで、インスペクターからアサインして代入することが出来ます。

 新しくメソッドを2つ追加します。1つは OnTriggerEnter メソッドで、花輪のコライダーに別のゲームオブジェクトが侵入したかどうかを判定します。
侵入する対象は Penguin ゲームオブジェクトしかないため、if 文による Tag などの制御は必要ありません。
侵入した判定が発生すると、それは Penguin ゲームオブジェクトが侵入したものとして扱って問題ないからです。

 この判定内でキャラと花輪を親子関係にします。その後、DOTweenの処理を利用して、花輪の大きさを小さくしつつ、キャラの中心へと移動させます。
このように1つの処理に複数の DOTweenの処理を同時に実行したい場合に備えて、DOTween には Sequence(シーケンス)という機能があります。

 Sequence の宣言を行い、所定の記述を行うことによって、DOTween 処理を1つずつ順番に制御したり、同時に複数の処理を実行することが実現できます。


FlowerCircle.cs

 <= クリックすると開きます



 スクリプトの修正が終了したら、ヒエラルキーにある FlowerCircle ゲームオブジェクトのインスペクターを確認します。
新しく追加した boxCollider 変数が追加されているか確認してください。


FlowerCircle ゲームオブジェクト インスペクター画像



3.<Collider.enabled 変数>


 コライダーのオン・オフを切り替える変数です。
インスペクターのコンポーネント名の左側にあるスイッチを切り替えることで、コンポーネントのオン・オフを切り替えることが出来ます。
この処理をスクリプトから実行するための変数です。

 コライダーに限らず、コンポーネントであればすべてこの命令でオン・オフを切り替えることが出来ます。
true がオン、false がオフの状態に切り替わります。

  // 花輪の BoxCollider のスイッチをオフにして重複判定を防止
  boxCollider.enabled = false;

<検証動画 ゲーム中でスイッチがオフになる制御>
https://gyazo.com/8bad532e477a669448e8358373bac99a


参考サイト
Unity公式スクリプトリファレンス
BoxCollider
https://docs.unity3d.com/ja/current/ScriptReferenc...
Quita @OKsaiyowa 様
【Unity(C#)】コンポーネントのON・OFF(enable)とゲームオブジェクトの表示・非表示の切り替え(SetActive)
https://qiita.com/OKsaiyowa/items/9579ac348ac860cd...


4.<Transform.SetParent メソッド>


 Transform コンポーネントは、オブジェクトの親子関係の情報を管理しています。
SetParent メソッドを実行することにより、実行した Transform を持つゲームオブジェクトを
引数に指定した Transform を持つゲームオブジェクトの子オブジェクトにすることが出来ます。

  // 花輪をキャラの子オブジェクトにする
  transform.SetParent(other.transform);

 上記の命令の場合、このスクリプト(FlowerCircle)がアタッチされているゲームオブジェクトの Transform クラスの SetParent メソッドを実行し、
FlowerCircle ゲームオブジェクトを、other.transform のゲームオブジェクトの子オブジェクトにしています。

 other.transform のゲームオブジェクトとは、Penguin ゲームオブジェクトのことですので、
この処理を実行するこということは、花輪のゲームオブジェクトをキャラの子オブジェクトにする、という処理になります。


<検証動画 親子関係を設定する>
https://gyazo.com/4471d0488a0be9057ce5b7261a871ecc


<親子関係になった際のヒエラルキー画像>



5.<DOTweenの補間機能と実装例ぁ Sequence処理、DOScaleメソッド、DOLocalMoveメソッドー>


 今回利用しているメソッドについて説明します。
Sequence(シーケンス)処理

 DoTweenによる補間処理をSequenceを利用して実装しています。
Sequenceを利用することで、DoTweenの処理を自分の組み立てた順番通り、あるいは同時に実行することができます。
 
 Sequenceを利用するためには、宣言をして初期化する必要があります。

  // DOTween の Sequence を宣言して利用できるようにする
  Sequence sequence = DOTween.Sequence();

 Sequenceには様々なメソッドがありますが、今回利用しているメソッドを説明します。


 Append() 
   アペンドと読みます。引数に指定した処理を行います。次にあるメソッドがSequenceのAppendメソッドである場合、この処理が終了するまで次のAppendメソッドは動きません。


 Join() 
   ジョインと読みます。Appendメソッドと一緒に用いられます。Appendメソッドの次のメソッドがJoinメソッドである場合
  このJoinメソッドの引数にしている処理はAppendメソッドと同時に処理されます。複数のJoinを続けて書いた場合、最初のAppendメソッドと同時に処理されます。



 多くの方がわかりやすい記事を書かれていますので参考にしてください。
@kagigi様
DOTweenをふわっとまとめてみた
https://qiita.com/kagigi/items/bdf4d42835add07b007...
アマガミナブログ様
DOTweenの使い方 Tweenアニメーション入門【Unity】
https://amagamina.jp/how-to-dotween/


2.DOScale(Vector3 endValue, float duration)

 DOScaleメソッドは、ゲームオブジェクトの Scale(大きさ)を、指定した大きさに変更する処理です。
大きさを変更する時に補間処理を行うことで、アニメーションしているように見せてくれます。

 このメソッドは処理を行いたいゲームオブジェクトの、transfromに対して実行します。
ここではこのスクリプトがアタッチされている、花輪のゲームオブジェクトの大きさを変更させたいので
このゲームオブジェクトのTransform コンポーネントが代入されている transform 変数に対して処理を行うようにしています。

  // Append を実行すると、引数でDOTweenの処理を実行できる。花輪の Scale を 1秒かけて 0 にして見えなくする
  sequence.Append(transform.DOScale(Vector3.zero, 1.0f));

 transform.DOScale()の第1引数はVector3型で、最終的に設定したい Scale、大きさを指定します。
Vector3.zero ですので、すべて (0, 0, 0) を指定しています。Scale が 0 になったゲームオブジェクトは非表示と同じ状態になります。

 第2引数はfloat型で、大きさを変更するまでにかかる時間を指定します。今回は 1.0f と実数(変数指定も可能)を指定しているので
1.0 秒かけてこのスクリプトがアタッチされているゲームオブジェクトの大きさを現在の大きさから (0, 0, 0) に変更する、という命令になります。

 この処理によって、花輪が徐々に小さくなっていく演出をしています。


3.DOLocalMove(Vector3 endValue, float duration)

 DOLocalMove メソッドは、ゲームオブジェクトの位置を指定して移動させる処理です。
移動時に補間処理を行うことでアニメーションしているように見せてくれます。

 このメソッドは処理を行いたいゲームオブジェクトの、transfromに対して実行します。ここではこのスクリプトがアタッチされているゲームオブジェクトを移動させる命令を行いたいので
このゲームオブジェクトのTransform コンポーネントが代入されている transform 変数に対して処理を行うようにしています。

  // Join を実行することで、Append と一緒にDOTweenの処理を行える。花輪の Scale が1秒かけて 0 になるのと一緒に、プレイヤーの位置に花輪を移動させる
  sequence.Join(transform.DOLocalMove(Vector3.zero, 1.0f));

 transform.DOLocalMove()の第1引数は Vector3 型で、移動させる位置を指定します。
この処理では、花輪をキャラの中心に移動させたので Vector3.zero、すなわち (0, 0, 0) を指定しています。

 第2引数はfloat型で、移動する際にかかる時間を指定します。今回は 1.0f と実数(変数指定も可能)を指定しているので
1.0 秒かけてこのスクリプトがアタッチされているゲームオブジェクトのローカル座標の位置を 0 の位置まで移動をさせる = キャラの中心に移動させるという命令になります。

 Join メソッドで実行していますので、上記の Append メソッドと同時に実行されますので、
ゲーム画面では、花輪が小さくなりながらキャラの中心に集まる、つまり、花輪を獲得している演出になります。


6.FlowerCircle ゲームオブジェクトの FlowerCircle スクリプトのアサイン情報に、BoxCollider がアタッチされているゲームオブジェクトをドラッグアンドドロップして登録する


 制御したい BoxCollider コンポーネントは、FlowerCircle ゲームオブジェクトの子オブジェクトである Collider ゲームオブジェクトにアタッチされていますので
Collider ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。


FlowerCircle ゲームオブジェクト アサイン後のインスペクター画像



7.ゲームを実行して動作を確認する


 設定が完了しましたので、ゲームを実行して、キャラに花輪を通過させてみてください。
花輪がキャラの中心に集まれば制御成功です。


<実行動画>
https://gyazo.com/e8d2c43eed7d19caa8fac6944a49ec4d


 続けて、花輪がキャラに集まったタイミングで、獲得エフェクトを生成する演出を実装します。


31.花輪がキャラの中心に集まったら獲得用のエフェクトを生成する


1.設計


 花輪がキャラの中心に集まる制御処理が実装できましたので、続いては、獲得時のエフェクトを再生する演出を実装します。
事前にプレファブでエフェクト用のゲームオブジェクトを用意しておいて、そちらを FlowerCircle スクリプトに変数を用意して登録しておきます。
キャラの中心に花輪が集まってから、このエフェクト用のゲームオブジェクトをインスタンスして、エフェクトを再生します。

 ParticleSystem コンポーネントの Play On Awake にチェックが入っていると、ゲームオブジェクトが生成されると同時にパーティクルが再生されます。
それを利用しています。

 またキャラの中心に花輪が集まってからという制御はコルーチンメソッドの中断処理を利用し、
花輪が集まる処理が終了してから獲得エフェクトを生成する制御を行っています。


2.獲得エフェクトをインポートする


 すでにインポートさせているアセットから、獲得用のエフェクトを選んでいただくか、下記の無料エフェクトサイトより
ダウンロードしてインポートしてください。

ktkkumamoto 様/UnityEffectSample
https://github.com/ktkkumamoto/UnityEffectSample


 サイト内のフォルダを選択すると対象のエフェクトの UnityPackage が表示されますので、好きなものを選択して Download ボタンでダウンロードできます。
今回は Heal1/Heal1.unitypackage ファイルを利用しています。


<サイト1 フォルダ選択>



<サイト2 パッケージ選択>



<サイト3 右下のボタンでダウンロード>



 ダウンロードした UnityPackageを Unity内の Projectにドラッグアンドドロップしてください。インポート用のウインドウが開いてインポートできます。
誤ってダブルクリックしたり、直接開いてしまうと、新しい Unity のプロジェクトが立ち上がりますので、その場合にはそのプロジェクトは閉じてください。


<手順動画 ダウンロードした UnityPackage を Unity にドラッグアンドドロップしてインポートする>
https://gyazo.com/9e48c88a104cbd05997218db33c5c3f0


3.FlowerCircle スクリプトを修正する


 宣言フィールドには、花輪をくぐって獲得した際のエフェクトを登録するための GameObject 型の変数を宣言します。
SerializeField属性で宣言して、プレファブをアサインできるようにしておきます。

 先ほど追加した PlayGetEffect メソッド内に処理を追加します。また、このメソッドをコルーチンメソッドに変更します。
メソッドの呼び出し命令もコルーチンメソッド用の命令に変更するのを忘れないようにしてください。

 コルーチンメソッドでは中断処理が実装できます。そのため、花輪がキャラの中心に集まるまで待ってから獲得エフェクトを再生する、という制御が可能になります。


FlowerCircle.cs

 <= クリックすると開きます



 スクリプトの修正が終了したら、ヒエラルキーにある FlowerCircle ゲームオブジェクトのインスペクターを確認します。
新しく追加した effectPrefab 変数が追加されているか確認してください。


FlowerCircle ゲームオブジェクト インスペクター画像



4.FlowerCircle ゲームオブジェクトの FlowerCircle スクリプトのアサイン情報にエフェクト用のゲームオブジェクトのプレファブをアサインして登録する


 effectPrefab 変数に GameObject 型の情報をドラッグアンドドロップしてアサインします。
使用する予定のプレファブ・ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。


参考(使用するプレファブのフォルダ。各々のプレファブを選択する)



FlowerCircle ゲームオブジェクト アサイン後のインスペクター画像



5.ゲームを実行して動作を確認する


 エフェクトが発生しているかわかりやすくするために、各ゲームオブジェクトの高さを調整します。

Penguin ゲームオブジェクトの高さを 30 に変更し、Main Camera ゲームオブジェクトの高さを 34 に変更します。
その後、FlowerCircle ゲームオブジェクトの高さを 20 に変更します。それからゲームを実行して確認します。


<実行動画>
https://gyazo.com/b1771b5fb7ecf41a191064566aa84e66


 以上でこの手順は終了です。

 => 次は 手順20 −姿勢変更ゲージの演出を追加− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます