Làm thế nào để loại bỏ sự hốt hoảng từ Phaser's Sprite/Background

Question

Tôi thiết lập một ví dụ jsfiddle để minh họa điều này với các nội dung phù hợp.

Khi nhân vật của bạn đang di chuyển và máy ảnh bắt đầu xoay, bạn sẽ nhận thấy hậu cảnh có một chút "jitterness". Điều này có thể bị tắt bằng cách đặt game.camera.roundPx thành true.

Tuy nhiên, nếu điều đó bị tắt và bạn di chuyển ký tự. Nhân vật của bạn bắt đầu jitter. Một số điều tôi đã tìm thấy trong cuộc phiêu lưu này:

• này chỉ xảy ra khi di chuyển với body.velocity.x, dưới cả P2 và Arcade vật lý.

• Nếu bạn di chuyển ký tự bằng body.x hoặc chỉ x thì hoàn toàn ổn.

• Nếu bạn xóa kết cấu sơ đồ trang trí, bạn thực sự có thể thấy sự hăng hái xảy ra khi nhìn thấy mắt bạn khi di chuyển. Example here - Đảm bảo bạn di chuyển đủ xa để máy ảnh xoay.

• Tôi cũng đã thử game.renderer.renderSession.roundPixels = false; mà không có ưu thế.

• Điều này xảy ra dưới CANVAS và WebGL làm cho chế độ

Answer 1

Câu hỏi lớn! Những jitters này được gây ra bởi subpixel rendering.

Phaser có thể sử dụng giá trị không nguyên cho vị trí của sprites khi game.camera.roundPx là sai. Theo tài liệu cho roundPx:

Nếu một máy ảnh có roundPx thiết lập để true nó sẽ gọi view.floor như một phần của chu kỳ cập nhật của nó, giữ ranh giới của nó với các giá trị số nguyên. Đặt điều này thành false để vô hiệu hóa điều này xảy ra.

view.floor:

Chạy Math.floor() trên cả hai giá trị x và y của Rectangle này.

Khi vẽ đến vị trí không phải số nguyên, trình duyệt cố gắng nội suy để làm cho nó xuất hiện như thể một pixel được đặt giữa hai pixel. Điều này có thể khiến một pixel của hình ảnh nguồn của bạn được hiển thị dưới dạng hai pixel vật lý. Việc chuyển đổi giữa hai trạng thái này khi máy ảnh chảo là những gì gây ra sự hốt hoảng. Dưới đây là một ví dụ:

Đó là lý do tại sao thiết game.camera.roundPx = true sửa chữa nó.