ตัวแก้ไขสไตล์

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

เครื่องมือติดตั้งล่วงหน้า ตัวแก้ไขสไตล์ เป็นเครื่องมือที่ครอบคลุมที่ช่วยให้คุณสามารถสร้าง จัดการ และใช้สไตล์ UI สำหรับประสบการณ์ Roblox ผ่านการผสมผสานของ โทเค็น , แผ่นออกแบบ , กฎสไตล์ และ ธีม

เข้าถึงตัวแก้ไขสไตล์ผ่านแท็บ UI (ถ้าไม่ปรากฏให้เห็น ให้เข้าถึงจากแท็บ บ้าน)

Style Editor tool indicated in UI tab of Studio toolbar

เมื่อเปิดแล้ว คลิกปุ่ม สร้างการออกแบบ เพื่อสร้างชุดสไตล์พื้นฐาน

Create Design button in opening dialog of Style Editor.

โทเค็นสไตล์

สไตล์ โทเค็น ที่กำหนดผ่าน คุณสมบัติ ของโทเค็น แทนที่ตัวแปรคุณสมบัติ UI ที่สามารถใช้ได้ทั่วสไตล์และส่วนประกอบ; ตัวอย่างเช่น อาจมีสีที่เหมือนกันสำหรับ , และ .โทเค็นเปรียบเทียบได้กับ ตัวแปร CSS

  1. สร้างแผ่นสไตล์โทเค็นใหม่:

    1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลื่อนเมาส์ไปที่ โทเค็น คลิกที่ และเลือก แบบฟอร์มสไตล์โทเค็นใหม่ 2. เปลี่ยนชื่อแผ่นใหม่เป็น TokenSheet
    New token sheet created in Style Editor.
  2. เมื่อแผ่นโทเค็นใหม่ถูกเลือกแล้ว สร้างโทเค็นหลายตัวโดยคลิกที่ เพิ่มโทเค็น… ในแผงหลักโทเค็นเหล่านี้จะถูกใช้ตลอดคู่มือนี้สำหรับทั้ง กฎ และ ธีม

    ชื่อโทเค็นประเภทมูลค่า
    GoldColor3#ffcc00
    MagentaColor3#ff0099
    OrangeColor3#dd6030
    OswaldFontOswald
    Rad20UDim0, 20
    RectLUDim20, 300, 0, 160
    SquareLUDim20, 200, 0, 200
    Text24จํานวน24
    Text32จํานวน32
    Tokens added to TokenSheet in Style Editor.

แผ่นออกแบบ

แผ่นสไตล์การออกแบบรวบรวมกฎสไตล์ และสามารถเชื่อมโยงกับต้นไม้ DataModel เพื่อใช้คุณสมบัติสไตล์กับตัวอย่าง UIเฉพาะหนึ่ง StyleSheet สามารถใช้กับต้นไม้ที่กำหนดได้ แม้ว่าคุณจะสามารถใช้ ธีม เพื่อสลับรูปแบบที่เกี่ยวข้องกับ UI ของคุณได้ แนวคิดที่ครอบคลุมในภายหลังในคู่มือนี้

แผ่นออกแบบที่กรอกไว้แล้วชื่อ แผ่นสไตล์ ถูกสร้างขึ้นผ่านปุ่ม สร้างการออกแบบ มันมีกฎคลาสสำหรับวัตถุ UI ทั่วไปเช่น Frame และ TextLabelนอกจากนี้ยังมีสองตัวอย่าง StyleDerive ที่ได้รับ (มรดก) โทเค็น และสไตล์จากแผ่นสไตล์เบสเพื่อใช้ในการกำหนดสไตล์ที่กำหนดเอง

Initial configuration of design sheet in Style Editor.

เมื่อคุณมีแผ่นออกแบบแล้ว คุณสามารถตั้งค่าการทดสอบ บนภาชนะบนหน้าจอ เพื่อใช้กับตัวแก้ไขสไตล์ หรือ บนภาชนะในประสบการณ์ หากต้องการ

  1. เลื่อนเมาส์ไปที่ StarterGui ใน สํารวจ และใส่ ScreenGui

  2. ยืนยันว่าตัวอย่างใหม่ StyleLink ปรากฏภายใต้ ScreenGui ด้วยคุณสมบัติ StyleSheet ที่กำหนดเป็นแผ่นออกแบบ StyleSheet

กฎสไตล์

