STDIO
Tìm kiếm gần đây
    Mục lục
    Thảo luận
    0
    Liên kết
    QR Code

    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

    JavaScript

    JavaScript

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

    Đề xuất

    Sprite Animation trong DirectX 9

    Sprite Animation trong DirectX 9

    Thao tác Sprite animation là một trong những kỹ thuật cần thiết trong ...

    Lập Trình GameDirectX

    02/11/2017

    Tạo Animation Trong Cocos2d-x Với Công Cụ TexturePacker

    Tạo Animation Trong Cocos2d-x Với Công Cụ TexturePacker

    TexturePacker công cụ giúp tạo chuyển động cho game. Đối với các game ...

    Lập Trình GameCocos2d-x

    16/09/2015

    Khám phá thêm

    Load Sprite trong DirectX 9

    Load Sprite trong DirectX 9

    Thao tác với Sprite, Sprite animation là một trong những kỹ thuật cần ...

    Lập Trình GameKiến Thức Nâng Cao

    10/10/2017

    Tạo Animation Với Unity

    Tạo Animation Với Unity

    Animation giúp lập trình viên diễn tả hành động của các nhân vật một ...

    Lập Trình GameKiến Thức Nâng Cao

    02/08/2015

    Sprite & 2D Animation

    Sprite & 2D Animation

    Tìm hiểu về sprite, sprite sheet và 2D Animation trong game.

    Lập Trình GameKiến Thức Nâng Cao

    22/05/2014

    Làm Sao Để Chia Tách, Cắt Một Đối Tượng Với Box2D?

    Làm Sao Để Chia Tách, Cắt Một Đối Tượng Với Box2D?

    Bạn cần một sự chia tách, cắt một đối tượng trong thế giới ...

    Lập Trình GameKiến Thức Nâng Cao

    23/01/2015

    Action Cho Sprite Trong Cocos2d-x 3.x.x

    Action Cho Sprite Trong Cocos2d-x 3.x.x

    Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x.x. ...

    Lập Trình GameCocos2d-x

    23/01/2015

    Khởi Tạo Đối Tượng Trong Runtime

    Khởi Tạo Đối Tượng Trong Runtime

    Trong một vài trường hợp, việc khởi tạo đối tượng mà không khai báo ...

    Lập Trình GameUnity

    08/08/2015

    Animation Trong Cocos2d-x 3.x.x

    Animation Trong Cocos2d-x 3.x.x

    Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x.x. ...

    Lập Trình GameCocos2d-x

    23/01/2015

    Chipmunk - Phần 6: Tạo Physics Body Cho Các Đối Tượng Có Hình Dạng Phức Tạp

    Chipmunk - Phần 6: Tạo Physics Body Cho Các Đối Tượng Có Hình Dạng Phức Tạp

    Để việc xử lý va chạm được “thật” hơn trong game thì các hình khối ...

    Lập Trình GameCocos2d-x

    15/06/2017

    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