ニートの活動報告書

ニートがゲーム作るよ

【Unity】手札の作成【カードゲーム#4】

お久しぶりです。

色々と荒いですが、手札の見た目部分だけざっくり完成したので

とりあえずメモしておこうと思います。
 

1.カードのプレハブを作成

f:id:mantarion:20180810194255p:plain:w200


f:id:mantarion:20180810191949p:plain:w200
見た目はこんな感じです。
画像がまだ用意できていないのでかなり見窄らしいですが、暫くこれで頑張って行こうと思います。

f:id:mantarion:20180810192627p:plain:w200
ヒエラルキーはこんな感じ。
ImageとTextの集合体です。
Buttonがありますが、理由は後述。
・カード名
・カード画像
・カード効果
を表示します。

こちらのプレハブにはCardViewというスクリプトをアタッチしています。

public class CardView : MonoBehaviour {

    [SerializeField] private TextMeshProUGUI cardNameText;
    [SerializeField] private TextMeshProUGUI cardEffectText;

    private MstCards.Card cardData;

    /// <summary>
    /// Instantiate the specified cardData.
    /// </summary>
    /// <param name="cardData">Card data.</param>
    public void Instantiate(CardView prefab, Transform parent, MstCards.Card cardData) 
    {
        //インスタンス化
        CardView item = Instantiate(prefab, parent).GetComponent<CardView>();
        //初期値設定
        item.cardData = cardData;
        //表示
        item.Print();
    }

    /// <summary>
    /// 自身(カード)を拡大して表示する
    /// </summary>
    public void Zoom()
    {
        //省略
    }

    /// <summary>
    /// カード情報を表示する
    /// </summary>
    public void Print() 
    {
        cardNameText.text = this.cardData.name;
        cardEffectText.text = this.cardData.effect;
    }
}

ちらほら見えるMstCardsというのは、Numbersから引っ張ってきたカード情報の集合体です。
詳しくは前回の記事で。
unity-mantario.hatenablog.com

CardView内のInstantiate関数を呼ぶことで、
カードオブジェクトの生成、表示を行ってくれます。

Zoom関数はカードがクリックされた際に呼ばれます。
カードを拡大して表示してくれます。

カードの役割は一旦これで終わりにします。

2.手札の作成

1.で用意したカードのプレハブを
横に並べてスクロールできる感じで実装します。

f:id:mantarion:20180810204510p:plain
楽そうだったので、ScrollViewを使って実装しました。
ContentにHorizontal Layout Groupを指定して中にカードをぶち込めば3秒で手札の完成・・・

f:id:mantarion:20180810232317p:plain:w250
画像、枠線内が手札の表示領域です。

Handには、HandControllerというスクリプトをアタッチしています。

public class HandController : MonoBehaviour {

    [SerializeField] private CardView cardPrefab;
    [SerializeField] private GameObject cardAddArea;

    // Use this for initialization
    void Start () {
        //カードのリストを取得
        List<MstCards.Card> cardList = (Resources.Load("MstCards") as MstCards).cardList;

        //リスト内のカードを全て表示
        for (int i = 1; i < cardList.Count; i++) {
            cardPrefab.Instantiate(cardPrefab, cardAddArea.transform, cardList[i]);
        }
    }
	
    // Update is called once per frame
    void Update () {
    }
}


f:id:mantarion:20180810233642p:plain
インスペクタのcardPrefabに、1.で作成したカードのプレハブを
cardAddAreaには、Scroll View内のContentを設定しています。

完成だ〜〜〜〜〜

www.youtube.com
当たり前だけど
手札というか完全にスクロールビュー。

早いとこなんとかします。