Unityに関連する記事です

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

手順10 −花輪の作成−
15.アセットを使って花輪を作成する
16.スクリプトを使って、花輪を回転させる



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

 ・DOTweenの補間機能と実装例◆ DORotateメソッド、SetEaseメソッド、SetLoopsメソッドー



15.アセットを使って花輪を作成する

1.設計


 複数の花のゲームオブジェクトを組み合わせて、花輪を作成します。一連の手順はありますが、形状など、自由に設計にしましょう

完成図



2.FlowerCircle ゲームオブジェクトを作成する


 ヒエラルキーの何もない場所で右クリックをしてメニューを開き、Create Empty を選択します。
新規の空のゲームオブジェクトが作成されますので、名前を FlowerCircle に変更します


ヒエラルキー画像
)


 このゲームオブジェクトを花輪のゲームオブジェクト群のフォルダ役として利用します。
次の作業が楽になるように、Transform コンポーネントの Positionの Y を 0 から 20 に変更してください


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



3.FlowerCircle ゲームオブジェクトの子オブジェクトとして Flower ゲームオブジェクトを作成する


 インポートしたアセットを利用して花のゲームオブジェクトを配置します。
以下の場所にゲームオブジェクトがあります。4種類ありますが色が異なるだけですので、以下のいずれのオブジェクトを利用していただいても構いません。

パス
Assets/AlignedGames/Polygonal Foliage Asset Package/Art/Models/Flowers/Flower1/flower_1.prefab

Assets/AlignedGames/Polygonal Foliage Asset Package/Art/Models/Flowers/Flower1/flower_2.prefab

Assets/AlignedGames/Polygonal Foliage Asset Package/Art/Models/Flowers/Flower1/flower_3.prefab

Assets/AlignedGames/Polygonal Foliage Asset Package/Art/Models/Flowers/Flower1/flower_4.prefab


フォルダ画像



 ここで合計8個になるように設置していますが、自由に設置してください。すべて同じ色、あるいは異なる色のオブジェクトの組み合わせてでも構いません。
同じもので作成する場合には複製機能を利用しましょう。


参考(ゲームオブジェクトの構成は4つとも同じです)



 flower ゲームオブジェクトを8個追加したら、それぞれの名前を flower_0 〜 flower_7 に変更してください

 またプレファブの状態をアンパックして、通常のゲームオブジェクトに戻しておいてください
アンパックの手順は以前の学習を振り返っていただくと書いてありますので割愛します。


ヒエラルキー画像



4.各 Flower ゲームオブジェクトの位置を変更する


 Flower ゲームオブジェクトの位置をそれぞれ調整して、輪になるように配置をしてください。
高さのみ同じにしていただければ、後は自由に作成していただいて構いません


Sceneビュー画像



Sceneビュー画像



参考までに、各 Flower ゲームオブジェクトの Transform のインスペクター画像を添付しておきます。


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



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



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



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



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



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



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



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



 以上で花輪のゲームオブジェクトが完成しました。


16.スクリプトを使って、花輪を回転させる

1.設計


 今までと同じように、ゲームオブジェクトの操作を行いたいので、新しくスクリプトを作成して制御処理を記述します。
それを FlowerCircle ゲームオブジェクトにアタッチして、制御を実行します。

 今回は FlowerCircle ゲームオブジェクトを回転させたいので、DOTweenの機能を利用して、ずっと同じ方向に回転を行う制御を行います


2.FlowerCircle スクリプトを作成する


 Scripts フォルダの中で右クリックをしてメニューを開き、Create => C# Script を選択してください。
新しいスクリプトが作成されますので、名前を FlowerCircle に変更して、ダブルクリックをして Visual Studio Editor を開いてください。

 DOTween を利用しますので、忘れずに using に宣言を追加してください
 
 回転処理は Start メソッドに記述します。


FlowerCircle.cs

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



3.<DOTweenの補間機能と実装例◆ DORotateメソッド、SetEaseメソッド、SetLoopsメソッドー>


 新しいDOTweenの処理を実装していますので、各メソッドの説明をします。


 // アタッチしたゲームオブジェクト(花輪)を回転させる
  transform.DORotate(new Vector3(0, 360, 0), 5f, RotateMode.FastBeyond360).SetEase(Ease.Linear).SetLoops(-1, LoopType.Restart);

 この処理は、複数のメソッドをつなげて1行で記述している処理になります。
ピリオドの位置までが1つの処理になっており、合計で3つの DOTween のメソッドが実行されています

 このようにピリオドを利用して、前のメソッドの処理に続けて次のメソッドの処理を書くと、前のメソッドの処理を受けて次のメソッドの処理が実行されます。
この記述方法をメソッド・チェーンといいます。

 今回の場合、transform に対して DORotate メソッドが最初に実行されて、その処理結果を利用して、次の SetEase メソッドが実行されます。
