Unityに関連する記事です



設計

 
 一定の時間以内に敵に対して連続で攻撃を行いヒットした際に、そのヒットした数をコンボ数として加算し、UIとして画面に表示する処理を実装します。
コンボ数の表示用のゲームオブジェクトをプレファブで作成しておき、それをコンボが発生したタイミングで生成することでヒット数を表示する設計とします。

 この表示が消えるまでの時間をコンボ数のつながる時間としていますので、この表示が消える前に攻撃をつなげて当ててもらように戦法を考えてもらうことにもなります。


<実装動画 設定した時間以内だとコンボ数が加算される。時間を超えると1に戻る。徐々に消える(消えるまでだと加算される)>
https://gyazo.com/d4439eba4b64bb0abe9460acedc37917


<実装動画 コンボ数が増えるほど表示がだんだん大きくなる>
https://gyazo.com/961f12003b2e6c9ac48f2b383827ec93



実装の手順


 設計に基づき、以下の手順で実装を行います。長いため、この手順では【1】〜【2】までを実装します。

 1.コンボ数表示用のオブジェクト(ComboDetail)を作成してプレファブにする
 2.ComboDetail スクリプトを作成して、ComboDetail ゲームオブジェクトにアタッチして設定する
---- ここまで ----
 3.UIManager スクリプトを作成して設定を行う
 4.PlayerController スクリプトを作成を修正して、コンボの発生処理を追加する
 5.ゲームを実行して動作を確認する


新しく学習する内容


 新しく学習する内容です。

 ・RequireComponent属性
 ・CircleOutline


1.コンボ数表示用のオブジェクト(ComboDetail)を作成してプレファブにする

1.吹き出し用の画像をインポートする


 無料サイトなどから、吹き出し用のイメージ画像をダウンロードし、Unityへインポートします。
拡張子には PNG ファイルを選択してください。

参考サイト
フキダシデザイン様
https://fukidesign.com/


2.フォントをインポートする


 フォントを変更する場合には、無料サイトからフォントをダウンロードして、Unityへインポートします。
Unity では、otf か ttf 拡張子のフォント・ファイルが利用できます。


参考サイト
Unity公式マニュアル
フォント



 フォントのインポート方法も画像やオーディオファイルの場合と同じです。
解凍されていないファイルはインポートできませんので、解凍してからインポートします。

 解凍した otf ファイルか、ttf ファイルを Unity へドラッグアンドドロップすればインポートされます。
インポートする際には事前に Fonts フォルダを作成しておいて、その中にインポートするとよいでしょう。


Fonts フォルダ



 英数字だけを扱うフォントもありますので、色々なフォントを探して、自分の好みで設定してください。


3.Canvas ゲームオブジェクトを作成する


 Canvas内にコンボ数表示用のオブジェクト(以下、ComboDetail ゲームオブジェクト)を作成していきます。
すでに Canvas ゲームオブジェクトがある場合には作成する必要はありません。


 ヒエラルキーにCanvas コンポーネントを持つゲームオブジェクトがない場合には、右クリックをしてメニューを開き、
UI => Canvas を選択してCanvas ゲームオブジェクトと EventSystem ゲームオブジェクトを追加してください。

 以下の画像のようなヒエラルキーの構成になるように順番に作成をしていきます。


Canvas ゲームオブジェクト内のヒエラルキー画像



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


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


ヒエラルキー画像



 ComboDetailTran ゲームオブジェクトは、ComboDetail ゲームオブジェクトを生成する位置としての役割を持ちます。


 RectTransfrom コンポーネントの Anchor を選択し、Alt キーを押しながら Top - Right に設定を行います。
Canvas 内の右上に ComboDetail ゲームオブジェクトが移動し、アンカーの位置がセットされます。
以下の画像を参考にして調整をしてください。


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



ComboDetailTran ゲームオブジェクト Sceneビュー画像(アンカーの位置を確認する)



5.ComboDetailTran ゲームオブジェクトの子オブジェクトとして、ComboDetail ゲームオブジェクトを作成する


 ComboDetailTran ゲームオブジェクトを選択して右クリックをしてメニューを開き、UI => Image を選択します。
ComboDetailTran ゲームオブジェクトの子オブジェクトとして Image ゲームオブジェクトが作成されますので、名前を ComboDetail に変更します。


ヒエラルキー画像



 ComboDetail ゲームオブジェクトは吹き出しのイメージを設定し、ヒット数を表示するための役割を持つゲームオブジェクトです。
このゲームオブジェクトでイメージを、次の手順で作成するゲームオブジェクトでヒット数表示を行います。また完成後にプレファブにします。


 Image コンポーネントの Sourece Image にインポートした吹き出し用の画像を設定します。
色を自由に設定してください。また透明度は160〜180前後に設定してください。重複して生成された場合に、下にある画像を透過させることが目的です。
設定後は Raycast Target のチェックを外しておいてください。


 画像を設定したら、RectTransfrom コンポーネントの Width とHeight を調整してサイズを変更してください。
また、位置を右上から少しゲームの画面の内側に移動させて、ゲーム画面内の表示させたい位置に調整をしてください。
画像のように、SceneビューとGameビューを一緒に表示しておくと調整が楽です。


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



ComboDetail ゲームオブジェクト SceneビューとGameビュー画像



6.ComboDetail ゲームオブジェクトの子オブジェクトとして、txtHitCount ゲームオブジェクトを作成する


 ComboDetail ゲームオブジェクトを選択して右クリックをしてメニューを開き、UI => Text を選択します。
