Lập trình game 2D trên HTML5, Phần 4: Sprites

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.
Nội dung trích xuất từ tài liệu:
Lập trình game 2D trên HTML5, Phần 4: SpritesLập trình game 2D trênHTML5, Phần 4: SpritesTiến hành phân vai các nhân vật trong Snail BaitTrong 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ơivideo 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ểuthuyế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 (xemphầ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àyvà vai trò của chúng.Hình 1. Các nhân vật của Snail BaitMỗ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ớicá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ếnmất khi chúng va chạm với nhân vật.Sử dụng thuật ngữ SpriteNhững người thực hiện bộ xử lý hiển thị video của nhạc cụ Texas 9918A lần đầutiê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.) Spritescũng được thực hiện trong cả phần cứng và phần mềm; ví dụ máy tính CommodoreAmiga 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úngtrong 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 SpriteTôi thiết lập sprite của Snail Bait như là các đối tượng Javascript để có thể sử dụngtrong 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: .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 Chú giải tínhartist Đối tượng để vẽ một sprite. Một mảng các trạng thái, mỗi trạng thái là cácbehaviors thao tác chuyển động của sprite trong một vài Thuộc Chú giải tính 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. Trạng thái mờ, trong suốt hoặc kết hợp cả haiopacity trạng thái của sprite. Một dòng chú thích loại của sprite, như battype (con dơi), bee (con ong), hay runner (nhân vật). Tốc độ ngang của sprite, được tính theo sốvelocityX pixel trên giây. Tốc độ đứng của sprite, được tính theo số pixelvelocityY trên giây. Tình trạng hiển thị của sprite. Nếu giá trị làvisible 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ểnthị. 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.Sprite còn được ủy quyền cho các đối tượng khác để vẽ nó hoặc thao tác tới nó,tương ứng với artist và behaviors.Liệt kê 1 là đoạn mã khởi tạo một Sprite, và nó thiết lập một số giá trị mặc địnhcho các thuộc tính của sprite:Liệt kê 1. Khởi tạo Spritevar Sprite = function (type, artist, behaviors) { // constructor this.type = type || ; this.artist = artist || undefined; this.behaviors = behaviors || []; this.left = 0; this.top = 0; this.width = 10; // Something other than zero, which makes no sense this.height = 10; // Something other than zero, which makes no sense this.velocityX = 0; this.velocityY = 0; this.opacity = 1.0; this.visible = true; return this;};Trình diễn và hành viDấu hiệu của các phương thức của Sprite bắt buộc phải tách riêng mối liên hệ giữasự trình diễn và hành vi: phương thức draw() dùng Canvas để ...