Unityに関連する記事です

 以下の内容で順番に実装を進めていきます。
手順8〜10では、UIを追加してゲーム内の値を反映させていきます。

14.DOTweenをインポートして設定する
15.Canvas内にパズルゲーム用のUI部品を作成する◆淵好灰表示部分)



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

・Canvas内の表示の優先順位
・Textゲームオブジェクトのプレファブ化のメリット



14.DOTweenをインポートして設定する


 DOTweenはUnityのアセットストアにて無償で公開されている、Tween系アセットです。
アセットストアにサインインして、検索でDOTweenと入力すれば見つかります。Pro版(有償)もありますが、無償版で問題ありません。



直接のリンクアドレスはこちらです。
https://assetstore.unity.com/packages/tools/animat...

 ダウンロードしてUnityにインポートしてください。インポート設定はそのままで問題ありません。
インポートされるとProject内にDemigiantというフォルダが追加されます。こちらがDOTweenアセットのフォルダになります。

 インポート後、DOTween Utility Panelという、DOTweenの設定用のポップアップウインドウが自動的に開きますので、Setup DOTweenボタンを押して実行しましょう。
もしも自動で開かない場合には、Unityの左上のメニューより Tools => Demigiant => DOTween Utility Panel を選択すればウインドウを開くことが出来ます。



 準備用のポップアップがさらに開いて、準備が完了するとApplyボタンが押せるようになります。



 これでDOTweenの準備が完了し、Unityで利用できるようになりました。先ほどのDOTween Utility Panel ウインドウは閉じてしまって問題ありません。

 なおDOTweenには様々な機能がありますが、今回の製作ではその一部を利用していきます。
詳しい説明は公式リファレンス、あるいは多くの使用方法の紹介記事がありますので、ご自分で調べてみてください。

公式サイトのリンク(ドキュメント)
http://DOTween.demigiant.com/documentation.php
 

15.Canvas内にパズルゲーム用のUI部品を作成する◆淵好灰表示部分)


 ヒエラルキーにあるCanvasゲームオブジェクトの中に、新しくゲームオブジェクトを追加していきます。
これらはスコア(獲得した点数)表示用の部品となります。この手順が終わった際には、下記の画像のような形になります。

ヒエラルキー 参考画像



作業環境を整える


 最初に、作業をしやすくするために環境を整えます。

 Canvas内にあるGameGroundゲームオブジェクトを選択し、インスペクターの名前の横にあるチェックを外します。(ヒエラルキーの文字色が灰色になります。)
これて一時的にGameGroundゲームオブジェクトが非表示になります。画像が重なる場所で作業を行うため、UI部分の製作が終わるまでは非表示にしておきます。

 また、各部品を設置したら適宜なタイミングでこのGameGroudのオン/オフを切り替えて、どのようなゲーム画面になっているかを確認するようにします。

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



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


 Canvas上で右クリックを行い、Create Emptyで空のゲームオブジェクトを1つ作成します。名前をUIに変更します。
このゲームオブジェクトをフォルダ代わりとし、この中にUIとして画面前面へと表示するゲームオブジェクトを追加していきます。
UIゲームオブジェクトは必ずCanvas内に作成してください。(インスペクターにRectTransfromがアタッチされていれば大丈夫です)

UIゲームオブジェクト



UIゲームオブジェクトの子オブジェクトとして、TopUIゲームオブジェクトを作成する


 UIゲームオブジェクトの上で右クリックを行い、UI => Image ゲームオブジェクトを1つ作成し、名前をTopUIに変更します。
このTopUIゲームオブジェクトに画面上部に表示する背景画像を設定する役割とフォルダ機能としての役割を持たせて、ゲーム画面の上部に関連するUIのゲームオブジェクトをまとめて管理させます。

 TopUIゲームオブジェクトのインスペクターを確認し、RectTransfromコンポーネントの設定を下記の画像を元に適宜に調整します。Sceneビューでも調整できます。

 その後、Imageコンポーネントに任意の画像を指定します。(無料素材をダウンロードしてインポートしてください)これが画面上部のUI部分を表示する背景画像になります。
