Lập trình games với Love2D - Chương 12 - Ảnh

2023-10-22 07:48:51 Love2D Học Lập Trình Lua 64 lượt xem 0 bình luận

Tạo và sử dụng hình ảnh là một công việc rất dễ dàng trong LÖVE. Đầu tiên chúng ta cần một hình ảnh. Tôi sẽ sử dụng hình ảnh này:

![](/images/2023/7/10/25-1698226687-sheep.png)

Tất nhiên, bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích, miễn là nó thuộc loại ```.png``` . Đảm bảo hình ảnh nằm trong cùng thư mục với tệp ```main.lua```.

Đầu tiên chúng ta cần tải hình ảnh và lưu nó vào một biến. Đối với điều này, chúng ta sẽ sử dụng ```love.graphics.newImage(path)```. Truyền tên của hình ảnh dưới dạng chuỗi làm đối số đầu tiên. Vì vậy nếu bạn có một ảnh.

```lua
function love.load()
    myImage = love.graphics.newImage("sheep.png")
end
```

Bạn cũng có thể đặt hình ảnh của mình vào thư mục con, nhưng trong trường hợp đó hãy nhập toàn bộ đường dẫn.

```lua
myImage = love.graphics.newImage("path/to/sheep.png")
```

Bây giờ hình ảnh của chúng ta được lưu trữ bên trong ```myImage```. Chúng ta có thể sử dụng ```love.graphics.draw``` để vẽ hình ảnh.

```lua
function love.draw()
    love.graphics.draw(myImage, 100, 100)
end
```

Và đó là cách bạn vẽ một hình ảnh.

------

Đối số ```.draw()```

Chúng ta hãy xem xét tất cả các đối số của ```love.graphics.draw()```. Tất cả các đối số bên cạnh hình ảnh đều là tùy chọn [Wiki](https://love2d.org/wiki/love.graphics.draw).

```love.graphics.draw( drawable, x, y, r, sx, sy, ox, oy, kx, ky )```

Như sau:

```drawable```.  Là đối tượng hình ảnh bạn muốn vẽ.

```x``` và ```y```. Vị trí ngang và dọc của nơi bạn muốn vẽ hình ảnh.

```r```. Sự quay (hoặc góc), tất cả các góc trong LÖVE đều là ```radian```. Tôi sẽ giải thích thêm về ```radian``` ở chương khác.

```sx``` và ```sy```. Là x-scale and y-scale. Nếu bạn muốn điều chỉnh lớn nhỏ của hình ảnh

|  ```love.graphics.draw(myImage, 100, 100, 0, 2, 2)```

|  Bạn cũng có thể sử dụng tính năng này để phản chiếu hình ảnh bằng

|  ```love.graphics.draw(myImage, 100, 100, 0, -1, 1)```

```ox``` và ```oy```. Độ sâu x-origin và độ sâu y-origin của hình ảnh.

|  Theo mặc định, tất cả việc chia tỷ lệ và xoay đều dựa trên phía đầu trên bên trái của hình ảnh.

![](/images/2023/7/10/25-1698226686-origin1.png)

|  Điều này dựa trên tâm gốc của hình ảnh. Nếu muốn chia tỷ lệ hình ảnh từ tâm, chúng ta sẽ phải đặt điểm gốc ở giữa hình ảnh.

|  ```love.graphics.draw(myImage, 100, 100, 0, 2, 2, 39, 50)```

![](/images/2023/7/10/25-1698226686-origin2.png)

```kx``` và ```ky```. Với nó bạn có thể nghiêng hình ảnh.

![](/images/2023/7/10/25-1698226687-shear.png)

```love.graphics.print```, mà chúng ta đã sử dụng trước đây để vẽ văn bản, cũng có cùng các đối số này.

```x, y, r, sx, sy, ox, oy, kx, ky```

Tất cả những đối số này ngoại trừ hình ảnh đều có thể được bỏ qua. Và chúng ta gọi đây là những đối số tùy chọn.

Bạn có thể tìm hiểu về các hàm LÖVE bằng cách đọc tài liệu [API](https://love2d.org/wiki/Main_Page).

### Đối tượng hình ảnh

Hình ảnh ```love.graphics.newImage``` trả về thực chất là một vật thể. Một đối tượng Hình ảnh . Nó có các chức năng mà chúng ta có thể sử dụng để chỉnh sửa hình ảnh của mình hoặc lấy dữ liệu về nó.

Ví dụ: chúng ta có thể sử dụng ```:getWidth()``` và ```:getHeight()``` để lấy chiều rộng và chiều cao của hình ảnh. Chúng ta có thể sử dụng điều này để đặt điểm gốc vào trung tâm hình ảnh của mình.

```lua
function love.load()
    myImage = love.graphics.newImage("sheep.png")
    width = myImage:getWidth()
    height = myImage:getHeight()
end

function love.draw()
    love.graphics.draw(myImage, 100, 100, 0, 2, 2, width/2, height/2)
end
```

### Màu sắc

Bạn có thể thay đổi màu sắc mà hình ảnh được vẽ bằng ```love.graphics.setColor(r, g, b)```. Nó đặt màu cho mọi thứ bạn vẽ, không chỉ hình ảnh mà cả hình dạng và đường nét. Nó sử dụng hệ thống RGB. Mặc dù chính thức nó dao động từ 0 đến 255, nhưng với LÖVE nó dao động từ 0 đến 1. Vì vậy, thay vì (255, 200, 40), bạn sẽ sử dụng (1, 0,78, 0,15). Nếu bạn chỉ biết màu trong phạm vi 0-255, bạn có thể tính số bạn muốn bằng ```number/255```. Ngoài ra còn có đối số thứ tư ```a``` là viết tắt của ```alpha``` là quyết định độ trong suốt của hình ảnh bạn vẽ. Bạn có thể đặt màu nền bằng ```love.graphics.setBackgroundColor(r, g, b)```. Vì chúng ta chỉ muốn gọi nó một lần nên chúng ta có thể gọi nó trong ```love.load```.

```lua
function love.load()
    myImage = love.graphics.newImage("sheep.png")
    love.graphics.setBackgroundColor(1, 1, 1)
end

function love.draw()
    love.graphics.setColor(255/255, 200/255, 40/255, 127/255)
    love.graphics.setColor(1, 0.78, 0.15, 0.5)
    -- Hoặc ...
    love.graphics.draw(myImage, 100, 100)
    -- Không có số cho alpha sẽ tự động đặt thành 1.
    love.graphics.setColor(1, 1, 1)
    love.graphics.draw(myImage, 200, 100)
end
```

![](/images/2023/7/10/25-1698226686-color.png)

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

Chúng ta tải một hình ảnh bằng ```myImage = love.graphics.newImage("path/to/image.png")```, nó trả về một đối tượng Image mà chúng ta có thể lưu trữ trong một biến. Chúng ta có thể chuyển biến này để vẽ hình ảnh ```love.graphics.draw(myImage)```. Hàm này có các đối số tùy chọn về vị trí, góc và tỷ lệ của hình ảnh. Đối tượng Image có các chức năng mà bạn có thể sử dụng để lấy dữ liệu về nó. Chúng ta có thể sử dụng ```love.graphics.setColor(r, g, b)``` để thay đổi màu sắc của hình ảnh và mọi thứ khác được vẽ.

------

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

- 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ữ.