(Đọc 30 phút)

Sau khi đọc bài hướng dẫn này, bạn sẽ biết cách áp dụng hiệu ứng lật thẻ thông qua giao diện người dùng đồng thời nắm được các kiến thức sau:
1. Hiểu nguyên tắc để thực hiện hiệu ứng lật thẻ thông qua giao diện người dùng và hiệu ứng hoạt ảnh của khung giao diện người dùng được thực hiện thông qua chu kỳ kích hoạt.
2. Tìm hiểu sâu hơn về cách thiết kế giao diện UI và cài đặt trình kích hoạt UI.
3. Thực hiện và tối ưu hóa chức năng xổ số.
4. Kết hợp chức năng xổ số và lật bài thành một hệ thống hoàn chỉnh.

Trước hết, chúng ta cần tạo giao diện UI cơ bản cho nội dung tiếp theo.
Tạo nội dung thành phần UI như trong hình bên dưới:

Thành phần này cần được người chơi tạo trước sau khi hình nền được tạo. Nó có thể là bất kỳ nút, hình ảnh hoặc văn bản nào. Sau khi điều chỉnh vị trí, đặt chiều rộng và chiều cao của thành phần này thành 0:

Sau khi tạo thành phần có kích thước 0,0, hãy tạo thành phần con dựa trên thành phần này (lưu ý thành phần ở đây phải là “nút”). Tại thời điểm này, tọa độ của thành phần phụ mới được tạo chỉ là (0,0).

Mục đích của việc này là di chuyển vị trí của thành phần này để đạt được hiệu ứng lật và tọa độ của (0,0) sẽ thuận tiện hơn khi đặt. Tiếp theo, để thực hiện thao tác lật bài, bạn cũng có thể tạo một thành phần phụ hình ảnh khác tương tự như dấu chấm hỏi trên thành phần này, tuy nhiên bạn cần nhớ chiều dài, chiều rộng và tọa độ của thành phần đó:

Ví dụ: trong UI tôi tạo lúc này, tọa độ của hình ảnh này là (37,51), chiều rộng là 80 và chiều dài là 100:

Nút xổ số tương đối đơn giản để thực hiện. Bạn chỉ cần tạo thành phần phụ “nút” mới ở cấp độ hình nền, sau đó thêm văn bản để yêu cầu những người chơi tương lai chơi bản đồ này nhấn nút này để bắt đầu xổ số.

Trước khi tạo trình kích hoạt, trước tiên chúng ta cần tạo một số biến cần thiết. Sau khi mở thư viện biến, hãy tạo “giá trị” và “nhóm loại đạo cụ”. Bạn có thể đặt tên cho chúng theo cách thuận tiện cho bạn hiểu. Ví dụ: ở đây tôi đặt tên cho giá trị số là “Số chu kỳ” và đặt tên cho nhóm loại vật phẩm là “Giải thưởng rút thăm”.

Bạn có thể thêm nhiều đạo cụ khác nhau vào nhóm giải thưởng mà bạn muốn. Để đạt được xổ số lật ba lá bài sẽ cần ít nhất ba đạo cụ trong nhóm loại đạo cụ có thể thay đổi.

Sau khi các biến được tạo, bước tiếp theo là tạo nội dung liên quan đến trình kích hoạt:

Trước tiên, hãy đặt trình kích hoạt mới có tên là “Bắt đầu hoạt hình” để chạy khi người chơi nhấp vào “Nút xổ số”, sau đó đặt hành động kích hoạt là: chạy “Bắt đầu hoạt hình”.

Để đạt được hiệu ứng hoạt hình thẻ lật, chúng ta cần tạo hoạt ảnh khung có thể rút ngắn một cách mượt mà và sau đó khôi phục thành phần thẻ về hình dạng ban đầu.
Vì mục đích này, thời gian hoạt ảnh của khung được đặt thành 1 giây, với 0,5 giây dành riêng cho mỗi hoạt ảnh thu nhỏ và phục hồi.
Để làm cho hoạt ảnh khung hình trông mượt mà, chúng ta cần tăng tần suất thu nhỏ và phục hồi trong mỗi khung hình đồng thời giảm thiểu phạm vi. Do đó, cả hai hoạt ảnh đều được đặt thành 10 khung hình, dẫn đến tổng cộng 20 khung hình cho hiệu ứng lật, với mỗi khung hình kéo dài trong 0,05 giây.

Trình kích hoạt “Bắt đầu hoạt ảnh” không cần đặt “sự kiện” và “điều kiện”, chỉ cần đặt hành động. Sau đó, thêm hành động “trình kích hoạt vận hành vòng lặp” rồi đặt thành “từ 1 đến 10” để tạo hoạt ảnh 10 khung hình.