大きさについては、RectTransfromやSceneビューの中で直接変更してください。
 合わせてImageコンポーネントにある Raycast Target のチェックを外します。
このチェックが外れているとRayの対象にならなくなりますので、タップやスワイプがこのゲームオブジェクトを感知しなくなります。

TopUIゲームオブジェクト


SceneビューでのTopUIゲームオブジェクト(Canvas内に収まるように左右の幅を調整します)



<Canvas内の表示の優先順位>


 ヒエラルキー内での並び順はゲーム画面上での優先順位を左右しません。ヒエラルキーの一番上にあろうが、一番下にあろうが、それは画面表示の優先順位には関係しない情報になっています。
 
 ですがCanvasを持つゲームオブジェクトに関しては扱いが変わります。このCanvasの子となっているゲームオブジェクトに関しましては
同じ階層で並んでいるゲームオブジェクトについて、Canvas内で下側に行くほど画面への優先順位が高くなります。



 このようなCanvas内での並び順の場合、GameGroundとEtoSetTranとUIの3つが同じ階層にありますが、画面への優先順位は

GameGround → EtoSetTran → UI

 となりますので、GameGroundの画像の上にUIの画像が表示されるようになります。

 優先順位の関係がうまくいかない場合には、この並び順を確認してみてください。


TopUIゲームオブジェクトの子オブジェクトとして、Scoresゲームオブジェクトを作成する


 TopUIゲームオブジェクトの上で右クリックを行い、UI => Image を選択し、ゲームオブジェクトを作成します。名前をScoresに変更します。
Scoresゲームオブジェクトでは、Score表示部の背景画像を設定するとともに、この画像上に表示するText関連を管理する役割を持たせます。

 Scoreゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。(細かい数字は適宜切り上げてください)

 つづいてImageコンポーネントのSourceImageにスコア表示部分の背景となる画像を設定します。
ここではUnityのBackGround画像を設定し、色と透明度を変更して利用していますが、自由に設定してください。
 合わせてImageコンポーネントにある Raycast Target のチェックを外します。

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


Scoresゲームオブジェクト Sceneビュー画像



Scoresゲームオブジェクトの子オブジェクトとして、TextBaseゲームオブジェクトを作成する


 Scoresゲームオブジェクトの上で右クリックを行い、UI => Text を選択し、ゲームオブジェクトを作成します。名前をTextBaseに変更します。
このゲームオブジェクトのTextコンポーネントの機能を利用して、ゲーム中に獲得した点数をスコアとして画面に表示させます。

 TextBaseゲームオブジェクトを選択し、RectTransfromコンポーネント、あるいはSceneビュー内で大きさを調整します。

 調整しましたら、Textコンポーネントを確認し、文字の大きさや配置などを調整します。またフォントを設定します。Text欄には 0 を入力してください。
文字の大きさがRectTransfromで指定しているサイズよりも大きくなると文字が見えなくなりますので、バランスを調整して文字が表示されるようにしてください。
フォントは変更しなくても問題ありません。

 文字装飾を行う場合にはOutlineコンポーネントやShadowコンポーネントなどをアタッチして調整してください。

 ここまでの手順が終了しましたら、このTextBaseゲームオブジェクトをプレファブ化します。Project内のPrefabフォルダにドラッグアンドドロップしてプレファブにしてください。
ヒエラルキーの文字色とアイコンの色が青くなればプレファブ化できています。ヒエラルキーのTextBaseゲームオブジェクトの名前をTextBaseからTxtScoreへ変更します。

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


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


TxtScoreゲームオブジェクトのScene画像



 また、プレファブになったTextBaseゲームオブジェクトの名前を、TextBasePrefabに変更してください。



<Textゲームオブジェクトのプレファブ化のメリット>


 今回Textコンポーネントを持つゲームオブジェクトをプレファブ化して名前をTextBasePrefabに変更しました。

 これから何回かTextコンポーネントを持つゲームオブジェクトを追加していくことになりますが、
