WebVision Canvas
Quy trình làm việc

Ví dụ Phaser JS cho quy trình Phaser Studio

03
Khắc phục hiện tượng giật hình tilemap

Khắc phục tilemap bị giật khi camera theo sprite

Tilemap thường bị giật khi camera theo dõi sprite. Nguyên nhân thường do cài đặt chưa tối ưu. Agent đọc mã cảnh và điều chỉnh các thiết lập theo dõi camera. Sau đó, nó chạy lệnh build để xác minh dự án vẫn biên dịch thành công, và bạn cần kiểm tra lại hiện tượng giật trong trình duyệt. Bạn xem lại diff trước khi chấp nhận thay đổi.

01

Mở thư mục dự án

Mở thư mục trong cửa sổ chat của agent.

02

Liệt kê các tệp cảnh

Agent liệt kê tất cả các tệp cảnh trong thư mục.

03

Đọc mã cảnh

Agent đọc tệp mã cảnh chính.

04

Chạy lệnh build

Agent chạy lệnh build để kiểm tra lỗi.

Cấu trúc game cơ bản

src/main.js
class MainScene extends Phaser.Scene {
  constructor() {
    super('MainScene');
  }
  create() {
    this.add.text(400, 300, 'Hello World', {
      fontSize: '32px',
      fill: '#ffffff'
    });
  }
}
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MainScene
};
new Phaser.Game(config);

Ví dụ JavaScript thuần này minh họa một lớp cảnh cơ bản với một đối tượng văn bản. Cấu hình đặt loại game thành AUTO và xác định chiều rộng cùng chiều cao.

Quy trình phaser typescript

Phân tích mã cảnh

Agent sử dụng list_dir để ánh xạ cấu trúc dự án và tìm các tệp cảnh, sau đó đọc mã chính bằng read_file để hiểu logic game. Nó hoạt động cục bộ. Agent tìm kiếm các đối tượng game bằng grep để xác định lỗi. Nó đọc tài liệu chính thức của Phaser bằng web_search và http_get để xác minh chữ ký phương thức. Bạn xem lại kế hoạch ở chế độ Plan only để theo dõi các thay đổi. Bạn có thể chuyển sang Ask first để phê duyệt từng chỉnh sửa. Agent áp dụng các thay đổi và hiển thị diff cho từng tệp. Bạn kiểm tra các ví dụ phaser js bằng cách xem cách thay đổi vị trí và tỷ lệ trong trình duyệt.

Khắc phục rung camera

Agent sử dụng glob để tìm tất cả các tệp tilemap và sprite trong dự án, sau đó đọc logic theo dõi camera trong mã cảnh bằng read_file. Agent tìm kiếm các cài đặt camera cụ thể gây ra hiệu ứng rung. Nó kiểm tra tài liệu chính thức của Phaser về các tùy chọn làm mượt camera. Agent sửa đổi cài đặt theo dõi camera trong tệp cảnh bằng edit_file. Bạn có thể khắc phục tilemap giật khi camera theo sprite bằng cách điều chỉnh các cài đặt này. Agent chạy lệnh máy chủ dev của bạn để khởi động máy chủ phát triển cục bộ. Shell hiển thị mã thoát thực tế của lệnh và người dùng kiểm tra kết quả trong trình duyệt.

WebVision Canvas cho Windows

Bắt đầu dự án Phaser của bạn ngay hôm nay

Tải xuống WebVision Canvas ↗