Tiếp theo, tạo một trình kích hoạt mới “vòng lặp hoạt hình (1)” và để hành động này thực hiện “vòng lặp hoạt hình”, đó là hoạt ảnh “thu nhỏ” khi lật thẻ.

• Xin lưu ý: Animation Loop(1) dùng để thu nhỏ thẻ. Vòng lặp hoạt hình (2) dành cho việc lật lại thẻ.
  

Thu nhỏ thẻ
Trình kích hoạt “Vòng lặp hoạt hình (1)” này cũng không cần đặt “sự kiện” và “điều kiện”, chỉ cần đặt hành động. Trước tiên, thêm hành động “Bài tập” và đặt biến giá trị của “Số vòng lặp” được tạo ở đầu thành “Số vòng lặp” + 1.

Để đạt được hiệu ứng lật thẻ, chúng ta cần giảm chiều dài của thẻ xuống 1/10 kích thước ban đầu cho mỗi khung hình trong hoạt ảnh. Do đó, hành động tiếp theo sẽ đặt kích thước của thành phần thẻ thành: 150 - (số chu kỳ x 15). Logic thuật toán dựa trên thiết kế của thành phần thẻ có chiều dài là 150. Do đó, mỗi lần giảm tương đương với 1/10 của 150, trong khi chiều rộng không đổi. Nếu bạn muốn thiết kế các thành phần có kích thước khác nhau, bạn có thể sử dụng phương pháp này để tính toán độ dài cụ thể cần thay đổi cho từng khung.

Tuy nhiên, việc thay đổi kích thước của thành phần UI sẽ không được thực hiện dựa trên vị trí trung tâm hiện tại, do đó vị trí của thành phần sẽ bị dịch chuyển nên trông không giống hiệu ứng thất bại. Hiển thị như ảnh gif bên dưới.

Vì vậy, ngoài việc thay đổi độ dài của thành phần ở mỗi khung hình, chúng ta cũng cần giữ thành phần đó ở giữa.
Thêm một hành động mới để đặt vị trí trục x của thành phần thành: 0 + thời gian vòng lặp x 7,5. Lý do nhân với 7,5 là chúng ta cần dịch một nửa chiều dài của thành phần thẻ để giữ thẻ luôn ở giữa, trong khi tọa độ trục y không đổi ở mức 0.

Sau khi thiết lập các bước trên, bạn có thể đạt được hiệu ứng thành phần thẻ luôn ở giữa.
Nhưng cũng tương tự như vậy, nếu bạn thêm các thành phần phụ biểu tượng khác vào thành phần thẻ để đảm bảo tính thẩm mỹ, bạn cần lặp lại các bước trên để đảm bảo rằng các thành phần phụ có thể được rút gọn lại với nhau.
Ví dụ: tôi đã thêm phần tử phụ dấu chấm hỏi ở đầu. Chiều dài là 80, khi đó chiều dài của mỗi khung hình là: 80 - thời gian vòng lặp x 8 và chiều rộng không đổi ở mức 100. Trong khi tọa độ trục x là 37 thì vị trí của mỗi khung hình là: 37 - thời gian vòng lặp x 4 , và tọa độ trục y là 51 và không thay đổi.

Bây giờ, hoạt ảnh thu nhỏ mười khung hình đã hoàn tất:

Lật lại thẻ
Sau khi triển khai hoạt ảnh khung để thu nhỏ thẻ, việc tạo hoạt ảnh để khôi phục thẻ trở nên dễ dàng hơn nhiều. Trước tiên, hãy quay lại trình kích hoạt “Bắt đầu hoạt hình” từ bước trước, sao chép hai hành động hiện có, sau đó sao chép toàn bộ trình kích hoạt “Vòng lặp hoạt hình” và đổi tên thành “Vòng lặp hoạt hình 2”.

Sau đó sửa đổi độ dài của thẻ trong “Vòng lặp hoạt hình 2” thành: 0 + thời gian vòng lặp x 15. Tọa độ x là: 75 - thời gian vòng lặp x 7,5.

Đặt độ dài của thành phần dấu hỏi thành: 0 + thời gian vòng lặp x 8 và tọa độ trục x thành: -3 + thời gian vòng lặp x 4.
Bởi vì sau toàn bộ hoạt ảnh thu nhỏ, tọa độ trục x hiện tại của thành phần dấu chấm hỏi đã là -3, do đó quá trình khôi phục sẽ bắt đầu từ -3.

Khi “vòng lặp hoạt hình 2” đã được thiết lập xong, hiệu ứng lật toàn bộ lá bài đã sẵn sàng.

