Giải pháp công nghệ tốt để xây dựng bản đồ ascii và di chuyển các nhân vật trong trình duyệt (như pháo đài lùn)? [đóng cửa]

Tôi muốn xây dựng một ứng dụng web cho trang web trò chơi của mình bao gồm sử dụng các ký tự văn bản để đại diện cho động vật và con người và để chúng di chuyển xung quanh trên các ô vuông bản đồ với AI độc lập (điều khiển máy chủ).

Về cơ bản, một bản đồ pháo đài lùn trong trình duyệt: Với các sinh vật di chuyển, mob, npcs và chiếc. Mặc dù không phải là tôi không muốn đạt được quy mô này, nhưng có lẽ tôi sẽ bắt đầu hiển thị một phần tư nội dung này bất cứ lúc nào.

Có lẽ một số gạch nền / bất động có thể được tải tĩnh. Nhưng đối với sinh vật / động vật và những thứ có thể di chuyển, tôi không chắc giải pháp công nghệ nào sẽ hiệu quả nhất.

Tôi biết <canvas>mặc dù tôi không biết liệu khả năng của nó có phù hợp với trường hợp sử dụng này hay không. Chắc chắn một số lượng javascript sẽ là cần thiết.

Có thư viện javascript hoặc thư viện canvas ngoài kia phù hợp với trường hợp sử dụng này không? Một công nghệ khác mà tôi không nhận thức được? Bất cứ ai cũng biết bất kỳ ví dụ nào về các trang web đã làm bất cứ điều gì tương tự như vậy, để tôi có thể đưa ra ý tưởng từ họ?

Tôi thực sự đã tạo một thư viện hiển thị ký tự cho web, Unicodetiles.js , mà tôi không chỉ dành thời gian để tối ưu hóa, mà còn khám phá các cách trình bày văn bản khác nhau; nó có ba trình kết xuất:

1. DOM, sử dụng một ma trận các <div>phần tử để hiển thị mỗi glyph với màu nền trước và màu nền có thể tùy chỉnh.
2. Canvas, vẽ các ký tự bằng cách sử dụng <canvas>phần tử. Việc này nhanh hơn nhiều và có các bài kiểm tra hiệu năng để sao lưu: http://tapagu.net/unicodetiles.js/tests/
3. WebGL, sử dụng phần tử canvas để tạo kết cấu phông chữ và sau đó kết xuất lại bằng WebGL, thậm chí nhanh hơn và rất có thể mở rộng với kích thước khung nhìn lớn, nhưng không được hỗ trợ tốt trong trình duyệt.

Lưu ý rằng các bài kiểm tra hiệu suất được liên kết có thể khá cực đoan, thay đổi mọi ký tự mọi khung hình. Trong thực tế, ngay cả trình kết xuất DOM cũng đủ nhanh cho hầu hết các mục đích.

Nếu bạn quyết định tạo thư viện của riêng mình, tôi vẫn khuyên bạn nên sử dụng canvas vì nó dường như hoạt động tốt hơn, cho phép các cảnh lớn hơn. Chỉ sử dụng WebGL sẽ giới hạn cơ sở người dùng và việc triển khai rất phức tạp (Unicodetiles có cơ chế dự phòng tự động).

Một thư viện, mà tôi đã nghe đề nghị rất nhiều thời gian gần đây là rot.js . Nó đặc biệt hướng đến roguelike vì nó đi kèm với hệ thống FOV và máy phát ngục tối. Nếu bạn muốn có một gói hoàn chỉnh, đây có thể là cách để đi.

Tôi nghĩ rằng cách hiệu quả nhất sẽ chỉ là giả mạo nó. Kết xuất với một số thành phần đích bằng phông chữ sprite tích hợp của riêng bạn như thể bạn đang hiển thị màn hình 2D bình thường. Cách tiếp cận này đảm bảo không có nội dung lạ xảy ra khi mọi người thiếu phông chữ hoặc đang sử dụng một ngôn ngữ rất khác (tiếng Trung, tiếng Nga).

Phông chữ và văn bản là một trong những điều khó khăn nhất để có được pixel hoàn hảo ở tất cả các địa điểm trên tất cả các trình duyệt. Ngay cả khi nhúng phông chữ và sử dụng một số trình duyệt ma thuật CSS và cài đặt khả năng sử dụng vẫn có thể ghi đè và thay đổi nó. Đối với các trang web bình thường, văn bản hoàn hảo pixel không phải là vấn đề nhưng trong các trò chơi như Pháo đài lùn, một vài pixel có thể dẫn đến chế độ xem cực kỳ không mạch lạc. Ngay cả khi không sử dụng trình duyệt nhưng một ứng dụng bình thường vẫn có vấn đề với kết xuất văn bản. Vì vậy, ngay cả Pháo đài Lùn cũng sử dụng cách tiếp cận mà tôi đã mô tả.

http://en.wikipedia.org/wiki/Dwarf_Fortress

