HTML5 Animating Sprites: Cách tạo ảnh động trên game canvas

Để bài viết này ai cũng có thể làm được chúng ta sẽ quay lại cách viết mà anh Ngọc Tuấn áp dụng trong game Dozen với cách load hình ảnh và vòng lặp game đơn giản nhất. Việc này sẽ giúp bạn thực hành một cách tức thì.

Chúng ta sẽ lấy hình sau để phân tích.


Trước tiên thay vì nhào vào game sprite animation một cách thụ động thì chúng ta chuyển hướng sang khái niệm về điện ảnh để hiểu rõ về animation trước rồi quay lại một cách vững chắc nhé. https://en.wikipedia.org/wiki/Animation

https://en.wikipedia.org/wiki/12_basic_principles_o... .

Bản chất của hình ảnh động vẫn là những hình ảnh tĩnh được ghép lại với nhau theo một quy tắc nhất định mà chúng ta đã được biết đến: 24 hình giây. Vài lời gợi nhớ để các bạn thấy rõ hơn. Mắt con người không có khả năng cảm nhận hình ảnh một cách liên tục mà khi ánh sáng đập vào võng mạc sẽ để lại những ghi nhớ trong đó phải một thời gian ngắn nó mới mất đi. Nếu một hình được lưu trữ trong một khoảng thời gian 1/24s và được thay bằng hình tiếp theo thì chúng ta sẽ không thể nhận biết được đó là hình ảnh mới. Điều này dẫn đến hiện tượng chúng ta có cảm nhận rằng hình ảnh là động chứ không còn là hình tĩnh nữa.


Hình ảnh thứ nhất bạn thấy là tĩnh. Nhưng hình ảnh thứ hai là động đúng không?

Đến lúc này bạn đã hiểu rõ cơ chế của hình ảnh động rồi. Bước tiếp theo chúng ta sẽ cùng cài đặt nó trên HTML5.

(Vì không thể trực tiếp chèn HTML5 vào trong bài post của diễn đàn nên mời mọi người xem tiếp tại đây)

Nguồn: vietgamedev.net