Nếu người chơi muốn lật một lá bài, họ cần sao chép các chức năng đã tạo trước đó sang một bộ kích hoạt khác.
Đầu tiên, cần tạo hiệu ứng lật riêng cho một lá bài. Để thực hiện việc này, chúng ta cần sao chép các trình kích hoạt “Bắt đầu hoạt hình”, “Vòng hoạt hình 1” và “Vòng hoạt hình 2” sang nhóm trình kích hoạt mới có tên “Hoạt hình xổ số 1”.
Sau đó, chúng tôi thêm một sự kiện và điều kiện vào trình kích hoạt “Bắt đầu hoạt hình” để kích hoạt hoạt ảnh lật khi thẻ được nhấn. Tiếp theo, chúng tôi điều chỉnh trình kích hoạt được kích hoạt bởi hành động vòng lặp trong trình kích hoạt mới cũng là trình kích hoạt mới đó.
Bằng cách này, chúng tôi có thể thực hiện hiệu ứng người chơi có thể lật một lá bài.

Sau đó sao chép và dán hai thành phần thẻ vào giao diện người dùng.

Sao chép “Hoạt hình xổ số 1” thêm hai lần nữa, sau đó khớp từng thành phần trong trình kích hoạt với từng thành phần mới được sao chép.

Sau khi mọi thứ hoàn tất, bạn có thể nhận ra chức năng lật từng thẻ riêng lẻ

Nếu bạn muốn kích hoạt hoạt ảnh của tất cả các thẻ sau khi nhấn nút bắt đầu xổ số, bạn cần sao chép hành động của trình kích hoạt mới mà bạn vừa tạo vào “vòng lặp hoạt hình 1” và “vòng lặp hoạt hình 2”.

Sau khi thiết lập, nhấn nút để bắt đầu hoạt ảnh của tất cả các thẻ.

Bây giờ người chơi có thể lật bài, chúng ta cần triển khai các chức năng sau:
1. Người chơi không thể lật bài trước khi nhấn nút bắt đầu rút bài.
2. Người chơi không thể tiết lộ một lá bài trước khi tiết lộ một lá bài khác.
3. Người chơi không thể nhấp vào các lá bài chưa được che chắn.
4. Sau khi người chơi lật bài, cung cấp đạo cụ tương ứng cho người chơi và thay đổi biểu tượng của lá bài tương ứng.
5. Người chơi không thể nhấp lại vào nút bắt đầu rút bài cho đến khi cả ba lá bài đã được lật.

Điều kiện xổ số
Người chơi chỉ có thể lật bài sau khi nhấn nút rút bài để làm mới màn hình bài. Để đạt được chức năng này, chúng ta cần thêm một biến loại giá trị mới “bắt đầu xổ số”.

Sau đó, thêm một hành động vào trình kích hoạt “Bắt đầu xổ số” và gán giá trị “bắt đầu xổ số” cho 1.

Sau đó thêm điều kiện [khi “bắt đầu xổ số” bằng 1] vào trình kích hoạt “bắt đầu hoạt hình” của “hoạt hình xổ số” của ba thẻ tương ứng để chạy hoạt ảnh.

Sau khi đã thiết lập xong, sẽ có thể đạt được hiệu ứng là người chơi không thể lật bài trước khi bấm bắt đầu.

Hẹn giờ xổ số
Mỗi lần chỉ có thể lật một thẻ. Do đó, chúng ta có thể thêm Bộ hẹn giờ vào nút bắt đầu và bộ kích hoạt của ba lá bài, đồng thời không thể kích hoạt lại hoạt ảnh xổ số trước khi thời gian đếm ngược kết thúc. Lưu ý rằng mỗi hành động của đồng hồ đếm ngược đều được đặt ở trên cùng.

Sau khi thêm hành động Chạy bộ hẹn giờ vào bộ kích hoạt hoạt ảnh của nút xổ số và ba thẻ, hãy thêm điều kiện “Timer TimeEqual to 1” vào bộ kích hoạt của từng thành phần nút.

Sau khi cài đặt hoàn tất, trước khi hoạt ảnh lật thẻ kết thúc, người chơi không thể nhấp lại vào thẻ, điều này có thể tránh được sự cố trong quá trình này.

Giới hạn xổ số Sau khi người chơi đã lật một lá bài, người chơi không thể lật lại lá bài đó nữa.
Để đạt được chức năng như vậy, cần phải tạo ba biến “giá trị” mới “đánh giá thẻ”

