UI Toolkit
UI Toolkit for Runtime - [Unity Tutorial] - YouTube 보고 연습해봤습니다. 그러나 해당 버전은 2020버전으로 안내되는 tab과 tool들이 2022, 2023 버전엔 없는 경우가 많아서 대체되는 tab과 메뉴 설정등을 시도해보며 정리해봤습니다.
새 프로젝트 > UI Toolkit Practice_1으로 이름 설정 후 생성
새 프로젝트 > 3D > 프로젝트 이름 : UI Toolkit Course > 프로젝트 생성
Edit > Project Settings
(Project Settings 창) Package Manger > Enable Pre-release Packages 클릭 > x 눌러 창 닫기
(2021이전 버전은 Enable Preview Packages 로 나온다.)
Window > Package Manger
(Package Manager 창) Packages > Unity Registry
(이전 버전은 All 항목이 있으나 현재 버전에는 All 이 없다. 그러나 Unity Registry로 설정 후 package 내 검색을 하면 URP가 나오기 때문에 같은 기능을 하는 것을 확인 할 수 있었다.Where is the "All" tab in Package Manager? - Unity Forum 참고)
+ > Add package from git URL
com.unity.ui.runtime 입력 > Add
UIElements Runtime이 가장 최신 버전인 0.0.4로 다운되었으나 0.0.3버전 선택 > Update to 0.0.3-preview
Window > UI Toolkit > UI Builder
(이전 버전은 Package Manager 에 UI Builder 가 있었으나 현재는 빠져서 위의 형식으로 접근한다.)
Assets > (우클릭) Create > Folder > Graphics / Scripts / UI 폴더 생성
Assets > Graphics > 필요한 사진들 저장
(각각의 사진들을 세팅) logo > Texture Type : Sprite (2D and UI) > Sprite Mode : 2D > Mesh Type : Tight > Generate Physics > sRGB {Color Texture} > Alpha is Trasparency > Generate Mip Maps > Wrap Mode : Clamp >Filter Mode > Bilinear > Max Size : 4096
Assets > Scenes > SampleScene > (우클릭) Rename > Menu 로 변경
Menu > (좌측 창 Hierarchy ) Directional Ligt > (우클릭) Delete
Assets > UI > (우클릭) Create > UI Toolkit > UI Document > MainMenuScreen으로 이름 설정
Constrainers 에서 필요한 항목을 Viewport에 끌어온다. VisualElement > ( 그 속에 ) Button
(이때 Viewport에서 조절되는 창의 크기는 실제 구현과 상관이 없다.)
Button을 원하는대로 커스터마이즈 한다.
(좌측 상단) + > Create New Uss > UI 폴더 > Menu 로 저장
(좌측 Hierarchy) Button > (우측 Inspector) Style Class List > button 입력 > Extract Inlined Sytles to New Class > UI에 저장
.button이 추가됨
(우측 상단 Add new selector ) .button:active > enter 후 .button:hover > enter
버튼의 inspector Background > Color를 white로 설정 후 .button:hover의 투명도만 150으로 설정
화면 실행 결과
(좌측 상단) Preview > 마우스 커서를 올려놓은 버튼은 회색으로 변하고 클릭하면 흰색으로 변한다.
(active 가 클릭할 때 변화 , hober가 대기 상태_커서 올려놓은 상태 변화로 원하는대로 Background > Colo에서 커스터마이즈한다.)
Text 세팅 값 설정(중앙정렬)
VisualElement 생성 > (우클릭)Rename > main-menu-screen
Button을 main-menu-screen하위 항목으로 설정 > Align > 중앙정렬
Style Class List > .screen 입력 > Extract Inlined Styles to New Class > (우측 메뉴바에) .screen 생성
.screen > (우측) Background > Image > 동심원 아이콘 > 미리 저장해 놓은 파일명 검색 > 클릭 후 x
main-menu-screen > (우측) Style Class List > .screen-background > Extract Inclined Styles to New Class
기존의 Button 삭제 > 하위 항목으로 VisualElement > (우클릭) Rename > menu-center-penal
menu-center-penal > (우측) Size > Width: 50% > Height: 100%
Style Class List > menu-center-panel 입력 > Extract Inlined Styles to New Class > (우측 메뉴바에) .menu-center-panel 생성
Backgroundcolor > 투명도 100 설정
실행 화면
중앙에 어두운 불투명의 검정 박스가 생성된다.
위와 같은 방법으로 .menu-background-color class 추출
로고 삽입
배경, 로고(png 형식) 사진등은 쉽게 변경 가능하니 (해당 class 클릭 후 Background > Image 에서 선택) 후에 수정 예정
menu-button-list class 생성 후 다음 inspector대로 설정하고 menu-button class 도 추가
각각의 버튼의 Name과 Text를 입력하여 생성
preview 로 활성화 시 버튼 색깔 변경( .button:active .button:hover )이 작동 안됨_오류 수정 필요
(UI Builder 종료 후) Assets > Scripts > (우클릭) Create > C# Script > PanelManager로 이름 변경