こんにちは、深夜です。
前回の記事では、5ウェーブ周期のボス戦やエンドレスモード、成長ポイントによるステータス強化などの「Waveシステム」について解説しました。今回は、本作の画面表示とゲームプレイの手触りをさらにシンプルかつスピーディにするために実施した、「インベントリの完全廃止」と「スロット一体型魔法管理システム」への刷新について解説します。
🛑 インベントリ廃止の背景と狙い
これまでの仕様では、ドラフト報酬等で獲得した魔法カードは一度「インベントリ画面」へ格納され、プレイヤーは準備時間中にインベントリ画面を開いて画面下部のスロットへ1枚ずつ割り当てて装備・セットする仕組みをとっていました。
しかし、実際のプレイテストを通じて以下の課題が浮き彫りになりました。
- 操作手数の多さ: 「カード獲得 ➔ キー入力でインベントリ開閉 ➔ スロットへ装備 ➔ 魔法を召喚」という手順が、タワーディフェンスのテンポ感を阻害していたこと。
- 画面の隠れ: インベントリ画面を開いている間、ゲームフィールドの大部分が覆われてしまい、配置計画を立てづらかったこと。
そこで、画面UIとデータの保持構造を根本から見直し、インベントリ画面を完全廃止して画面下部のスロット（ホットバー）のみで全ての魔法を直接保持・管理・召喚するシステムへ変更しました。
📦 新・スロット一体型魔法管理システムの仕様
インベントリ廃止に伴い、魔法のデータ保持およびスロットの動作ロジックを以下のように刷新しました。
【旧フロー】カード獲得 ➔ インベントリ保管 ➔ スロットへ手動セット ➔ 戦闘中消費 ➔ インベントリから再セット
【新フロー】カード獲得 ➔ スロットに直接保持 ➔ 戦闘中消費（枠は維持） ➔ ウェーブ終了時に自動全回復
🔹 カード獲得と自動スタック
- ドラフト報酬等で獲得したカードは、直接スロットへ追加されます。
- すでに同じ種類・同じレベルの魔法がスロットにある場合は、空き枠を消費せず、該当スロットの最大所持数が自動で +1 されます。
🔹 戦闘中の消費とウェーブ終了時の自動復元
- 各スロットは「最大所持数」と「残り配置可能数」を保持します。
- 戦闘中に召喚配置すると「残り配置可能数」が減少します。0枚になった場合でもスロット枠自体は消滅せず、アイコンが暗転して選択不可（0/最大数 表示） になります。
- ウェーブ終了時、戦闘中に置いた魔法陣が自動回収されて手札に戻り、全スロットの残り配置可能数が最大所持数まで自動全回復 します。
- ※準備時間からマップ上に設置されたまま存続している魔法陣の設置状態は正しく維持されるため、所持数以上の魔法が不当に設置される心配はありません。
🔄 スロット満杯時のカード交換ダイアログ
スロットが直接の保持兼管理枠となったため、「スロット枠（デフォルト8枠）が全て埋まっている状態で新規魔法を獲得した際」の処理を新たに構築しました。
全枠が埋まっている状態で新カードを獲得した場合、画面中央にモーダル形式のカード交換ダイアログが表示されます。
- 既存スロットを選択: 選択した既存スロットの魔法を破棄し、新規獲得カードと入れ替えます。
- 獲得を諦める: 新規カードの獲得を辞退し、現在のスロット構成をそのまま維持します。
なお、将来的なショップ機能やゲーム外成長（ロビー強化）によってスロット枠数自体を拡張（8枠 ➔ 10枠/12枠等）できるよう、拡張性を持たせた構造で設計を行っています。
🔍 ツールチップ型プレビューとUIレイアウトの自動フィット調整
インベントリ廃止に伴い、カードの詳細効果を確認する場所として、スロットホバー時のツールチップ表示機能を画面最前面に構築しました。
スロット上のカードにマウスカーソルを合わせると、スロットの真上にツールチップ型のカード詳細プレビュー（ダメージ、消費MP、クールダウン時間、説明文）が浮かび上がります。
🎨 画面解像度・文字数に左右されない自動レイアウト補正
カード画面の描画にあたり、文字サイズやテキスト長によってレイアウトが崩れるのを防ぐため、以下の自動レイアウト補正機能を実装しました。
- 自動フォント縮小調整: タイトル名、各ステータス数値、説明文に対して最適なフォント可変範囲を設定し、長いテキストでも枠外へ溢れないよう自動調整。
- 各表示枠の自動位置調整: タイトル（上部枠）、イラスト（中央枠）、ステータス（中段3分割枠）、説明文（下部枠）の画面内の位置や枠線の可変領域設定を最適な比率で動的フィット。
- 日本語フォントの自動適用: 文字化け（豆腐化）を防止するため、日本語フォントアセットを自動的に適用。
💡 【技術ワンポイント】Unity UIで快適なドラッグ＆ドロップと最前面表示を実現する基本構造
カードやアイテムをスロット間でドラッグして並べ替えるUIを実装する際、「ドラッグ中のカードが隣のスロットの裏側に隠れてしまう」「ドラッグ中のカード自身が邪魔をしてドロップ先の枠が反応しない」というトラブルが頻発します。 UnityのUIイベント機能と描画順制御（ヒエラルキーの最前面移動）を組み合わせることで、直感的に気持ちよく操作できるドラッグ＆ドロップが簡単に実現できます。
■ 2つの重要テクニック
- ドラッグ中は最前面（一番手前）に表示する:
- ドラッグ開始時に自身を親階層の「最後の子要素」に移動させることで、他のスロットや枠よりも手前に描画されます。
- ドラッグ中は当たり判定（透過）をOFFにする:
- ドラッグ中のオブジェクトの当たり判定を無効化しておくことで、指やマウスの下にある「ドロップ先のスロット」が正確にイベントを検知できるようになります。
using UnityEngine;
using UnityEngine.EventSystems;
[RequireComponent(typeof(CanvasGroup))]
public class DraggableCardUI : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
private Transform originalParent; // 元のスロット（親オブジェクト）
private CanvasGroup canvasGroup;
private RectTransform rectTransform;
private void Awake()
{
rectTransform = GetComponent<RectTransform>();
canvasGroup = GetComponent<CanvasGroup>();
}
// 1. ドラッグ開始時
public void OnBeginDrag(PointerEventData eventData)
{
originalParent = transform.parent;
// キャンバス直下などの最上位階層に一時移動し、最前面に表示する
transform.SetParent(transform.root, true);
transform.SetAsLastSibling();
// ドロップ先の検知を妨げないよう、自身の当たり判定を一時的に無効化
canvasGroup.blocksRaycasts = false;
canvasGroup.alpha = 0.75f; // 半透明にしてドラッグ中であることを演出
}
// 2. ドラッグ中（マウス・指に追従）
public void OnDrag(PointerEventData eventData)
{
rectTransform.anchoredPosition += eventData.delta / transform.root.GetComponent<Canvas>().scaleFactor;
}
// 3. ドラッグ終了時
public void OnEndDrag(PointerEventData eventData)
{
// 当たり判定と不透明度を元に戻す
canvasGroup.blocksRaycasts = true;
canvasGroup.alpha = 1.0f;
// ドロップ先で親が変更されていなければ、元のスロット位置に戻す
if (transform.parent == transform.root)
{
transform.SetParent(originalParent, false);
rectTransform.anchoredPosition = Vector2.zero;
}
}
}🚀 次回予告
インベントリを廃止したことで、UIが画面下部に集約され、ゲームのテンポと操作性が大幅に向上しました。
次回の開発アップデートでは、仮実装となっていた機能の整理や、仕掛中のステージ（MAP）の実装を進められればいいなと
それでは、また次回の開発記録でお会いしましょう！
コメント