さらに ピリオドで次のメソッドが続いていますので、その2つの処理結果を受けて、最後に SetLoops メソッドが実行されるようになっています。

 プログラムは上から下に実行されていきますが、1行に書かれた処理の場合は、手前(左側)より、ピリオド単位で区切って実行されることになります。
しっかりと処理の順番を追えるように、読み解いてみましょう。



1.DORotate(Vector3 endValue, float duration, RotateMode rotateMode)
transform.DORotate(new Vector3(0, 360, 0), 5.0f, RotateMode.FastBeyond360)


 まずは最初は DORRotate メソッドです。
この処理は指定した時間をかけて回転角度まで最短距離で回転を行います。

 第1引数には目標とする回転角度を Vector3 型で指定します。
今回は new Vector3(0, 360, 0) でRotation を指定していますので、 Y 軸のみ回転情報を与えられています。

 第2引数には第1引数の回転位置に到達するまでにかかる時間です。float 型で指定します。
今回は 5.0f を指定していますので、5秒を書けて Y 軸を 360度回転させています。

 第3引数には RotateMode を指定することができ、指定しない場合は RotateMode.Fast が自動的に設定されます。
今回は、RotateMode.FastBeyond360 を指定しています。こちらは、360度を超えた回転角度が指定された場合に、
そのまま 360 度を越えた回転を行うようにするオプション処理です。

 これは、第1引数に 360 度を指定した場合、360 = 0 として認識をしてしまい、回転を行わなくなってしまうことを回避するために設定しています。
(RotateMode を 初期設定の Fast に変更して、実際に試してみましょう。)



2.SetEase(EaseType easeType)

 SetEaseメソッドは他のDoTweenのメソッドに付随する処理です。このようにDoTweenではDoTweenのメソッド同士を1つの処理の塊として続けて処理を行うことができます。
処理を続ける場合には、前のメソッドの後にピリオド(ドット)を書くことで、次のメソッドを書くことが可能です。(最初に説明した、メソッド・チェーンの記述方法です)

 SetEaseメソッドではEaseというアニメーションさせる際のパターンを変更することができます。Easeはenum型で設定されており、Ease.タイプ の書式で記述します。
非常に多くの種類があります。今回は最も一般的は Ease.Linear を使用しています。

 今回は、DORotate メソッドが実行されてゲームオブジェクトが回転処理を実行している部分に、この SetEase メソッドが実行されますので
回転に対して、どのようなタイプのアニメーションのパターンを設定して回転を行わせるかを指定しています



3.SetLoops(int loops, LoopType loopType)

 SetLoopsメソッドは、他のDO〜メソッドの後に実行できるメソッドです。この命令単体で実行することはできません。

 一緒に命令をしているメソッドに対してループ処理を付与することが出来ます。
今回の処理では、transform.DORotateメソッドに対して、ループ処理を行っています。(SetEaseメソッドもSetLoopsメソッドと同じで単体では動かないメソッドです)

 第1引数はループ処理を行う回数です。int型で設定します。今回のように -1 を指定すると、それは無限ループになります。(ループが終了しません)
このような場合は明示的に処理を停止させないと無限にループを繰り返します。

 第2引数ではループさせるタイプをLoopTypeというenum型から選択します。LoopType.Restart の場合は、A => B , A => Bという形式で、最初に戻ってループを繰り返します。
他にもLoopTypeがありますので調べてみてください。この処理によって、ずっと同じ方向に回転し、それを無限にループします。

 今回の場合、SetEase メソッドで回転パターンを指定されている処理を、ずっとループ処理を行わせるようにしています。

 
 以上が今回実装している、DOTweenでの処理になります。回転時のアニメーションを設定しつつ、回数無制限のループ処理が行われているので
ゲームオブジェクトを、ずっと同じ方向に対してループ回転の処理を行わせる処理になっています。


4.FlowerCircle ゲームオブジェクトに FlowerCircle スクリプトをアタッチする


 スクリプトを作成しましたので、アタッチをして実行出来るようにします。

 FlowerCircle スクリプトをドラッグして、ヒエラルキーにある FlowerCircle ゲームオブジェクトにドロップしてください。
子オブジェクトにはアタッチの必要はありません。親子関係により、親が回転する場合、子も同じ方向に一緒に回転を行うためです

 ここからはアタッチの手順動画は省略します。


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



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


 そのままの位置ですと確認しにくいため、Y軸を変更して画面に映るように変更しましょう。

 FlowerCircle ゲームオブジェクトの Transform コンポーネントの Positionの Y の値を 20 から 10 に変更してください。
それからゲームを実行します。ゲームの開始と同時に FlowerCircle ゲームオブジェクトが回転を始め、ずっと周り続けていれば制御成功です。


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


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

 => 次は 手順11 −キャラと花輪の接触判定を実装− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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