Trình chỉnh sửa UI
* UI Cửa Hàng
* UI Xổ số - Hiệu ứng lật bài
Đọc 18 phút
Hướng dẫn
Sau khi đọc hướng dẫn này, bạn sẽ hiểu toàn diện về các chức năng của UI Editor. Cụ thể các kiến thức như sau:
1. Cách tạo UI mới và quản lý tài nguyên UI
2. Chi tiết về công dụng của các thành phần, đặc biệt là việc sử dụng Alignment, Stretch, Association và Level
3. Mở rộng giao diện và thao tác Hoàn tác/Làm lại
4. Cài đặt giao diện người dùng
5. Triển khai kích hoạt giao diện người dùng (thay đổi trạng thái trang và thay thế hình ảnh nút)
Trước khi nghiên cứu trình soạn thảo giao diện người dùng, chúng ta hãy hiểu ngắn gọn về khái niệm giao diện người dùng và lý do tại sao chúng ta cần sử dụng giao diện người dùng.
Khái niệm giao diện UI
“UI” là viết tắt của “Giao diện người dùng”, chịu trách nhiệm thực hiện tương tác giữa người và máy tính.
Giao diện người dùng được thiết kế để người chơi thưởng thức trò chơi, vì vậy thiết kế giao diện người dùng phải tuân theo các đặc điểm dễ hiểu, dễ vận hành và hình thức đẹp.
Trong chế độ phát triển Miniworld, trình chỉnh sửa giao diện người dùng mạnh mẽ được tích hợp để giúp các nhà phát triển xây dựng giao diện người dùng của họ một cách nhanh chóng. Hãy cùng xem nó quyến rũ đến mức nào nhé!
Tạo giao diện UI
→ Ở chế độ nhà phát triển, nhấp vào nút ở ngoài cùng bên trái ở trên cùng để mở Trung tâm tài nguyên
→ Nhấp vào Thư viện giao diện người dùng rồi tạo giao diện người dùng mới
Thư viện giao diện UI
Trong Thư viện giao diện người dùng, bạn có thể quản lý giao diện người dùng của bản đồ hiện tại và bạn cũng có thể quản lý giao diện người dùng bạn đã tạo trên các bản đồ khác.
Đầu tiên, hãy xem cách quản lý giao diện người dùng của bản đồ hiện tại.
Thư viện UI của bản đồ hiện tại
→ Khi số lượng UI được tạo cho bản đồ hiện tại lớn hơn 1, một danh sách UI sẽ xuất hiện trong thư viện UI bản đồ hiện tại. Nhấp vào “Quản lý” cho phép bạn xóa, đồng bộ hóa và sao chép UI.
Xóa:Xóa giao diện người dùng. Nếu giao diện người dùng không được đồng bộ hóa với Thư viện chính thì không thể truy xuất được.
Đồng bộ hóa: Đồng bộ hóa giao diện người dùng với Thư viện chính để tạo điều kiện chia sẻ giao diện người dùng trên các bản đồ khác.
Sao chép:Tạo một bản sao vào Thư viện giao diện người dùng hiện tại.
Thư viện giao diện UI chính
→Nhấp vào Thư viện chính → Thư viện giao diện người dùng để quản lý giao diện người dùng được đồng bộ hóa.
Nhập:Nhập giao diện người dùng vào bản đồ hiện tại.
Xóa:Xóa vĩnh viễn giao diện người dùng. (hãy cẩn thận khi sử dụng chức năng này)
Hệ thống sẽ tự động đồng bộ giao diện người dùng từ bản đồ hiện tại vào Thư viện giao diện người dùng chính.
Thêm thành phần
Sau khi tạo giao diện người dùng mới, chúng ta có thể bắt đầu thiết kế các thành phần giao diện người dùng của mình. Mỗi giao diện UI phức tạp bao gồm từng thành phần một.
Ở đây, các thành phần được chia thành 4 loại: Button (thành phần có phản hồi tương tác), Picture (thành phần cơ bản nhất và được sử dụng thường xuyên nhất), Word (dùng để truyền tải thông tin văn bản), input box (dùng để nhận đầu vào của người chơi).
Dưới đây, chúng tôi sử dụng các thành phần “nút” và “hình ảnh” để tạo giao diện lựa chọn đơn giản.
Chúng ta hãy xem hiệu ứng cuối cùng: khi nhấp vào nút bên trái, màu sẽ tối hơn. Khi bấm vào hình bên phải sẽ không có gì thay đổi.
Vì vậy, tương tác có thể được hiểu là: sau khi con người thực hiện một thao tác trên giao diện, giao diện sẽ đưa ra cho con người một phản hồi, đó có thể là sự thay đổi về màu sắc, kích thước hoặc kiểu dáng.
Hoàn tác và làm lại
Có hai nút phía trên để cho phép nhà phát triển linh hoạt hoàn tác và khôi phục các thao tác.
Chia tỷ lệ giao diện
Nút chia tỷ lệ giao diện nằm ở phía trên bên phải và điểm giữa của tỷ lệ là thành phần được chọn. Nếu không có thành phần nào được chọn, việc chia tỷ lệ sẽ lấy tâm của trang làm điểm giữa.
Thuộc tính thành phần
Sau khi các thành phần UI được tạo, sẽ có nhiều chi tiết cần được sửa đổi, chẳng hạn như vị trí, kích thước, màu sắc, v.v. Bảng Thuộc tính là nơi bạn có thể thực hiện các điều chỉnh cho thành phần.
→ Nhấp vào bất kỳ thành phần nào, chọn “Thuộc tính” để mở danh sách thuộc tính, sau đó bạn có thể sửa đổi tên, mẫu, vị trí, kích thước, lớp, căn chỉnh, v.v…
Hầu hết các thuộc tính đều rất đơn giản và dễ hiểu, ngoại trừ một số thuộc tính chúng ta sẽ giải thích thêm ở nội dung sau.
Vị trí→Căn chỉnh (khái niệm lớp)
Chúng ta có thể thấy khi chọn các góc trên, giữa, trái, trên bên trái thì vị trí của thành phần sẽ được thay đổi dựa trên toàn bộ nền xám lớn. Điều đó có nghĩa, nền màu xám lớn là thành phần chính của thành phần này.
Chúng ta nhấp vào bảng cấp độ và có thể thấy rằng đồng tiền vàng ở cùng cấp độ với các thành phần UI khác, do đó, phần gốc mặc định của đồng tiền vàng là nền màu xám (là toàn bộ giao diện trò chơi).
Hãy thử đặt đồng tiền vàng làm thành phần con của nền nút, sau đó xem hiệu ứng → Nhấp vào cấp độ, sửa đổi cấp độ “Đồng xu vàng” thành cấp độ phụ của “Nền nút”, sau đó sử dụng căn chỉnh vị trí để điều chỉnh vị trí.
Ở vị trí góc trên bên trái, tọa độ của thành phần tiền vàng hiển thị là (0, 0). Do đó, chúng ta có thể kết luận rằng vị trí của thành phần con được thay đổi dựa trên hệ tọa độ của thành phần cha. Như thể hiện trong tọa độ trong hình dưới đây.
Kích thước → Scretch
Điều này hơi giống với thao tác “căn chỉnh với thành phần cha” ở trên, dựa vào thành phần cha mẹ để thực hiện điều chỉnh và kích thước kéo dài sẽ không lớn hơn kích thước của thành phần gốc. Chỉ cần nhìn vào hình ảnh động dưới đây.
Kết hợp
Hàm liên kết có thể đảm bảo rằng thành phần con duy trì một vị trí cố định trong thành phần cha mẹ, để không làm xáo trộn vị trí với tỷ lệ của thành phần cha mẹ.
→Trước khi thành phần con không được liên kết với thành phần cha, vị trí của thành phần con sẽ trở nên lạ khi thành phần cha được chia tỷ lệ.
→Sau khi liên kết với thành phần cha, vị trí của thành phần con tương đối không thay đổi so với thành phần cha khi thành phần cha được chia tỷ lệ.
