Unityに関連する記事です

 ゲームスタート時の演出を考えて実装を行います。

<実装動画 .押璽爛好拭璽箸離▲縫甕藹弌―々に暗転が終了し、ゲームスタートのロゴが画面内に移動してくる>
動画ファイルへのリンク


<実装動画◆.押璽爛好拭璽箸留藹个終了してからエネミーが出現する制御>
動画ファイルへのリンク


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

発展31 −ゲームスタート演出の追加−
61.Canvas内に OpeningSet ゲームオブジェクト群を作成する
62.ゲームを開始すると暗転していた画面が徐々に見えるようになり、ロゴがジャンプして画面内に入ってくる演出を作成する



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

 ・DOTweenの補間機能と実装例 ーDOLocalJump メソッドー
 ・順序立てた処理の制御の実装例



61.Canvas内に OpeningSet ゲームオブジェクト群を作成する

1.設計


 この手順では、Canvas ゲームオブジェクト内にゲーム開始時に表示する、オープニング演出用のゲームオブジェクト群を製作していきます。
このゲームオブジェクトもゲーム画面に映る必要のあるゲームオブジェクトですので、 Canvas ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成していきます。

 オープニング演出関連のゲームオブジェクトを管理するためのフォルダ役の OpeningSet ゲームオブジェクトを作成し、その子オブジェクトとして各画像の表示設定するゲームオブジェクト群を順番に作成します。


<完成時のヒエラルキー画像>



2.Canvas ゲームオブジェクトの子オブジェクトとして OpeningSet ゲームオブジェクトを作成する


 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクトが作成されますので、名前を OpeningSet に変更します。

OpeningSet ゲームオブジェクトは、オープニング演出の表示に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。


ヒエラルキー画像




 OpeningSet ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。


インスペクター画像



Sceneビュー画像



 以上で設定は完了です。


3.OpeningSet ゲームオブジェクトの子オブジェクトとして、imgFilter ゲームオブジェクトを作成して設定を行う


 OpeningSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Image コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgFilter に変更します。


ヒエラルキー画像



 imgFilter ゲームオブジェクトは、ゲーム開始前のゲーム画面を隠しておくための役割を担うゲームオブジェクトです。


インスペクター画像



Sceneビュー画像(画面下部中央の白い画像)



 続いて、imgFilter ゲームオブジェクトの設定を行います。4つの手順がありますので、順番に設定していきます。



 最初に Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを入れてオンの状態にしてください。

 
 続いて Image コンポーネントの設定を行います。
Color プロパティを選択して、色と透明度を操作し、黒(0, 0, 0, 255)に設定してください。
SceneビューとGameビューに反映されますので確認します。こちらはゲーム画面を隠しておくためのゲームオブジェクトです。
Source Image は None のままで問題ありません。

 その後、Raycast Target のスイッチを外してオフの状態にしてください。



 3つ目に ゲームオブジェクトのサイズを変更します。横幅(Width) と縦幅(Height) について、画面の上下左右の端まで広げてください。はみ出す位で問題ありません

 最後に imgFilter ゲームオブジェクトを選択してインスペクターの一番下にある Add Component ボタンを押して、Canvas Group コンポーネントを追加します。
Blocks Raycasts のチェックを外してオフの状態にしてください。


インスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で設定は完了です。


4.OpeningSet ゲームオブジェクトの子オブジェクトとして、imgGameStart ゲームオブジェクトを作成して設定を行う


 OpeningSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Image コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgGameStart に変更します。


ヒエラルキー画像



 imgGameStart ゲームオブジェクトはゲームスタート表示の画像の設定を行うゲームオブジェクトです。


インスペクター画像



Sceneビュー画像



 続いて、imgGameStart ゲームオブジェクトの設定を行います。3つの手順がありますので、順番に設定していきます。



  "Game Start" という文字列をロゴ画像として作成し、それを Image コンポーネントに登録して利用します。

 無料でロゴを作成できるサイトがありますので、そちらを活用して作成してください。