สไตล์ กฎ ใช้กับทุกตัวอย่างที่ตรงกับคํานิยามของกฎ Selector เพื่อจับคู่คุณลักษณะเช่นชื่อคลาสชื่อตัวอย่างและความสัมพันธ์ระหว่างระดับในระดับสูง การจับคู่และการแก้ไขตัวอย่างผ่านการกำหนดค่าของกฎ Selector ทำงานผ่าน:

  • ตัวเลือกคลาส Roblox ซึ่งเป้าหมายทุกตัวอย่างของคลาส UI ที่กำหนด ตัวอย่างเช่น , , ฯลฯ
  • ตัวเลือกแท็ก ตัวอย่าง ที่เลือกเป้าหมายเป็นวัตถุ UI เฉพาะ ถูกติดตาม ผ่าน CollectionService
  • ตัวปรับเปลี่ยนตัวอย่าง ถูกใช้ผ่านผี UIComponents เช่น UICorner หรือ UIStroke
  • GuiObjectสถานะ ตัวเลือกที่ตรงกับหนึ่งในสี่ของค่า enum เช่น Enum.GuiState เช่น Hover
  • การเลือกชื่อตัวอย่างตามค่าของวัตถุ UI Instance.Name

กฎคลาส

สไตล์ คลาส เลือกเป้าหมายทั้งหมดของคลาส UI ที่กำหนดแล้วสไตล์การตั้งค่ากฎต่อไปนี้ทั้งหมด Frames ด้วยสีพื้นหลังและขนาดที่เท่ากัน

  1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือก กรอบ ในสาขา องค์ประกอบ UI

    Default class style in the Style Editor.
  2. เชื่อมโยงสองโทเคนสไตล์ที่สร้างไว้ก่อนหน้านี้ ไปยังสองคุณสมบัติ Frame:

    คุณสมบัติโทเค็นสไตล์
    BackgroundColor3$Magenta
    Size$SquareL
    1. คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติที่จำเป็นโปรดทราบว่าคุณสามารถพิมพ์คำหลักเพื่อค้นหาคุณสมบัติในเมนูดรอปดาวน์ได้เร็วขึ้น
    2. แทนที่จะใส่ค่าคงที่ คลิกปุ่ม และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็นที่เหมาะสม

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.
  3. ใส่ใหม่ ใน ที่คุณสร้างและเชื่อมโยงไว้ก่อนหน้านี้ สไตล์ที่คุณกำหนดควรใช้กับมันโดยอัตโนมัติ

    Final styled class rule in the Style Editor.

กฎป้ายชื่อ

ตัวเลือกแท็ก ตัวอย่าง เลือกเป้าหมายวัตถุ UI เฉพาะ ถูกติดตาม ผ่าน CollectionServiceรูปแบบการตั้งค่ากฎต่อไปนี้จะติดตั้งแท็ก TextButton ที่มีป้ายชื่อว่า ButtonPrimary ด้วยสีพื้นหลังและฟอนต์และขนาดข้อความที่กําหนดเอง

  1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลื่อนเมาส์ไปที่แผ่น แผ่นสไตล์ คลิกปุ่ม ⋮ และนำทางไปยัง แท็กใหม่

    Creation of tag rule in the Style Editor.
  2. เปลี่ยนชื่อกฎแท็กใหม่ .ButtonPrimary (โปรดทราบตัวนำหน้า . )

    Tag rule renamed in the Style Editor.
  3. เชื่อมโยงสามโทเค็นสไตล์ที่สร้างไว้ก่อนหน้านี้ สามคุณสมบัติ:

    คุณสมบัติโทเค็นสไตล์
    BackgroundColor3$Gold
    FontFace$Oswald
    TextSize$Text32
    1. คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติที่จำเป็นโปรดจำไว้ว่าคุณสามารถพิมพ์คำหลักเพื่อค้นหาคุณสมบัติได้เร็วขึ้นในเมนูการเลือกลง
    2. แทนที่จะใส่ค่าคงที่ คลิกปุ่ม และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็นที่เหมาะสม

    Token linking workflow diagrammed in the Style Editor.
    Tag rule configured with tokens in the Style Editor.
  4. ใส่ใหม่ ใน ที่คุณสร้างและเชื่อมโยงไว้ก่อนหน้านี้ และ แท็ก เป็น ลัดที่สะดวกคือดังนี้:

    1. ตรวจสอบให้แน่ใจว่า ใหม่ TextButton ถูกเลือกใน สํารวจ .
    2. ด้วยกฎป้าย .ButtonPrimary ที่เลือกในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ คลิก ใช้แท็ก ในแผงหลักสไตล์ที่คุณกำหนดควรใช้กับปุ่มโดยอัตโนมัติ

    Tag linking workflow diagrammed in the Style Editor.
    Final styled tag rule in the Style Editor.

