【Unity】手札の作成【カードゲーム#4】
お久しぶりです。
色々と荒いですが、手札の見た目部分だけざっくり完成したので
とりあえずメモしておこうと思います。
1.カードのプレハブを作成
見た目はこんな感じです。
画像がまだ用意できていないのでかなり見窄らしいですが、暫くこれで頑張って行こうと思います。
ヒエラルキーはこんな感じ。
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.で用意したカードのプレハブを横に並べてスクロールできる感じで実装します。
楽そうだったので、ScrollViewを使って実装しました。
ContentにHorizontal Layout Groupを指定して中にカードをぶち込めば3秒で手札の完成・・・
画像、枠線内が手札の表示領域です。
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 () { } }
インスペクタのcardPrefabに、1.で作成したカードのプレハブを
cardAddAreaには、Scroll View内のContentを設定しています。
完成だ〜〜〜〜〜
www.youtube.com
当たり前だけど
手札というか完全にスクロールビュー。
早いとこなんとかします。