持ち物画面で装備スロットに装備品を入れる機能をUnityで作る

今回は持ち物画面で装備品スロットに持ち物から装備をドラッグ&ドロップ出来るようにします。

ただし、今のところ一度武器をセットしたら他の武器に変更する事は出来ますが、空にする事は出来ません。
またスロットに同じ武器を複数セットする事も可能ですが、同じ武器なので意味はありません。
正直なところ細かい所に手を入れる必要がありますのでご了承ください。

まずは前回作った持ち物画面を修正します。

スポンサーリンク

前回作った持ち物画面を修正

equipproperty1

Titleの下にUI→Panelでパネルを作成し名前をEquipに変更します。

equipproperty2


パネルの配置は上のような感じになります。

装備品をドロップする装備スロットを作成

Equipの子要素にはスクリプトから装備品をドロップする為のスロットを4つ作成します。

equipproperty3

Equipにはスロットを4つ縦に並べたいので、Add ComponentからLayout→Vertical Layout Groupを追加します。
設定値は上の画像のように設定します。

ではスロットEquipSlotを作成していきます。

equipproperty4

UI→Panelでパネルを作成し、EquipSlotという名前にします。子要素にPanelとTextを作成します。
EquipSlotはマウスドロップされた時にイベントを発生し、スロットにアイテムを設定したいのでその為のスクリプトを設定します。

equipproperty5

イベントトリガーは上の画像のように設定します。

今回作成するスクリプトの内容

実行するスクリプトはこれから作成していきます。名前をProcessEquipSlotという名前にしました。
(正直ネーミングが微妙でこの後混乱する可能性もあります・・・・)
以下がスクリプト名と大まかな処理の内容になります。

ProcessEquipSlotはEquipSlotオブジェクトに対してマウスのイベントが発生したら実行。
EquipPropertySlotはPropetyUIの子要素Equipのパネルエリアに装備用のスロットを作成
DragItemDataはドラッグしているアイテムの保存と読み込みをする
ProcessSlotは持ち物リストスロットの作成とアイテムの設定
SetEquipSlotStatsuはゲーム画面内の装備スロットの処理

装備スロットでマウスイベントが発生した時の処理スクリプトProcessEquipSlot

ではProcessEquipSlotを見ていきます。

itemは今ドラッグしているアイテム情報を入れる変数
informationTextはアイテムの情報を入れるテキスト
uiObjはインスタンス化したタイトルUIを入れる変数
dragItemはドラッグしているアイテムの情報を取り扱うスクリプトを入れる変数
setequipslotstatusはゲーム画面に表示する武器スロットに関しての処理をするスクリプト
になります。

まずはマウスがスロット内に入った時の処理を行うMouseOverです。
itemがnullではない時、つまりスロットにすでにアイテムがセットされていれば、そのアイテムの情報を表示するShowInformation関数を呼び出します。

マウスがスロット外に出た時の処理MouseExit関数ではitemがnullでなければ、タイトルUIのインスタンスの削除とinformationTextに空文字を入れています。

スロットに何かドロップされた時は、dragItem.GetItemでドラッグしているアイテム情報をitemに入れ、ドラッグしているアイテムがnullでなければスロットのUI.Imageを取得し、そこにアイテムのスプライトを設定します。
ドロップされたらdragItem.ResetItemを呼び出しドラッグアイテムをリセットします。

ドロップした時にすでに他のアイテムがドロップされていた時はタイトルUIがそのまま表示されているので、それを削除します。

ShowInformation関数でアイテム情報を表示し、主人公のステータスを管理しているMyStatusのSetEquipSlotにこのスロットの番号とアイテム情報を渡してセットします。
SetEquipSlotは後で作成します。

最後にsetequipslotstatus.SetIconでゲーム画面の時に表示する装備スロットのアイコンをセットし直します。

ShowInformation関数は前回やった持ち物画面のスクリプトと同じなので解説はしませんが、
ItemDataクラスにアイテムの日本語名と英語orローマ字名とを分けて設定するようにしたので、item.GetItemNameJで日本語名の取得をしています。
英語、ローマ字名はGetItemNameE関数にしました。

