Unity カードバトルゲームの作り方22 デッキ編集画面にソート機能とカード詳細表示機能を追加する | Unity入門の森 ゲームの作り方

Unity カードバトルゲームの作り方22 デッキ編集画面にソート機能とカード詳細表示機能を追加する

Unity 本格カードゲームの作り方 ハクスラローグライク×デッキ構築型カードバトルRPG「呪術迷宮」を作る


Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像&動画による解説付き

この記事はUnityでハクスラローグライク×デッキ構築型カードバトルRPG「呪術迷宮」を作る講座の第22回目です。

前回までの記事で基本的なシステムは全て完成しましたが、さらにこのゲームを改良して遊びやすくしたいという方のために、改良の一例としてデッキ編集画面の機能を追加する流れを解説します。

前回の記事:

Unity ローグライクカードバトルゲームの作り方21 セーブシステム・BGM・SEの実装とビルド方法を解説
この記事はUnityでハクスラローグライク×デッキ構築型カードバトルRPG「呪術迷宮」を作る講座の第21回です。 前回はダンジョンの無限階層化、デッキ補充システム、そして手札を捨てる処理を実装し、やり込みプレイに対応できるようにシステムを改...

ここでは「デッキ編集画面でもカードの効果を確認できる」機能と「保管中カードリストを並び替えして表示する」機能の2つを説明します。


【Line登録者限定のプレゼントもあるよ!】

カードの表示機能を改良 選択したカード効果をデッキ編集中に表示させる

現状ではタイトル画面内のデッキ編集機能において各カード効果の説明は表示されていません。そのため、カードの効果がわからない場合は一度デッキに組み込んでステージに入る必要があります。

ユーザーが遊びやすくなるように、デッキ編集画面でも選択したカードの効果を確認できる機能を実装していきましょう。

ここではカードの詳細表示ボタンをまず用意x。そしてそのボタンを選択したときに画面左側にカードの拡大画像、右側にその効果説明を表示する実装を行います。

カード詳細関連オブジェクトを作成 UI画面項目の追加

TitleシーンのDeckEditWindow以下にオブジェクトを追加していきます。

DeckEditWindowオブジェクトが非表示(非アクティブ)になっている場合は有効化しておきましょう。

カード詳細表示開始ボタン

DeckEditWindow以下のIntoDeckButton(またはBackToStorageButton)オブジェクトをコピー&ペーストしてカードの詳細を表示するボタンを作成します。

  • オブジェクト名:CardDetailButton
  • 親:DeckEditWindow
  • PosX:0 PosY:-210
  • Width:192 Height:55
  • (Image)Source Image:buttons_3.png
  • (子オブジェクトのSimple Translation Text)日本語:詳 細 英語:Detail

 

詳細表示時の背景パネル

カードの詳細表示を行っている間、後ろのUIを暗くすることで「詳細表示を行っている状態である」ことをわかりやすくしていきます。

そのために画面全体を覆う黒色の半透明なPanelUIオブジェクトを作成しましょう。

  • オブジェクト名:EffectExplainBackGround
  • 親:DeckEditWindow
  • PanelUIとして作成
  • (Image)Color:黒の半透明

 

カード効果説明オブジェクトの複製

効果説明のシステムは戦闘画面にて作成したものを流用して使います。

まずはBattleシーンのEffectExplainDisplayオブジェクトをコピーし、Titleシーンに戻ってDeckEditWindowオブジェクト以下に丸ごと複製しましょう。

 

画面のレイアウトとして「左側に拡大したカードの画像を表示」、「右側に効果説明」という並びにしていきます。

EffectExplainDisplayオブジェクトは画面右側にずらしておきます。(PosXが200辺り)

 

拡大カードオブジェクトを表示させる

先ほど空けた左側のスペースに、詳細表示の対象になっているカードを拡大して表示させましょう。

まずはEffectExplainDisplayオブジェクト以下にCardプレハブをドラッグ&ドロップして生成します。すると以下のようになるはずです。

EffectExplainDisplayオブジェクトにVertical Layout Groupがアタッチされているので、子オブジェクトは全て縦に並べられてしまいます。

しかし今回のCardオブジェクトはEffectExplainDisplayの子に置きたいけれどもLayoutの設定を無視したいです。このような場合はLayout Elementコンポーネントを使用します。

Layout ElementにはIgnore Layoutというパラメータがありますが、これをオンにするとそのオブジェクトは親のLayout設定を無視するようになります。

 

それでは生成したCardオブジェクトにLayout Elementをアタッチし、Ignore Layoutをオンにしてみましょう。これで自由にオブジェクトの位置や大きさ等を変更できるようになるので、画面の左側に配置&Scale値を変更して拡大表示しましょう。

(Anchorsの設定が変わっているので指定する座標が普段とやや異なっています。今回の場合はPosXに-240、PosYに-200くらいで丁度よくなるはずです。)

Scaleのx,yを2にして拡大カードの表示が実現します。

詳細表示画面は画面のどこかをタップすれば閉じる仕様にするので、閉じるボタンの追加は不要です。

カード詳細表示システムを実装しよう

いくつかのスクリプトを編集した後にインスペクタから必要な参照をそれぞれセットし、詳細ボタンの動作を設定すれば完了します。

