🚀 Tăng Tốc Hiệu Suất TCJSgame với Mở Rộng Đơn Giản
Bạn có sử dụng TCJSgame v1, v2, hay v3 để phát triển trò chơi 2D bằng JavaScript không?
Mặc định, TCJSgame sử dụng setInterval để chạy vòng lặp trò chơi, điều này hoạt động... nhưng không phải là nhanh nhất.
Trong bài viết này, chúng ta sẽ sử dụng Mở Rộng Hiệu Suất TCJSgame – một tiện ích nhỏ giúp trò chơi của bạn chạy mượt mà, nhanh hơn và nhất quán hơn.
🎯 Những Điều Bạn Sẽ Học
- Vấn đề với
setIntervaltrong vòng lặp trò chơi. - Tại sao
requestAnimationFrame(rAF) là lựa chọn tốt hơn. - Delta-time (
dt) là gì và nó khắc phục tốc độ di chuyển như thế nào. - Cách thêm bộ nhớ đệm tilemap và culling đối tượng ngoài màn hình.
- Cách cài đặt và sử dụng mở rộng hiệu suất trong các dự án TCJSgame của bạn.
⚡ 1. Vấn Đề
Mặc định, TCJSgame hoạt động như sau:
this.interval = setInterval(() => this.update(), 20);Điều này đồng nghĩa:
- Trò chơi cố gắng chạy mỗi 20ms (~50 FPS).
- Nếu máy tính của bạn chậm, khung hình sẽ giảm.
- Nếu màn hình của bạn có tần số 120Hz, trò chơi sẽ trông kém mượt mà hơn.
- Nó vẫn tiếp tục chạy ngay cả khi tab bị ẩn, gây lãng phí CPU.
⚡ 2. Giải Pháp: requestAnimationFrame
Thay vì setInterval, các trò chơi hiện đại sử dụng:
requestAnimationFrame(loop);- Khớp với tỷ lệ làm mới màn hình của bạn (60Hz, 120Hz, v.v.).
- Tạm dừng khi tab bị ẩn.
- Hoạt ảnh mượt mà hơn.
Đó chính là điều mà tiện ích mở rộng của chúng ta tự động thực hiện. ✅
⚡ 3. Delta Time (dt)
Không có delta time, tốc độ của bạn tính theo pixel mỗi khung hình.
- Tại 60 FPS, 5px/frame = 300px/giây.
- Tại 120 FPS, cùng một mã chạy nhanh gấp đôi. ❌
Với delta time:
function update(dt) {
player.x += 200 * dt; // di chuyển 200 pixel mỗi giây
}Không quan tâm đến FPS, người chơi luôn di chuyển cùng một khoảng cách mỗi giây. 🎯
⚡ 4. Tối Ưu Hóa Thêm
Tiện ích mở rộng cũng cung cấp cho bạn:
- Bộ nhớ đệm tilemap → vẽ một lần, sử dụng lại.
- Culling đối tượng ngoài màn hình → bỏ qua những đối tượng không nhìn thấy.
- Tạm dừng / Tiếp tục → kiểm soát vòng lặp trò chơi một cách thủ công.
🛠 5. Cài Đặt
Chỉ cần bao gồm file sau TCJSgame trong HTML của bạn:
<script src="tcjsgame-v3.js"></script>
<script src="https://tcjsgame.vercel.app/mat/tcjsgame-perf.js"></script>Đơn giản vậy thôi! Tiện ích mở rộng tự động cập nhật TCJSgame.
📝 6. Mã Ví Dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TCJSgame + Mở Rộng Hiệu Suất</title>
</head>
<body>
<script src="tcjsgame-v3.js"></script>
<script src="https://tcjsgame.vercel.app/mat/tcjsgame-perf.js"></script>
<script>
const display = new Display();
// Kích hoạt các tính năng hiệu suất
enableTCJSPerf(display, {
useDelta: true, // sử dụng delta time
cacheTiles: true, // bộ nhớ đệm tilemaps
cullMargin: 32 // bỏ qua các đối tượng ngoài màn hình
});
display.start(800, 450);
// thêm một thành phần
let player = new Component(50, 50, "red", 100, 100, "rect");
display.add(player);
// di chuyển mượt mà với delta time
function update(dt) {
if (display.keys[39]) player.x += 200 * dt; // di chuyển sang phải
if (display.keys[37]) player.x -= 200 * dt; // di chuyển sang trái
}
</script>
</body>
</html>⚙️ 7. Tùy Chọn
Khi gọi enableTCJSPerf(display, options):
| Tùy chọn | Mặc định | Chức năng |
|---|---|---|
useDelta |
false |
Thêm dt (thời gian kể từ khung hình trước) vào update() để tốc độ nhất quán. |
cacheTiles |
false |
Bộ nhớ đệm tilemaps trên một canvas ngoài màn hình. |
cullMargin |
0 |
Bỏ qua việc vẽ các đối tượng bên ngoài viewport; lề thêm khoảng đệm. |
📊 8. Kết Quả
| Tính năng | TCJSgame Gốc | Với Tiện Ích Mở Rộng |
|---|---|---|
| Thời gian vòng lặp trò chơi | Cố định 20ms | Đồng bộ với tần số làm mới màn hình |
| Hành vi tab nền | Tiếp tục chạy | Tự động tạm dừng |
| Tốc độ di chuyển | Pixel mỗi khung hình | Pixel mỗi giây (với dt) |
| Hiệu suất tilemap | Vẽ lại mỗi khung hình | Được bộ nhớ đệm & sử dụng lại |
| Vẽ ngoài màn hình | Luôn được vẽ | Hỗ trợ culling |
✅ 9. Tương Thích
- Hoạt động với v1, v2 và v3.
- Mã cũ vẫn hoạt động mà không cần thay đổi.
- Nếu bạn muốn, bạn có thể sử dụng
dtmới để di chuyển mượt mà hơn.
🧑💻 10. Các Bước Tiếp Theo
- Thử nghiệm tiện ích mở rộng trong trò chơi hiện tại của bạn.
- So sánh FPS với và không có nó.
- Chia sẻ kết quả của bạn với cộng đồng TCJSgame!
🎉 Kết Luận
Với chỉ một file bổ sung, các dự án TCJSgame của bạn trở nên mượt mà, nhanh hơn và hiệu quả hơn.
Bây giờ bạn có thể tập trung vào việc xây dựng trò chơi của mình trong khi tiện ích mở rộng xử lý hiệu suất!