これでProcessEquipSlotが完成しました。titleUIには前回作ったアイテムタイトル用のUIプレハブを設定してください。

Equipのパネルエリアに装備用のスロットを4つ作成するスクリプトEquipPropertySlot

次はPropertyUIの子要素Equipに設定するEquipPropertySlotスクリプトを作成します。
これはEquipのパネルエリアに装備用のスロットを作成するスクリプトです。

装備スロットは4つ作成するので固定値を入れてゲームオブジェクトの箱を作成します。

slotはさきほど作ったEquipSlotをインスペクタ上で設定します。
SetSlot関数ではスロットのインスタンスを作成し、EquipSlotの子要素であるTextの値に装備スロットの番号を入れます。
一度スロットを作成したら、もう作成はしないので、slotFlagにtrueを入れて次回から実行しないようにします。

これでEquipPropertySlotの作成は終了です。

EquipPropertySlotのSetSlot関数は持ち物画面になった時にセットするので、
Managementスクリプト(持ち物画面への移行処理が書いてあるスクリプト)内で呼び出します。

ドラッグしているアイテムの保存と読み込みをするスクリプトDragItemData

次にPropertyUIに設定するスクリプトDragItemDataを作成します。

このスクリプトは持ち物画面のアイテムがドラッグ開始された時に、DragItemDataにドラッグしているアイテムの情報を保存します。
またドロップされた時にDragItemDataからドラッグされているアイテム情報を取得するのに使用します。

ただのデータ保存と読み出しの機能のみになります。

これで持ち物のアイテムを装備スロットにドラッグ&ドロップ出来るようになりました。
が、アイテムの種類が武器の場合だけドラッグ&ドロップしないとおかしい事になってしまうので、その処理を加えます。

持ち物リストスロットの作成とアイテムの設定スクリプトProcessSlot

PropertySlotに設定されているProcessSlotスクリプトを修正します。

わかりにくいネーミングで申し訳ないんですが・・・。

dragObjDataがドラッグしているアイテムのデータ
dragUIはドラッグ中に表示するアイコンUI
dragUIInstanceはアイコンUIのインスタンス
dragItemDataはドラッグアイテムのデータの保存と読み込みをするスクリプト

になります。
Update関数ではアイテムをドラッグしていたら、そのアイテムをマウスの位置に移動させます。
MouseOverとMouseExit関数は前回と同じです。

マウスドラッグが開始した時に呼ばれるMouseDragBeginを見ていきます。
まずはアイテムデータベースからこのスロットのアイテム情報をitemに入れます。
次にこのアイテムを主人公が持っていて、アイテムの種類がItemType.Weaponである時だけ
ドラッグするようにします。
アイテムの情報クラスItemDataは後で作成します。

ドラッグ用のUIのdragUIをインスタンス化します。
インスタンス化したdragUIInstanceの子要素に設定されているUI.Imageを取得し、
アイテムのスプライトを設定します。
dragItemDataスクリプトのSetItemでこのアイテムを設定し、
後でドラッグしているアイテムを取得出来るようにします。

マウスのドラッグが終了したら、ドラッグUIインスタンスを削除します。
マウスドラッグ終了時に呼び出す関数はMouseDragEnd関数です。

これでスクリプトが完成したので、PropertySlotにイベントトリガーのBegin DragとEnd Dragを設定し、それぞれのイベントが発生したら行う処理にMouseDragBeginとMouseDragEndを設定しておきます。

ItemDataクラスの修正

次にItemDataの修正をします。

ItemDataには日本語名を表すitemNameJと英語orローマ字名を表すitemNameE、アイテムの種類を表すItemTypeを追加しました。
ItemTypeは列挙型で宣言しておき、WeaponとItemの二つの種類を設定しておきます。
ItemDataのコンストラクタも修正しておきます。

これでItemDataの修正は終わりです。

ドラッグしているアイテムをわかりやすくする為のUIの作成

次はドラッグしているアイテムがわかるようにDragItemUIというUIにアイテムのスプライトを表示し、マウスの位置に表示しますが、そのDragItemUIを作成します。