Google などで「ロゴ 画像 無料」と調べると色々と出てきますので、利用してみましょう。
その際、画像ファイルの拡張子は png ファイルにして作成してください。ロゴ画像以外の部分が透明になります。

 画像にする文字列は Game Start 、あるいはそれに近い、ゲームクリアが分かるニュアンスの文字列であればなんでも構いません。
平仮名でもカタカナでもいいですし、単純に Start! のようなものでもよいです。

 作成した画像は Textures フォルダにドラッグアンドドロップして Unity にインポートしてください。
さらに UI フォルダや、OpeningSet フォルダなどを用意しておくと、管理がしやすくなります。

 Image コンポーネントの Source Image プロパティの部分にインポートした画像をドラッグアンドドロップしてアサインしてください。
画像が登録されて、SceneビューとGameビューに反映されますので確認します。

 その後、Raycast Target のスイッチを外してオフの状態にしてください。



 続いて、画像の位置とサイズを変更します。これについては任意です。
自分がユーザーの立場になってみて、見やすいサイズに設定してください。

 位置についてですが、このゲームオブジェクトはスクリプトで制御を行って
画面の左端から画面内にアニメ演出を行いながら移動し、それで始めてゲーム画面に映るようにします。
そのため、 Position X については、-1500 などの、画面の左端に位置するように配置してください。
Position Y については任意ですが、画面の中央に表示するのであれば 0 のままで問題ありません。

 下記のインスペクターやSceneビューの画像を参考して設定してください。


インスペクター画像



Sceneビュー画像



 以上でこのゲームオブジェクトと、 OpeningSet ゲームオブジェクト全体が完成です。


62.ゲームを開始すると暗転していた画面が徐々に見えるようになり、ロゴがジャンプして画面内に入ってくる演出を作成する

1.設計


 アニメ演出については、これも実装例の1つです。
そのため、自分で考えた演出があればそちらのロジックを考えて実装に挑戦してみてください。

 設計のアイディアとしては次のような内容になります。

<ゲーム開始(オープニング)時のアニメ演出>
 1.真っ暗なフィルターのかかったゲーム画面からスタートして、徐々に黒いフィルターが見えなくなって、ゲーム画面が見えてくる
 2.ゲーム画面が見えたら、画面の左端に用意してあるゲームスタートのロゴ画像をジャンプさせながら画面の中央に移動させて表示する演出を行う
 3.画面の中央でしばらくロゴ画像を停止する
 4.一定時間経過後、今度は画面の右端に向かってゲームスタートのロゴ画像をジャンプさせながら移動させる画面から見えなくする演出を行う
 5.以上の処理がすべて終了するまで、バレット選択ボタンの Exp の確認と、エネミーの生成処理は行わないようにする



 まず最初に、このオープニング演出の処理を実装するスクリプトと、そのスクリプトに用意した処理を実行するスクリプトを、それぞれ考えてください。
同じスクリプトに処理が書けるのか、別々のスクリプトに用意をするのか、設計していく上では処理の流れをつかんでいることが大切です。
 
 オープニング演出については、OpeningSet ゲームオブジェクト内の複数のゲームオブジェクトを制御する命令になります。
こちらは UI の操作になりますので、UI 関連の操作をまとめているスクリプトに記述を行った方が管理しやすいでしょう。
記述された処理を public 修飾子を持つメソッドにまとめておくことで、外部のスクリプトから呼び出し命令を受け取って、
メソッド内に記述した一連のアニメ制御処理を実行することが出来ます。

 命令を実行する処理は、UI 関連のスクリプトには Start メソッドなどはありませんし、あったとしても、Start メソッドよりは、
理路整然と、こちらが考えて順序立てた物事通りに処理が進んでいく処理の場所が理想的です。そういった処理を一手に行っているスクリプトとメソッドがあります。
その中でタイミングを見計らって実行をしていくことが出来れば、思い描いている通りの実装が可能になります。



 実処理についてですが、【3】以外の処理はすべて DOTween の機能を利用することで実装出来ます。
(【3】の処理についても DOTween の一部の機能を利用すれば実装できますので、その手法でも問題ありません。)

 【1】の処理については、imgFilter ゲームオブジェクトにアタッチされている、CanvasGroup コンポーネントを活用しましょう。