その際には、新しいTextコンポーネントを持つゲームオブジェクトを作成するのではなくて、このTextBasePrefabをヒエラルキーに設置して利用するようにします。

 利点としましてはフォントの変更やTextコンポーネント以外の設定の反映が挙げられます。

 例えばフォントを変更したい場合、1つ1つのTextコンポーネントを持つゲームオブジェクトが別のゲームオブジェクトである場合には
それらを1つずつ順番に選択していって、ずべてのTextコンポーネントのフォント設定を設定し直さなければなりません。
ですがそれがすべて共通しているプレファブであれば、設計図であるTextBasePrefabを変更しただけで、すべてのTextコンポーネントのゲームオブジェクトに対して
フォントの変更が自動的に反映されます。

 またOutlineコンポーネントなどの追加/削除なども、プレファブを利用していれば、設計図であるTextBasePrefabのコンポーネントの設定を行えば済みます。
ゲームオブジェクトを確認して、1つずつにコンポーネントをアタッチしたりリムーブしたりという作業がなくなります。
 
 プレファブを有効に利用することによって、作業の効率化、集約化を図ることが可能です。
そして詳細に設定を行いたいゲームオブジェクトだけを選択して、調整を行えば設定を完成できます。


Scoresゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置する


 先ほど作成したTextBasePrefabをScoresゲームオブジェクトの子オブジェクトとして配置します。
TextBasePrefabをドラッグアンドドロップしてヒエラルキーのScoresゲームオブジェクトの子として配置してください。

 名前を TxtLabel に変更します。これはスコア表示の部分のラベルの役割を持ちます。

 TxtLabelゲームオブジェクトのインスペクターを確認して、RectTransfromコンポーネント、あるいはSceneビューを利用して位置と大きさを調整します。
下記の画像を参考に、適宜な位置と大きさに調整をしてください。

 TextコンポーネントのText欄には Score: と入力します。これで常に画面上にはScoreの文字が表示されるようになり、この部分がScore表示であると認識できます。

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


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


TxtLabelゲームオブジェクトのSceneビュー画像


 
 以上でスコア表示に関連するUI部品の作成は終了です。


UIの確認


ここまでに追加した、UI部分のSceneビュー画像です。


GameGroundゲームオブジェクトをオンにした場合のGameビューの画像です



UIゲームオブジェクトの子オブジェクトとして、BottomUIゲームオブジェクトを作成する


 今後の設定に合わせて、画面下部に表示するUI部分の部品も作成しておきましょう。

 UIゲームオブジェクトの上で右クリックを行い、UI => Image ゲームオブジェクトを1つ作成し、名前を BottomUI に変更します。
このBottomUIゲームオブジェクトには画面下部に表示する背景画像を設定する役割と、下部に表示するUI部品を管理させるフォルダ機能としての役割を持たせます。

 BottomUIゲームオブジェクトのインスペクターを確認し、RectTransfromコンポーネントの設定を下記の画像を元に適宜に調整します。Sceneビューでも調整できます。

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


 その後、Imageコンポーネントに任意の画像を指定します。これが画面下部のUI部分を表示する背景画像になります。
大きさについては、RectTransfromやSceneビューの中で直接変更してください。
 合わせてImageコンポーネントにある Raycast Target のチェックを外します。


完成品を確認する


 ここまででCanvasにゲームオブジェクトを追加する作業は終了です。各状態を確認してください。


TopUIとBottomUIを追加したヒエラルキーの画像


TopUIとBottomUIのSceneビュー画像


TopUIとBottomUIを追加したGameビュー画像(ゲーム画面になります)


TopUIとBottomUIを追加してGameGroundゲームオブジェクトも表示した場合のSceneビュー画像



 UIの部分がGameGroundに隠れてしまっていないか、Scoreの表示と0の表示が隠れてしまっていないか、確認しても問題があれば修正してください。



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

 次は 手順9 です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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