Unityに関連する記事です

 この手順ではゲームを起動するとタイトルを表示し、ゲーム画面をクリック(タップ)すると、ゲームがスタートする処理を実装していきます。


<実装画面 タイトル表示 => ゲーム画面をクリックするとゲームがスタート>
https://gyazo.com/4adf6f3c50f6f84e061db68d2a0acec4


<実装動画 ゲームオーバー表示中にゲーム画面をクリックすると再度タイトルが表示されて、ゲームがスタートできる>
https://gyazo.com/35c16697d451ff10db5c483b94169c86


手順23 ータイトル表示の実装ー
40.Canvas内にUI部品を作成するぁ淵織ぅ肇詆充─
41.ゲーム起動時にタイトルを表示し、タップするとゲームが開始される処理を追加する(UIManagerスクリプト)



 新しく学習する内容は以下になります。

 ・if 文のブロック表記の省略記法
 ・メソッドの引数の活用



40.Canvas内にUI部品を作成するぁ淵織ぅ肇詆充─

1.設計


 タイトルの表示は Canvas内にゲームオブジェクトを設置して作成します。
これらのゲームオブジェクトを UIManager スクリプトを利用して制御することで、タイトルを表示したり、非表示にしたりします。

 またゲームオーバー表示に利用している txtInfo ゲームオブジェクトにも制御を行い、Game Start の文字を表示させます。
 

タイトル表示用のゲームオブジェクト群の完成時のヒエラルキー画像



 最初に Canvas内にタイトル表示に必要なゲームオブジェクト群を作成し、その後、UIManager スクリプトを修正していきます。


2.タイトル表示のゲームオブジェクトを作成する

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

 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択して、空のゲーオブジェクトを作成します。
名前を TitlePlace に変更します。このゲームオブジェクトはこれから作成するタイトル表示用のゲームオブジェクト群のフォルダの役割を持ちます。


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



 TitlePlace ゲームオブジェクトを選択して、インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加してください。
設定は特に変更ありません。このコンポーネントを利用して、複数の子オブジェクトをまとめて表示したり、非表示へと制御します。


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



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



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

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


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



 このゲームオブジェクトは見えないボタンとしての役割を持ちます。
 Sceneビューにて、Canvas と同じサイズまでゲームオブジェクトを大きくして設置してください。
このゲームオブジェクトはボタンとしての機能を果たすため、画面一杯に設定しておくことで、画面のいずれの部分をクリックしてもボタンが反応するように出来ます。


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



 btnTitle ゲームオブジェクトの Image コンポーネントの Color プロパティ欄を選択し、Alpha を 0 に設定して透明状態にしてください。
また、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを入れてください。


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



 Button コンポーネントには変更はありません。OnClick イベントにはスクリプトからメソッドを登録します。


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



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

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


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



 このゲームオブジェクトはゲームのタイトル文字を表示する役割を持ちます。


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



 Text コンポーネント の Text プロパティ欄にゲームタイトルを自由に入れてください。
ここでは Ballon Flight と文字を入力しています。フォントの種類やサイズも自由に設定してください。
今回は太字(Bold)かつ、白字にして、 Outline コンポーネントを利用して黒い縁取りを文字装飾をしています。
文字の位置は中央寄せ・中央位置に設定しています。

 Text コンポーネントの Raycast Target のチェックを外しておいてください。


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



 Text の設定が終了したら、SceneビューやGameビューを見ながら、Canvas内にゲームオブジェクトの位置を設定してください。(インスペクター画像も参考にしてください)


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



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

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


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



 このゲームオブジェクトはタイトル表示中に画面のクリック(タップ)を促す文字を表示する役割を持ちます。
またユーザーに気づかせるように、UIManager スクリプトを利用して点滅アニメさせます。


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



 Text コンポーネントの Text プロパティ欄に "Tap Start!" と入力してください。
ここでは Ballon Flight と文字を入力しています。フォントの種類やサイズも自由に設定してください。
文字の位置は中央寄せ・中央位置に設定しています。

 Text コンポーネントの Raycast Target のチェックを外しておいてください。

 Text の設定が終了したら、SceneビューやGameビューを見ながら、Canvas内にゲームオブジェクトの位置を設定してください。(インスペクター画像も参考にしてください)


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



 Text とサイズ・位置の設定が終了したら、インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加してください。
点滅アニメを実装する際に利用します。特に設定は必要ありません。


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



 以上でタイトル表示用のゲームオブジェクトの作成は完了です。

 TitlePlace ゲームオブジェクトにアタッチされている CanvasGroup コンポーネントの Alpha の値を操作してみてください。
子オブジェクトが一緒に表示、非表示されます。この制御を UIManager スクリプトを利用して行うことにより、タイトル表示を制御します。
確認後は Alpha は 1 に戻しておいてください。


<検証動画 CanvasGroupの操作>
https://gyazo.com/9f502ae437156335a0123155e9d436da


41.ゲーム起動時にタイトルを表示し、タップするとゲームが開始される処理を追加する

1.設計


 UIManagerスクリプトを修正して、ゲーム起動時にタイトル用ゲームオブジェクトを表示させる制御を追加します。
