ã¯ããã«
ã©ãããåéã§ãã
ä»ã¾ã§æ°ã«ãªã£ã¦ããã©è§¦ã£ã¦ãªãã£ãUI Toolkitã触ã£ã¦ã¿ã¾ããã
Unity6ã«ãªã£ã¦ä»¥åãã使ãããããªããæ©è½ãä»å¾æ´ã«å¢ããããã§ãã
å 容ã¯ä»¥ä¸ã®åç»ã¨ã»ã¼åãã§ããããã©ã¹ã¢ã«ãã¡ã§ãã£ã¦ã¿ããã¨ãæ¸ãã¦ã¾ãã
UI Toolkitã¨ã¯
Unityã®UIã¯ãUnity UI (uGUI)ããIMGUIã ãããã¦ææ°ã®ãUI Toolkitãã®3種é¡ãæä¾ããã¦ãã¾ãã
uGUIã¯ããããCanvasãä½ã£ã¦UIãä½ã£ã¦ããä¸çªã¡ã¸ã£ã¼ãªæ¹æ³ã§ã
IMGUIã¯Unity Editoræ¡å¼µãä½ãã¨ãã«å©ç¨ãã¦ãããã®ã§ãã
UI Toolkitã¯ããã«å ãã£ãæ°ããææ³ã§ãWebéçºã®æ¦å¿µãçµã¿è¾¼ã¾ããããªãè¿ä»£çææ³ã§åççã«UIãæ§ç¯ã§ããããã«ãªãã¾ãã
UI Toolkitããã£ã¦ã¿ã
UI Toolkitã§ã®UIæ§ç¯ã«å¿ è¦ãªãã®ãä½ãã¾ãã
Create > UI Toolkit > UI Document
Create > UI Toolkit > Panel Settings Asset
ãã®2ã¤ãæä½éUI Toolkitã§ã®UIæ§ç¯ã«å¿ è¦ã§ãã
é©å½ã«ä½ã£ã空ã®ãªãã¸ã§ã¯ãã«UI Documentã³ã³ãã¼ãã³ãã«ä½ã£ãUI Documentã¨Panel Settings Assetãè¨å®ã
UI Builder
UI Documentãããã«ã¯ãªãã¯ããã¨UI Builderãéããã¾ãã
Libraryããç½®ãããUIã³ã³ãã¼ãã³ããé¸æãããã¨ã©ã«ãã¼orViewportã«ãã©ãã°ï¼ãããããã¦UIããã¶ã¤ã³ãã¦ããã
ããã ãã§èªåçã«xmlãçæãããã
親åæ§é ãAlineãSizeãSpacingãããæãã«èª¿æ´ãã¦ç»é¢ãä½ãã
Position Mode
Relative: åé層ã®VisualElementã¯èªåçã«ä¸¦ã¶ã
Absolute: é層ã«é¢ä¿ãªãé
ç½®ã§ãããéãã¦é
ç½®ããå¿
è¦ãããå ´åã¯ããã
UIã«å®éã®å¦çã追å ãã
ã³ã³ãã¼ãã³ãã«ååãã¤ãããã¨ã§ã¹ã¯ãªããããæå®ã§ããããã«ãªãã
ãã¿ã³ãæ¼ããã¨ãã®å¦çã¯ä»¥ä¸ã®ããã«æ¸ããã
using UnityEngine; using UnityEngine.UIElements; public class UITest : MonoBehaviour { void Start() { var root = GetComponent<UIDocument>().rootVisualElement; root.Q<Button>("button-test1").clicked += () => Debug.Log("test1"); root.Q<Button>("button-test2").clicked += () => Debug.Log("test2"); root.Q<Button>("button-test3").clicked += () => Debug.Log("test3"); root.Q<Button>("send").clicked += () => Debug.Log(root.Q<TextField>("textfield-test1").value); } }
StyleSheets
Webã§ããCSSã«ããããã®ã¨ãã¦UI Toolkitã§ã¯USSã¨ãããã®ãããã¾ãã ãã使ãã³ã³ãã¼ãã³ããã¯ã©ã¹ã¨ãã¦ä¿åãã¦å¤æ´ã容æã«ãããã®ã¨ãã¦ä½¿ããã¦ãã¾ãã
å·¦ä¸ã®ï¼ãã¿ã³ããæ°ããUSSãä½ãã¾ãã
é©å½ãªååãã¤ãã¦ã¯ã©ã¹ãä½ãã¾ãã
ä½ã£ãã¯ã©ã¹ããã¿ã³ã«ãã©ãã°ï¼ããããã§é©ç¨ã§ããã
ãã¿ã³ã®ã¤ã³ã¹ãã¯ã¿ã¼ã®StyleSheetãè¦ãã¨é©ç¨ããã¦ããã®ã確èªã§ããã
ä½ã£ãã¯ã©ã¹ãé¸æããå¤ãå¤æ´ããã¨ãã®ã¯ã©ã¹ãæã¤ã³ã³ãã¼ãã³ããå¤æ´ãããã
ã¢ãã¡ã¼ã·ã§ã³
å·¦ä¸ã®ï¼ããããã¼æã®ã¢ãã¡ã¼ã·ã§ã³ã®ããã®ã»ã¬ã¯ã¿ã¼ã追å ããã
Transformã®Scaleãå°ã大ããããã
Previewãæ¼ãã¦ã確èªããã¨ããã¼æã«ãã¿ã³ã®å¤§ãããå¤ãã£ã¦ããã®ã確èªã§ããã
ã¢ãã¡ã¼ã·ã§ã³ãä»ããã«ã¯TransitionAnimationsããä½ç§ã§ã©ã®ããããã£ã®å¤æ´ãã©ããªEasingã§ã¢ãã¡ã¼ã·ã§ã³ããããè¨å®ã§ããã
æ»ãã¨ãã«ãã¢ãã¡ã¼ã·ã§ã³ãä»ãããã®ã§ããã¼ã§ã¯ãªãæ¹ã®ã»ã¬ã¯ã¿ã¼ãé¸æããåæ§ã«TransitionAnimationsãè¨å®ãã¦ãããã
ä»ã®è¨å®ãä¿åãã
data binding
Listã®è¦ç´ ã®ããã®UIãä½ãã
ããããã®è¦ç´ ã«ç´ä»ããScriptableObjectãä½ãã
using UnityEngine; [CreateAssetMenu(fileName = "MovieCard", menuName = "Scriptable Objects/MovieCard")] public class MovieCard : ScriptableObject { public Texture2D thumbnail; public string movieTitle; public string channelName; }
ScriptableObjectã¨ç´ã¥ãã
ä¸çªä¸ã®é層ã®VisualElementãé¸æããData Souceã«ScriptableObjectãã»ãããã¦ãããã
BindãããVisualElementã®é ç®ãé¸æãã3ç¹ãã¿ã³orå³ã¯ãªãã¯ã§ã¡ãã¥ã¼ãéãã¦Add Bindingãæ¼ãã
Data Source Pathã«ScriptableObjectã®ããããã£ãé¸æãããã¨ãã§ããã
æ£ããè¨å®ã§ããã¨ç»åã®ããã«ScriptableObjectã®å 容ã«æ²¿ã£ããã®ãåæ ãããã
å¥ã®ScriptableObjectãè¨å®ããã°å 容ãå¤ããã
ListView
ListViewã追å ãããã
ItemTemplateã«å
ã»ã©ä½ã£ãUI Documentãè¨å®ããã
BindingSourceSelectionModeãAuto Assignã«ããã
ãªã¹ãã«è¿½å ãããã¼ã¿ãæå®ããããã®ScriptableObjectãä½ãã
using UnityEngine; [CreateAssetMenu(fileName = "MovieList", menuName = "Scriptable Objects/MovieList")] public class MovieList : ScriptableObject { public MovieCard[] movieCards; }
ãªã¹ããã¥ã¼ã®itemsSourceã«ä½ã£ãScriptableObjectãããã¼ã¿ãæµãè¾¼ãã
public class UITest : MonoBehaviour { public MovieList movieList1; void Start() { var root = GetComponent<UIDocument>().rootVisualElement; root.Q<ListView>("movie-card-list1").itemsSource = movieList1.movieCards; } }
è²ã 調æ´ãã¦ã試ãã«Yâ¯utube風ã®UIãä½ã£ã¦ã¿ã¾ããã
â»å®ã¯GridLayoutã®ãã³ãã¬ã¼ãããªãã®ã§ããªã¹ãã2ã¤ä¸¦ã¹ã¦ããã
ã¾ã¨ã
uGUIã¯UIä½ãã«ã¯è¥å¹²ä½¿ãã¥ããç¯ããã£ããã§ãããUI Toolkitã¯ããªãUIãæ§ç¯ãããããªãã¾ããã
ç¹ã«Webãªã©ã§ä½¿ãããæ¦å¿µãåãå ¥ãããã¨ã§Figmaçã¨ã®é£æºãåãããããªã£ãã®ãã¨ã¦ãå¬ããç¹ããªã¨æãã¾ãã(Unityã ã¨Figmaéãã«ä½ãã®ãä¸è¦å´ã ã£ãã)
ã§ãããuGUIã§ã¯ã§ããShaderã®è¨å®ãè¤éãªã¢ãã¡ã¼ã·ã§ã³ã®è¨å®ãworld spaceã§ã®å©ç¨ãã§ããªãã®ã§ããããã使ãå¿ è¦ãããå ´åã¯ã¾ã uGUIã使ãæ¹ãè¯ãã¨æãã¾ãã