¿Buenas soluciones tecnológicas para construir un mapa ascii y personajes en movimiento en un navegador (como una fortaleza enana)? [cerrado]

Me gustaría construir una aplicación web para el sitio web de mi juego que implique el uso de caracteres de texto para representar animales y personas, y que se muevan en cuadrados de mapas con IA independiente (impulsada por el servidor).

Esencialmente, un mapa de fortaleza enana en el navegador: con criaturas en movimiento, mobs, npcs y pcs. Aunque no es que no esté buscando alcanzar esta escala, probablemente comenzaría a mostrar una cuarta parte de este contenido en cualquier momento.

Probablemente algunos de los mosaicos de fondo / inmóviles podrían cargarse estáticamente. Pero para las criaturas / animales y las cosas que pueden moverse, no estoy seguro de qué soluciones tecnológicas serían más efectivas.

Soy consciente de <canvas>que no sé si sus capacidades se ajustan a este caso de uso. Ciertamente, será necesaria cierta cantidad de JavaScript.

¿Existen bibliotecas javascript o bibliotecas de lienzo que se ajusten a este caso de uso? ¿Otra tecnología que no conozco? ¿Alguien sabe de algún ejemplo de sitios web que hayan hecho algo similar a esto, para que yo pueda sacar ideas de ellos?

De hecho, he creado una biblioteca de visualización de caracteres para la web, Unicodetiles.js , que no solo he dedicado un tiempo a optimizar, sino que también explora diferentes formas de presentar el texto; tiene tres renderizadores:

1. DOM, que utiliza una matriz de <div>elementos para representar cada glifo con un primer plano personalizable y colores de fondo.
2. Lienzo, que dibuja los personajes usando el <canvas>elemento. Esto es mucho más rápido, y hay pruebas de rendimiento que lo respaldan: http://tapiov.net/unicodetiles.js/tests/
3. WebGL, que utiliza un elemento de lienzo para crear una textura de fuente y luego se representa con WebGL, que es aún más rápido y escalable a grandes tamaños de ventana gráfica, pero no es tan compatible con los navegadores.

Tenga en cuenta que las pruebas de rendimiento vinculadas pueden ser bastante extremas, cambiando cada personaje en cada cuadro. En la práctica, incluso el procesador DOM es lo suficientemente rápido para la mayoría de los propósitos.

Si decides hacer tu propia biblioteca, aún te recomiendo usar el lienzo porque parece funcionar mejor, permitiendo escenas más grandes. El uso de solo WebGL limitará la base de usuarios y su implementación es compleja (Unicodetiles tiene un mecanismo de respaldo automático).

Otra biblioteca, que he oído sugerí mucho recientemente es rot.js . Está específicamente dirigido a roguelikes, ya que viene con, por ejemplo, sistema FOV y generadores de mazmorras. Si desea un paquete completo, este podría ser el camino a seguir.

Creo que la forma más efectiva sería fingirlo. Renderizando a algún elemento objetivo usando su propia fuente de sprite incorporada como si estuviera renderizando una pantalla 2D normal. Este enfoque garantiza que no ocurran cosas extrañas cuando a las personas les faltan fuentes o utilizan un idioma muy diferente (chino, ruso).

Las fuentes y los textos son una de las cosas más difíciles de conseguir píxeles perfectos en todas las configuraciones regionales en todos los navegadores. Incluso al incrustar una fuente y usar un navegador mágico CSS, la configuración de usabilidad puede anularla y alterarla. Para los sitios web normales, el texto con píxeles perfectos no es un problema, pero en juegos como Dwarf Fortress unos pocos píxeles pueden conducir a una vista extremadamente incoherente. Incluso cuando no se utiliza un navegador, sino una aplicación normal, existen problemas con la representación de texto. Entonces, incluso Dwarf Fortress usa el enfoque que describí.

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

Las visualizaciones en pantalla utilizan la página de códigos ligeramente modificada 437 caracteres en 16 colores diferentes implementados como mapas de bits, renderizados con OpenGL

Editar: porque recibí algunos comentarios, extendí un poco la respuesta

Para averiguar el número de líneas y columnas que necesita generar, debe verificar el ancho y alto de la ventana y cambiarlo en consecuencia. Recuerde escuchar los eventos onResize y modificar el ancho y la altura en consecuencia.

Cuando desee hacer esto de forma textual , puede hacerlo utilizando texto con una fuente monoespaciada y una tabla donde cada celda contenga un carácter.

Para abordar caracteres individuales, puede crear un <table>con el número correcto de filas y columnas, donde cada uno <td>tiene una ID que consiste en sus coordenadas x e y. De esa manera, puede direccionar celdas individuales por ID y cambiar su innerHTML para cambiar la letra y cambiar su clase css para cambiar su color.

Sin embargo, el uso de un lienzo puede ser más rápido porque no tiene que manipular un árbol DOM grande para cada personaje que tiene que reemplazar. La Fortaleza Enana está haciendo algo similar, por cierto. Los caracteres que se utilizan para representar objetos son en realidad mapas de bits, no salida de texto verdadero, y se dibujan con API gráficas 2D. El lienzo HTML5 está bien equipado para esto. Tiene el método context.fillText que le permite dibujar texto en el lienzo. Esto se puede usar para dibujar personajes individuales. Puede cambiar el tamaño y la cara de la fuente manipulando las variables context.font y el color de cada letra llamando a context.fillStyle .

Tenga en cuenta que llamar a fillText cientos de veces por fotograma podría ser lento, porque rasterizar las fuentes es costoso y ningún navegador que conozca utiliza el almacenamiento en caché. Eso significa que cuando representa la misma letra con la misma configuración cien veces, se volverá a rasterizar cien veces. Para aumentar el rendimiento, puede almacenar en caché la apariencia rasterizada de cada letra con cada color en un lienzo oculto y luego dibujar estos lienzos ocultos usando context.drawImage . Copiar de un lienzo a otro suele ser mucho más rápido que la rasterización de fuentes.

Actualmente estoy desarrollando un juego en 2D con lienzo, y noté que el mayor comedor de FPS era el dibujo de la fuente. Cuando agregué un caché para texto rasterizado, mejoró mucho el rendimiento.

OK, esto es solo una puñalada en la oscuridad y no sé cómo se presenta.

Básicamente usas las mismas consolas de trucos (también conocido como terminal) que solían hacer en los viejos tiempos. Primero comienzas con una fuente monoespacial. Tienes M líneas con N caracteres. Entonces, simplemente volcar el texto en un div que sea lo suficientemente ancho (ancho: ¿N em?) Y poner a cada N caracteres un salto de línea; en este caso a en <br/>lugar de a \n.

El truco es reemplazar el búfer, ya sea char por char o todo el contenido a la vez con script java.

Si quieres ser realmente específico, puedes usar @ font-face para asegurarte de tener la misma fuente monoespacio en todas partes.

Piensa en términos de glifos. Desacoplar la visualización del texto del significado detrás de él. Por ejemplo:

(pseudocódigo)

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

display(glyph);

Y luego, en su código subyacente para definir el atlas de glifos, simplemente haga algo como:

Glyph.Asterisk = "*";

De hecho, el atlas de glifos puede ser una búsqueda en una tabla ASCII con varias codificaciones. El punto aquí es simplemente separar cuándo mostrar, con lo que se debe mostrar. Recomendaría hacer un marco desde cero. Te daría más libertad.