ミニゲームを作ってUnityを学ぶ！[ひつじコレクション編]
第11回目: UIの作成（2）
前回はDotweenを使ってUIにTweenアニメーションを設定しました。
引き続き残っているその他UIを作成し、併せてゲームに時間制限を実装します。
スコアを表示する
今まではログ出力で対応していたゲーム内のスコアを画面左上に表示します。
- Canvas内に新しいText「TextScore」を作成
- TextのColorを(R=255, G=255, B=255, A=255)に変更
- AddComponentからShadowコンポーネントを探してアタッチ
- Textの赤枠部分とポジションを以下のように設定
- TextScoreのアクティブのチェックを外して非表示の状態にする
- UiManagerに対応するコードを追加
UiManager;
public void LoadUi()
{
mCenterPanel.gameObject.SetActive(true);
mCenterText.DOFade(0.1f, 1.2f).SetEase(Ease.InCubic).SetLoops(-1, LoopType.Yoyo);
追加 mScoreText.gameObject.SetActive(true);
}
//-----------------
// スコアテキスト //
//---------------------------------------------------------------------------------
[SerializeField]
private Text mScoreText; // TextScoreを指定
public void renewScore(int i)
{
mScoreText.text = "SCORE: " + i;
}
- PlayerActionのスコアに関する部分を修正
PlayerAction.cs;
/// <summary>
/// ゴールエリアに到達。
/// 引き連れているフォロワー数によって点数を獲得。
///
/// 1匹が100点、2匹以上の場合はそれぞれ100点のボーナスが加算されていく
/// 1匹目:100, 2匹目:200, 3匹目:300, 4匹目:400 = 最大で1000
/// </summary>
private void ReleaseFollower()
{
if (mFollowerList.Count <= 0) return;
int score = 0;
int index = 0;
foreach (FollowerModel model in mFollowerList)
{
// スコア計算
score += index * 100 + 100;
index++;
// フォロワーを休眠状態へ
model.Sleep();
}
// スコア加算
GameController gameCon = GameController.Instance;
Scorer scorer = gameCon.Scorer;
scorer.AddScore(score);
変更: gameCon.UiManager.renewScore(scorer.Score);
// 速度設定
mFollowerList.Clear();
mSpeed = MAX_SPEED;
}
PlayerActionではスコアをログ出力していた部分を修正し、TextScoreの描画を更新するように設定しています。
これでスコアが画面に表示されるようになりました。
操作方法を表示する
続いて、画面下部にゲームの操作方法を表示します。
- canvas内に新しいPanel「PanelBottom」を作成
- ImageのColorを(R=0, G=0, B=0, A=200)に変更
- PanelBottomのポジションやサイズを以下のように設定
- PanelBottom内に新しいTextを作成
- TextのColorを(R=255, G=255, B=255, A=255)に変更
- Textの赤枠部分とポジションを以下のように設定
[ W ] Up [ S ] Down [ A ] Left [ D ] Right [ BackSpace ] Restart
- PanelBottomのアクティブのチェックを外して非表示の状態にする
- UiManagerに対応するコードを追加
UiManager;
public void LoadUi()
{
mCenterPanel.gameObject.SetActive(true);
mCenterText.DOFade(0.1f, 1.2f).SetEase(Ease.InCubic).SetLoops(-1, LoopType.Yoyo);
mScoreText.gameObject.SetActive(true);
追加 mBottomPanel.gameObject.SetActive(true);
}
[SerializeField]
private Image mBottomPanel; // PanelBottomを指定
ゲームオーバーを表示する
さらに続いて、プレイヤーがチェイサーに接触した際のゲームオーバー表示を実装します。
- Canvas内に新しいText「TextGameOver」を作成
- TextのColorを(R=255, G=255, B=255, A=255)に変更
- Shadowコンポーネントをアタッチ
- TextとShadowの赤枠部分とポジションを以下のように設定
- TextGameOverのアクティブのチェックを外して非表示の状態にする
- UiManagerとSceneMainを修正
UiManager.cs;
//------------------------
// ゲームオーバーテキスト //
//---------------------------------------------------------------------------------
[SerializeField]
private Text mGameOverText; // TextGameOverを指定
public void ShowGameOverText()
{
mGameOverText.gameObject.SetActive(true);
}
SceneMain;
void Update()
{
CheckBackspaceInput();
switch (mState)
{
// ステージの生成
case STATE.LOAD_STAGE:
mGame.StageManager.LoadStage(1);
mGame.UiManager.LoadUi();
mState = STATE.WAIT_ENTER_KEY;
break;
// Enter入力でゲームを開始
case STATE.WAIT_ENTER_KEY:
if (WaitEnter())
{
mGame.UiManager.HideCenterMsg();
mGame.StageManager.StartGame();
mState = STATE.PLAY;
}
break;
// プレイ中
case STATE.PLAY:
if (mGame.IsGameOver)
{
追加 mGame.UiManager.ShowGameOverText();
mState = STATE.GAME_OVER;
}
break;
}
}
時間制限を実装する
最後に、ゲームに時間制限を実装してそれに対応するUIを作成します。
- Canvas内に新しいText「TextTime」を作成
- TextのColorを(R=255, G=255, B=255, A=255)に変更
- Shadowコンポーネントをアタッチ
- Textの赤枠部分とポジションを以下のように設定
- TextTimeのアクティブのチェックを外して非表示の状態にする
- UiManagerにコードを追加
UiManager.cs;
public void LoadUi()
{
mCenterPanel.gameObject.SetActive(true);
mCenterText.DOFade(0.1f, 1.2f).SetEase(Ease.InCubic).SetLoops(-1, LoopType.Yoyo);
mScoreText.gameObject.SetActive(true);
mBottomPanel.gameObject.SetActive(true);
追加 mTimeText.gameObject.SetActive(true);
}
//-----------------
// タイムテキスト //
//---------------------------------------------------------------------------------
[SerializeField]
private Text mTimeText;
public void RenewTime(int i)
{
mTimeText.text = "TIME: " + i;
}
public void ChangeTimeTextColorIntoRed()
{
mTimeText.color = new Color(1.0f, 10.0f / 255.0f, 0.0f, 1.0f);
}
- StageManagerにスコアに関するコードを追加
StageManager.cs;
public void StartGame()
{
// 制限時間を設定
追加 mRestTime = 100;
// プレイヤーとチェイサーの行動開始
mConstructor.OnActivePlayer();
mConstructor.OnActiveChaser();
// コルーチンを開始
StartCoroutine("PopupFollower");
追加 StartCoroutine("CountDown");
}
//------------
// 制限時間 //
//---------------------------------------------------------------------------------
private int mRestTime;
private IEnumerator CountDown()
{
while (true)
{
yield return new WaitForSeconds(1.0f);
// 制限時間終了でプレイヤーをダウン状態へ遷移 → それによってEndGameが呼ばれる
mRestTime--;
if (mRestTime <= 0)
{
mRestTime = 0;
GameController.Instance.UiManager.RenewTime(mRestTime);
mConstructor.Player.GetComponent<PlayerAction>().OnDown();
yield break;
}
// 残り時間10秒になったときにテキストの色を赤に変更する
if (mRestTime == 10) GameController.Instance.UiManager.ChangeTimeTextColorIntoRed();
GameController.Instance.UiManager.RenewTime(mRestTime);
}
}
ゲームスタートと同時にカウントダウンのコルーチンを開始し、残り時間が0秒になったタイミングでユニティちゃんのダウンアニメーションを開始。
ダウンアニメーションには以前にアニメーションイベントを設定していますので、最終的にはStageManager#EndGame()が呼ばれることでゲームオーバーの処理が行われます。
この作品はユニティちゃんライセンス条項の元に提供されています