Chúng ta đã tìm hiểu các chức năng cơ bản của trình chỉnh sửa UI trong phần * Trình chỉnh sửa UI .
Trong hướng dẫn này, chúng ta sẽ cùng nhau tạo một cửa hàng UI để củng cố kỹ năng sử dụng của người chỉnh sửa giao diện UI.

Giao diện cửa hàng như sau:

Hướng dẫn
Trong bài học này, bạn sẽ học những điểm sau:
1. Thêm các thành phần UI và điều chỉnh thứ bậc của chúng
2. Phương pháp cộng kích hoạt nút
3. Logic tương tác và cài đặt kích hoạt cụ thể của cửa hàng

Mô-đun UI
Tổng thể được chia làm 3 module: nút vào cửa hàng, giao diện sản phẩm, nhắc mua hàng
Như trong hình bên dưới, các mô-đun có thể nhảy qua lại để tạo thành một quy trình giao dịch hoàn chỉnh.

Mô-đun 1: Lối vào cửa hàng
Đặt thành phần
Tạo giao diện UI mới và đặt tên là “store”. Chọn thành phần “nút” để làm lối vào cửa hàng.

Mô-đun 2: Danh sách sản phẩm
Thêm trạng thái trang
Thêm trạng thái trang và đặt tên là “list ui”. (Chúng tôi sẽ chuyển đổi lối vào cửa hàng, giao diện sản phẩm, lời nhắc mua hàng bằng cách chuyển trạng thái trang)

Các thành phần ẩn của lối vào cửa hàng trong trạng thái trang “danh sách UI”.

Đặt thành phần
Tạo giao diện danh sách sản phẩm thông qua sự kết hợp của nhiều thành phần khác nhau. (Lưu ý, hãy nhớ ở trang trạng thái “list ui”)
1. Khung tổng thể
Vui lòng đặt tên cụ thể cho từng thành phần để quản lý tốt hơn.

(Rất quan trọng) Sau đó chúng ta điều chỉnh mối quan hệ cấp độ của thành phần. Vì có nhiều bước tẻ nhạt nên chúng tôi chỉ trình diễn ở đây.
- Biển hiệu cửa hàng và NPC đều là tập hợp con của nền Cửa hàng.
Điều chỉnh cuối cùng như hình dưới: Tất cả các loại thành phần và cấp độ đều rất rõ ràng và gọn gàng.

2. Sau đó chúng ta lập danh sách trưng bày sản phẩm. (Cách thêm và sửa các phần tử giống nhau)

Sau khi tạo sơ đồ hiển thị sản phẩm, chúng tôi trực tiếp sao chép và sửa đổi tên của thành phần tương ứng. (Lưu ý: Khi sao chép hãy sao chép các thành phần cấp cha. Các thành phần cha mẹ ở đây là “Vùng Item1”)

Tương tự như vậy chúng ta cần điều chỉnh mức độ và tên gọi để phân biệt.

Mô-đun 3: Lời nhắc mua hàng
Tạo một trang trạng thái mới, có tên là “Lời nhắc”

Sau đó trên trang trạng thái này, thêm thành phần tương ứng.

Thiết lập trạng thái trang
Chúng tôi đã thực hiện ba trạng thái trang. Chúng ta sẽ quay lại trạng thái trang đầu tiên để ẩn các thành phần và chỉ giữ lại một thành phần nhập sản phẩm.

Sau đó chúng ta chọn trang “list ui” và ẩn toàn bộ thành phần “Prompt”.
Logic tương tác (Cài đặt kích hoạt) Cài đặt biến Nếu bạn chưa quen với các biến, bạn có thể tham khảo các hướng dẫn sau:
Biến
* Biến Giá Trị
* Cách sử dụng "Biến riêng"
* Cách sử dụng Biến toàn cục
* Cách sử dụng Biến trong một trò chơi - "Trò chơi chiến đấu IO"

