今回はランゲームにおいて、進んだ分だけスコアが加算されて、
ダメージ処理の時にライフ画像を１個ずつ消す方法の紹介です。

ランゲームを作ろう⑤、スコアの実装とライフ画像の実装！

※前回からの続きなのでスクリプトの内容であったり使うプログラミング変数も
変わってくるので慣れていない人は前回の記事から参考にしてください。
www.unityprogram.info

f:id:Phoenix9056:20200504195552p:plain

前回の続きからやっている方が対象になるのですが
インストールしたNejikoRunアセット、
①のNejikoRun-master⇨②Scriptは右クリック⇨Deleteから削除してください。

スクリプト内容の使う変数がほとんど同じなので、
スクリプトを作っていく過程で『同じようなコードがありますよ！』
って感じでエラー吐いてしまうためです。

まずハートイメージのアセットをインポートします。

エディタ画面の上部にあるWindow⇨Asset Storeをクリックして
アセットストアを開いて、Simple Heart Health Systemと検索して
ダウンロード＆インポートしましょう。
※ブラウザでのインポートは下記リンクより。
assetstore.unity.com

f:id:Phoenix9056:20200504200744p:plain

Hierarchy内にある①＋⇨UI⇨Text-TextMeshProを選択して
名前をScoreに変更して②のように作ります。
配置場所は画面の左上に持っていきます。
※CanvasをダブルクリックするとScene編集画面が上手いこと
移動するのでそこからテキストを動かすのがオススメです。

次にScoreのInspector内の③Textに『Score:9999m』と入力して、
④のFont Assetは自分が好みの文字の形を選んでください。
⑤のFont Sizeは大きさなので好みの大きさで良いのですが、
大きくしたらScene画面内のテキストの白い囲み枠も広げないと
横一行で表示されないので注意が必要です、

色も好きな色を選択してみましょう。

今度はハートの画像の設定をしていきます。

Hierarchy内にあるCanvasの上で右クリック⇨UI⇨Imageを
選択して名前をLife1にしましょう。
続けて同じ手順でLife2、Life3と作って①のようにしてください。

ProjectのAssets内にある先程インポートした、
②Health Heart System⇨③Graphicsをクリックして
④mini-heartをドラッグしてLife1のInspector内にある
⑤のSource Imageの部分にドラッグ＆ドロップしてください。

f:id:Phoenix9056:20200504202847p:plain
画像を扱う上での注意点なのですがmini-heartの
Inspector内にあるTexture Typeの①がSprite(2D and UI)になっていないと
画像がUnityで扱えないのでなっていなければ変更して、
②のApplyを選択して扱えるようにしましょう。

Life2、Life3も同じ手順で画像を追加して、
⑥のように右から順番にLife1~Life3と移動して並べてください。

ハートの画像を一つにまとめていきます。

今度は、Hierarchy内のCanvasの上で右クリック⇨UI⇨Panelを選択して
名前をLifePanelに変更しましょう。
Scene画面で形をハート3つを囲むように①のように小さくしてください。

今度はLifePanelにLife1〜Life3をドラッグ＆ドロップして、
②のように子要素にして一つにまとめます。

f:id:Phoenix9056:20200504204247j:plain

LifePanelのInspector内にあるImageの
チェックボックスは外して色が表示されないようにしましょう。

画像の表示を管理するスクリプトを作っていきます。

ProjectのAsset内の自分が分かりやすい所で、
右クリック⇨Create⇨C# Scriptを選択して
名前をLifePanelにして①のスクリプトを作成していきます。

次のコードをコピー＆ペーストするか同じ記述にしてください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LifePanel : MonoBehaviour
{
    public GameObject[] lifes;
    
    public void UpdateLife (int life)
    {
        for (int i = 0; i < lifes.Length; i++)
        {
            if (i < life) lifes[i].SetActive(true);
            else lifes[i].SetActive(false);
        }
    }
}

出来た①のスクリプトをHierarchy内にある②LifePanelに
ドラッグ＆ドロップしてアタッチします。

次にInspector内から③のように
Sizeの値を３に変更して、
Life1〜Life3をドラッグ＆ドロップします。

最後にスコアと画像をコントロールするスクリプトを作成します。

Hierarchy内の＋⇨Create Emptyを選択して
空のGameObjectを作成して名前をGameControllerに変更して
①のようにします。

同じ手順でスクリプトを作成して名前を
GameControllerに変更して②を作成してください。
次のコードをコピー＆ペーストするか同じ記述にしてください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using TMPro;

public class GameController : MonoBehaviour
{
    public CharaMove chara;
    public TextMeshProUGUI scoreText;
    public LifePanel lifePanel;

    
  public void Update()
    {
        int score = Score();
        scoreText.text = "Score : " + score + "m";

        lifePanel.UpdateLife(chara.Life());
        
    }

    int Score ()
    {
        return (int)chara.transform.position.z;
    }
}