ตัวแก้ไข UI

ตัวเลือกตัวปรับเปลี่ยนตัวอย่างใช้ผี UIComponents เช่น UICorner หรือ UIStroke เพื่อตกแต่งวัตถุต่อไปรูปแบบการตั้งค่ากฎต่อไปนี้จะสร้าง TextLabel ด้วยขนาดข้อความที่กําหนดเองและมุมโค้ง

  1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือก TextLabel ในสาขา องค์ประกอบ UI

    Default class style in the Style Editor.
  2. เชื่อมโยงโทเค็นสไตล์ที่สร้างไว้ล่วงหน้า กับคุณสมบัติ TextSize:

    1. คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติ TextSizeโปรดจำไว้ว่าคุณสามารถพิมพ์คำหลักเพื่อค้นหาคุณสมบัติได้เร็วขึ้นในเมนูการเลือกลง
    2. แทนที่จะใส่ค่าคงที่ คลิกปุ่ม และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็น $Text32

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.

ต้องมี ตัวอย่างปลอม เพื่อกำหนดค่าและใช้มุมโค้งกับองค์ประกอบอื่น ๆ เพื่อสร้างหนึ่ง:

  1. ในคอลัมน์ด้านซ้าย, เลื่อนเมาส์ไปที่ TextLabel , คลิกปุ่ม และนําทางผ่านไปยัง ใหม่ > Pseudo Instance > UICorner

    Creation of a pseudo instance in the Style Editor.

    ตัวอย่างปลอมใหม่ UICorner ปรากฏภายใต้องค์ประกอบ TextLabel ในคอลัมน์ด้านซ้าย

    Resulting pseudo instance in the Style Editor.
  2. ด้วยตัวอย่างใหม่ UICorner ที่เลือกในคอลัมน์ด้านซ้าย เชื่อมโยงโทเค็นสไตล์ที่สร้างไว้ล่วงหน้า style token กับคุณสมบัติ CornerRadius

    1. คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติ CornerRadius
    2. แทนที่จะใส่ค่าคงที่ คลิกปุ่ม และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็น $Rad20
    Pseudo instance configured with tokens in the Style Editor.
  3. ใส่ใหม่ ใน ที่คุณสร้างและเชื่อมโยงไว้ก่อนหน้านี้ สไตล์ที่คุณกำหนดควรใช้กับมันโดยอัตโนมัติ

    Final styled modifier rule in the Style Editor.

กฎของรัฐ

สถานะ ตัวเลือกตรงกับหนึ่งในสี่ของค่า enum เช่น ทำให้คุณสามารถกำหนดค่าการเปลี่ยนแปลงสไตล์สำหรับสถานะโต้ตอบได้อัตโนมัติการตั้งค่ากฎต่อไปนี้สร้างสถานะโฮเวอร์ของ -4 องศาการหมุนสำหรับทั้งหมด ImageButtons

  1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือก ปุ่มรูปภาพ ในสาขา องค์ประกอบ UI

    Default class style in the Style Editor.
  2. คลิกที่ปุ่ม และนำทางไปที่ ใหม่ > GuiState > โฮเวอร์

    Creation of state rule in the Style Editor.

    ตัวแก้ไขสถานะใหม่ โฮเวอร์ ปรากฏภายใต้องค์ประกอบ ปุ่มภาพ ในคอลัมน์ด้านซ้าย

    Resulting state rule in the Style Editor.
  3. ด้วยตัวแก้ไขใหม่ เลื่อน ที่เลือกในคอลัมน์ด้านซ้าย คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือก Rotationโปรดจำไว้ว่าคุณสามารถพิมพ์คำหลักเพื่อค้นหาคุณสมบัติได้เร็วขึ้นในเมนูการเลือกลง

  4. ใส่ -4 ในฟิลด์ค่าของคุณ

    State rule configured with tokens in the Style Editor.
  5. ใส่ใหม่ ใน ที่คุณสร้างและเชื่อมโยงไว้ก่อนหน้านี้ เมื่อคุณเลื่อนเมาส์ไปเหนือปุ่มในหน้าต่างดู มันควรหมุน 4 องศาไปทางซ้าย

    Final styled state rule in the Style Editor.

ธีมสไตล์

ธีมสไตล์ ประกอบด้วยชุดของโทเค็นเฉพาะที่สามารถสลับได้ เช่น โทเค็นสีที่กำหนดธีม "สว่าง" และ "มืด"

