ºÇ½ª¹¹¿·¡§ orika_ex_miyako 2024ǯ02·î28Æü(¿å) 10:00:01ÍúÎò
Slider ¤ò»ý¤Ä¥³¥ó¥Ý¡¼¥Í¥ó¥È¤¬ LayoutGroup Æâ¤Ë´Þ¤Þ¤ì¤Æ¤¤¤ë¾ì¹ç¤Ë¡¢³ÆUI ÍÑ¥²¡¼¥à¥ª¥Ö¥¸¥§¥¯¥È¤Î°ÌÃÖ¤òưŪ¤Ë¼«Æ°Ä´À°¤¹¤ëÊýË¡¤Î¼ÂÁõÎã¤Ç¤¹¡£
ƱÍÍ¤Ë ScrollView ¤ò»ý¤Ä¥³¥ó¥Ý¡¼¥Í¥ó¥È¤Ë¤â±þÍѲÄǽ¤Ç¤¹¡£
¡¡¥Ý¥¤¥ó¥È¤È¤·¤Æ¤Ï Slider ¤Î¥µ¥¤¥º¤ò Scale ¤Ç¤Ï¤Ê¤¯ Width ¤ÇÄ´À°¤¹¤ë¤³¤È¤Ë¤è¤ê¡¢UI ²èÁü¤Î 9 Slice ¤Ë¤âÂбþ¤·¤Æ¤¤¤ëÉôʬ¤Ç¤¹¡£
(¼ÂÁõ¤¹¤ë¤È¤ï¤«¤ê¤Þ¤¹¤¬¡¢Scale ¤òÊѹ¹¤·¤Æ¥µ¥¤¥º¤òÊѤ¨¤ë¤È 9 Slice ¤¬Í¸ú¤Ë¤Ê¤ê¤Þ¤»¤ó¡£)
¡¡¤Ê¤ª¡£LayoutGroup Æâ¤Ë Slider ¤ä ScrollView ¤Ê¤É¤Î»Ò¥ª¥Ö¥¸¥§¥¯¥È¤òÊ£¿ô»ý¤Ä UI ¤¬´Þ¤Þ¤ì¤Æ¤¤¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢²¼µ¤Îµ»ö¤ò»²¹Í¤Ë¤¹¤ë¤³¤È¤Çµ¡Ç½¼ÂÁõ¤Ç¤¤Þ¤¹¡£
¡Ú¥Ï¥ë¥·¥ª¥ó¥Ö¥í¥°¡ÛÍÍ
Layout¥°¥ë¡¼¥×¤ÎÃæ¤Ç¡¢¤Û¤«¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Î¥µ¥¤¥º¤¬ÊѤï¤Ã¤¿¤È¤¤Ë¼«Æ°¤Ç¾¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Î°ÌÃÖ¤òÄ´À°¤¹¤ëÊýË¡
http://halcyonsystemblog.jp/blog-entry-1045.html
¡¡Unity ¤Ç¤Ï UI ¤Î¼«Æ°À°Îóµ¡Ç½¤È¤·¤Æ LayoutGroup ¤¬¤¢¤ê¤Þ¤¹¡£
Î㤨¤Ð¡¢Image ¤È Text ¤ò²£°ìÎó¤Ëɽ¼¨¤µ¤»¡¢¤½¤Î¸å¡¢Text ¤ä Image ¤Î²£¥µ¥¤¥º¤ÎÊѹ¹¤Ë±þ¤¸¤Æ
³Æ¥ª¥Ö¥¸¥§¥¯¥È¤Î°ÌÃÖ¤ò¼«Æ°Ä´À°¤¹¤ë¡¢¤È¤¤¤¦¤è¤¦¤Ê»È¤¤Êý¤Ç¤¹¡£
¡¡¤³¤ì¤Ï LayoutGroup ¤ò¥¢¥¿¥Ã¥Á¤·¤¿¤À¤±¤Ç¤Ï¼ÂÁõ¤¬¹Ô¤¨¤Þ¤»¤ó¡£
LayoutGroup ¤ÎÀßÄê¤Î¤Û¤«¡¢À©¸æ²¼¤È¤Ê¤ë³Æ»Ò¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤âÀßÄ꤬ɬÍפȤʤê¤Þ¤¹¡£
¡¡¤³¤³¤Ç¤Ï»²¹ÍÍÑ¤Ë UI ¤òºîÀ®¤·¡¢¤«¤Ä¡¢¤½¤ì¤òưŪ¤ËÊѲ½¤µ¤»¤ë¥µ¥ó¥×¥ë¤Î¥¹¥¯¥ê¥×¥È¤òÍÑ°Õ¤·¤ÆÆ°ºî¸¡¾Ú¤ò¹Ô¤¤¤Þ¤¹¡£
¡¡Æä˽ÅÍפÊÅÀ¤¬ Slider ¤ò»ý¤Ä¥³¥ó¥Ý¡¼¥Í¥ó¥È¤¬ LayoutGroup Æâ¤Ë´Þ¤Þ¤ì¤Æ¤¤¤ë¾ì¹ç¤ÎµóÆ°¤Ç¤¹¡£
Slider ¤Ë¤Ï»Ò¥ª¥Ö¥¸¥§¥¯¥È¤¬¤¢¤ê¡¢¤½¤ì¤é¤Î³Æ¥µ¥¤¥º¤ÎÄ´À°¤âɬÍפˤʤê¤Þ¤¹¡£
¤³¤ì¤Ï ScrollView ¤âƱÍͤǤ¹¡£
¡¡¤³¤³¤Ç¤Ï¥µ¥ó¥×¥ë¤òÄ󼨤·¤Þ¤¹¡£
¡¡LayoutGroup ¤òÍøÍѤ·¤Æ¡¢Slider ¤ò»Ò¥ª¥Ö¥¸¥§¥¯¥È¤Ë´Þ¤á¤Æ¤â¤é¤ì¤Ð¡¢¥µ¥¤¥º¤ä¹½À®¤Ë¤Ä¤¤¤Æ¤Ï¡¢¼«Í³¤ËºîÀ®¤·¤Æ¤â¤é¤Ã¤Æ¹½¤¤¤Þ¤»¤ó¡£
¥µ¥ó¥×¥ë¤Ç¤Ï HorizontalLayoutGroup ¤Ç¼ÂÁõ¤·¤Æ¤¤¤Þ¤¹¤¬¡¢VerticalLayoutGroup ¤Ç¤âÌäÂꤢ¤ê¤Þ¤»¤ó¡£
¡¡Canvas Æâ¤Ç Create Empty ¤·¤ÆºîÀ®¤·¡¢HorizontalLayoutGroup ¤ò¥¢¥¿¥Ã¥Á¤·¤ÆÀßÄꤷ¤Æ¤¤¤Þ¤¹¡£
Spacing ¤Î¥µ¥¤¥º¤Ë¤Ä¤¤¤Æ¤ÏŬµ¹Ä´À°¤·¤Æ¤¯¤À¤µ¤¤¡£»Ò¥ª¥Ö¥¸¥§¥¯¥ÈƱ»Î¤Î´Ö¤¬¶õ¤¤Þ¤¹¡£
¤Þ¤¿ Use Child Size ¤Î Width ¤Ë¤Î¤ß¥Á¥§¥Ã¥¯¤òÆþ¤ì¤Æ¡¢»Ò¥ª¥Ö¥¸¥§¥¯¥È¤Î Width ¤òÁàºî¤Ç¤¤ë¤è¤¦¤Ë¤·¤Æ¤¤¤Þ¤¹¡£
¡¡¤Þ¤¿¤³¤Î¥²¡¼¥à¥ª¥Ö¥¸¥§¥¯¥È¼«ÂΤΠWidth ¤È Height ¤ÎÃͤ¬ HorizontalLayoutGroup ¤¬¼«Æ°Ä´À°²Äǽ¤ÊÈϰϤˤʤê¤Þ¤¹¡£
º£²ó¤Ç¤¢¤ì¤Ð¡¢Slider ºÇÂç¤Î¿½ÌÉý¤ò¸«±Û¤·¤ÆÂ礤µ¤òÀßÄꤷ¤Æ¤¯¤À¤µ¤¤¡£
¡¡¤³¤Î¥ª¥Ö¥¸¥§¥¯¥È¤¬ UI ¤Î¿Æ¥ª¥Ö¥¸¥§¥¯¥È¤È¤Ê¤ê¤Þ¤¹¤Î¤Ç¡¢¤³¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Î Scale ¤¬»Ò¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤âŬÍѤµ¤ì¤Þ¤¹¡£
¤è¤Ã¤Æ¡¢Scale ¤ÎÃͤϤ¤¤¸¤é¤º¡¢É¬¤º¡¢¤¹¤Ù¤Æ 1 ¤ËÀßÄꤷ¤Æ¤¯¤À¤µ¤¤¡£
¡¡LayoutGroup Æâ¤ËÇÛÃÖ¤¹¤ë Image ¤Ç¤¹¡£¤Û¤«¤Î UI ¤Ç¤âÌäÂꤢ¤ê¤Þ¤»¤ó(¤¿¤À¤·¡¢»Ò¥ª¥Ö¥¸¥§¥¯¥È¤ò»ý¤¿¤Ê¤¤ UI ¤Ë¤·¤Æ¤¯¤À¤µ¤¤)¡£
¡¡º£²ó¡¢¤³¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Î¥µ¥¤¥º¤ÏÊѹ¹¤·¤Ê¤¤Á°Äó¤Ç¤¹¡£
¤½¤Î¤¿¤á¡¢¼¡¤ËºîÀ®¤¹¤ë Slider ¤Î¥µ¥¤¥º¤Ë¹ç¤ï¤»¤Æ¡¢°ÌÃÖ¤À¤±¤¬¼«Æ°Ä´À°¤µ¤ì¤ë·Á¤Ç¤Î¼ÂÁõ¤Ë¤Ê¤ê¤Þ¤¹¡£
¡¡¥¿¥Ã¥×´¶ÃΤϹԤ¤¤Þ¤»¤ó¤Î¤Ç¡¢Raycast Target ¤Ï¥ª¥Õ¤Ë¤·¤Æ¤¯¤À¤µ¤¤¡£
¡¡ContentSizeFitter ¥³¥ó¥Ý¡¼¥Í¥ó¥È¡¢LayoutElement ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¥¢¥¿¥Ã¥Á¤·¤ÆÀßÄê¤ò¹Ô¤Ã¤Æ¤¤¤Þ¤¹¡£
¡¡ContentSizeFitter ¤Ç¤Ï²£Êý¸þ¤Î°ÌÃ֤Τ߲ÄÊѤǤ¤ë¤è¤¦¤Ë HorizontalFit ¤Î¤ß Min Size ¤È¤·¤Æ¡¢¥µ¥¤¥º¤Ï°ìÄê¤ËÊݤĤ褦¤Ë¤·¤Þ¤¹¡£
¡¡LayoutElement ¤Ç¤Ï¡¢¥µ¥¤¥º¤ÎºÇ¾®ÃͤòÀßÄꤷ¤Æ¤¤¤Þ¤¹¡£
¡¡º£²ó¤Î¼ÂÁõ¤Î¥á¥¤¥ó¤È¤Ê¤ëÌÜŪ¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Ç¤¹¡£
¤³¤Á¤é¤Î¥µ¥¤¥º¤¬¥²¡¼¥àÆâ¤ÇÊѹ¹¤µ¤ì¤ë¤¿¤á¡¢¤½¤ì¤ò¼«Æ°Ä´À°¤Ç¤¤ë¤è¤¦¤Ë¤·¤Þ¤¹¡£
Slider ¤ÈƱÍͤˡ¢»Ò¥ª¥Ö¥¸¥§¥¯¥È¤ò»ý¤Ä UI ¤Ç¤¢¤ì¤Ð¡¢ScrollView ¤Ê¤É¤Ë¤â±þÍѤ¬²Äǽ¤Ç¤¹¡£
¡¡LayoutElement ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¥¢¥¿¥Ã¥Á¤·¡¢Min Width ¤Ë¤ÏºÇ¾®»þ¤Î Slider ¥µ¥¤¥º¤òÀßÄꤷ¤Æ¤ª¤¤Þ¤¹¡£
¡¡»²¹ÍÍÑ¤Ë Slider ¤Î»Ò¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤Ä¤¤¤Æ¤â·ÇºÜ¤·¤Þ¤¹¡£
¥Õ¥ì¡¼¥à¡¢¤ª¤è¤Ó¥²¡¼¥¸Æâ¤ËÍøÍѤ¹¤ë²èÁü¤Ë¤Ï 9 Slice ¤òÀßÄꤷ¤Æ¤¯¤À¤µ¤¤¡£
¡¡Scene ¥Ó¥å¡¼Æâ¤Ç¼êÆ°¤Ç Slider ¤Î Width ¤òÊѹ¹¤·¤Æ¥µ¥¤¥º¤òÊѤ¨¤Þ¤¹¡£
¤³¤ÎºÝ¡¢LayoutGroup ¤Îµ¡Ç½¤Ë¤è¤ê¡¢²£°ìÎó¤Ëʤó¤Ç¤¤¤ë Image ¤È Slider ¤¬°ì½ï¤ËÆ°¤¡¢°ÌÃÖ¤¬Êѹ¹¤µ¤ì¤ì¤ÐÀ®¸ù¤Ç¤¹¡£
¡¡¾ï¤Ë Image ¤¬º¸Â¦¤ËÍè¤ë¤è¤¦¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤«¡¢Slider ¤Î¥µ¥¤¥º¤¬Ãæ±û¤«¤éÊѹ¹¤µ¤ì¤Æ¤¤¤ë¤«
UI ²èÁü¤Î 9 Slice ¤¬Âбþ¤·¤Æ¤¤¤ë¤³¤È¤ò³Îǧ¤·¤Æ¤¯¤À¤µ¤¤¡£
¡¡¤³¤Î»þÅÀ¤ÇÀµ¾ï¤ËÆ°ºî¤·¤Æ¤¤¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢¼¡¤Î¥¹¥¯¥ê¥×¥È¤òÍøÍѤ·¤ÆưŪ¤ËÊѹ¹¤·¤¿¾ì¹ç¤Ë¤âÀµ¾ï¤ËÆ°ºî¤·¤Þ¤»¤ó¡£
¤·¤Ã¤«¤ê¤È¥Á¥§¥Ã¥¯¤·¡¢ÌäÂêÅÀ¤¬¤Ê¤¤¤«¡¢¸«Ä¾¤·¤Æ¤¯¤À¤µ¤¤¡£
¡¡¥²¡¼¥à¤ò¼Â¹Ô¤·¡¢Slider ¤Î¥µ¥¤¥º¤¬ EnemyBase ¤Î SliderWidthSize ¤ÇÀßÄꤷ¤¿ÃͤËÊѹ¹¤È¤Ê¤ê¡¢
¤«¤Ä¡¢HorizontalLayoutGroup Æâ¤Î°ÌÃÖ¤¬¼«Æ°¤Ç¹¹¿·¤µ¤ì¤Æ¡¢¼êÆ°¤ÇÀßÄꤷ¤¿¾ì¹ç¤ÈƱ¤¸µóÆ°¤Ë¤Ê¤Ã¤Æ¤¤¤ì¤ÐÀ©¸æÀ®¸ù¤Ç¤¹¡£
¡¡½èÍý¤Î¥Ý¥¤¥ó¥È¤Ï HpSlider Æâ¤Î SetSliderSize ¥á¥½¥Ã¥É¤ÎÆâÍƤǤ¹¡£
/// <summary> /// Slider ¤Î¥µ¥¤¥º¤òÀßÄê /// HorizontalLayoutGroup Æâ¤Ë Slider ¤òÍøÍѤ·¤Æ¤¤¤ë¤È¥µ¥¤¥º¤òÊѤ¨¤¿¤À¤±¤Ç¤Ï²èÌ̤ËÈ¿±Ç¤µ¤ì¤Ê¤¤ /// ¤½¤Î¤¿¤á override ¤·¤Æ¹¹¿·ÊýË¡¤òÊѤ¨¤Æ¤¤¤ë /// </summary> /// <param name="guageLength"></param> public override void SetSliderSize(float guageLength) { // Canvas Æâ¤Îɽ¼¨¹¹¿· Canvas.ForceUpdateCanvases(); // SizeDelta ¼èÆÀ¤·¡¢Size ÍѤÎÃͤòÀßÄê RectTransform sliderRect = slider.transform as RectTransform; Vector2 size = new(sliderRect.sizeDelta.x * guageLength, sliderRect.sizeDelta.y); // SizeDelta ¹¹¿·(Scale ¤Ç¥µ¥¤¥ºÊѤ¨¤ë¤È 9 slice ¤¬Íø¤«¤Ê¤¤) (slider.transform as RectTransform).sizeDelta = size; //Debug.Log($"Size {(slider.transform as RectTransform).sizeDelta.x} : {(slider.transform as RectTransform).sizeDelta.y}"); // ¥ì¥¤¥¢¥¦¥ÈÆâ¤ÎÆþÎÏÃͤòºÆ·×»» horizontalLayoutGroup.CalculateLayoutInputHorizontal(); // ¥ì¥¤¥¢¥¦¥ÈºÆÀßÄê(ɽ¼¨¹¹¿·) horizontalLayoutGroup.SetLayoutHorizontal(); }
¡¡¡¤Þ¤ººÇ½é¤Ë Canvas.ForceUpdateCanvases()¤¬¸Æ¤Ó½Ð¤µ¤ì¡¢¥¥ã¥ó¥Ð¥¹¤È¤½¤Î»ÒÍ×ÁǤ¬¹¹¿·¤µ¤ì¤Þ¤¹¡£
Ä̾ï Canvas Æâ¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Îɽ¼¨¹¹¿·¤Ï 1¥Õ¥ì¡¼¥à¤Þ¤¿¤°É¬Íפ¬¤¢¤ê¤Þ¤¹¤¬¡¢¤³¤Î¥á¥½¥Ã¥É¤ò¼Â¹Ô¤¹¤ë¤³¤È¤Ç¨ºÂ¤Ë¹¹¿·¤µ¤ì¤Þ¤¹¡£
¡¡¢Slider ¤Î SizeDelta ¤ò¼èÆÀ¤·¡¢·×»»¤·¤¿·ë²Ì¤òÂåÆþ¤¹¤ë¤³¤È¤Ç¥¹¥é¥¤¥À¡¼¤Î¥µ¥¤¥º¤¬Êѹ¹¤µ¤ì¤Þ¤¹¡£
RectTransfrom ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤Ï GetComponent ¥á¥½¥Ã¥É¤òÍøÍѤ»¤º¤È¤â¡¢transform ¤ËÂФ·¤Æ as RectTransfrom ¤ò¼Â¹Ô¤¹¤ë¤³¤È¤Ç¼èÆÀ²Äǽ¤Ç¤¹¡£
Scale ¤Ç¤Ï¤Ê¤¯ SizeDelta ¤Î Width ¤ËÂФ·¤Æ¥µ¥¤¥º¤ÎÊѹ¹¤ò¹Ô¤¦Éôʬ¤¬½ÅÍפǤ¹¡£¤½¤¦¤¹¤ë¤³¤È¤Ç 9 Slice µ¡Ç½¤¬Í¸ú¤ËƯ¤¤Þ¤¹¡£
¡¡£horizontalLayoutGroup?.CalculateLayoutInputHorizontal()¤¬¸Æ¤Ó½Ð¤µ¤ì¡¢¿åÊ¿Êý¸þ¤Î¥ì¥¤¥¢¥¦¥È¤ÎÆþÎϤ¬ºÆ·×»»¤µ¤ì¤Þ¤¹¡£
¤³¤ì¤Ë¤è¤ê¡¢HorizontalLayoutGroup Æâ¤Î Slider ¤Î¥µ¥¤¥º¤È¡¢¤½¤Î»Ò¥ª¥Ö¥¸¥§¥¯¥È¤Î¥µ¥¤¥º¤¬ºÆ·×»»¤µ¤ì¤Þ¤¹¡£
¡¡¤ºÇ¸å¤Ë horizontalLayoutGroup?.SetLayoutHorizontal()¤¬¸Æ¤Ó½Ð¤µ¤ì¡¢¿åÊ¿Êý¸þ¤Î¥ì¥¤¥¢¥¦¥È¤¬ºÆÀßÄꤵ¤ì¡¢UIÍ×ÁǤ¬ÉÁ²è¤µ¤ì¤ë¹¹¿·¤¬¹Ô¤ï¤ì¤Þ¤¹¡£
¡¡°Ê¾å¤Î½èÍý¤ÎÆâÍƤˤè¤ê¡¢¤³¤Î½ç½ø¤Ç½èÍý¤ò¹Ô¤¦¤³¤È¤Ç¡¢UIÍ×ÁǤΥµ¥¤¥ºÊѹ¹¤¬Àµ¾ï¤Ë²èÌ̤ËÈ¿±Ç¤µ¤ì¤ë¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
¡¡ÆÃ¤Ë LayoutGroup ÍøÍÑ»þ¤Î Slider ¤Î¥µ¥¤¥ºÆ°Åª¤Ê¹¹¿·¤Ë¤ª¤¤¤Æ¤Ï¡¢¡¢£¤¤Î½èÍý¤È¡¢¤½¤Î¼Â¹Ô¤¹¤ë½çÈÖ¤¬½ÅÍפǤ¹¡£
Slider ¤Ë¤Ï»Ò¥ª¥Ö¥¸¥§¥¯¥È¤¬¤¢¤ë¤¿¤á¡¢¤³¤Î½èÍý¤òŬÀڤʽçÈ֤Ǽ¹Ԥ¹¤ë¤³¤È¤Ë¤è¤ê¡¢LayoutGroup Æâ¤Î³Æ¥ª¥Ö¥¸¥§¥¯¥È¤Î°ÌÃÖ¤òưŪ¤Ë¼«Æ°Ä´À°¤¹¤ë¤³¤È¤¬²Äǽ¤Ç¤¹¡£
- ¥«¥Æ¥´¥ê¡§
- ¿Ê³Ø/¥¹¥¯¡¼¥ë
- ¥×¥í¥°¥é¥ß¥ó¥°
¥³¥á¥ó¥È¤ò¤«¤¯