Day - 11. UI Toolkit 살펴 보기 with UI Builder

오늘 만들어 볼것은 Player Heath 입니다

white_2x2.png

0.00MB

지난 시간에 이어서 UI Builder를 조금더 살펴 볼게요

UI Builder 설치는 이전글 Day - 10. UI Toolkit 살펴 보기 with UI Builder
https://smilejsu.tistory.com/2340 을 참고해주세요

UI Builder창을 열어 탭에 추가 합니다

https://youtu.be/iqZ44OOIh3Q

using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayerHealth : MonoBehaviour { [SerializeField] private float currentHealth = 100; [SerializeField] private float maxHealth = 100; public float MaxHealth => this.maxHealth; public float CurrentHealth => this.currentHealth; private void Start() { this.currentHealth = maxHealth; this.SetHealth(this.currentHealth); this.SetMaxHealth(this.maxHealth); } public void SetHealth(float current) { this.currentHealth = current; } public void SetMaxHealth(float max) { this.maxHealth = max; } }

.unity-progress-bar__background { background-color: rgb(46, 0, 0); } .unity-progress-bar__progress { -unity-background-image-tint-color: rgb(255, 0, 0); background-image: url('/Assets/white_2x2.png'); }

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="True"> <Style src="PlayerHealth.uss" /> <ui:VisualElement class="container"> <ui:Label text="Player Health" display-tooltip-when-elided="true" style="font-size: 36px; -unity-text-align: upper-center;" /> </ui:VisualElement> <ui:VisualElement> <uie:FloatField label="Current Health" value="0" name="CurrentHealth" /> <uie:FloatField label="Max Health" value="0" name="MaxHealth" /> <uie:ProgressBar title="Health Bar" name="HealthBar" low-value="0" tabindex="190" high-value="1" class="progressBar" style="background-image: none;" /> <uie:FloatField label="Float Field" value="0" /> <uie:IntegerField label="int field" /> </ui:VisualElement> </ui:UXML>

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor; using UnityEngine.UIElements; using UnityEditor.UIElements; [CustomEditor(typeof(PlayerHealth))] public class PlayerHealthEditor : Editor { private PlayerHealth health; private VisualElement rootElement; private VisualTreeAsset visualTree; private void OnEnable() { this.health = this.target as PlayerHealth; this.rootElement = new VisualElement(); this.visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Scripts/Editor/PlayerHealth.uxml"); var uss = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Scripts/Editor/PlayerHealth.uss"); this.rootElement.styleSheets.Add(uss); } public override VisualElement CreateInspectorGUI() { var root = this.rootElement; root.Clear(); this.visualTree.CloneTree(root); var currentHealth = root.Q<FloatField>("CurrentHealth"); var maxHealth = root.Q<FloatField>("MaxHealth"); var healthBar = root.Q<ProgressBar>("HealthBar"); healthBar.value = this.health.CurrentHealth / this.health.MaxHealth; currentHealth.BindProperty(serializedObject.FindProperty("currentHealth")); currentHealth.RegisterValueChangedCallback((evt) => { this.health.SetHealth(evt.newValue); healthBar.value = this.health.CurrentHealth / this.health.MaxHealth; }); maxHealth.BindProperty(serializedObject.FindProperty("maxHealth")); maxHealth.RegisterValueChangedCallback((evt) => { this.health.SetMaxHealth(evt.newValue); healthBar.value = this.health.CurrentHealth / this.health.MaxHealth; }); return root; } }

기타

Flex Grow

https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow
flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.




참고
https://gamedev-resources.com/create-an-in-game-inventory-ui-with-ui-toolkit/
https://github.com/Yecats/GameDevTutorials/tree/master/tutorials/Unity/Animate-runtime-progress-bars-UI-Toolkit
https://gamedev-resources.com/animate-runtime-progress-bars-with-ui-toolkit/
https://gamedev-resources.com/create-an-in-game-inventory-ui-with-ui-toolkit/
https://github.com/sniffle6/Tween-Library