STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

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

    Tạo hiệu ứng - animation với HTML5 và canvas và sprite sheet.
    25/08/2015
    23/09/2020
    3 phút đọc
    HTML5 Sprite Animation - Tạo Đối Tượng Chuyển Động

    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

    0 Bình luận
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Đề xuất

    Giới Thiệu về Sprite - Sprite Sheet - Sprite Animation
    Giới thiệu về Sprite - Sprite Sheet - Sprite Animation, hướng dẫn 1 số ...
    Sprite & 2D Animation
    Tìm hiểu về sprite, sprite sheet và 2D Animation trong game.

    Khám phá

    Sprite Animation trong DirectX 9
    Hướng dẫn tạo tập tin lưu tọa độ các tile từ một sprite sheet có sẵn và ...
    Action Cho Sprite Trong Cocos2d-x 3.x.x
    Tìm hiểu về action của Sprite trong Cocos2d-x 3.x.x.
    Làm Sao Để Chia Tách, Cắt Một Đối Tượng với Box2D?
    Hướng dẫn làm sao để chia tách, cắt một đối tượng với thư viện vật lý ...
    Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x
    Giới thiệu tổng quan về khái niệm cơ bản, một số cách dùng để khởi tạo ...
    Chipmunk - Phần 6: Tạo Physics Body Cho Các Đối Tượng Có Hình Dạng Phức Tạp
    Kĩ thuật tạo Physics Body cho các đối tượng có hình khối phức tạp trong ...
    Cơ Bản Vẽ Trên <canvas> 2D Với HTML5
    Giới thiệu HTML5 canvas, tạo đối tượng vẽ, các đường nét, hình chữ nhật, ...
    Các Phương Thức Khởi Tạo Đối Tượng trong C++
    Giới thiệu và hướng dẫn sử dụng 3 phương pháp khởi tạo đối tượng với ...
    15/09/2014
    Khởi Tạo Cửa Sổ với DirectX 9
    Hướng dẫn khởi tạo cửa sổ làm việc với DirectX 9.
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020