Gosu - Thư viện game 2D cho Ruby - Phần 4
Tiếp theo series này mình giới thiệu đến phần khá thú vị đó là Animation. Về cơ bản thì animation là 1 tập hợp các ảnh biểu diễn chuyển động của vật thể kiểu như này. Mỗi một hình nhỏ được cắt ra gọi là một sprite. Đưa các sprites vào 1 mảng và gọi từng sprite trong mảng đó ra bằng function draw ...
Tiếp theo series này mình giới thiệu đến phần khá thú vị đó là Animation.
Về cơ bản thì animation là 1 tập hợp các ảnh biểu diễn chuyển động của vật thể kiểu như này.
Mỗi một hình nhỏ được cắt ra gọi là một sprite. Đưa các sprites vào 1 mảng và gọi từng sprite trong mảng đó ra bằng function draw thì sẽ tạo ra được animation.
Code mẫu:
require 'gosu'
class Link
def initialize(animation)
@animation = animation
@x = 300
@y = 300
end
def draw
img = @animation[Gosu::milliseconds / 100 % @animation.size];
img.draw(@x, @y, 1)
end
end
class GameWindow < Gosu::Window
def initialize(awidth=800, height=600, fullscreen=false)
super
self.caption = 'Hello Animation'
@animation = Gosu::Image::load_tiles(self, "link.png", 120, 130, false)
@links = []
end
def update
@links.push(Link.new(@animation))
end
def button_down(id)
close if id == Gosu::KbEscape
end
def draw
@links.each {|link| link.draw}
end
end
window = GameWindow.new
window.show
Kết quả:

Giải thích:
Trong phần code mẫu bên trên mình tạo 1 class Link định nghĩa vị trí hiển thị của animation qua biến @x, @y và frame của animation bằng dòng code bên dưới. 100ms tương ứng với 1 frame (1frame = 1 sprite)
img = @animation[Gosu::milliseconds / 100 % @animation.size];
Và phần thân mình load ảnh bằng Gosu::Image và cắt ảnh đó ra làm nhiều sprites kích thước 120px x 130px (kích thước này tương ứng với 1 sprite của nhân vật). @animation = Gosu::Image::load_tiles(self, "link.png", 120, 130, false). Ở function update, sử dụng class Link để xác định khung hình cho các sprite được cắt (biến @animation), và sử dụng phương thức push() để đưa vào array @links bằng @links.push(Link.new(@animation))
và phần còn lại là gọi từng sprite trong array @links bằng @links.each {|link| link.draw} sẽ được kết quả như demo bên trên.
Chúc các bạn thành công và hẹn gặp lại trong bài tiếp theo nhé. Tham khảo: http://memorandums.hatenablog.com/entry/2016/04/21/174834