+
*
+
ココ先生
ゲーム開発の案内役
この記事では 装備比較と増減プレビュー を、読んで終わりにせず、EquipmentStatPreviewDemo の小さな実装イメージまでつなげて案内します。
+
*
+
はじめちゃん
ゲームエンジン学習中
装備比較とステータス増減プレビューの設計ガイド を読む前に、まずUnity のどこを見ればよいかを確認したいです。
今日は「装備比較と増減プレビュー」を、まず何が変わるのか、次に画面で何を見せるのか、最後にどの値を確認するのか、という順番で読んでいきます。
大きなテーマに見えますが、今日は「EquipmentStatPreviewDemo」という小さな練習用の場面だけを作るのですね。何から始めればよいか分かりました。
現在装備を見るを表示、Compare Buttonで進める、候補を選ぶを確認の流れを追えば、記事の内容を自分のプロジェクトへ移しやすくなります。
完成イメージ
装備比較と増減プレビューの状態を分ける
現在装備を見る、候補を選ぶ、増減を色で出す を別々の状態として扱い、今どの段階かを画面で確認できるようにします。
装備で何が変わるかをUIで伝える
Console だけではプレイヤーには見えません。TextMeshPro や Slider に attackDelta / defenseDelta / speedDelta を出して、判断材料を画面へ移します。
最小実装から広げる
まず EquipmentStatPreviewDemo を動かし、その後に本物の入力、通信、戦闘、保存処理などへ置き換えると、原因を見失いにくくなります。
導入
装備にマウスを乗せたとき、今の装備との差を緑と赤で出します。買う前に新旧の数字を並べる仕組みです。
作るもの
Canvas に attackDiff と defenseDiff の Text を置きます。EquipmentCompare に現在装備の数値を入れます。
差分を作る
[SerializeField] private TMP_Text attackDiff; // 攻撃力の増減
void Preview(Item item){ ShowDiff(attackDiff,item.attack-currentAttack); }
色と符号を決める
void ShowDiff(TMP_Text text,int value){ text.text=$"{value:+#;-#;0}"; text.color=value>=0?Color.green:Color.red; }
完成版
using UnityEngine;using TMPro;public class EquipmentCompare:MonoBehaviour{[SerializeField]TMP_Text attackDiff,defenseDiff;[SerializeField]int currentAttack=10,currentDefense=5;public void Preview(int attack,int defense){Show(attackDiff,attack-currentAttack);Show(defenseDiff,defense-currentDefense);}void Show(TMP_Text text,int value){text.text=$"{value:+#;-#;0}";text.color=value>=0?Color.green:Color.red;}}
最後に整理すると、装備比較と増減プレビューでいちばん見失いやすい所はどこですか？
内部処理だけを追って、画面で伝える言葉を後回しにする所です。EquipmentStatPreviewDemoでは、まずプレイヤーに見える変化を先に決めます。
流れは「現在装備を見るを表示」から始めて、「Compare Buttonで進める」で操作を入れる、と覚えればよいですか？
その通りです。その後に「候補を選ぶを確認」で途中状態を見て、「増減を色で出すで結果を見る」で結果を確認します。順番を固定すると、失敗した場所も見つけやすくなります。
つまり、いきなり完成システムにせず、状態名、表示、値の変化を小さくそろえるのですね。
はい。最後は「装備比較と増減プレビューをわかりやすく考える」の考え方で、難しい処理をプレイヤーに伝わる短い合図へ置き換えられるか確認しましょう。
この記事のまとめ
武器や防具を切り替える前に、何が強くなり何が弱くなるのかを初心者でも迷わず判断できる装備比較UIの考え方を整理します。
大きな違いを生むのは、派手な性能よりも 毎日触れる環境を無理なく整えること です。見やすい画面と使いやすい道具がそろうと、学習や次の一歩を決めやすくなります。