การสร้างธีม

สำหรับการขยายเวลาใช้งานธีมจะจัดเป็นไฟล์โฟลเดอร์ในขณะที่โฟลเดอร์เดียวอาจเพียงพอสำหรับวัตถุประสงค์ส่วนใหญ่ คุณสามารถจัดระเบียบธีมในโฟลเดอร์เช่น "สี" หรือ "ฟอนต์" หากต้องการได้

  1. สร้างโฟลเดอร์ธีมใหม่:

    1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลื่อนเมาส์ไปที่ ธีม คลิกที่ และเลือก ธีมใหม่ 2. เปลี่ยนชื่อรายการโฟลเดอร์ใหม่ เป็น ทั่วไป
    New themes folder created in the Style Editor.
  2. สร้างแผ่นสไตล์ธีมใหม่:

    1. เลื่อนเมาส์ไปที่โฟลเดอร์ใหม่ ทั่วไป คลิกปุ่ม และเลือก แบบฟอร์มรูปแบบใหม่ 2. เปลี่ยนชื่อเป็น ThemeA
    New theme created in the Style Editor.

โทเค็นธีม

เมื่อสร้างธีมแล้ว คุณสามารถเชื่อมโยงโทเค็นของมันกับคุณสมบัติ UI ต่างๆ เช่น BackgroundColor3 ของ TextButtonแผ่นธีมต้องใช้ชุดโทเค็นทั่วไปเพื่อทำงานอย่างถูกต้อง

ด้วย ธีมA ที่เลือกในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์:

  1. เชื่อมโยงสามโทเค็นสไตล์ที่สร้างไว้ก่อนหน้านี้ style tokens กับสามโทเค็นธีมใหม่:

    โทเคนธีมโทเค็นสไตล์
    BackColor$Gold
    ButtonFont$Oswald
    ButtonTextSize$Text32
    1. คลิก เพิ่มโทเค็น... ในแผงหลักและใส่ชื่อโทเค็นหัวข้อ
    2. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็นสไตล์ที่เกี่ยวข้อง
    Theme configured with tokens in the Style Editor.
  2. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือก ปุ่มข้อความ ในสาขา องค์ประกอบ UI

    Default class style in the Style Editor.
  3. เชื่อมโทเค็นของธีมกับสามคุณสมบัติใหม่ TextButton:

    คุณสมบัติโทเคนธีม
    BackgroundColor3$BackColor
    FontFace$ButtonFont
    TextSize$ButtonTextSize
    1. คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติที่จำเป็น
    2. แทนที่จะใส่ค่าคงที่ คลิกปุ่ม และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็นหัวข้อที่เหมาะสม

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with theme tokens in the Style Editor.

การซ้ำธีม

เมื่อคุณมีธีมที่กำหนดไว้ทั่วไปแล้ว คุณสามารถ ซ้ำ มันและเปลี่ยนโทเค็นต่างๆ เพื่อกำหนดสไตล์ธีมที่ไม่ซ้ำกัน

  1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลื่อนเมาส์ไปที่ธีม ThemeA คลิกปุ่ม และเลือก ซ้ำ

  2. เปลี่ยนชื่อธีมซ้ำเป็น ThemeB

    Theme duplicated in the Style Editor.
  3. เชื่อมโยงสองโทเค็นของธีมไปยังโทเค็นสไตล์สองแบบที่แตกต่างกัน:

    โทเคนธีมโทเค็นสไตล์
    BackColor$Magenta
    ButtonTextSize$Text24
    1. ไปที่ด้านขวาของฟิลด์ค่าของทรัพย์สิน, คลิกปุ่ม และเลือก ยกเลิกการเชื่อมโยงโทเค็น .
    2. คลิก อีกครั้งและเลือก โทเค็นลิงก์ 3. ในฟิลด์ค่าของมัน, คลิกที่ $ และเลือกโทเค็นสไตล์ที่เกี่ยวข้องใหม่
    Theme configured with tokens in the Style Editor.

การสลับธีม

เมื่อคุณมี หัวข้อหลายรายการ คุณสามารถสลับระหว่างพวกเขาผ่านโฟลเดอร์ของธีมหรือผ่านสคริปต์ตามที่อธิบายไว้ใน SetDerives()

  1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือกโฟลเดอร์ ทั่วไป ในสาขา ธีม 2. ในแผงหลัก สลับระหว่างธีมโดยใช้ปุ่มวิทยุ

    ThemeA swapped in the Style Editor.