Tôi đang cố gắng thực hiện hiệu ứng ánh sáng trong trò chơi HTML5 / JavaScript bằng cách sử dụng thay thế ô xếp. Những gì tôi có bây giờ là loại hoạt động, nhưng quá trình chuyển đổi trông không đủ mượt / tự nhiên khi nguồn sáng di chuyển xung quanh. Đây là nơi tôi đang ở:
- Ngay bây giờ tôi có một bản đồ nền có biểu đồ PNG phổ ánh sáng / bóng tối được áp dụng cho nó - đi từ ô tối nhất đến hoàn toàn trong suốt. Theo mặc định, ô tối nhất được vẽ trên toàn bộ cấp khi khởi chạy, bao gồm tất cả các lớp khác, v.v.
- Tôi đang sử dụng các kích thước ô được xác định trước (40 x 40px) để tính toán vị trí của từng ô và lưu trữ tọa độ x và y của nó trong một mảng.
- Sau đó tôi sẽ sinh ra một thực thể "khối lưới" 40 x 40px trong suốt tại mỗi vị trí trong mảng
- Công cụ tôi đang sử dụng (ImpactJS) sau đó cho phép tôi tính khoảng cách từ thực thể nguồn sáng của mình đến mọi phiên bản của thực thể khối lưới này.
- Sau đó tôi có thể thay thế gạch bên dưới mỗi gạch khối lưới đó bằng một lát có độ trong suốt thích hợp.
Hiện tại tôi đang thực hiện phép tính như thế này trong từng phiên bản của thực thể khối lưới được sinh ra trên bản đồ:
var dist = this.distanceTo( ig.game.player );
var percentage = 100 * dist / 960;
if (percentage < 2) {
// Spawns tile 64 of the shadow spectrum tilesheet at the specified position
ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 64 );
}
else if (percentage < 4) {
ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 63 );
}
else if (percentage < 6) {
ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 62 );
}
// etc...
Vấn đề là như tôi đã nói, kiểu tính toán này không làm cho nguồn sáng trông rất tự nhiên. Chuyển đổi hình xếp trông quá sắc nét trong khi lý tưởng là chúng sẽ mờ dần trong và ngoài bằng cách sử dụng biểu đồ phổ (Tôi đã sao chép trang xếp hình từ một trò chơi khác quản lý để thực hiện việc này, vì vậy tôi biết đó không phải là vấn đề với các ô màu. Làm thế nào các trò chơi khác đang làm điều đó). Tôi nghĩ rằng có lẽ phương pháp sử dụng tỷ lệ phần trăm của tôi để chuyển đổi gạch có thể được thay thế bằng một diễn đàn lân cận tốt hơn / năng động hơn của một số loại cho phép chuyển đổi mượt mà hơn? Có ai có ý tưởng gì về những gì tôi có thể làm để cải thiện hình ảnh ở đây không, hay cách tính toán gần gũi hơn với thông tin tôi đang thu thập về mỗi ô?
(PS: Tôi đang đăng lại bài này từ Stack Overflow theo đề nghị của ai đó, xin lỗi về bản sao!)
