Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity5】uGUIでタイトルとゲームオーバー画面を実装!Canvas, Text, Button【フラッピーバード風5】

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.0.0f4 Personal(2015年5月)

f:id:hiyotama:20150513125236p:plain

 

前回の続きです〜

 

今回はタイトル画面からゲーム画面へ行き、障害物にぶつかった時ゲームオーバーとなる一連の流れを実装したいと思います〜

 

【目標】タイトル・ゲームオーバーを付けゲームを回す

 

基本的に以下エッセンスを参照して頂ければ作成できます〜 

 

hiyotama.hatenablog.com

 

【課題1】タイトル画面を作る

まずはtitleシーンを作成します〜

mainシーンと同じbackgroundを背景画像として使用します〜

 

f:id:hiyotama:20150511174615p:plain

backgroundのInspector

 

f:id:hiyotama:20150511174647p:plain

ゲーム画面

 

続いてタイトルとなるGUITextを作成していきます〜

 

f:id:hiyotama:20150511175004p:plain

GUITextのInspectorビュー 

 

f:id:hiyotama:20150511175044p:plain

ゲーム画面

 

続いてボタンを作成します〜ボタンについては、以下エッセンスをご参照下さい〜

 

hiyotama.hatenablog.com

 

今回はエッセンスと同じく以下Sprite画像を使って、ボタンを設定していきたいと思います〜

 

button1

f:id:hiyotama:20150511175452g:plain

button2

f:id:hiyotama:20150511175500g:plain

button3

f:id:hiyotama:20150511175508g:plain

 

Create>UI>Buttonにてボタンを作成し、以下の設定にして下さい〜

 

f:id:hiyotama:20150511180208p:plain

ButtonのInspectorビュー

 

f:id:hiyotama:20150511180244p:plain

Buttonの子オブジェクトTextのInspectorビュー

 

f:id:hiyotama:20150511180336p:plain

ゲーム画面

 

それではButtonを押した時にmainシーンへ移る、mainLoadScriptを以下に載せておきます〜

 

 

OnClickは以下のようにします〜

 

f:id:hiyotama:20150511185517p:plain

 

Build Settingsにて、titleシーンとmainシーンをAdd Currentします〜

 

f:id:hiyotama:20150511185618p:plain

titleとmainをAdd Current

 

次にひよこが上下に飛んでいるアニメーションを、画面左に作りたいと思います〜

2Dアニメーションについては、以下エッセンスをご参照下さい〜

 

hiyotama.hatenablog.com

 

まずはplayer_0とplayer_1のSprite画像をHierarchyへドラッグ&ドロップ〜

 

f:id:hiyotama:20150511180845p:plain

ドラッグ&ドロップ!

 

アニメーションを保存するよう聞かれるので、flying@titleという名前で保存します〜

 

f:id:hiyotama:20150511181054p:plain

 

作成されたplayer_0のScaleを1.5倍にし、Sorting LayerをPlayerにしましょう〜

 

f:id:hiyotama:20150511181339p:plain

player_0のInspectorビュー

 

続いてanimationビューにてアニメーションの設定です〜Positionアニメーションは、X=-5、Z=0は固定で、Yの値だけ変えてますので、以下の画像ではYについてのみ記述しています〜

 

f:id:hiyotama:20150511184228p:plain

 

アニメーションの繋ぎ目については、Curvesより手動で微調整してください〜

 

f:id:hiyotama:20150511184708p:plain

Curvesから手動で微調整可能

 

以上でタイトルシーンが完成しました〜

 

 

f:id:hiyotama:20150511185818p:plain

GAME START !を押すと

 

f:id:hiyotama:20150511185839p:plain

ゲームがはじまる

 

【課題2】ゲームオーバーを実装する

 

まずはゲームオーバー時にひよこのアニメーションを切り替えたいと思います〜

