====== UI Cửa Hàng ====== 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 * **[[UI Editor|]]** . \\ 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:** \\ {{https://wiki.miniworldgame.vn/lib/exe/fetch.php?media=developer_center:developer_editor:uist1.gif?600|}} **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. \\ {{:developer_center:developer_editor:uist2.png?600&direct|}}\\ **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. \\ {{https://wiki.miniworldgame.vn/lib/exe/fetch.php?media=developer_center:developer_editor:uist3.gif?600|}}\\ **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) \\ {{https://wiki.miniworldgame.vn/lib/exe/fetch.php?media=developer_center:developer_editor:uist4.gif?600|}}\\ 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”. \\ {{:developer_center:developer_editor:uist5.png?600&direct|}} \\ **Đặ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. \\ {{:developer_center:developer_editor:uist6.png?600&direct|}} \\ **(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.\\ {{:developer_center:developer_editor:uist7.png?600&direct|}} \\ 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) \\ {{:developer_center:developer_editor:uist8.png?600&direct|}} \\ 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”) \\ {{https://wiki.miniworldgame.vn/lib/exe/fetch.php?media=developer_center:developer_editor:uist9.gif?600|}} \\ 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. \\ {{:developer_center:developer_editor:uist10.png?600&direct|}} \\ **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” \\ {{:developer_center:developer_editor:uist11.png?600&direct|}} \\ Sau đó trên trang trạng thái này, thêm thành phần tương ứng. \\ {{:developer_center:developer_editor:uist12.png?600&direct|}} \\ **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. \\ {{:developer_center:developer_editor:uist13.png?600&direct|}} \\ 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** \\ * **[[Developer_Center:Developer_Editor:Variable|]]** \\ * **[[How to use the "Private Variable"|]]** \\ * **[[How to use "Global Variable"|]]** \\ * **[[Developer_Center:Developer_Editor:How to use the "IO battle gameplay - Play Variables in one game|]]** \\ **Đầ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. \\ {{https://wiki.miniworldgame.vn/lib/exe/fetch.php?media=developer_center:developer_editor:uist14.gif?600|}} \\ **Cài đặt kích hoạt** \\ → Danh sách sản phẩm hiện lên và đóng lại \\ {{https://wiki.miniworldgame.vn/lib/exe/fetch.php?media=developer_center:developer_editor:uist15.gif?600|}} \\ 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”. \\ {{:developer_center:developer_editor:uist16.png?600&direct|}} \\ **→ 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ị. \\ {{https://wiki.miniworldgame.vn/lib/exe/fetch.php?media=developer_center:developer_editor:uist17.gif?600|}} \\ **→ 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.\\ {{ :developer_center:developer_editor:uist18.mp4?600 |}}\\ **→ Đá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. \\ {{:developer_center:developer_editor:uist19.png?600&direct|}} \\ **→ 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. \\ {{ :developer_center:developer_editor:uist20.mp4?600 |}} \\ **→ 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”. \\ {{ :developer_center:developer_editor:uist21.mp4?600 |}} \\ 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ị. \\ {{:developer_center:developer_editor:uist22.png?600&direct|}} \\ 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. \\ {{https://wiki.miniworldgame.vn/lib/exe/fetch.php?media=developer_center:developer_editor:uist23.gif?600|}} **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) \\ {{ :developer_center:developer_editor:uist24.mp4?600 |}}\\ **Ứ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. \\ {{:developer_center:developer_editor:uist25.png?600&direct|}}\\ 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. \\ {{ :developer_center:developer_editor:uist26.mp4?600 |}} \\ **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) \\ {{ :developer_center:developer_editor:uist27.mp4?600 |}}\\ ----