Đầu tiên, chúng ta đặt các biến dưới đây
Biến toàn cục
Giá mặt hàng (nhóm số): dùng để lưu trữ giá của hàng hóa.
Kết quả mua hàng (nhóm chuỗi): Văn bản nhắc dùng để lưu trữ kết quả mua hàng.
Khóa (giá trị Boolean): Đây là khóa quy trình khiến cho phán đoán logic mua của trình kích hoạt chỉ được đánh giá một lần và chúng tôi sử dụng điều này cho cài đặt trình kích hoạt sau này.
Loại xu (Item type): dùng để thiết lập loại xu.
Loại vật phẩm (Nhóm Loại vật phẩm): dùng để đựng sản phẩm.

Biến riêng
Pay(kiểu số): số tiền bạn muốn thanh toán. Vật phẩm đã mua (loại đạo cụ): loại sản phẩm được người chơi lựa chọn.

Cài đặt kích hoạt
→ Danh sách sản phẩm hiện lên và đóng lại

Sử dụng cách tương tự để tạo trình kích hoạt mới khi người chơi nhấp vào “nút đóng” và chuyển sang trạng thái “Trang cơ bản”.

→ Click mua sản phẩm 1
Khi người chơi nhấp vào mua sản phẩm 1, chúng ta cần gán giá trị tương ứng cho biến riêng tư của người chơi “Thanh toán”, “Mặt hàng đã mua”.
Vì vậy, chúng tôi tạo một trình kích hoạt mới có tên là “mua item1” như các bước sau đây hiển thị.

→ Phán đoán mua hàng thành công
Khi số lượng tiền mà người chơi sở hữu lớn hơn hoặc bằng giá của sản phẩm thì việc mua hàng thành công, người chơi nhận được vật phẩm và tiền của người chơi = tiền hiện có - giá.
Tạo trình kích hoạt “Mua thành công” và đặt trình kích hoạt theo các bước sau.

→ Đánh giá thất bại trong việc mua hàng
Để kích hoạt việc mua thất bại, chúng tôi chỉ đặt tạm thời một điều kiện phán đoán.

→ Kết nối các yếu tố kích hoạt liên quan đến mua hàng Logic là thế này:
khi người chơi thực hiện hành động mua hàng, anh ta sẽ trực tiếp xác định xem giao dịch mua hàng có thành công hay không. Vì vậy chúng ta cần xâu chuỗi các hành động của trigger.

→ Nhắc nhở kết quả mua hàng
Để tương tác nhiều hơn, chúng tôi cần nhắc nhở người chơi việc mua hàng có thành công hay không. Trước tiên, hãy thiết lập lời nhắc “Mua thành công”.

Sau đó, chúng tôi sao chép các hành động mà chúng tôi vừa đặt thành yếu tố kích hoạt “mua thất bại” và sửa đổi các giá trị.

Cuối cùng nhưng không kém phần quan trọng, chúng tôi thêm trình kích hoạt để loại bỏ lời nhắc về kết quả mua hàng.

Hiệu lực (không phải cuối cùng)
Đến đây, giao diện cửa hàng về cơ bản đã được thiết lập. Chúng ta hãy nhìn vào hiệu ứng đầu tiên. (Hiện tại chúng tôi chỉ thiết lập logic mua hàng 1)

Ứng dụng khóa logic
Nếu chúng ta nhìn vào ảnh gif ở trên, bạn sẽ thấy rằng khi thực hiện lần mua cuối cùng, người chơi có 22 xu.
Mặc dù mua hàng thành công nhưng nhắc nhở mua hàng là: Không đủ tiền!
Sau khi nghiên cứu thì đã thành công nhận thấy rằng sau khi kích hoạt “mua thành công”, người chơi còn lại 2 xu và kích hoạt “mua không thành công” cũng được thực hiện.

Vì vậy, chúng tôi thêm một khóa, loại Boolean, mặc định là sai (nghĩa là trạng thái đã mở khóa). Khi điều kiện của trình kích hoạt “mua thành công” được xác định là thành công, trạng thái khóa sẽ trở thành đúng (lock=true) và trình kích hoạt “mua thất bại” không cần phải thực thi. Và khi người chơi đóng giao diện kết quả mua hàng thì khóa lại được mở.gain.

Hoàn thành logic mua mặt hàng khác
Chúng tôi cũng sử dụng logic đã học trước đó để đặt kích hoạt mua hàng cho mặt hàng 2. (bạn có thể đặt bao nhiêu mục tùy thích)