mainシーンにてplayer_0を選択した状態でAnimationビューを開き、Create New Clipを行って下さい〜

 

f:id:hiyotama:20150511191228p:plain

Create New Clipでゲームオーバー時のアニメーションを作る

 

f:id:hiyotama:20150511191324p:plain

gameover@playerという名前で保存

 

次にplayer_2とplayer_3のSprite画像を使って、gameover@playerのアニメーション設定をして下さい〜

 

f:id:hiyotama:20150511191923p:plain

Samples=12、泣いている画像を交互に繰り返すアニメーション

 

次にAnimator画面で、gameoverフラグがtrueになった時に、flying@playerからgameover@playerへ切り替わる設定を行います〜

 

AnimatorビューにあるParametersのプラスボタンからBool型を選択し、gameoverと名づけましょう〜

 

f:id:hiyotama:20150511192226p:plain

gameoverフラグ

 

続いてflying@playerにカーソルをあわせ、右クリックからMake Transitionを選択し、gameover@playerへと矢印を伸ばします〜

 

f:id:hiyotama:20150511192411p:plain

Make Transition

 

f:id:hiyotama:20150511192530p:plain

矢印で結ぶ

 

次にこの矢印にカーソルを合わせ、InspectorビューのConditionsより、gameoverフラグがtrueになった時にgameover@playerへと遷移する設定を行います〜

また、タイムラグは無くしたいので、Has Exit Timeのチェックを外し、Transition DurationとTransition Offsetを0に設定して下さい〜

 

f:id:hiyotama:20150511195447p:plain

Conditionsに、gameoverがtrueになった時という条件を指定

 

これでAnimatorの設定は完了です〜

 

続いてゲームオーバーの文字を作成していきます〜Create>UI>Textを選択し、名前をGameOverとし、以下の設定を行って下さい〜

 

f:id:hiyotama:20150511195714p:plain

GameOverテキストの設定

 

f:id:hiyotama:20150511195734p:plain

こんな感じ

 

次にこのGameOverオブジェクトが、ゲームオーバーになった時だけ表示されるgameOverScriptを取り付けます〜以下ソースです〜

  

 

Startメソッドにて文字を無効にし、外部からLoseメソッド が呼び出された時にGAME OVERの文字を表示するようになっております〜

 

続いてplayerScriptを修正していきます〜以下ソースです〜

 

 

public変数のGameOverGUIが新しく出てきたので、GameOverオブジェクトを指定しておきます〜

 

f:id:hiyotama:20150511194939p:plain

ドラッグ&ドロップ!

 

障害物にぶつかった時にOnCollisionEnter内を実行し、gameoverフラグをtrueにした結果、ジャンプの制限・アニメーションの切替・gameOverScriptのLoseメソッドを呼び出すことによるGAMEOVERの文字の表示を行っています〜

GameOverメソッドでコルーチンを使っているのは、1秒間だけスコアを確認する余裕を持たせるためです〜1秒経ったら、どのタイミングで画面をクリックしてもtitle画面へ戻れます〜

 

【結果】

 

f:id:hiyotama:20150511185818p:plain

タイトル画面から

 

f:id:hiyotama:20150511200228p:plain

ゲーム画面へ進み

 

f:id:hiyotama:20150511200340p:plain

障害物に当たったらゲームオーバー

 

f:id:hiyotama:20150511200416p:plain

クリックするとタイトル画面へ

 

以上、フラッピーバード風のゲームの作り方でした〜

ありがとうございました〜

 

【Unity開発5】下準備【フラッピーバード風:1】

【Unity開発5】プレイヤーピヨを動かしたい!【フラッピーバード風:2】

【Unity開発5】前方に障害物を作り、くぐり抜けたい!【フラッピーバード風3】

【Unity開発5】ゲームにスコア機能を付けたい!【フラッピーバード風4】

【Unity開発5】タイトルとゲームオーバーを作りたい!【フラッピーバード風5】