タイトル表示中にゲーム画面をクリックすると、タイトルが徐々に非表示になるとともに、
ゲームオーバーと表示していた InfoPlace ゲームオブジェクトの txtInfo ゲームオブジェクトに " Game Start" と表示させます。

 ゲームオーバーになって再度ゲームをスタートする場合にも、またタイトル表示から始まります。

 ゲーム起動時からタイトル表示が非表示になるまでの処理はすべて UIManager スクリプトに記述を行います。
その際、4つのメソッドが一連の処理で動いているので、その挙動をしっかりと理解しながら処理を作成してください。

 UIManager スクリプト内の流れは以下の通りです。

1.Start メソッドが実行されて、SwitchDisplayTitle メソッドが実行される
  SwitchDisplayTitle メソッドはタイトル表示の切り替えを行うメソッドであり、始めはタイトルが徐々に表示される
  ↓
2.タイトル表示中は画面のクリックを待つ
  画面がクリックされると Button コンポーネントの OnClick イベントに登録された OnClickTilte メソッドが実行される
  ↓
3.OnClickTitle メソッドが実行されると、2回目の SwitchDisplayTitle メソッドが実行される。今度はタイトルが徐々に非表示になる
  またコルーチンメソッドである DisplayGameStartInfo メソッドも実行される
  ↓
4.DisplayGameStartInfo メソッドが実行されると、txtInfo ゲームオブジェクトの Text コンポーネントの Text 欄に "Game Start"が代入されて画面に表示される
  一定時間後に徐々に文字が消えて、タイトルの表示も非表示になる  

 SwitchDisplayTitle メソッドは2回実行されて、その都度、引数の情報を利用して処理を変化させています
1回目はタイトルを表示し、2回目はタイトルを非表示にしています。引数を上手に活用すれば1つのメソッドでメソッド2つ分の役割を賄えます


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


 新しくメンバ変数を3つ追加します。いずれもタイトル用のゲームオブジェクトのコンポーネントを操作するための変数です。

 先ほど説明した処理を実装するためにメソッドを新しく4つ追加します。繋がりをしっかりと把握しましょう。


UIManager.cs

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



3.<if 文のブロック表記の省略記法>


 if 文内の処理が1行のみである場合、{ } のブロックを省略して記述することが出来ます。

<if 文の省略記法 
    if (isSwitch) canvasGroupTitle.alpha = 0;

<if 文の省略記法◆
    if (isSwitch) 
        canvasGroupTitle.alpha = 0;

<通常の if 文の記述>
    if (isSwitch) {
        canvasGroupTitle.alpha = 0;
    } 

 処理が2行以上にわたる場合には省略できませんので、利用する場合には注意が必要です。

 if / else 文の場合にも出来ます。

<if / else文の省略記法>
    if (isSwitch) canvasGroupTitle.alpha = 0;
    else return;


4.UIManager ゲームオブジェクトの UIManager スクリプトを設定する


 UIManagerスクリプトを修正しましたので、UIManager ゲームオブジェクトを選択してインスペクターの UIManager スクリプトを確認してください。
メンバ変数として宣言した3つの変数の情報が追加されていますので、順番にアサインします。


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



 btnTitle 変数には、Button Text コンポーネントの情報が必要です。ここには btnTitle ゲームオブジェクトをドラッグアンドドロップしてアサインします。
btnTitle ゲームオブジェクトにアタッチされている Button コンポーネントの情報がアサインされます。

 lblStart 変数には、Text コンポーネントの情報が必要です。ここには lblStart ゲームオブジェクトをドラッグアンドドロップしてアサインします。
lblStart ゲームオブジェクトにアタッチされている Text コンポーネントの情報がアサインされます。

 canvasGroupTitle 変数には、CanvasGroup コンポーネントの情報が必要です。ここには TitlePlace ゲームオブジェクトをドラッグアンドドロップしてアサインします。
TitlePlace ゲームオブジェクトにアタッチされている CanvasGroup コンポーネントの情報がアサインされます。


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


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



 以上で設定は完了です。


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


 ゲームを実行して動作を確認していきます。何もない状態から、タイトルが徐々に表示されれば成功です。
またクリックを待つ間、Tap Start の文字が点滅を繰り返していれば成功です。

 クリックをした際にタイトルが徐々に非表示になるとともに、画面が薄暗くなり、Game Start の文字が表示されて
また徐々に消えていければ成功です。


<実行動画 ゲームを実行するとタイトル表示する>
https://gyazo.com/4adf6f3c50f6f84e061db68d2a0acec4


 ゲームオーバーになった場合には、先ほどの手順でクリックをするとゲームが最初からスタートする処理を実装していますのでクリックしてみてください。
タイトルの表示から始まって、同じようにクリックをしてゲームがスタートすれば成功です。


<実行動画 ゲームオーバー表示中にゲーム画面をクリックすると再度タイトルが表示されて、ゲームがスタートできる>
https://gyazo.com/35c16697d451ff10db5c483b94169c86


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

 次は 手順24 ークリア条件とゴール地点の自動生成処理の実装ー です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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