Bằng cách sử dụng các bộ biến đổi giao diện, bạn có thể tùy chỉnh thêm diện mạo của GuiObjects của bạn.
- Áp dụng một gradient cho nền của một đối tượng.
- Áp dụng một viền cho văn bản hoặc một cạnh.
- Đặt góc bo tròn cho một đối tượng.
- Tăng padding giữa các biên của một đối tượng.
- Thêm một bóng đổ phía sau một đối tượng.
Gradient
Đối tượng UIGradient áp dụng một gradient màu và độ trong suốt cho đối tượng cha GuiObject.
Bạn có thể cấu hình gradient bằng cách:
- Chọn điểm bắt đầu của gradient (bên trong hoặc bên ngoài biên của cha) thông qua thuộc tính Offset.
- Chọn góc của gradient thông qua thuộc tính Rotation.
Chuỗi màu
Để đặt chuỗi màu cho một gradient:
Trong cửa sổ Explorer, chọn UIGradient.
Trong cửa sổ Properties, nhấp vào trường thuộc tính Color, sau đó nhấn nút ⋯ ở bên phải hộp nhập. Một cửa sổ pop-up về chuỗi màu sẽ hiển thị.
Mỗi hình tam giác trên trục dưới của chuỗi màu là một điểm khóa xác định giá trị màu tại điểm đó.
Nhấp vào một điểm khóa trong chuỗi màu, sau đó nhấp vào hình vuông nhỏ bên cạnh Color để mở cửa sổ pop-up Màu sắc.
Chọn màu mong muốn cho điểm khóa.
Nếu cần, bạn có thể:
- Thêm một điểm khóa khác bằng cách nhấp vào bất kỳ đâu trên đồ thị.
- Kéo một điểm khóa hiện tại đến vị trí mới, hoặc chọn một điểm khóa và nhập giá trị thời gian cụ thể thông qua ô nhập Time.
- Xóa một điểm khóa bằng cách chọn nó và nhấp vào nút Xóa.
- Đặt lại chuỗi bằng cách nhấp vào nút Đặt lại.
Độ trong suốt
Để điều chỉnh độ trong suốt của một gradient trên toàn bộ phạm vi của nó:
Trong cửa sổ Explorer, chọn UIGradient.
Trong cửa sổ Properties, nhấp vào trường thuộc tính Transparency, sau đó nhấn nút ⋯ ở bên phải hộp nhập. Một cửa sổ pop-up về chuỗi số sẽ hiển thị.
Mỗi hình vuông trên đồ thị chuỗi số là một điểm khóa xác định giá trị độ trong suốt tại điểm đó.
Nhấp và kéo bất kỳ điểm khóa nào, hoặc chọn một điểm khóa và nhập một tổ hợp thời gian/giá trị cụ thể thông qua các ô nhập Time và Value.
Nếu cần, bạn có thể:
- Thêm một điểm khóa khác bằng cách nhấp vào bất kỳ đâu trên đồ thị.
- Xóa một điểm khóa bằng cách chọn nó và nhấp vào nút Xóa.
- Đặt lại chuỗi bằng cách nhấp vào nút Đặt lại.
Đệm và xoay
Các thuộc tính Offset và Rotation cho phép bạn điều chỉnh các điểm điều khiển của gradient và góc của nó. Như được minh hoạ trong các sơ đồ sau, Offset dựa trên một tỉ lệ phần trăm của chiều rộng hoặc chiều cao của cha, và cả hai giá trị dương hoặc âm đều hợp lệ.
Tương tự, khi bạn xoay gradient, các điểm điều khiển cũng sẽ xoay:
Stroke
Đối tượng UIStroke áp dụng một viền cho văn bản hoặc một cạnh. Các tính năng chính bao gồm:
- Màu sắc và độ dày của viền có thể điều chỉnh.
- Có khả năng đặt độ trong suốt của viền độc lập với độ trong suốt của cha.
- Vị trí và/hoặc độ lệch có thể tùy chỉnh tương đối với biên của cha.
- Ba kiểu góc (bo tròn, vát, hoặc nhọn).
- Hỗ trợ gradient cho viền thông qua đối tượng UIGradient.
Độ dày
Bạn có thể đặt chiều rộng của viền thông qua thuộc tính Thickness tính bằng pixel (mặc định) hoặc tỷ lệ tương đối với cha, tùy thuộc vào chế độ kích thước viền StrokeSizingMode. Nếu viền được áp dụng trên văn bản và StrokeSizingMode được đặt là ScaledSize, độ dày sẽ tương ứng với kích thước phông chữ.
Màu sắc hoặc gradient
Bạn có thể đặt màu sắc của viền thông qua thuộc tính Color, cũng như chèn một đối tượng con UIGradient để tạo các viền gradient.
Cả đối tượng cha và UIStroke đều có thể có các đối tượng con UIGradient, cho phép bạn đặt gradient trên cả viền và lấp đầy độc lập.
Viền văn bản hoặc bờ
Tùy thuộc vào loại cha của nó, UIStroke hoạt động như một viền văn bản hoặc như một bờ. Khi bạn đặt UIStroke làm cha của một đối tượng văn bản như TextLabel, nó sẽ áp dụng cho viền của văn bản; khi bạn đặt UIStroke làm cha của các GuiObjects khác, nó sẽ áp dụng cho bờ.
Khi được áp dụng cho một đối tượng văn bản, bạn có thể ghi đè lên hành vi viền mặc định bằng thuộc tính ApplyStrokeMode, cho phép bạn áp dụng viền cho biên của đối tượng thay vì văn bản chính nó. Bạn thậm chí có thể kiểm soát viền văn bản và biên độc lập bằng cách đặt hai đối tượng UIStroke làm cha của một đối tượng văn bản, một cái được đặt là Contextual và cái còn lại là Biên.
Vị trí/độ lệch của biên
BorderStrokePosition xác định vị trí của viền tương đối với biên của nó và BorderOffset cho phép bạn chỉ định một độ lệch bổ sung cho vị trí của viền.
Độ trong suốt
Thuộc tính Transparency thiết lập độ trong suốt của viền một cách độc lập với BackgroundTransparency của đối tượng cha hoặc TextTransparency. Điều này cho phép bạn vẽ văn bản và biên "rỗng" (chỉ bao gồm một viền).
Kiểu góc
Thuộc tính LineJoinMode cho phép bạn kiểm soát cách các góc được diễn giải. Nó chấp nhận một giá trị của Round, Bevel, hoặc Miter.
Xếp chồng
Để xếp nhiều đối tượng UIStroke anh em trên một GuiObject từ trước ra sau, bạn có thể sử dụng thuộc tính ZIndex. Những đối tượng có ZIndex thấp hơn sẽ được vẽ ở dưới (sau) những đối tượng có ZIndex cao hơn.
Lưu ý rằng thứ tự vẽ cho các đối tượng UIStroke có cùng ZIndex là không xác định. Không áp dụng nhiều đối tượng UIStroke có cùng chỉ số nếu thứ tự vẽ của chúng có ý nghĩa.
Góc
Đối tượng UICorner áp dụng biến dạng cho các góc của đối tượng cha GuiObject. Bạn có thể điều chỉnh bán kính áp dụng thông qua thuộc tính CornerRadius bằng cách sử dụng Scale hoặc Offset.
Scale làm tròn các góc thành một tỷ lệ phần trăm dựa trên tổng chiều dài của cạnh ngắn nhất của đối tượng cha, có nghĩa là tỷ lệ 0.5 hoặc cao hơn sẽ biến dạng đối tượng cha thành hình "viên thuốc", bất kể chiều rộng hoặc chiều cao của nó. Offset làm tròn các góc đến một số pixel cụ thể, bất kể chiều rộng/chiều cao của đối tượng cha.
Bạn cũng có thể điều chỉnh các góc riêng lẻ thông qua các thuộc tính TopLeftRadius, TopRightRadius, BottomRightRadius, và BottomLeftRadius.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
Padding
Đối tượng UIPadding áp dụng khoảng cách trên, dưới, bên trái và/hoặc bên phải cho nội dung của đối tượng cha GuiObject. Ví dụ, bạn có thể di chuyển văn bản bên trong một nhãn văn bản xuống hoặc lên bằng cách áp dụng một độ lệch vào thuộc tính PaddingBottom của bộ biến đổi.
Bóng đổ
Đối tượng UIShadow hiển thị một bóng đổ phía sau đối tượng UI cha của nó. Các tính năng chính bao gồm:
- Điều chỉnh độ mờ của bóng.
- Điều chỉnh màu sắc và độ trong suốt của bóng.
- Điều chỉnh độ lệch và phạm vi của bóng.
- Nếu đối tượng cha được xoay bằng GuiObject.Rotation, bóng sẽ cũng bị xoay.
- Nếu đối tượng cha có góc bo tròn, bóng cũng sẽ có góc bo tròn.
UIShadow không hỗ trợ văn bản. Nếu bạn thêm bộ biến đổi này vào một TextLabel hoặc TextButton, nó sẽ hiển thị một bóng của vùng bao quanh hình chữ nhật của đối tượng, không phải văn bản.
Độ mờ
Thuộc tính BlurRadius xác định độ mờ của bóng. Một giá trị lớn hơn làm cho các cạnh của bóng trông mềm mại hơn. Lưu ý rằng yếu tố tỷ lệ của thuộc tính UDim này tương đối với chiều rộng hoặc chiều cao của đối tượng cha, chiều nào ngắn hơn sẽ được xem xét.
Màu sắc và độ trong suốt
Thuộc tính Color xác định màu sắc của bóng, trong khi Transparency thiết lập độ trong suốt của bóng với 0 là hoàn toàn mờ và 1 là hoàn toàn trong suốt.
Độ lệch và phạm vi
Thuộc tính Offset di chuyển bóng tương đối với vị trí của đối tượng cha, trong khi Spread mở rộng hoặc thu hẹp bóng tương đối với kích thước của đối tượng cha.
