⚔️ So sánh TCJSgame v2 và v3: Những điều mới và ý nghĩa

Nếu bạn đã làm việc với TCJSgame, có lẽ bạn đang sử dụng phiên bản v2 và đang thử nghiệm hoặc di chuyển lên v3. Bài viết này sẽ giúp bạn hiểu những gì đã thay đổi, tại sao điều đó quan trọng và đưa ra đánh giá (trên thang điểm 100) cho từng phiên bản dựa trên các tính năng, độ dễ sử dụng và hiệu suất.

Mục lục

1. Tóm tắt nhanh
2. So sánh chi tiết (dựa trên mã nguồn v2)
   • Vòng lặp và Thời gian
   • Camera
   • Thành phần & Di chuyển
   • Bản đồ ô & Sprite
   • Nhập liệu & Chuột
3. Mẫu mã bên cạnh
   • A) Vòng lặp trò chơi
   • B) Di chuyển thành phần
   • C) Bản đồ ô
4. Đánh giá (0–100)
5. Ghi chú di chuyển
6. Kết luận

Tóm tắt nhanh

• v2 đơn giản, gọn nhẹ và dễ học — tuyệt vời cho các bản demo nhỏ và nguyên mẫu.
• v3 bổ sung hỗ trợ camera, bản đồ ô, sprite, di chuyển theo góc và các tiện ích tốt hơn — một bước tiến tới một engine 2D hoàn chỉnh.
• Khuyến nghị: Đối với các dự án mới, hãy bắt đầu với v3. Đối với các demo nhỏ hoặc nhu cầu tương thích, v2 vẫn có thể sử dụng.

1) So sánh chi tiết (dựa trên mã nguồn v2)

Vòng lặp và Thời gian

v2

• Sử dụng setInterval(() => this.updat(), 20) (~50 FPS).
• Di chuyển là pixels per frame, không dựa trên thời gian.

v3

• Được thiết kế để làm việc với requestAnimationFrame (rAF).
• Hỗ trợ delta-time (dt) nên di chuyển là pixels per second.
• Tương thích với mở rộng tcjsgame-perf.js cho gameplay mượt mà hơn.

Camera

v2

• Lớp Camera tồn tại.
• Display.updat() dịch chuyển bằng -camera.x, -camera.y.

v3

• Camera tích hợp với cảnh và bản đồ ô.
• Hoạt động tốt hơn với tối ưu hóa (culling, caching).

Thành phần & Di chuyển

v2

• Component có speedX, speedY, gravity, bounce, physics, changeAngle.
• move() là theo khung hình.
• moveAngle() tồn tại nhưng ít được sử dụng hơn.

v3

• Thêm các tiện ích di chuyển phong phú hơn: project, glideTo, accelerate, decelerate.
• Được thiết kế để hỗ trợ di chuyển dựa trên dt cho tốc độ nhất quán.

Bản đồ ô & Sprite

v2

• Không có TileMap.
• Có lớp Sprite cơ bản cho hoạt hình theo khung hình.

v3

• Các lớp TileMap và Tile mới.
• Hỗ trợ va chạm ô, thêm/xóa ô, hỗ trợ caching.
• Sprites tích hợp tốt hơn với các cảnh.

Nhập liệu & Chuột

v2

• Xử lý keydown, keyup, mousedown, mouseup, touchstart, touchend.
• Có thành phần Mouse cơ bản.

v3

• Cải thiện theo dõi con trỏ.
• Xử lý xoay và camera khi kiểm tra nhấp chuột.

2) Mẫu mã bên cạnh

A) Vòng lặp trò chơi

v2

start(width = 480, height = 270) {
  this.canvas.width = width;
  this.canvas.height = height;
  document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  this.interval = setInterval(() => this.updat(), 20);
  this.addEventListeners();
}

updat() {
  this.clear();
  this.context.save();
  this.context.translate(-this.camera.x, -this.camera.y);
  update(); // cập nhật toàn cầu
  comm.forEach(c => { c.move(); c.update(this.context); });
  this.context.restore();
}

v3

start(width = 480, height = 270) {
  this.canvas.width = width;
  this.canvas.height = height;
  document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  this._lastTime = performance.now();
  requestAnimationFrame(this._loop.bind(this));
}

_loop(timestamp) {
  let dt = (timestamp - this._lastTime) / 1000;
  this._lastTime = timestamp;
  this.clear();
  this.context.save();
  this.context.translate(-this.camera.x, -this.camera.y);
  if (typeof update === "function") update(dt);
  comm.forEach(c => { c.move(dt); c.update(this.context); });
  this.context.restore();
  requestAnimationFrame(this._loop.bind(this));
}

B) Di chuyển thành phần

v2

move() {
  if (this.physics) {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
  } else {
    this.x += this.speedX;
    this.y += this.speedY;
  }
}

v3

move(dt = 1/60) {
  if (this.physics) {
    this.gravitySpeed += this.gravity * dt;
    this.x += this.speedX * dt;
    this.y += (this.speedY + this.gravitySpeed) * dt;
  } else {
    this.x += this.speedX * dt;
    this.y += this.speedY * dt;
  }
}

C) Bản đồ ô

v2
❌ Không có

v3

class TileMap {
  constructor(render, map, tile, width, height) { ... }
  show() { ... }
  tiles(id = 0) { ... }
  crashWith(obj, id = 0) { ... }
  add(id, tx, ty) { ... }
  remove(tx, ty) { ... }
}

3) Đánh giá (0–100)

Tại sao v2 có điểm thấp hơn

• Đơn giản và dễ sử dụng nhưng thiếu bản đồ ô và cách xử lý vòng lặp hiện đại.
• Hiệu suất kém hơn do sử dụng setInterval.

Tại sao v3 có điểm cao hơn

• Thêm Bản đồ ô, camera tốt hơn, nhiều tiện ích di chuyển hơn và hỗ trợ delta-time.
• Hiệu suất cao hơn với requestAnimationFrame + mở rộng perf.
• Hơi khó học hơn nhưng đáng giá cho các dự án nghiêm túc.

Ghi chú di chuyển

• Mã cũ vẫn hoạt động trong v3 nếu bạn giữ useDelta: false trong mở rộng perf.
• Để nâng cấp, hãy viết lại di chuyển để sử dụng dt (pixels/second).
• Sử dụng display.add(component, scene) và display.camera.follow(player) trong v3.

Kết luận

• v2 tuyệt vời cho các nguyên mẫu nhanh và học tập.
• v3 tốt hơn cho các trò chơi thực sự: mượt mà hơn, nhanh hơn và nhiều tính năng hơn.
• Để có kết quả tốt nhất: kết hợp v3 với mở rộng tcjsgame-perf.js.

🚀 TCJSgame đang phát triển — và v3 là một bước tiến lớn.