내장된 스타일 편집기는 토큰, 디자인 시트, 스타일 규칙 및 테마의 조합을 통해 Roblox 경험에서 UI 스타일을 만들고, 관리하고, 적용할 수 있는 포괄적인 도구입니다.
스타일 편집기에 액세스하려면 UI 탭(표시되지 않는 경우 홈 탭에서 액세스)을 통해 액세스하십시오.
열려면 디자인 생성 버튼을 클릭하여 기본 스타일 세트를 생성합니다.
스타일 편집기를 통해 디자인 스타일 세트를 만들면 기본 스타일 시트가 내부 디자인 폴더 내의 디자인 폴더 내에 생성됩니다.이 기본 시트는 Studio의 삽입 워크플로에서 나오는 기본값과 같은 특정 엔진 수준 기본값을 싱크합니다(예: Color3 ).기본 스타일 시트를 삭제하거나 수정하지 않고 대신 디자인 시트 주위에 토큰과 스타일 규칙을 구축하여 UI 목표에 맞게 합니다.
또한, 기본 스타일 시트에 대한 스타일시트 시트가 생성되는 디자인 폴더에 기본 스타일 시트에 대한 StyleDerive가 포함됩니다.그 StyleDerive 를 제거하기로 선택하면, 예를 들어 기본값 GuiObjects 의 경우 스타일이 없는 값이 예기치 않은 값이 될 수 있습니다, 예를 들어 기본값 Size 의 경우 . .
스타일 토큰
스타일 토큰, 토큰의 특성을 통해 정의되며, 스타일과 구성 요소 간에 사용할 수 있는 UI 속성 변수를 나타냅니다. 예를 들어, 에 공통 색상이 있을 수 있고, 에 있고, 에 있고, 에 있을 수 있습니다.토큰은 CSS 변수와 비슷합니다.
UI 스타일링에 필요하지는 않지만 시간이 지남에 따라 확장 가능한 UI 디자인 및 스타일 업데이트에 토큰이 매우 권장됩니다.우선 유니버셜 스타일링의 다른 측면과 어떻게 연결되는지 이해하기 위해 다음 토큰을 만들어야 합니다.
새로운 토큰 스타일 시트 생성:
- 스타일 편집기의 왼쪽 열에서 토큰 을 가리키고, ⊕ 를 클릭하고, 새 토큰 스타일 시트 를 선택합니다.
- 새 시트의 이름을 TokenSheet로 바꿉니다.
디자인 시트
디자인 스타일 시트는 스타일 규칙을 집계하고 UI 인스턴스에 스타일 속성을 적용하기 위해 DataModel에 연결할 수 있습니다.UI에서 관련 스타일을 교환하기 위해 테마를 사용할 수는 있지만, 특정 트리에는 하나의 StyleSheet만 적용할 수 있으며, 이 가이드에서 나중에 다루는 개념입니다.
스타일시트라는 이름의 미리 채워진 디자인 시트가 디자인 생성 버튼을 통해 생성됩니다.그것은 Frame 및 TextLabel와 같은 일반적인 UI 개체에 대한 클래스 규칙을 포함합니다.또한 사용자 지정 스타일 구성에 사용할 기본 스타일 시트에서 StyleDerive과 스타일을 파생하는 두 인스턴스를 포함합니다.
디자인 시트가 있으면 스타일 편집기에 사용할 화면 컨테이너 또는 필요한 경우 경험 내 컨테이너를 사용하도록 테스트를 설정할 수 있습니다.
탐색기에서 위로 마우스를 이동하고 를 삽입합니다.
새로운 인스턴스가 스타일시트 디자인 페이지에서 와 함께 나타나고 속성 집합이 스타일시트 디자인 페이지로 설정되었는지 확인하십시오.
가 생성되지 않으면 스타일 편집기의 왼쪽 열에 있는 스타일시트 디자인 시트와 탐색기 를 선택하여 신속하게 하나를 만들 수 있습니다.그런 다음, 편집기의 주 패널의 오른쪽 상단 섹션에서 스타일링크 삽입 버튼을 클릭하십시오.
스타일 규칙
스타일 규칙 은 규칙의 Selector에 일치하는 모든 인스턴스에 적용되어 클래스 이름, 인스턴스 태그 및 계층 관계와 같은 특성에 일치합니다.높은 수준에서 규칙의 Selector 정의를 통해 인스턴스 일치 및 수정은 다음을 통해 작동합니다:
- 인스턴스 모디파이어 는 phantom 또는 또는 과 같은 환영을 통해 적용됩니다.
- 상태 선택자는 4개의 열거형 값 중 하나인 와 같은 값을 선택합니다.
- UI 개체의 값에 따른 인스턴스 이름 선택 Instance.Name.
클래스 규칙
스타일 클래스 선택자는 지정된 UI 클래스의 모든 인스턴스를 대상으로 합니다.다음 규칙 설정 스타일은 일관된 배경색과 크기로 모두 Frames를 처리합니다.
스타일 편집기의 왼쪽 열에서 프레임 을 UI 요소 분기에서 선택합니다.
이전에 생성된 스타일 토큰 두 개를 두 개의 Frame에 연결하십시오:
속성 스타일 토큰 BackgroundColor3 $Magenta Size $SquareL - 메인 패널에서 속성 추가… 를 클릭하고 필요한 속성을 선택하십시오.드롭다운 메뉴에서 속성을 더 빨리 찾기 위해 키워드를 입력할 수 있습니다.
- 정적 값을 입력하는 대신 ⋮ 버튼을 클릭하고 링크 토큰 을 선택합니다.
- 값 필드에 나타나는 $를 클릭하고 적절한 연결된 토큰을 선택하십시오.
이전에 생성하고 연결한 에 새로운 를 삽입하십시오. 정의한 스타일이 자동으로 적용됩니다.
태그 규칙
인스턴스 태그 선택자는 특정 UI 개체를 태그하여 CollectionService 통해 선택합니다.다음 규칙 설정 스타일은 사용자 지정 배경색, 글꼴 및 텍스트 크기로 태그된 태그를 구성합니다.
스타일 편집기의 왼쪽 열에서 스타일 시트 시트를 가리키고, ⋮ 버튼을 클릭하고, 새로운 태그로 이동합니다.
새 태그 규칙 이름 바꾸기 .ButtonPrimary (선행 . 참고).
이전에 생성된 스타일 토큰 세 개를 세 가지 TextButton에 연결하십시오:
속성 스타일 토큰 BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - 메인 패널에서 속성 추가… 를 클릭하고 필요한 속성을 선택하십시오.드롭다운 메뉴에서 속성을 더 빨리 찾기 위해 키워드를 입력할 수 있다는 점을 기억하십시오.
- 정적 값을 입력하는 대신 ⋮ 버튼을 클릭하고 링크 토큰 을 선택합니다.
- 값 필드에 나타나는 $를 클릭하고 적절한 연결된 토큰을 선택하십시오.
UI 수정기
인스턴스 수정자 선택자는 UIComponents 또는 UICorner 또는 UIStroke와 같은 유령을 적용하여 개체를 더 스타일링합니다.다음 규칙 설정 스타일은 사용자 지정 텍스트 크기와 둥근 모서리로 TextLabel를 구성합니다.
스타일 편집기의 왼쪽 열에서 텍스트 레이블 을 UI 요소 분기에서 선택합니다.
A 가짜 인스턴스 는 다른 요소에 둥근 모서리를 구성하고 적용하기 위해 필요합니다. 하나를 만들려면:
왼쪽 열에서 TextLabel 을 호버하고 ⋮ 버튼을 클릭하고 새로운 → 가짜 인스턴스 → UICorner 로 이동합니다.
새로운 UICorner 가상 인스턴스가 왼쪽 열의 TextLabel 요소 아래에 나타납니다.
왼쪽 열에서 새로 선택된 UICorner 인스턴스로, 이전에 생성된 스타일 토큰을 다음 CornerRadius에 연결하십시오:
- 메인 패널에서 속성 추가… 를 클릭하고 CornerRadius을 선택합니다.
- 정적 값을 입력하는 대신 ⋮ 버튼을 클릭하고 링크 토큰 을 선택합니다.
- 값 필드에 나타나는 $를 클릭하고 $Rad20 토큰을 선택합니다.
이전에 생성하고 연결한 에 새로운 를 삽입하십시오. 정의한 스타일이 자동으로 적용됩니다.
상태 규칙
GuiObject 상태 선택자는 상호 작용 상태에 대한 스타일 변경을 자동으로 구성할 수 있도록 4개의 GuiState 열거형 값 중 하나에 해당합니다, 예를 들어 Hover , 인터랙티브 상태에 대한 스타일 변경을 자동으로 구성할 수 있습니다.다음 규칙 설정은 모든 ImageButtons에 대해 -4 도의 호버 상태를 생성합니다.
스타일 편집기의 왼쪽 열에서 이미지 버튼 을 UI 요소 분기에서 선택합니다.
클릭하십시오 ⋮ 버튼 및 새로 이동하십시오 새로운 > GuiState > 호버 .
새로운 호버 상태 변경 인스턴스가 왼쪽 열의 이미지 버튼 요소 아래에 나타납니다.
왼쪽 열에서 새로운 호버 모디파이어를 선택하여 주 패널에서 속성 추가… 를 클릭하고 Rotation 선택합니다.드롭다운 메뉴에서 속성을 더 빨리 찾기 위해 키워드를 입력할 수 있다는 점을 기억하십시오.
속성의 값 필드에 -4를 입력하십시오.
이전에 생성하고 연결한 Class.ImageButton``Class.ScreenGui 에 새로운 삽입 을 넣으십시오.뷰포트에서 버튼을 가리키면 4도 반시계 방향으로 회전해야 합니다.
스타일 테마
스타일 테마 는 예를 들어 "라이트"와 "다크" 테마를 정의하는 색상 토큰 세트와 같이 교체할 수 있는 특정 토큰 세트로 구성됩니다.
테마 생성
확장성을 위해 테마는 폴더로 구성됩니다.단일 폴더로 대부분의 목적에 충분할 수 있지만, 원하는 경우 "색상" 또는 "서체"와 같은 폴더에서 테마를 구성할 수 있습니다.
새 테마 폴더 생성:
- 스타일 편집기의 왼쪽 열에서 테마 를 가리키고, ⊕ 를 클릭하고, 새 테마 를 선택합니다.
- 새로운 폴더 항목을 일반 으로 이름 바꾸기.
새로운 테마 스타일 시트 생성:
- 새로운 일반 폴더에 마우스를 올리고 ⋮ 버튼을 클릭하고 새 테마 스타일시트 를 선택합니다.
- 그것을 ThemeA 로 이름 바꾸기.
테마 토큰
테마가 생성되면 다양한 UI 개체 속성, 예를 들어 BackgroundColor3 의 TextButton 에 해당 토큰을 연결할 수 있습니다.테마 시트는 올바르게 작동하려면 일반 토큰 집합을 사용해야 합니다.
스타일 편집기의 왼쪽 열에서 ThemeA 를 선택하여:
이전에 생성된 스타일 토큰 세 개를 세 가지 새로운 테마 토큰에 연결하십시오:
테마 토큰 스타일 토큰 BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - 메인 패널에서 토큰 추가... 를 클릭하고 테마 토큰의 이름을 입력하십시오.
- 값 필드에 나타나는 $를 클릭하고 연관된 스타일 토큰을 선택하십시오.
스타일 편집기의 왼쪽 열에서 텍스트 버튼 을 UI 요소 분기에서 선택합니다.
테마의 토큰을 세 가지 새로운 TextButton 속성에 연결하십시오:
속성 테마 토큰 BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - 메인 패널에서 속성 추가… 를 클릭하고 필요한 속성을 선택하십시오.
- 정적 값을 입력하는 대신 ⋮ 버튼을 클릭하고 링크 토큰 을 선택합니다.
- 값 필드에 나타나는 $를 클릭하고 적절한 테마 토큰을 선택하십시오.
테마의 토큰을 연결할 때, 호버 오버에서 "[토큰] in ThemeA에 "[토큰]"이 테마에서 나오고 전역 토큰 시트에서 나오지 않는지 확인하십시오(테마가 이미 전역 토큰을 파생시킨다는 점을 기억하십시오).
테마 복제
일반적으로 테마가 정립되면 복제 하고 다양한 토큰을 변경하여 독특한 테마 스타일을 정의할 수 있습니다.
스타일 편집기의 왼쪽 열에서 ThemeA 테마를 가리키고 ⋮ 버튼을 클릭하고 복제 를 선택합니다.
복제된 테마를 ThemeB 로 이름 바꾸기.
테마의 토큰 2개를 2개의 다른 스타일 토큰에 연결하십시오:
테마 토큰 스타일 토큰 BackColor $Magenta ButtonTextSize $Text24 - 속성 값 필드의 오른쪽에서 ⋮ 버튼을 클릭하고 연결 해제 토큰 을 선택합니다.
- 다시 클릭하여 ⋮ 를 선택하고 링크 토큰 을 선택합니다.
- 값 필드에서 $를 클릭하고 새로운 관련 스타일 토큰을 선택합니다.
테마 교체
테마가 여러 개 있으면 여러 테마를 테마의 폴더를 통해 교환하거나 SetDerives() 교환할 수 있습니다.
스타일 편집기의 왼쪽 열에서 일반 폴더를 테마 분기에 선택합니다.
메인 패널에서 라디오 버튼을 사용하여 테마 간에 교체합니다.