DOFade メソッドを利用することにより、Alpha の値をアニメ演出させながら変更できますので、徐々に黒いフィルターがなくなる、という制御が可能です。

 【2】の処理については、「ゲーム画面が見えたら」という条件後に実行される制御になりますので、DOFade と OnComplete メソッドを上手く活用してください。

 なお【2】と【4】の処理については、DOLocalJump メソッドを利用することで実装可能です。
このメソッドを利用すると、ゲームオブジェクトはジャンプするような移動を行いながら、目標地点まで移動することが出来ます。

 【3】については、このアニメ演出処理を行うメソッド自体をコルーチンメソッドにすることで yield を利用した、一時中断処理を実装できます
あるいは、DOTween にある一時中断用のメソッドを利用してもいいでしょう。

 【5】の処理は演出ではありませんが、演出に関連する大切な処理になります。
この部分は先に回して、まずは演出の【1】〜【4】の処理を実装してから考えましょう。


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


 設計書に基づいて、必要な変数の情報を宣言して、オープニング演出を行うための処理を用意してください。
他の処理と同じように、public 修飾子のメソッドとして設計しておくことで、外部のスクリプトより呼び出し命令を受けて実行することが可能です。

 一緒に書いてある処理も見直してみましょう。すべてのメソッドが、外部のスクリプトより呼び出されて実行している処理として、
メソッド単位でまとめられていることが分かります。


UIManager.cs

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


 スクリプトを修正したらセーブします。



 UIManager ゲームオブジェクトのインスペクターより UIManager スクリプトを確認し、
新しく SerializeField 属性で宣言した変数が表示されていることを確認します。


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



3.<DOTweenの補間機能と実装例 ーDOLocalJump メソッドー>


 新しく実装を行った DOTween の機能について説明します。

 // ゲームスタートのロゴ画像を跳ねさせながら、画面の画面外の左端からゲーム画面の中央へ移動
  imgGameStart.transform.DOLocalJump(Vector3.zero, 300.0f, 3, 1.5f).SetEase(Ease.Linear);

 DOLocalJump メソッドは、他の移動系の DOTween のメソッドと同じで、制御したいゲームオブジェクトの Transform コンポーネントに対して命令を出すメソッドです。
Transform コンポーネント、あるいは RectTransform コンポーネントの LocalPosition の値に対して補間処理を行って、アニメしているように演出してくれる機能です。

 第1引数は Vector3 型を指定します。これがゲームオブジェクトを移動させたい目標地点になります。
今回は Vector3.zero を指定していますので、(0, 0, 0) の位置に移動させる、つまり、ゲーム画面の中央位置に移動をさせる、という処理になります。

 第2引数は float 型で指定します。こちらは現在いる位置から、ゲームオブジェクトをジャンプさせる力の設定値です。大きな値ほど、1回辺りのジャンプする高さが高くなります。

 第3引数は int 型で指定します。こちらは第1引数で指定した位置に到達するまでに、ゲームオブジェクトを何回ジャンプさせるか、という設定値になります。
今回は 3 を指定していますので、3回ジャンプをすると、画面の中央位置に到着するように制御しています。

 第4引数は float 型で指定します。こちらは他の DoTween の処理と同じで、目標地点に移動するまでにかける時間の設定値です。
今回は 1.5f に設定していますので、すべての処理をまとめると、ゲーム画面の中央位置まで、3回ジャンプをして、1.5秒かけて移動する、という処理になります。

 メソッドチェーンとして、SetEase メソッドが付随しており、Ease.Linear を設定しています。
この設定値にすると、等速で移動を行うようになりますので、3回ジャンプする際の時間が同じになります。


4.UIManager ゲームオブジェクトの設定を行う


 UIManager ゲームオブジェクトのインスペクターの UIManager スクリプトに SerializeField 属性で宣言している変数が追加されていますので、
適切な情報をアサインして登録します。


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



 以上で設定は完了です。


5.GameManager スクリプトを修正する


 設計に基づいて、必要と思われる命令処理を、どのタイミングで実行するかを考えてロジックを組んでみてください。

 GameManager スクリプトの Start メソッド内の処理はいわば、ゲームを開始するために必要な準備の処理がまとめられているメソッドです。
