Game Studio
Liên kế mạng xã hội

Game Studio


Hướng dẫn: Thủ thuật fill một phần cho một đối tượng trong Corona

Trong việc thiết kế giao diện người dùng của bạn (User Interface), hãy tưởng tượng rằng bạn muốn có một yếu tố giống như một thanh máu hoặc một nhiệt kế mà nó có thể được lấp đầy chỉ một phần với một màu (hoặc bất kỳ hình ảnh khác) để đại diện cho một "số lượng" nào đó.

Mặc dù Corona cung cấp sẵn một widget ProgressView() để đáp ứng được mục tiêu trên, nhưng dùng nó để hiển thị một hình ảnh phức tạp hơn đòi hỏi phải có một số sáng tạo. Trong hướng dẫn này, chúng ta sẽ tạo ra một thanh máu tùy chỉnh đại diện cho lượng máu của một nhân vật - điều này sẽ là một đường viền rỗng và nó có thể được lấp đầy với một màu giống như làm tăng hoặc giảm máu của một nhân vật.

Điều kiện cần

Để làm công việc này, bạn sẽ cần ba hình ảnh riêng biệt:
[​IMG]

  • Một hình ảnh "trống rỗng" của đối tượng được bao bọc bởi một đường viền - tất cả các điểm ảnh cần phải trong suốt (được đại diện bởi các lưới trắng-xám như trong hình ảnh ví dụ dưới đây).
  • Một hình ảnh cho thấy đối tượng đã được “fill” hoàn toàn (một lần nữa, tất cả các điểm ảnh mà không phải là một phần của hình ảnh đầy cần phải trong suốt).
  • Một mặt nạ trắng cơ bản (bao gồm cả viền đen).

Sử dụng ba yếu tố này, ý tưởng chung là đặt hình ảnh được fill lên trên màn hình, sau đó đặt (đặt chúng cùng một vị trí chính xác trên màn hình) hình ảnh rỗng lên trên. Điều này làm cho bạn có cảm giác như không có điều gì xãy ra. Tuy nhiên, khi bạn tạo và áp dụng mặt nạ cho hình ảnh ở dưới (hình được fill), bạn sẽ có thể thiết lập vị trí của mặt nạ và tạo ra những biến đổi.

Thiết lập cơ bản

Hãy xem xét code sau đây:
Mã (Lua):

display.setDefault( "background", 1, 1, 1 )

-- Đặt hình đối tượng được "filled" lên screen
local filledUI = display.newImageRect( "filled.png", 100, 200 )
filledUI.x = display.contentCenterX
filledUI.y = display.contentCenterY

-- Tạo mask cho đối tượng
local UIMask = graphics.newMask( "mask.png" )
-- Apply mặt nạ cho đối tượng bên dưới ('filledUI')
filledUI:setMask( UIMask )
filledUI.maskY = 0

-- Đặt đối tượng rỗng lên trên đối tượng được "filled"
local outlineUI = display.newImageRect( "outline.png", 100, 200 )
outlineUI.x = display.contentCenterX
outlineUI.y = display.contentCenterY

Block code đầu tiên xác định hình ành được lắp đầy ở bên dưới (hình ảnh được màu sắc lắp đầy hoàn toàn). Để thuận tiện, chúng ta định vị đối tượng này ở trung tâm của khu vực nội dung.

Tiếp theo, chúng ta tạo ra một mặt nạ (UIMask) bằng cách sử dụng graphics.newMask(). Hình ảnh mặt nạ này là một màu trắng đồng nhất, ngoại trừ các cạnh với viền đen xung quanh. Trong trường hợp này, vì hình ảnh giao diện người dùng là 100 × 200px, mặt nạ bao gồm một diện tích 100 × 200px màu trắng cộng thêm một đường viền đen 4 pixel, kết quả là một hình ảnh mặt nạ tổng thể với 108 × 208px. Sau khi tạo ra, mặt nạ được áp dụng cho hình ảnh nằm bên dưới (filledUI) và định vị tại một giá trị maskY 0 (vị trí này sẽ rất quan trọng trong các bước tiếp theo).

Tiếp theo, chúng ta đặt hình ảnh rỗng (outlineUI) lên trên cùng. Yếu tố này được sử dụng như một khung cho đối tượng giao diện người dùng khi chúng ta điều chỉnh vị trí mặt nạ của hình ảnh được lắp đầy.

Kiểm soát


Bạn hoàn toàn có thể kiểm soát bằng cách điều chỉnh vị trí y của mặt nạ (maskY). Trong ví dụ này, vì đối tượng có chiều cao 200 pixel, chúng ta có thể thiết lập giá trị này đến 100 để cho biết lượng máu là ở mức 50%. Để tiện lợi hơn khi tính toán vị trí thích hợp, chúng ta có thể sử dụng đoạn code sau:

Mã (Lua):

local meterLevel = 0.25  -- 25% = 25/100 = 0.25
local maskPosition = filledUI.height * ( 1 - meterLevel )

filledUI.maskY = maskPosition
 

Ngoài ra, bạn có thể tạo ra một hiệu ứng đầy sinh động khi transition vị trí của mặt nạ. Sử dụng transition vị trí mặt nạ tương tự như thực hiện transition thông thường, ngoại trừ trong trường hợp này, chúng ta transition thuộc tính maskY, không phải thuộc tính y của hình ảnh thực tế:

Mã (Lua):
transition.to( filledUI, { time = 1000, maskY = maskPosition } )

Kết luận

Như bạn có thể thấy, việc tạo ra một UI phong cách thanh meter lkhá đơn giản và chỉ cần sử dụng ba yếu tố, một phép tính đơn giản, và một thiết lập (hoặc transition) cho vị trí mặt nạ. Nếu bạn muốn thử nghiệm với code này, bạn có thể sao chép/lưu các hình ảnh sau đây về hệ thống của bạn như là một cơ sở để thử nghiệm.
[​IMG]
[​IMG]
[​IMG]

Theo coronaviet.com

Xem thêm:

corona

fill

mask