Màn hình trên màn hình sử dụng trang mã được sửa đổi một chút 437 ký tự với 16 màu khác nhau được triển khai dưới dạng bitmap, được hiển thị bằng OpenGL

Chỉnh sửa: vì tôi nhận được một số bình luận nên tôi đã mở rộng câu trả lời một chút

Để tìm ra số lượng dòng và cột bạn cần xuất ra, bạn nên kiểm tra chiều rộng và chiều cao cửa sổ và thay đổi nó cho phù hợp. Nhớ nghe các sự kiện onResize và sửa đổi chiều rộng và chiều cao cho phù hợp.

Khi bạn muốn làm điều này theo cách văn bản , bạn có thể thực hiện việc này bằng cách sử dụng văn bản với phông chữ đơn cách và một bảng trong đó mỗi ô chứa một ký tự.

Để giải quyết các ký tự riêng lẻ, bạn có thể tạo một <table>số lượng hàng và cột chính xác, trong đó mỗi hàng <td>có một ID bao gồm tọa độ x và y của nó. Bằng cách đó, bạn có thể giải quyết các ô riêng lẻ bằng ID và thay đổi bên trongHTML của chúng để thay đổi chữ cái và thay đổi lớp css của chúng để thay đổi màu sắc của chúng.

Tuy nhiên, sử dụng canvas , có thể nhanh hơn vì bạn không phải thao tác một cây DOM lớn cho mỗi ký tự bạn phải thay thế. Nhân tiện, Pháo đài Lùn đang làm một điều tương tự. Các ký tự được sử dụng để thể hiện các đối tượng thực sự là bitmap, không phải là đầu ra văn bản thực sự và chúng được vẽ bằng API đồ họa 2d. Canvas HTML5 được trang bị tốt cho việc này. Nó có phương thức context.fillText cho phép bạn vẽ văn bản trên khung vẽ. Điều này có thể được sử dụng để vẽ các ký tự cá nhân. Bạn có thể thay đổi kích thước và mặt phông chữ bằng cách thao tác các biến bối cảnh.font và màu sắc của mỗi chữ cái bằng cách gọi bối cảnh.fillStyle .

Lưu ý rằng việc gọi fillText hàng trăm lần trên mỗi khung hình có thể chậm, vì phông chữ raster rất tốn kém và không có trình duyệt nào tôi biết sử dụng bộ nhớ đệm. Điều đó có nghĩa là khi bạn kết xuất cùng một chữ cái với cùng một cài đặt một trăm lần, nó sẽ được raster lại một trăm lần. Để tăng hiệu suất, bạn có thể lưu trữ sự xuất hiện rasterized của mỗi chữ cái với mỗi màu trên một khung vẽ ẩn và sau đó vẽ các khung vẽ ẩn này bằng bối cảnh . Sao chép từ canvas này sang canvas khác thường nhanh hơn rất nhiều so với rasterization phông chữ.

Tôi hiện đang phát triển một trò chơi 2d bằng canvas và nhận thấy rằng trình ăn FPS lớn nhất là bản vẽ phông chữ. Khi tôi thêm bộ đệm cho văn bản rasterized, nó đã cải thiện hiệu suất rất nhiều.

OK đây chỉ là một cú đâm trong bóng tối và tôi không biết điều đó tái hiện như thế nào.

Về cơ bản, bạn sử dụng các bảng điều khiển lừa tương tự (còn gọi là thiết bị đầu cuối) đã làm trong thời xa xưa. Đầu tiên bạn bắt đầu với một phông chữ đơn cách. Bạn có M dòng với N ký tự. Vì vậy, bạn chỉ cần đổ văn bản vào một div đủ rộng (chiều rộng: N em?) Và đặt mỗi N ký tự ngắt dòng; trong trường hợp này a <br/>thay vì a \n.

Thủ thuật là thay thế bộ đệm, bằng char hoặc char toàn bộ nội dung cùng một lúc bằng tập lệnh java.

Nếu bạn muốn thực sự cụ thể, bạn có thể sử dụng khuôn mặt @ phông chữ để đảm bảo bạn có cùng một phông chữ đơn cách ở mọi nơi.

Hãy suy nghĩ về glyphs. Tách rời màn hình hiển thị của văn bản từ ý nghĩa đằng sau nó. Ví dụ:

(mã giả)

if (display.hitGlyph)
    glyph = Glyph.Asterisk;

display(glyph);

Và sau đó trong mã cơ bản của bạn để xác định tập bản đồ glyph, chỉ cần làm một cái gì đó như:

Glyph.Asterisk = "*";

Trên thực tế, bản đồ glyph có thể là một tra cứu vào bảng ascii với các bảng mã khác nhau. Điểm ở đây chỉ đơn thuần là để phân biệt khi nào sẽ hiển thị, với những gì sẽ được hiển thị. Tôi sẽ khuyên bạn nên làm một khung từ đầu. Nó sẽ cho bạn nhiều tự do hơn.