つまり、この処理が正常に最後まで終了しないと、ゲームを正常な状態で開始できない、とも表現できます。

 そのため、Start メソッド内の状況を把握するために、専用の変数を用意して、Start メソッド内の処理の状態を判断できるようにしておきましょう。
具体的にいうのであれば、Start メソッド内の準備開始準備終了を判定している情報がないことになりますので、
このタイミングで変数を用意し、Start メソッド内に準備開始と準備終了の判定を切り替える処理も実装しましょう。
例えば bool 型で変数を用意するとした場合には、どちらの値を準備開始とするのか、またその判定を入れる場所を考えてみてください。

 このような判定値が public 修飾子として存在していれば、例えば、いずれのスクリプトでも「準備終了になったら」といった条件式による制御を作成することが可能になります。
変数を用意する場合には、その利用価値、情報の意義を考えて設計することで、しっかりとした役割を任せることが出来ます。

 なお、オープニング演出を実行する際には、Start メソッドがコルーチンメソッドであることを活用してください。
バレット選択用のボタンを生成する際にどのような制御処理を施しているか確認しながら、考えてみてください。
ポイントは、オープニング演出中に他の処理を動かしてもいいのか、ダメなのか、という部分に着目してみましょう。


GameManager.cs

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


 スクリプトを修正したらセーブします。



 GameManager ゲームオブジェクトのインスペクターを確認して、public 修飾子で宣言した変数が追加されていることを確認します。


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




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


 スクリプトの修正が済んだら、必ず処理の流れを確認して、どのような制御がどのタイミングで実行されるのか、
そのイメージをつかんでから、ゲームを実行してください。判断基準がないと、デバッグになりません。


<実装動画>
動画ファイルへのリンク



7.問題点を考えて修正する内容を検討する


 実装アイディアを確認します。

<ゲーム開始(オープニング)時のアニメ演出>
〇1.真っ暗なフィルターのかかったゲーム画面からスタートして、徐々に黒いフィルターが見えなくなって、ゲーム画面が見えてくる
〇2.ゲーム画面が見えたら、画面の左端に用意してあるゲームスタートのロゴ画像をジャンプさせながら画面の中央に移動させて表示する演出を行う
〇3.画面の中央でしばらくロゴ画像を停止する
〇4.一定時間経過後、今度は画面の右端に向かってゲームスタートのロゴ画像をジャンプさせながら移動させる画面から見えなくする演出を行う
 5.以上の処理がすべて終了するまで、バレット選択ボタンの Exp の確認と、エネミーの生成処理は行わないようにする

 実装したいアイディアのうち、【5】以外は実装できました。
この部分が実装されていないため、オープニング演出中に、エネミーが生成されてしまっています。

 こちらを制限するにはどうすればいいか、考えてみてください。
先ほど GameManager スクリプトに追加した変数が役に立つと思います。

 また、【5】の処理のうち、バレット選択ボタンの Exp の確認の処理は、ちゃんとオープニング演出が終了してから処理されているため、
エネミーの生成とは異なり、オープニング演出中はバレット選択ボタンが無効化されていて押せない状態になっています。
ここがどの部分によって制御されているかも、しっかりと確認しておいてください。


8.EnemyGenerator スクリプトを修正する


 どのようなロジックがあればエネミーの生成を停止することができるのか、考えてみてください。


EnemyGenerator.cs

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


 スクリプトを修正したらセーブします。


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


 ゲームを実行し、イメージしているように制御が行えているか、確認をしてみてください。
オープニング演出後にエネミーが生成されるようになっていれば制御成功です。


<実装動画 .押璽爛好拭璽箸離▲縫甕藹弌
動画ファイルへのリンク


<実装動画◆.押璽爛好拭璽箸留藹个終了してからエネミーが出現する制御>
動画ファイルへのリンク


10.<応用 オープニング演出中はバレットを生成できないようにする>


 エネミーの生成を制御したように、プレイヤーのバレットの生成処理についてもオープニング演出が終了するまで生成できなくなるように制御処理を追加してください。



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

 次は 発展32 −ボス出現時の警告演出の追加− です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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