Search…

HTML5 Sprite Animation - Tạo Đối Tượng Chuyển Động

23/09/20203 min read
Tạo hiệu ứng - animation với HTML5 và canvas và sprite sheet.

Giới thiệu

Chuyển động trong game là những hình ảnh nối tiếp nhau xuất hiện, làm cho người chơi có cảm giác như nhân vật đang thật sự chuyển động. Nếu số lượng hình ảnh càng nhiều thì nhân vật có chuyển động càng mượt mà.

Game sprite sheet.
Chim đang bay với 28 trạng thái

Khai báo game

Như đã giới thiệu ở trên, chương trình sau sẽ mô phỏng 1 chú chim đang bay với chuyển động đập cánh.

<!DOCTYPE html>
<html>
  <head>
    <script>
      class Eagle {
        constructor(srcUrl) {
          this.frameId = 0;
          this.frameCount = 28;
          this.loaded = false;

          this.x = 0;
          this.y = 0;
          this.width = 250;
          this.height = 222;

          this.img = new Image();
          this.img.src = srcUrl;
          this.img.onload = () => {
            this.loaded = true;
          };

          this.eagleCanvas = document.getElementById("eagleCanvasId");
          this.eagleContext = this.eagleCanvas.getContext("2d");
        }

        #update() {
          this.frameId++;
          this.frameId = this.frameId % this.frameCount;
        }

        #draw() {
          this.eagleCanvas.width = this.eagleCanvas.width;

          this.eagleContext.drawImage(
            this.img,
            this.frameId * this.width,
            0,
            this.width,
            this.height,
            this.x,
            this.y,
            this.width,
            this.height
          );
        }

        run() {
          if (this.loaded === false) return;
          this.#update();
          this.#draw();
        }
      }

      function init() {
        eagle = new Eagle("eagle.png");
        setInterval(run, 1000.0 / 60);
      }

      function run() {
        eagle.run();
      }
    </script>
  </head>
  <body onload="init();">
    <canvas id="eagleCanvasId" width="730" height="335"></canvas>
  </body>
</html>

Giải thích code trong <script>

Các thuộc tính vẽ và mô tả về chú chim sẽ được viết trong class Eagle

  • Đường dẫn đến hình.
  • Số khung hình: trong ví dụ này thì ta có 28 khung, tương đương với 28 trạng thái của chú chim đang bay.
  • Khung đang hiển thị.
  • Chiều dài.
  • Chiều rộng.
  • Vị trí chú chim đang bay trên màn hình.

Đoạn code sau hiện thực phần khai báo thuộc tính của chú chim:

class Eagle {
  constructor(srcUrl) {
    this.frameId = 0;
    this.frameCount = 28;
    this.loaded = false;

    this.x = 0;
    this.y = 0;
    this.width = 250;
    this.height = 222;

    this.img = new Image();
    this.img.src = srcUrl;
    this.img.onload = () => {
      this.loaded = true;
    };

    this.eagleCanvas = document.getElementById("eagleCanvasId");
    this.eagleContext = this.eagleCanvas.getContext("2d");
  }
}

Tiếp theo, định nghĩa phương thức update()draw() cho nhân vật. Để mô tả nhân vật cần thực hiện 2 việc:

  • Trong 28 trạng thái của chú chim, tính toán làm sao cho từng trạng thái xuất hiện lần lượt và khi kết thúc 28 trạng thái thì trở lại trạng thái đầu tiên.
  • Tiến hành vẽ mỗi khi 1 trạng thái được cập nhật.

Đoạn code sau hiện thực phương thức update()draw():

#update() {
  this.frameId++;
  this.frameId = this.frameId % this.frameCount;
}

#draw() {
  this.eagleCanvas.width = this.eagleCanvas.width;

  this.eagleContext.drawImage(
    this.img,
    this.frameId * this.width,
    0,
    this.width,
    this.height,
    this.x,
    this.y,
    this.width,
    this.height
  );
}

run() {
  if (this.loaded === false) return;
  this.#update();
  this.#draw();
}

Tích hợp vào HTML

Chương trình chính đăng ký trong sự kiện onload của body, tiến hành khởi tạo mọi thứ bao gồm canvas để vẽ, hình ảnh của chú chim và các thông tin cần thiết, khởi chạy update()draw(), cả 2 phương thức này được gom chung trong phương thức Eagle.run().

Tải project hoàn chỉnh

Tải project hoàn chỉnh bên dưới và chạy bằng trình duyệt file index.htm

StdioEagleAnimation.zip

IO Stream

IO Stream Co., Ltd

30 Trinh Dinh Thao, Hoa Thanh ward, Tan Phu district, Ho Chi Minh city, Vietnam
+84 28 22 00 11 12
developer@iostream.co

383/1 Quang Trung, ward 10, Go Vap district, Ho Chi Minh city
Business license number: 0311563559 issued by the Department of Planning and Investment of Ho Chi Minh City on February 23, 2012

©IO Stream, 2013 - 2024