やりたいこと
キャラクターやアイテムの上にUIを表示したい。
例えば、キャラクターの頭上にHPバーを表示したり、コインを取った時にスコアを表示できるようにしたい
イメージ動画
今回はコインをゲットした時のスコア表示で解説していきます。
やり方
Coinオブジェクトの作成
- まずCoin（Sprite）をシーンに配置します。
- コインの配下にTextを配置します。
- コインの上で右クリックし、UI→Textの順でクリックします。
- するとCanvasが自動で付与され、TextはそのCanvasの子オブジェクトとして配置されます。
- Canvas名をわかりやすくScoreと変更
- Textに100とか任意の数値をいれます（コインをゲットした時、獲得できるスコアを入れる）
- TextのxとyのScaleを適宜に変更します、今回はxとyともに0.04としました。
- Canvas（Score）の設定を変更します。
- Render Mode → World Spaceへ
- Event Cameraは Noneのままで構いません
- Canvas(Score)とTextのPos XとPos Yを0にします。
- Canvas(Score)を非アクティブにしておきます。
Scriptの作成
Coin.cs
using UnityEngine;
public class Coin : MonoBehaviour
{
[SerializeField] GameObject score;
private void OnTriggerEnter2D(Collider2D collision)
{
if (collision.tag == "Player")
{
score.SetActive(true); //<==プレイヤーが触れたら、Canvas（Score)をアクティブに
Destroy(gameObject); //<==コインを削除
}
}
}Score.cs
using System.Collections;
using UnityEngine;
public class Score : MonoBehaviour
{
// OnEnableはアクティブになった時に呼ばれる
private void OnEnable()
{
transform.parent = null;//<==親子関係を解除
var _canvas = GetComponent<Canvas>();
_canvas.enabled = true;
float yPos = _canvas.transform.position.y;
// iTweenを使ってスコアの上昇アニメーションを実行させる
Hashtable hash = new Hashtable();
hash.Add("y", yPos + 1.5f);
hash.Add("time", 0.5f);
hash.Add("oncomplete", "OnComplete");
iTween.MoveTo(gameObject, hash);
}
private void OnComplete()
{
// アニメーションが終わったら自身を破棄する
Destroy(gameObject);
}
}Coin.csとScore.csをそれぞれ同名のオブジェクトにアタッチします。
以上でプレイヤーがコインをゲットしてスコア（100）が頭上に上昇していく動きができるようになりました。
またスコアが上昇していくアニメーションはiTweenという非常に便利なAssetを使っています。
iTweenについてはこちらの記事で詳しく紹介しています。
コメント