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

Game Studio


Hướng dẫn tạo thanh Level bằng Widget trong Corona

Trong bài viết hôm nay, chúng ta sẽ đề cập đến các thanh Level Up bar. Mình thấy mọi người thường sử dụng một hình chữ nhật hoặc hình ảnh tùy chỉnh để tạo thanh LevelUp. Thay vì sử dụng các phương pháp đó, mình sẽ hướng dẫn bạn làm thế nào để dễ dàng tạo ra một thanh như thế với các Widget của Corona.

[​IMG]

Bây giờ, chúng ta hãy bắt đầu nào!
Bước đầu tiên chúng ta khai báo một số biến trong trò chơi của chúng ta. Chúng ta sẽ thiết lập ba biến - Inc, levelUpBar, và Player. Các biến inc sẽ là các mức trong thanh level và các biến levelUpBar và player sẽ là thanh Level Up và nhân vật người chơi.

Mã (Lua):
local inc = 0.0
local levelUpBar, player

Quá trình này cũng giống như là một thanh bar chạy trong thanh bar khác cho ta thấy tiến trình đang diễn ra. Ví dụ như, khi người dùng đang tải về một tập tin trong ứng dụng của họ, bạn muốn thể hiện một cái nhìn trực quan về tiến trình đó đang diễn ra cho người sử dụng khi tải về bằng cách làm đầy một thanh bar. Trong trường hợp này, chúng ta sẽ sử dụng giao diện tiến trình đó như một thanh level. Sau đây là cách để thiết lập widget level up.

Mã (Lua):
levelUpBar = widget.newProgressView {
  left = display.contentWidth*0.5-100,
  top = 300,
  width = 200,
  isAnimated = true }
levelUpBar:setProgress( 0 )
 

Khá đơn giản. Chúng ta đặt vị trí top và left, thiết lập chiều rộng của widget, và thiết lập isAnimated là true để cho thanh bar của chúng ta tăng từ từ.

Tiếp theo, chúng ta thiết lập một hàm để xử lý khi tap vào nhân vật, hàm này sẽ chỉ chạy khi người dùng tap vào nhân vật. Với widget hiển thị tiến trình, Corona đã quy định tiến trình này từ 0.0 đến 1.0 (đây cũng là giá trị của biến inc). Khi hàm này chạy, chúng ta cộng vào inc 0.2 và sau đó cập nhật các mức lên thanh bar để hiển thị các mức độ mới nhất. Vì vậy, khi người sử dụng tap 5 lần vào nhân vật thì nhân vật đó sẽ lên cấp (đầy thanh bar level) vào thời điểm đó ứng dụng sẽ hiện lênh màn hình là: Level up!

Mã (Lua):
local function playerHit(event)

    if(event.phase == "began") then
        inc = inc + 0.2
        if(inc >= 1) then
            print('level up!')
        else
            levelUpBar:setProgress( inc )
        end
    end
end

Cuối cùng, chúng ta sẽ tạo một nhân vật trên màn hình. Mình chọn nhân vật của chúng ta là 1 hình tròn. Tạo 1 event Listener để nói cho app của bạn biết là hàm playerHit () sẽ chạy khi người dùng touch vào nhân vật.

Thế là xong, rất đơn giản đúng không. Bạn cũng có thể rotation để xoay thanh level theo chiều bạn muốn nhưng hạn chế là bạn không thể tăng chiều cao của thanh, vì thế bạn chỉ có thể sử dụng trong 1 số trường hợp mà thôi. Chúc các bạn thành công và đây là bộ mã đầy đủ cho các bạn tham khảo:

Mã (Lua):
-- Khai báo biến
require"widget"
local inc = 0.0
local levelUpBar, player
-- Thiế lập thanh bar level bằng widget
levelUpBar = widget.newProgressView {
  left = display.contentWidth*0.5-100,
  top = 300,
  width = 200,
  isAnimated = true }
levelUpBar:setProgress( 0 )
-- Tạo hàm xử lý khi nhân vật lên level
local function playerHit(event)
    if(event.phase == "began") then
        inc = inc + 0.2
        if(inc >= 1) then
            print('level up!')
        else
            levelUpBar:setProgress( inc )
        end
    end
end
-- Tạo nhân vật trong game
player = display.newCircle(0,0,75)
player.x = display.contentWidth*0.5
player.y = 200
player:setFillColor(0,200,0)
player:addEventListener("touch", playerHit)