ComboDetail ゲームオブジェクトの子オブジェクトとして Text ゲームオブジェクトが作成されますので、名前を txtHitCount に変更します。


ヒエラルキー画像



 txtHitCount ゲームオブジェクトはヒット数を表示する役割を持ちます。


 Text コンポーネントの Text プロパティに "1 Hit!" と文字を入力してください。これを基準にサイズやフォントの設定を行います。
今回はフォントを変更し、フォントスタイルを Bold & Italic に、Alignment の文字の位置は中央・中央で設定しています。
また文字装飾用に CircleOutline コンポーネントを追加して、アウトラインをつけていますが、この辺りは自由に設定を行ってください。

 設定後は Raycast Target のスイッチからチェックを外してください。


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



 最後に位置を調整します。RectTransfrom コンポーネントのPositionや、Sceneビューにてサイズと位置を調整し、吹き出しの中に収まるように設置します。
調整が終了したら、Text プロパティの文字列は削除して何も入力されていない状態にしておいてください。
ここにはスクリプトを利用してヒット数を表示させます。


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



txtHitCount ゲームオブジェクト SceneビューとGameビュー画像



 以上でコンボ数表示用のゲームオブジェクトの作成は完了です。


7.<CircleOutline>


 Github で公開されている文字装飾用のスクリプトです。
文字の外枠に対して作用し、通常の Outline コンポーネントよりもくっきりとした輪郭を作って装飾することが出来ます。

CircleOutline
https://gist.github.com/FreelyApps/e9f3f4a4d89882b...


8.ComboDetail ゲームオブジェクトをプレファブにする


 ComboDetail ゲームオブジェクトをプレファブにします。ヒエラルキーにある ComboDetail ゲームオブジェクトは削除してください。
続いて ComboDetail スクリプトを作成して、プレファブにした ComboDetail ゲームオブジェクトにアタッチします。


2.ComboDetail スクリプトを作成して、ComboDetail ゲームオブジェクトにアタッチして設定する

1.設計


 先ほどプレファブにした ComboDetail ゲームオブジェクトの制御を行うためのスクリプトを作成します。

 DOTweenアセットを利用して表示する際と消える際に演出を行います。表示される際にサイズを一瞬だけ大きくし、その後、徐々に消えていくようにします。
コンボ数に比例して、数が多くなるほど表示する際のサイズも大きくなるようにします。また表示される位置も毎回ランダムに調整して変更します。


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


 DOTweenアセットを利用して表示する際と消える際に演出を行いますので、そのために必要なコンポーネントのアサイン情報を取得するための変数を3つ用意します。
また RequireComponent 属性を利用して、ゲームオブジェクトに必要なコンポーネントを自動的にアタッチし、アタッチ漏れがある場合には警告が表示されるように制御を行います。


ComboDetail.cs



3.プレファブにした ComboDetail ゲームオブジェクトに ComboDetail スクリプトをアタッチする


 プレファブにした ComboDetail ゲームオブジェクトを選択して、インスペクターから Open Prefab をクリックして、プレファブの編集モードにします。

 作成した ComboDetail スクリプトをドラッグアンドドロップしてアタッチしてください。スクリプトに RequireComponent 属性が設定されていますので
アタッチと同時に RequireComponent 属性の引数で指定している CanvasGroup コンポーネントが自動的にアタッチされます。


<手順動画 RequireComponent属性を利用した自動アタッチ>
https://gyazo.com/f1fff6ed1a1791920c208f5cecf38741


4.<RequireComponent(typeof(クラス名/コンポーネント名))]属性>

  
 この[RequireComponent(typeof(クラス名/コンポーネント名))]属性は、(引数)で指定したクラスやコンポーネントがゲームオブジェクトにアタッチされていないとエラーが出るようになります。 
またこの属性が定義されているスクリプトをゲームオブジェクトにアタッチすると、引数で指定しているコンポーネントが自動的にアタッチされます。(今回はCanvasGrourp)
 
 今回はCanvasGroupコンポーネントが必要になりますので、[RequireComponent(typeof(CanvasGroup))]属性を追加して、コンポーネントのアタッチを必須条件にしています。


参考サイト
Unity公式スクリプトリファレンス
RequireComponent
https://docs.unity3d.com/ja/current/ScriptReferenc...
Qiita JunShimura様
[Unity初心者Tips]確実に!必要なComponentを入れるRequire ComponentとReset()
https://qiita.com/JunShimura/items/6576eb63c19c2c9...


5.ComboDetail ゲームオブジェクトにアタッチした ComboDetail スクリプトの設定を行う


 ComboDetail スクリプトの設定を行います。


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



編集モード時のヒエラルキー画像



 ComboDetail ゲームオブジェクトのインスペクターを確認し、ComboDetail スクリプトに表示されている3つの変数にアサインを行います。
すべて ComboDetail ゲームオブジェクト、あるいは子オブジェクトの情報になりますので、順番にドラッグアンドドロップしてアサインします。
どのゲームオブジェクトをアサインするかは、ComboDetail スクリプトと以下の手順動画を参考にしてください。


<手順動画 アサイン>
https://gyazo.com/ac7ea1e9cd0fb091a9d6c226147e929c


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



 以上でこの手順は終了です。次の手順では、このコンボ表示用のゲームオブジェクトを生成する処理を実装します。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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