equipproperty6

equipproperty7

UI→Panelを作成し、名前をDragItemUIに変更します。WidthとHeightを30に設定し、持ち物スロットよりやや小さめに作成します。

equipproperty8

DragItemUIの子要素にUI→Panelでパネルを作成し、AnchorsをStretchにし、Imageの色を緑色に変更します。
Assetsエリアにドラッグ&ドロップしてプレハブ化しておきます。

これでDragItemUIが出来たので、PropertySlotに設定しているProcessSlotのDragUIにDragItemUIのプレハブを設定します。

以上で持ち物リストから武器に属するアイテムだけをドラッグ&ドロップし、装備スロットを変更する事が出来るようになります。

equipproperty12

上が実行例になります。

ゲーム画面に装備スロットUIを作成

最後にゲーム中に装備スロットを表示する機能を追加します。

銃の残り弾数を表示していたUIの子要素にEquipという装備スロットを表示するエリアを作ります。

equipproperty9

equipproperty10

EquipにはAdd ComponentからLayout→Horizontal Layout Groupを設定し、上のようにパラメータを設定します。

equipproperty11

装備スロットを表示する位置は上の画像のように左下にします。

ゲーム画面内の装備スロットの処理スクリプトSetEquipSlotStatus

次にゲーム画面に表示する装備スロットの処理スクリプトSetEquipSlotStatusを作成します。

SetSlot関数内で、4つのスロットを作成します。
これは持ち物画面の装備スロットの処理と同じです。

SetIcon関数は主人公のステータスで保持している装備スロットに設定されているアイテムを取得し、そのアイテムのスプライトを装備スロットに表示する関数です。
装備スロットに何も設定されていなければ非表示にします。

装備切り替えスクリプトChangeEquipの修正

次は装備を切り替えを行うChangeEquipスクリプトを修正します。

一部抜粋になります。
StatusUIの子要素で、Equipの親要素であるPanelのtagをEquipに設定しておきます。
Start関数内で

equipObj = GameObject.FindWithTag(“Equip”).transform.GetChild(0).gameObject;

としSetEquipSlotStatusが設定されているゲームオブジェクトを取得します。
最初からSetEquipSlotStatus型の変数でもよかったかもしれません。

装備の切り替えは1~4のキーで行い、0のキーを押したら何も装備しない状態にします。
0~4のキーが押された場合はequipにその値を入れます。

主人公のステータススクリプトMyStatusからGetEquipSlotで装備スロットに設定されているアイテムが取得出来ます。
押したキーが1~4でその番号の装備スロットが設定されている時はそのスロットに設定されているアイテムの英語名とChangeEquipのインスペクタで設定されているpropertyに設定されているゲームオブジェクトのタグを比較します。

propertyに設定するゲームオブジェクトは主人公が持っている武器をドラッグ&ドロップします。

武器にはアイテムの英語名と同じタグを設定しておきます。
例えばナイフの武器であればKnifeというタグを作り設定、アイテムデータベースでアイテムを作る時の英語名にはKnifeと設定します。

アイテム名と一致したプロパティに設定している武器をアクティブにします。
equipが0またはスロットが空だった場合は武器を持たない状態に設定します。

これでChangeEquipスクリプトの修正は完了です。

持ち物画面を呼び出す処理を管理スクリプトManagementに追加

最後に持ち物画面に移行する為の処理が書いてあるManagementスクリプト内を修正します。

持ち物画面を表示する処理の所に、EquipPropertySlotの取得とSetSlot関数の呼び出しをします。
uiはpublicにしインスペクタ上でPropertyUIを設定します。

終わりに

これですべての処理が完了しました。

作っているうちに複雑になってしまい、説明の順序をどうしたものかと思いました。
これで持ち物リストから装備スロットへ武器をドラッグ&ドロップする事が出来、ゲーム画面にも装備スロットが表示されるようになりました。

equipproperty13

上がゲーム画面に表示される装備スロットになります。
あらかじめ持ち物リストから装備スロットに武器をドラッグ&ドロップしてあります。