Sau đó, thêm hành động mới vào trình kích hoạt “bắt đầu hoạt ảnh” của mỗi thẻ: gán biến “phán đoán thẻ” tương ứng cho 1.
Sau đó thêm điều kiện mới: “phán đoán lá bài không bằng 1” trong lần kích hoạt hiện tại. Kích hoạt tương ứng của mỗi lá bài cần thiết lập hành động và điều kiện “phán đoán lá bài” tương ứng, đồng thời cũng cần chú ý đặt hành động ở vị trí thứ hai.

Sau khi cài đặt hoàn tất, hãy thêm ba hành động vào trình kích hoạt “Bắt đầu xổ số” ban đầu và gán “Phán quyết thẻ” tương ứng thành 0.

Sau khi đặt, người chơi không thể lật thẻ liên tục cho đến khi nhấn nút “Bắt đầu xổ số” để đặt lại thẻ.

Phân phối phần thưởng
Khi người chơi nhấn thẻ, thẻ sẽ được lật để hiển thị đạo cụ và đạo cụ sẽ được phân phát cho người chơi sau khi hoạt ảnh kết thúc.
Để đạt được hiệu ứng này, trước tiên chúng ta cần tạo ba biến loại đạo cụ mới “đạo cụ phân phối”.

Sau đó thêm ba hành động để kích hoạt “Bắt đầu xổ số” để xác định ngẫu nhiên từng giải thưởng. Hành động là [Đặt đạo cụ được phân phối thành loại vật phẩm ngẫu nhiên trong nhóm loại vật phẩm].

Sau khi xác định các đạo cụ sẽ được phân phối, trong trình kích hoạt “bắt đầu hoạt ảnh” của thẻ tương ứng, hãy chèn hành động “Sửa đổi biểu tượng của thành phần” vào hành động sau khi hoạt ảnh khung của thành phần co lại để làm cho thẻ xoay và trở thành một hình ảnh của chỗ dựa tương ứng.
Cần lưu ý rằng chúng ta cần thêm hành động này vào các yếu tố kích hoạt tương ứng của ba thẻ.

Sau khi thiết lập thay đổi lật thẻ, hãy thêm hành động “Thêm vật phẩm” vào cuối cùng một trình kích hoạt để đưa ra loại vật phẩm tương ứng cho ba lô của người chơi.

Khi người chơi lật bài, mẫu dấu chấm hỏi sẽ được thay đổi vĩnh viễn thành các đạo cụ khác và khi người chơi cần bắt đầu lại xổ số, giao diện người dùng sẽ trở nên rất lộn xộn. Vì vậy để tránh điều này chúng ta cũng cần thiết lập lại hình ảnh trên các lá bài sau khi người chơi nhấn nút “Bắt đầu xổ số” và lật 3 lá bài lên.

Đã thêm ba hành động vào trình kích hoạt “Bắt đầu hoạt hình” trong đó điều khiển cả ba thẻ được lật cùng lúc để khôi phục ba dấu hỏi về mẫu dấu hỏi ban đầu. Như thể hiện trong hình bên dưới.

Sau khi thiết lập các bước trên, bạn có thể làm mới nội dung xổ số trên thẻ mỗi khi bạn làm mới nút và cung cấp đạo cụ tương ứng cho người chơi sau khi người chơi mở thẻ.

Đặt lại khóa
Nếu bạn muốn người chơi không thể thiết lập lại nội dung xổ số bằng cách nhấp vào nút “Bắt đầu xổ số” trước khi lật tất cả các thẻ, bạn có thể thực hiện chức năng cụ thể thông qua các bước sau.
Tạo một biến giá trị mới “Tiến trình xổ số”

Sau đó, thêm hai hành động “Gán 'Tiến trình xổ số' thành 0” và thành phần ẩn “Nút xổ số” trong trình kích hoạt “Bắt đầu xổ số”.

Sau đó, thêm hành động “Gán 'Tiến trình Raflle' cho 'Tiến trình Raffle' + 1” trong nút kích hoạt của ba thẻ.

Cuối cùng, tạo hai trình kích hoạt mới: “Nút hiển thị 1” và “Nút hiển thị 2”. Đặt sự kiện của “Nút hiển thị 1” thành “giao diện hiện tại bất kỳ nút nào được nhả”, hành động thành “tạm dừng 1,5 giây, tiếp tục thực hiện hành động tiếp theo” “vận hành nút Hiển thị 2” và đặt điều kiện kiểm tra thành “true” .

Sau đó đặt điều kiện của trình kích hoạt “Nút hiển thị 2” thành “tiến trình xổ sốBằng 3” và hành động “hiển thị nút xổ số”.

Sau khi thiết lập tất cả các trình kích hoạt này, các chức năng của toàn bộ giao diện người dùng xổ số sẽ hoàn tất.