Lập trình game 2D trên
HTML5, Phần 4: Sprites
Tiến hành phân vai các nhân vật trong Snail Bait
Trong loạt bài này, David Geary sẽ hướng dẫn bạn từng bước thực hiện trò chơi
video HTML5 2D. Sprites — đối tượng đồ họa mà bạn có thể gán các hành vi đến
— là một trong những khía cạnh cơ bản nhất và quan trọng của trò chơi video.
Trong phần này, bạn sẽ học làm thế nào để thực hiện sprite để tạo nên sự chuyển
động của các nhân vật trong Snail Bait.
Giống như các lĩnh vực nghệ thuật khác — chẳng hạn như phim, kịch và tiểu
thuyết — trò chơi có một dàn các nhân vật, mỗi nhân vật có một vai trò cụ thể. Ví
dụ, Snail Bait có nhân vật "Runner" (giữ vai chính của trò chơi), các đồng tiền,
ngọc ruby, ngọc sapphire, các con ong, con dơi, các nút bấm, và một con ốc sên,
phần lớn chúng đều có trong Hình 1. Trong bài viết đầu tiên của loạt bài này (xem
phần Các hình ảnh 2D: Phân vai các nhân vật), tôi đã thảo luận về các nhân vật này
và vai trò của chúng.
Hình 1. Các nhân vật của Snail Bait
Mỗi nhân vật trong Snail Bait là một sprite. Sprites là đối tượng đồ họa mà bạn có
thể cấp cho nó các hành vi; ví dụ, nhân vật có thể chạy, nhảy, rơi, và va chạm với
các sprite khác, trong khi đó, các viên ngọc lấp lánh, nhúc nhích lên xuống, và biến
mất khi chúng va chạm với nhân vật.
Sử dụng thuật ngữ Sprite
Những người thực hiện bộ xử lý hiển thị video của nhạc cụ Texas 9918A lần đầu
tiên sử dụng thuật ngữ sprite cho các nhân vật hoạt hình. (Trong tiếng Anh chuẩn,
từ sprite — đến từ tiếng Latin spiritus — nghĩa là yêu tinh hay thần tiên.) Sprites
cũng được thực hiện trong cả phần cứng và phần mềm; ví dụ máy tính Commodore
Amiga sản xuất năm 1985 đã hỗ trợ đến 8 sprite về phần cứng.
Vì sprite là một trong những khía cạnh cơ bản nhất của bất kỳ trò chơi, và vì trò
chơi thường có nhiều sprite, nó có ý nghĩa để đóng gói khả năng cơ bản của chúng
trong các đối tượng có thể tái sử dụng. Trong bài viết này, bạn sẽ học làm thế nào
để:
Thực hiện một đối tượng Sprite mà bạn có thể tái sử dụng trong bất kỳ trò
chơi nào.
Tách rời sprite từ các đối tượng vẽ chúng (sprite artists) để linh động vào
lúc khởi chạy.
Dùng sprite sheets để giảm thời gian khởi động và các yêu cầu về bộ nhớ.
Tạo sprite với siêu dữ liệu.
Kết hợp sprite vào một vòng lặp.
Các đối tượng Sprite
Tôi thiết lập sprite của Snail Bait như là các đối tượng Javascript để có thể sử dụng
trong bất kỳ trò chơi nào, vì vậy sprite sẽ nằm ở tệp riêng. Và tôi sẽ gọi tệp đó
trong đoạn mã HTML của Snail Bait như sau: <script src='js/sprites.js'></script>.
Bảng 1 liệt kê các thuộc tính của Sprite:
Bảng 1. Các thuộc tính của Sprite
Thu
ộ
c
tính Chú giải
artist
Đ
ố
i t
ư
ng đ
ể
v
ẽ
m
ộ
t sprite.
behaviors
M
ộ
t m
ả
ng các tr
ạ
ng thái, m
ỗ
i tr
ạ
ng thái là các
thao tác chuyển động của sprite trong một vài
Thu
ộ
c
tính Chú giải
ki
ể
u hình d
ạ
ng.
left
T
ọ
a đ
ộ
X
ở
góc trên bên trái c
ủ
a sprite.
top
T
ọ
a đ
ộ
Y
ở
góc trên bên trái c
ủ
a sprite.
width
Chi
ề
u ngang c
ủ
a sprite đ
ư
ợ
c tính theo pixel.
height
Chi
ề
u cao c
ủ
a sprite đ
ư
ợ
c tính theo pixel.
opacity
Tr
ạ
ng thái m
ờ
, trong su
ố
t ho
ặ
c k
ế
t h
ợ
p c
ả
hai
trạng thái của sprite.
type
M
ộ
t dòng chú thích lo
ạ
i c
ủ
a sprite, nh
ư
bat
(con dơi), bee (con ong), hay runner (nhân vật)
.
velocityX
T
ố
c đ
ộ
ngang c
ủ
a
sprite, đ
ư
ợ
c tính theo s
ố
pixel trên giây.
velocityY
T
ố
c đ
ộ
đ
ng c
ủ
a sprite, đ
ư
ợ
c tính theo s
ố
pixel
trên giây.
visible
Tình tr
ạ
ng hi
ể
n th
ị
c
ủ
a sprite. N
ế
u giá tr
ị
là
false thì sprite sẽ không được vẽ.
Sprite là những đối tượng đơn giản để duy trì thông tin tọa độ và kích cỡ của nó
(thường được biết như là một bounding box (hộp biên)), tốc độ và tình trạng hiển
thị. Nó còn có kiểu riêng để phân biệt sprite này với sprite khác và độ mờ của nó,
nghĩa là từng phần riêng của sprite có thể trong suốt.