Lập trình games với Love2D - Chương 5 - Di chuyển

2023-10-20 17:26:27 Love2D Học Lập Trình Lua 208 lượt xem 0 bình luận

Bây giờ chúng ta có thể bắt đầu với cái mà tôi gọi là "Phần thú vị". Chúng ta sẽ làm cho mọi thứ chuyển động!

Hãy bắt đầu với 3 lệnh gọi lại chính.

```lua
function love.load()

end

function love.update()

end

function love.draw()

end
```

Tiếp theo, chúng ta vẽ một hình chữ nhật.

```lua
function love.draw()
    love.graphics.rectangle("line", 100, 50, 200, 150)
end
```

![](/images/2023/7/10/22-1697937161-rectangle.png)

Đối số thứ hai và thứ ba của hàm này là vị trí x và y.

x có nghĩa là "vị trí nằm ngang trên màn hình". 0 là phía bên trái của màn hình.

y có nghĩa là "vị trí thẳng đứng trên màn hình". 0 là phía trên của màn hình.

![](/images/2023/7/10/22-1697937161-coordinates.png)

Bây giờ chúng ta muốn làm cho hình chữ nhật di chuyển. Đã đến lúc bắt đầu suy nghĩ như một lập trình viên. Chính xác thì điều gì cần làm để hình chữ nhật di chuyển sang bên phải? Vị trí x cần phải tăng lên. 100, 101, 102, 103, 104, v.v. Nhưng chúng ta không thể đổi 100 thành 101. 100 chỉ đơn giản là 100. Chúng ta cần có một đối số có thể thay đổi thành bất kỳ số nào chúng ta muốn. Đúng vậy, đối số cần là một biến!

Trong ```love.load```, tạo một biến mới tên là ```x```, và thay thế 100 trong ```love.graphics.rectangle``` bằng ```x```.

```lua
function love.load()
    x = 100 
end

function love.draw()
    love.graphics.rectangle("line", x, 50, 200, 150)
end
```

Vì vậy bây giờ vị trí ```x``` của hình chữ nhật chúng ta là giá trị của biến ```x```.

Lưu ý rằng tên biến ```x``` chỉ là tên. Chúng ta có thể đặt tên cho nó ```kem``` hoặc ```chanh``` bất cứ cái gì, như tôi đã nói bài trước hãy cố gắng đặt tên bằng tiếng Anh cho ít bị lỗi. Hàm thì không quan tâm đến tên biến, nó chỉ quan tâm đến giá trị của biến.

Bây giờ chúng ta muốn làm cho hình chữ nhật di chuyển. Tôi làm điều này trong ```love.update```. Mỗi lần cập nhật tôi đều muốn tăng ```x``` thêm 5. Nói cách khác, ```x``` cần phải có giá trị ```x + 5```. Và đó chính xác là cách tôi viết nó.

```lua
function love.update()
    x = x + 5
end
```

Vì vậy, bây giờ khi ```x``` bằng 100, nó sẽ đổi ```x``` thành 100 + 5. Sau đó, lần cập nhật tiếp theo ```x``` là 105 và ```x``` sẽ đổi thành 105 + 5, v.v.

Chạy trò chơi. Hình chữ nhật bây giờ sẽ di chuyển.

![](/images/2023/7/10/22-1697937161-rectangle_move.gif)

------

### Biến thời gian - Delta time

Chúng ta đã có một hình chữ nhật chuyển động nhưng có một vấn đề nhỏ. Nếu bạn chạy trò chơi trên một máy tính khác, hình chữ nhật có thể di chuyển với tốc độ khác. Điều này là do không phải tất cả các máy tính đều cập nhật với tốc độ như nhau và điều đó có thể gây ra sự cố.

Ví dụ: giả sử Máy tính A chạy với tốc độ 100 khung hình/giây (100 fps - frames per second) và Máy tính B chạy với tốc độ 200 khung hình/giây.

100 x 5 = 500

200 x 5 = 1000

Vậy trong 1 giây, ```x``` đã tăng lên 500 trên máy tính A, trong khi trên máy tính B ```x``` đã tăng lên 1000.

May mắn thay, có một giải pháp cho vấn đề này đó là biến thời gian delta (delta time).

Khi LÖVE gọi ```love.update```, nó sẽ chuyển một đối số. Thêm tham số ```dt``` (viết tắt của delta time) vào ```love.update``` và in nó ra.

```lua
function love.update(dt)
    print(dt)
    x = x + 5
end
```

Thời gian Delta là thời gian đã trôi qua giữa bản cập nhật trước đó và bản cập nhật hiện tại. Vì vậy, trên máy tính A, chạy với tốc độ 100 khung hình/giây, thời gian delta trung bình sẽ là 1/100, tức là 0,01.

Trên máy tính B, thời gian delta sẽ là 1/200, tức là 0,005.

Vậy trong 1 giây, máy tính A cập nhật 100 lần và ```x``` tăng 5 x 0,01, còn máy tính B cập nhật 200 lần và ```x``` tăng 5 x 0,005.

100 x 5 * 0,01 = 5

200 x 5 * 0,005 = 5

Bằng cách sử dụng thời gian delta, hình chữ nhật của chúng ta sẽ di chuyển với cùng tốc độ trên tất cả các máy tính.

```lua
function love.update(dt)
    x = x + 5 * dt
```

Bây giờ hình chữ nhật của chúng ta di chuyển 5 pixel mỗi giây trên tất cả các máy tính. Thay đổi 5 thành 100 để làm cho nó chạy nhanh hơn.

------

### Bản tóm tắt

Chúng ta sử dụng một biến mà chúng ta tăng lên sau mỗi lần cập nhật để làm cho hình chữ nhật di chuyển. Khi tăng chúng ta nhân giá trị tăng với thời gian delta. Thời gian delta là thời gian giữa bản cập nhật trước đó và bản cập nhật hiện tại. Sử dụng thời gian delta đảm bảo rằng hình chữ nhật của chúng ta di chuyển với cùng tốc độ trên tất cả các máy tính.

------

[Trước](/learn/detail?learnId=4) | [Mục lục](/learn/search?keyword=Lập%20trình%20games%20với%20Love2D) | [Kế tiếp](/learn/detail?learnId=6)

- Tổng hợp và hướng dẫn về System Admin,
Server, Cloud, Docker, Monitor.
- Hướng dẫn lập trình Backend, Website.
- Hướng dẫn lập trình App Android & IOS.
- Hướng dẫn lập trình Games.
- Học từ vựng và luyện kỷ năng ngoại ngữ.