現場レベルのゲーム制作が、すべてここで学べます。
この記事はSlay the Spire風デッキ構築系オリジナルJRPGを作る講座の第11回目です。
前回は取得したレリックや状態異常の内容をキャラのステータス能力に反映させました。
前回の記事：
第11回では取得カード表示UI、いわゆるデッキ画面を作成します。これまでは構築していく自分のデッキの中身がわからない状態でしたがゲーム画面でちゃんと確認できるようにしていきます。
スレスパのようなデッキ構築型要素を持つJRPGが今回で仕上がってきますね。
所有カード表示UI（デッキ画面）の構築
まずは[Scenes]にある[Title]をダブルクリックしてタイトルシーンを開きます。
所有しているカードの一覧を表示するUIであるデッキ画面を作成します。
Hierarchyビューで右クリックし、[UI(Canvas)]→[Canvas]をクリックします。
新しく作成された[Canvas]オブジェクトの名前を[ListCard]に変更し、Inspectorビューを開いて下の画像のように変更します。
SortOrderを2にしています。Dungeon内UIやタイトル画面など常時表示されている通常UIのSortOrderは0。報酬となるカードを選ぶRewardCard画面は1。Information画面のSortOrderは3。
つまりこのデッキ画面はカード報酬画面や通常UIより手前に表示されるが、カードやレリックの情報を表示するUIによって隠されるということです。
スクロールビューの設定を行う
次に[ListCard]オブジェクトを右クリックして、[UI(Canvas)]→[Scroll View]をクリックします。
新しく作成された[Scroll View]オブジェクトの子オブジェクト[Scrollbar Horizontal]と[Scrollbar Vertical]を右クリックし[Delete]をクリックして削除します。
ScrollViewのColorの透明度は255にして透過しないようにしておきました（お好みで変更してもらってもOKです）
次に[Scroll View]→[Viewport]オブジェクトのInspectorビューを開いて下の画像のように変更します。
次に[Scroll View]→[Viewport]→[Content]オブジェクトのInspectorビューを開きます。
Add Componentをクリックして[Grid Layout Group]コンポーネントと、[Content Size Fitter]コンポーネントを追加し、下の画像のとおり設定します。
・GridLayoutGroupの設定
|
1 2 3 |
Cell Size : 200×300 ← カード1枚のサイズ Start Corner : Upper Left ← 左上から並べる Start Axis : Horizontal ← 横方向に並べる |
アンカーがX: 0〜1, Y: 1（横方向stretch）なので親の横幅いっぱいに広がります。
親のViewPortの横幅 ÷ Cell Size X = 1000 ÷ 200 = 5 → 5枚横に並ぶ
・ContentSizeFitterの設定
Vertical Fit : Min Sizeと設定してるので、子要素の数に応じてContentの高さが自動で伸びるようになります。
|
1 2 3 |
カード5枚まで → Contentの高さ = 300 カード6枚から → Contentの高さ = 600 （自動で伸びる） カード11枚から → Contentの高さ = 900 |
・ScrollViewとの関係性
|
1 2 3 |
ScrollView（親）← 表示エリアは固定 └── Content（子）← カードが増えると縦に伸びる → はみ出た分がスクロールで見られる |
プレハブモードからもどって、[ListCard]→[Scroll View]を右クリックして貼り付けます（Ctrl + V もしくは右クリックでPaste）。
（実際のボタン処理は後ほど作成します。）
所有カード表示UI（デッキ画面）を操作するスクリプトを作成
[Assets/Scripts]フォルダを選択して右クリックし、[Create]→[Scripting]→[MonoBehaviour Script]をクリックします。スクリプトファイルの名前を「ListCardController」とします。
ListCardController.cs
まとめ
今回はスクロール対応のデッキ画面UIを作成し、ダンジョン中にいつでも所有カードの一覧を確認できるようにしました。カードをタップすると詳細情報が表示される機能も備わり、デッキ構築ゲームらしいカード管理の仕組みが整いました。
次回はバトルシーン中にカードを長押しするとカードの詳細情報が表示される機能を実装します。タップでカード使用、長押しで情報確認という直感的な操作を実現し、戦略的なカードバトルの完成度をさらに高めていきます。
次の記事：
現場レベルのゲーム制作が、すべてここで学べます。
コメント