Card.cs内 新規メソッド

拡大カードオブジェクトの表示に対応できるようCardスクリプトから拡張していきます。

今回のカードオブジェクトは同じものを何度も使いまわすので、その度にアイコン等のUI表示をリセットする機能を追加します。

 

EffectExplainDisplay.cs

拡大カードオブジェクトの表示内容を設定できるよう拡張します。

もちろん従来の戦闘画面での表示機能と共存させます。

 

DeckEditWindow.cs(一部省略)

詳細ボタンが押された時に上記の効果説明システムを表示するようにします。

Update内でタップ判定を待つことで画面のどこをタップしても詳細画面を閉じれるようにします。

動作確認

Inspectorから各種参照をセットします。

DeckEditWindowコンポーネントにはeffectExplainDisplay(効果説明システム)とeffectExplainBackGroundObject(詳細説明時背景パネル)を、

EffectExplainDisplayコンポーネントにはEffectExplainDisplayの子オブジェクトに作成したCard(拡大したカードオブジェクト)をそれぞれ指定しましょう。

最後にCardDetailButtonの押下時処理にButton_CardDetailメソッドを指定すれば実装完了です。

 

これでデッキ編集画面からカードの効果を確認できるようになりました。

確認したいカードをタップして選択した状態で「詳細」ボタンを押せば拡大したカード画像と共に説明が表示され、もう一度タップで終了します。

途中でアタッチ先を間違えたりするとCardプレハブのゲームオブジェクト非アクティブになってる可能性があります。その影響でもしデッキ編集画面のデッキ欄カードが見えなくなっていたらプレハブ設定画面から再度アクティブにしてあげましょう。

保管中カードリストの並べ替え機能 デッキソートシステムの実装

もう一つデッキ編集画面の改良を行ってみましょう。次は画面左側にある保管中カードのリストを並び替え表示するデッキソートシステムを作ってみます。

現状では全てのカードはserialNum(通し番号)の昇順で整列されていますが、それだけだとカードの種類が大量に増えた時に目的のカードを見つけにくいですよね。ユーザビリティを向上させるため、「カード番号順」、「効果量の大きさ順」、「強度順」の3種類の並び順に変更できるようにしていきましょう。

整列方法変更ボタンを作成する

ボタンを押す度に保管中カードの並び順が変更されるボタンを配置します。CardDetailButtonオブジェクト等をコピーペーストして作ると楽です。画面上部の空いているスペースに置きましょう。

DeckEditWindow以下に作成しますが、EffectExplainBackGroundより奥で表示されるように並び順を変更する必要があります。

  • オブジェクト名:SortTypeButton
  • 親:DeckEditWindow
  • PosX:-80 PosY:205
  • Width:150 Height:50
  • (Image)Source Image:buttons_4.png
  • 子オブジェクトのSimple Translation Textは削除

 

整列方法変更システム

スクリプトの実装に入っていきますが、まずは「効果量の大きい順に並べ替える」処理の実装のために必要なこととして、全てのカードの効果量の合計値を記録しておくようにします。

CardDataSO.cs

カードごとに効果量合計値を記録するのでまずはCardDataSOに記録用の変数を追加します。

続きを読む

このコンテンツはパスワードで保護されています。 コンテンツを読みたい方はUnity入門の森ショップ(https://unityforest.shop/)で講座閲覧権を取得してね。

アタッチしたら再生ボタンを押してデッキソートシステムがちゃんと動いているか確かめてみましょう。

これで画面上部のボタンを押す度に3種類の方法で並び替えを行ってくれるようになりました。

カードの種類が多くなればなるほど、プレイヤーは目的のカードを探しづらくなるのでこのようなユーザビリティ向上の配慮をしてあげると良いでしょう。

まとめ

以上がデッキ編集システムの改良の一例でした。

デッキ編集はこのゲームにおいてメインとなる要素ですので、プレイヤーが遊びやすくなるように引き続き改良を加えていけると良いでしょう。

アプリ版『呪術迷宮』ではこの他にデッキ切り替えのシステムもあります。Dataクラスで選択中のデッキIDを記憶し、PlayerPrefsでデッキIDごとにカードリストを保存する事で実装していますが、少々難易度が高いです。余裕がある方はチャレンジしてみると良いでしょう。

以上でこの講座は終了ですが、デッキ編集システムの他にも改良の余地は沢山ありますのでどんどん自分の発想で遊びやすくしていったりボリュームを増やしてみてください。

そしてゲーム開発の流れを覚えたらぜひオリジナルゲームの開発にも着手しましょう!あなたの作るゲームを楽しみに待っています。

最後に今回の講座で開発したゲームのサンプルプロジェクトファイルとスクリプト全文集を用意しました。

次の記事:

Unity ハクスラローグライクカードバトルRPGの作り方23 スクリプト全集とサンプルプロジェクトデータ
この記事はUnityでハクスラローグライク×デッキ構築型カードバトルRPG「呪術迷宮」を作る講座の第23回です。 前回まででゲームが完成しました。 今回は講座最終版のスクリプト全集とサンプルプロジェクトデータを用意しました。 講座を進めてい...

Unity カードバトルRPGの作り方講座へ戻る>>



Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像&動画による解説付き

コメント

タイトルとURLをコピーしました