Các bộ điều chỉnh giao diện người dùng

Bằng cách sử dụng các bộ điều chỉnh giao diện, bạn có thể tùy chỉnh thêm diện mạo của GuiObjects.

• Áp dụng một gradient cho nền của một đối tượng.
• Áp dụng một stroke cho văn bản hoặc một đường viền.
• Đặt góc bo tròn cho một đối tượng.
• Tăng padding giữa các đường biên của một đối tượng.
• Thêm một drop shadow phía sau một đối tượng.

Gradient

Đối tượng UIGradient áp dụng một gradient màu sắc và độ trong suốt cho đối tượng cha GuiObject.

Bạn có thể cấu hình gradient bằng cách:

• Đặt màu sắc thông qua một ColorSequence trong thuộc tính Color của gradient.
• Đặt độ trong suốt thông qua một NumberSequence trong thuộc tính Transparency của gradient.
• Chọn điểm bắt đầu của gradient (bên trong hoặc bên ngoài giới hạ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 sắc

Để đặt chuỗi màu sắc của một gradient:

1. Trong cửa sổ Explorer, chọn UIGradient.

2. Trong cửa sổ Properties, nhấp vào trường thuộc tính Color, sau đó nhấp vào nút ⋯ bên phải ô nhập. Một cửa sổ pop-up chuỗi màu sắc sẽ hiển thị.

   

   Mỗi tam giác trên trục dưới của chuỗi màu sắc là một keypoint xác định giá trị màu sắc tại điểm đó.

   

3. Nhấp vào một keypoint trong chuỗi màu sắc, sau đó nhấp vào hình vuông nhỏ bên cạnh Color để mở cửa sổ pop-up Colors.

4. Chọn màu sắc mong muốn cho keypoint.

   

5. Nếu cần, bạn có thể:

   • Thêm một keypoint khác bằng cách nhấp vào bất kỳ đâu trên đồ thị.
   • Kéo một keypoint hiện có đến vị trí mới, hoặc chọn một keypoint và nhập giá trị thời gian cụ thể thông qua ô nhập Time.
   • Xóa một keypoint bằng cách chọn nó và nhấp vào nút Delete.
   • Đặt lại chuỗi bằng cách nhấp vào nút Reset.

Độ 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ó:

1. Trong cửa sổ Explorer, chọn UIGradient.

2. Trong cửa sổ Properties, nhấp vào trường thuộc tính Transparency, sau đó nhấp vào nút ⋯ bên phải ô nhập. Một cửa sổ pop-up chuỗi số sẽ hiển thị.

   

   Mỗi hình vuông trên đồ thị chuỗi số là một keypoint xác định giá trị độ trong suốt tại điểm đó.

   

3. Nhấp và kéo bất kỳ keypoint nào xung quanh, hoặc chọn một keypoint 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.

   

4. Nếu cần, bạn có thể:

   • Thêm một keypoint khác bằng cách nhấp vào bất kỳ đâu trên đồ thị.
   • Xóa một keypoint bằng cách chọn nó và nhấp vào nút Delete.
   • Đặt lại chuỗi bằng cách nhấp vào nút Reset.

Độ lệch và góc quay

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 họa 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 đối tượng cha, và cả giá trị dương và â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 đường viền cho văn bản hoặc một đường biên. Các tính năng chính bao gồm:

• Màu sắc có thể điều chỉnh và độ dày của đường viền.
• Khả năng đặt độ trong suốt của đường viền độc lập với độ trong suốt của đối tượng cha.
• Vị trí và/hoặc độ lệch có thể tùy chỉnh tương đối với đường biên của đối tượng cha.
• Ba kiểu góc (tròn, vát, hoặc miter).
• Hỗ trợ gradient cho đường viền thông qua đối tượng UIGradient.

Độ dày

Bạn có thể đặt độ dày của đường viền thông qua thuộc tính Thickness được đo bằng pixel (mặc định) hoặc tỷ lệ tương đối với đối tượng cha, tùy thuộc vào StrokeSizingMode của bộ điều chỉnh. Nếu đường viền nằm trên văn bản và StrokeSizingMode được đặt thành ScaledSize, độ dày sẽ tương đối 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 đường viền thông qua thuộc tính Color, cũng như chèn một đối tượng con UIGradient để tạo ra các đường viền gradient.

Đường viền văn bản hoặc biên

Tùy thuộc vào loại đối tượng cha, UIStroke hoạt động như một đường viền văn bản hoặc như một đường biên. Khi bạn gán UIStroke cho một đối tượng văn bản như TextLabel, nó sẽ áp dụng cho đường viền của văn bản; khi bạn gán UIStroke cho các GuiObjects khác, nó sẽ áp dụng cho đường biên.

Khi áp dụng cho một đối tượng văn bản, bạn có thể ghi đè hành vi mặc định của đường viền bằng thuộc tính ApplyStrokeMode, cho phép bạn áp dụng đường viền cho giới hạn của đối tượng thay vì cho chính văn bản. Bạn thậm chí có thể điều khiển đường viền văn bản và đường biên một cách độc lập bằng cách gán hai đối tượng UIStroke cho một đối tượng văn bản, một cái được đặt thành Contextual và cái còn lại được đặt thành Border.

Vị trí/độ lệch đường biên

BorderStrokePosition đặt vị trí của đường viền tương đối với đường biên của đối tượng cha và BorderOffset cho phép bạn chỉ định một độ lệch bổ sung cho vị trí của đường viền.

Độ trong suốt

Thuộc tính Transparency đặt độ trong suốt của đường viền độc lập với BackgroundTransparency của đối tượng cha hoặc TextTransparency. Điều này cho phép bạn render văn bản và đường biên "rỗng" (chỉ bao gồm một đường 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ị là Round, Bevel, hoặc Miter.

Xếp chồng

Để xếp chồng 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 render dưới (phía sau) những đối tượng có ZIndex cao hơn.

Lưu ý rằng thứ tự render cho các đối tượng UIStroke có cùng ZIndex là không xác định. Đừng áp dụng nhiều đối tượng UIStroke có cùng chỉ số nếu thứ tự render của chúng quan trọng.

Góc bo

Đố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ể kiểm soát 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 theo 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à một 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 theo 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ể kiểm soát các góc riêng lẻ thông qua các thuộc tính TopLeftRadius, TopRightRadius, BottomRightRadius, và BottomLeftRadius.

Padding

Một đối tượng UIPadding áp dụng padding trên, dưới, trái và/hoặc 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 cho thuộc tính PaddingBottom của bộ điều chỉnh.

Shadow

Một đối tượng UIShadow render một drop shadow 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à độ lan tỏa của bóng.
• Nếu đối tượng cha được xoay bởi GuiObject.Rotation, bóng cũng sẽ được xoay.
• Nếu đối tượng cha có góc bo tròn, bóng cũng sẽ có các góc bo trò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 là tương đối với chiều rộng hoặc chiều cao của đối tượng cha, cái nào ngắn hơn.

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 đặt độ trong suốt của bóng với 0 là hoàn toàn không trong suốt và 1 là hoàn toàn trong suốt.

Độ lệch và độ lan tỏa

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.