Edited at

ひつじコレクション - 11. UIの作成(2)

More than 1 year has passed since last update.

ミニゲームを作ってUnityを学ぶ![ひつじコレクション編]


第11回目: UIの作成(2)

前回はDotweenを使ってUIにTweenアニメーションを設定しました。

引き続き残っているその他UIを作成し、併せてゲームに時間制限を実装します。


スコアを表示する

今まではログ出力で対応していたゲーム内のスコアを画面左上に表示します。


  • Canvas内に新しいText「TextScore」を作成

  • TextのColorを(R=255, G=255, B=255, A=255)に変更

  • AddComponentからShadowコンポーネントを探してアタッチ

  • Textの赤枠部分とポジションを以下のように設定

action_sheep_ss_11_1.jpg


  • 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の描画を更新するように設定しています。

action_sheep_ss_11_2.jpg

これでスコアが画面に表示されるようになりました。


操作方法を表示する

続いて、画面下部にゲームの操作方法を表示します。


  • canvas内に新しいPanel「PanelBottom」を作成

  • ImageのColorを(R=0, G=0, B=0, A=200)に変更

  • PanelBottomのポジションやサイズを以下のように設定

action_sheep_ss_11_3.jpg


  • PanelBottom内に新しいTextを作成

  • TextのColorを(R=255, G=255, B=255, A=255)に変更

  • Textの赤枠部分とポジションを以下のように設定

action_sheep_ss_11_4.jpg


[ 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を指定


action_sheep_ss_11_5.jpg


ゲームオーバーを表示する

さらに続いて、プレイヤーがチェイサーに接触した際のゲームオーバー表示を実装します。


  • Canvas内に新しいText「TextGameOver」を作成

  • TextのColorを(R=255, G=255, B=255, A=255)に変更

  • Shadowコンポーネントをアタッチ

  • TextとShadowの赤枠部分とポジションを以下のように設定

action_sheep_ss_11_6.jpg


  • 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;
}
}


action_sheep_ss_11_7.jpg


時間制限を実装する

最後に、ゲームに時間制限を実装してそれに対応するUIを作成します。


  • Canvas内に新しいText「TextTime」を作成

  • TextのColorを(R=255, G=255, B=255, A=255)に変更

  • Shadowコンポーネントをアタッチ

  • Textの赤枠部分とポジションを以下のように設定

action_sheep_ss_11_8.jpg


  • 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()が呼ばれることでゲームオーバーの処理が行われます。

action_sheep_ss_11_9.jpg


次のページに進む

イントロダクションに戻る





ユニティちゃんライセンス

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