본문 바로가기
반응형

UI20

(5) 버튼 배치하기 - 파이 메뉴(Pie / Radial Menu) 만들기 Unity 전체 링크 파이 메뉴 만들기 (Pie / Radial Menu) (1) 중심 게이지 만들기 (2) 버튼 만들기 (3) Tooltip 만들기 (4) Text 자동 크기 조절 (5) 버튼 배치하기 (6) 버튼에 이벤트 연결하기 이제 버튼을 원형으로 배치해보자. 버튼의 크기가 모두 다른 경우 정확하게 원형으로 배치하는 것은 큰 의미가 없다. 어느 정도 기준점을 잡기만 하고 세부적인 것은 수동으로 조절하는 것이 좋다. ButtonSet에 Button을 필요한 만큼 추가한다. ButtonArrangement.cs를 ButtonSet에 추가한다. 자식 오브젝트를 원형으로 배치하기를 참고하여 아래의 코드를 작성한다. 자식 중 TooltipBackground는 배치하지 않으므로, List에 담지 않는다. u.. 2022. 5. 10.
(4) Text 자동 크기 조절 - 파이 메뉴(Pie / Radial Menu) 만들기 Unity 전체 링크 파이 메뉴 만들기 (Pie / Radial Menu) (1) 중심 게이지 만들기 (2) 버튼 만들기 (3) Tooltip 만들기 (4) Text 자동 크기 조절 (5) 버튼 배치하기 (6) 버튼에 이벤트 연결하기 Tooltip의 사이즈를 자동 설정하도록 해보자. 이제 각 버튼마다 툴팁의 설명이 다르게 나오도록 해보자. tooltip의 Text를 변경하도록 txt를 선언하고, 각 버튼마다 설명을 다르게 하도록 public으로 tooltipText를 만든다. Text txt; public string tooltipText; void Start() { ... txt = tooltip.transform.Find("Tooltip").GetComponent(); } 각 버튼별로 다르게 설명을 .. 2022. 5. 9.
(3) Tooltip 만들기 - 파이 메뉴(Pie / Radial Menu) 만들기 Unity 전체 링크 파이 메뉴 만들기 (Pie / Radial Menu) (1) 중심 게이지 만들기 (2) 버튼 만들기 (3) Tooltip 만들기 (4) Text 자동 크기 조절 (5) 버튼 배치하기 (6) 버튼에 이벤트 연결하기 버튼에 마우스를 일정시간 가져다대면 Tooltip(툴팁)이 나오도록 해보자. 마우스를 일정시간 가져다 대면 아래와 같이 나오도록 한다. Text 자체에는 배경색이 없다. 따라서 이미지로 대체한다. ButtonSet에 TooltipBackground(Image)를 만들고 Text로 Tooltip을 추가한다. 이미지의 색은 검은색, Text의 색은 하얀색으로 설정하고 Alignment를 적절히 선택한다. tooltip과 관련된 변수를 추가한다. tooltip은 현재 Button.. 2022. 5. 9.
(2) 버튼 만들기 - 파이 메뉴(Pie / Radial Menu) 만들기 Unity 전체 링크 파이 메뉴 만들기 (Pie / Radial Menu) (1) 중심 게이지 만들기 (2) 버튼 만들기 (3) Tooltip 만들기 (4) Text 자동 크기 조절 (5) 버튼 배치하기 (6) 버튼에 이벤트 연결하기 이제 버튼에 마우스를 가져다대면 배경색이 회색이 되도록 만들어보자. PieMenu 아래에 빈 오브젝트로 ButtonSet을 만들고 UI - Button을 추가한 후, 적절히 배치한다. Button의 색은 검은색, Text는 하얀색으로 수정한다. Text - Paragraph 에서 Alignment를 변경하면 보기 좋게 정돈된다. 이제 PieButton.cs를 각 버튼에 추가한다. UI에서 마우스 이벤트를 사용하기 위해서는 IPointerXXXHandler 인터페이스를 추가하.. 2022. 5. 8.
(1) 중심 게이지 만들기 - 파이 메뉴(Pie / Radial Menu) 만들기 Unity 전체 링크 파이 메뉴 만들기 (Pie / Radial Menu) (1) 중심 게이지 만들기 (2) 버튼 만들기 (3) Tooltip 만들기 (4) Text 자동 크기 조절 (5) 버튼 배치하기 (6) 버튼에 이벤트 연결하기 아래와 같은 블렌더의 파이 메뉴 UI를 유니티에서 만들어보자. 아래 png를 다운 받아서 스프라이트로 만들자. 그대로 쓰면 중심이 어긋나 있기 때문에 스프라이트를 잘라줘야 한다. Sprite를 잘랐으면 Canvas 아래에 Empty(PieMenu) Image 2개(FullGauge, Gauge)를 만든다. FullGauge는 Color를 검은색으로 변경한다. Gauge는 Image Type을 Filled로 변경한 후, Fill Amount를 적절히 변경한다. 그러면 게임화면.. 2022. 5. 8.
유니티 - 타임 슬라이더 만들기 (Time Slider) Unity 전체 링크 참고 - 타임 슬라이더 만들기 - Light Rotate로 간단히 낮과 밤 구현하기 - 슬라이더로 안개 조절하기 아래와 같이 슬라이더를 0 ~ 1로 조절하면 00 : 00 : 00 ~ 24 : 00 : 00으로 조절되는 Time Slider를 만들어보자. Canvas > 빈 오브젝트 아래에 Slider와 Text를 추가한다. Slider의 이벤트를 위해서 EventSystem도 추가해둔다. DateTime을 쓰기 위해 System을 선언하고, Slider, Text를 사용하기 위해 UnityEngine.UI를 선언한다. using System; using System.Collections; using System.Collections.Generic; using UnityEngine;.. 2022. 3. 24.
유니티 Color Picker로 오브젝트 색깔 변경하기 Unity 전체 링크 오브젝트를 더블 클릭하면, 색상을 선택할 수 있도록 구현해보자. color picker에 연결할 오브젝트를 추가한다. public GameObject linkedObject; color picker는 유일하도록 싱글턴으로 만든다. private static CircleColorPicker instance = null; public static CircleColorPicker Instance { get { if (null == instance) instance = FindObjectOfType(); return instance; } } private void Awake() { if (null == instance) instance = this; } 게임이 시작되면 color picke.. 2022. 3. 20.
유니티 색상 변경 에디터 만들기 (Circle Color Picker) Unity 전체 링크 색상을 선택하면 선택된 Color 값을 읽을 수 있는 색상 변경 에디터, Circle Color Picker를 만들어보자. 먼저 원하는 color picker를 다운받는다. 다운받은 이미지를 Texture Type : Sprite (2D and UI)로 변경하고 Read/Write Enabled = true로 설정한다. Read/Write Enabled를 설정하면 런타임에 mesh를 써넣는 것을 가능하고 메모리에 복사본이 생성된다. 그리고 선택된 색깔을 알아보기 위해 picker로 쓸 이미지도 sprite로 만들어둔다. 그리고 EventSystem, Canvas를 추가한다. Canvas - ColorPicker(Empty) - Palette(Image), Picker(Image)로 .. 2022. 3. 20.
유니티 - 롱 클릭 progress bar 처리하기 Unity 전체 링크 참고 - 롱 클릭 구현하기 유니티 long click을 구현하였으니, 얼마나 오랫동안 클릭해야 하는지 progress bar로 보여주도록 하자. 먼저 Canvas를 만들고 Image에 적당한 원 이미지를 입힌다. 그리고 Image Type을 Filled로 Fill Method는 Radial 360으로 변경한다. 아래와 같이 카메라에 Image가 나온 것을 확인할 수 있다. 이미지의 Scale은 게임 오브젝트에 적당히 맞추면 된다. Image를 사용하기 위해 UI를 선언한다. using UnityEngine.UI; progress bar가 게임 오브젝트를 따라다니게 하기 위해 GameObject로 선언하고, Start를 할 때, Image를 progressBar에서 얻는다. 클릭 이벤.. 2022. 3. 15.
반응형

티스토리툴바