Bóng trong trò chơi canvas html5

Tôi muốn hỏi để tham khảo. Tôi đã gặp một bài viết về cách tạo bóng trong các trò chơi. Tôi đang sử dụng canvas html5 (hiện không có webgl) với javascript cho các dự án của tôi.

Bài viết được đề cập ở trên được đặt tại http://willyg302.wordpress.com/2012/11/04/2d-visibility/ .

Tôi đã suy nghĩ nếu phương pháp này có thể sử dụng với canvas (không có webgl) và javascript?

Chính xác hơn, tôi có một vài hình được vẽ trên vải, một số trong số chúng được tạo phức tạp bằng cung và các phương pháp tương tự. Do đó, tôi không có cách mô phỏng làm thế nào để mô tả một hình dạng với một phương trình mà tôi chỉ có thể lưu trữ một vài tham số (tức là hình tròn được mô tả là centreX, centre, bán kính với những hình này tôi có thể dễ dàng vẽ nó nhưng với hình dạng phức tạp hơn tôi không thể Vì vậy, tôi không có thông tin như vậy) vì vậy tôi đã nghĩ đến việc lưu trữ toàn bộ dữ liệu canvas bằng pixel với context.getImageData.data, sau đó sử dụng phương thức được mô tả trong bài viết (chuyển đổi cực, ..., quay lại hệ thống cartesian) và đưa toàn bộ cảnh vào canvas với phương thức canvas.putImageData.

Nhưng trước khi thực sự áp dụng điều này, tôi muốn hỏi liệu thậm chí có thể với canvas (không có webgl) và javascript để tạo bóng động (nguồn sáng di chuyển trên màn hình) theo cách này mà không mất fps nặng (tôi có thể tưởng tượng phương pháp này hoạt động khá tốt đối với các đối tượng tĩnh nhưng thời điểm tôi cần thực hiện mỗi khi nguồn sáng di chuyển Tôi không chắc liệu javascript + canvas có thể xử lý việc này trong thời gian hợp lý hay không, đặc biệt là khi tôi tìm thấy thông tin mà putImageData và getImageData khá chậm)?

Hoặc nếu bất cứ ai đã cố gắng tạo bóng động theo cách khác nhau trong html5 + js, tôi cũng đánh giá cao đề xuất của bạn về những điều này (Tôi hiện đang làm theo cách tương tự như được mô tả trong http://ncase.me/sight-and- ánh sáng / , mặc dù tôi đang gặp một số rắc rối với hình dạng lõm :().

Điều này đang trở nên rất dài, tôi hy vọng tôi đã giải thích bản thân mình đủ tốt.

Cảm ơn bạn rất nhiều vì bất kỳ lời khuyên nào bạn có thể chia sẻ và tôi xin lỗi vì bài đăng của tôi đã phát triển quá lớn, mặc dù tôi chỉ hỏi một câu hỏi.

EDIT: Quên đề cập đến, tôi chỉ tìm kiếm giải pháp 2d.

Vâng, đó là một câu hỏi khó nhưng tôi sẽ bắt đầu lại từ đầu.

• Nhận / Đặt imageData nhanh hơn bạn nghĩ, nhưng nếu bạn muốn thực hiện nó một cách hiệu quả, tôi khuyên bạn nên xây dựng bộ đệm đôi và rasterize hình dạng của bạn trong đó (đây là mô-đun đệm đôi tôi đã viết, hãy xem nhanh ) .

• Tạo bóng hình dạng lạ cũng khó thực hiện như đổ bóng hình chữ nhật, bạn chỉ cần đặt một điểm sáng, sau đó chiếu nó ( mô-đun raycast tôi đã viết, có thể nó sẽ giúp bạn tìm ra cách thực hiện) và có được góc của Sau đó, đổ bóng cho từng vật thể, suy nghĩ trong các vật thể dưới dạng 3D và có các cuộn dây 3D của điểm sáng, chiếu bóng của vật thể xuống sàn theo góc đã nói từ đáy của nó.

Thông thường, các trò chơi 2D sử dụng bóng tối nướng, vì nó dễ quản lý và thực hiện hơn các bóng động.

Nếu bạn muốn tạo bóng động, tôi khuyên bạn nên xây dựng mọi thứ trong 3D và sau đó kết xuất nó bằng phép chiếu, tôi đã tạo một trình tạo hình 3D cho khung vẽ 2D vani có thể giúp bạn, nó hiển thị các lưới tam giác 3D trong khung vẽ 2D bằng cách chiếu, Tôi có một phiên bản cập nhật với tính năng đổ bóng động và một số nội dung khác, hãy cho tôi biết nếu bạn quan tâm và tôi sẽ tải lên sau, và vâng, nó hoạt động ở tốc độ FPS tốt, nhưng bạn không thể sử dụng API kết xuất canvas cho việc này mục đích vì bạn phải quản lý pixel.

Chúc may mắn.

Tôi đã nghĩ về điều này trong một thời gian, tôi đã thực hiện một chút nghiên cứu về chủ đề này. Khác với việc sử dụng khung và viết mã siêu phức tạp / dài, có hai tùy chọn mà tôi có thể nghĩ ra:

1. sử dụng bóng tối
2. sử dụng gradient xuyên tâm / tuyến tính

http://www.w3schools.com/tags/canvas_c [adialgradient.asp

Một tùy chọn khác là sử dụng màu alpa để vẽ các mức độ tối khác nhau như hình vuông hoặc hình tròn:

context.save();
context.globalAlpha = 0.5;
context.fillStyle = "#000000";
// draw a whole ton of shapes with 50% transparency with a black color...
context.restore();