Como ya comenté en anteriores entradas, la principal novedad de la v2 iba a ser el mapa. Ahora tus fábricas, almacenes y garajes tendrán ubicación y vamos a necesitar alguna forma de representarla.

Decidir dónde colocas cada edificio será bastante importante, porque estos están vinculados entre ellos. Por ejemplo, necesitarás tener un parking al lado de un almacén, de modo que cuando compres material tengas con qué enviarlo. Lo mismo con el equipamiento, tendrás que tener un almacén cerca de la granja para que sea posible dejar la producción.

Librerías para pintar en canvas

Hoy en día hay múltiples librerías para pintar sobre un elemento canvas en la web.

Está por ejemplo Pixie.JS, Phaser, Babylon, etc... En mi caso tengo algo de experiencia tanto con Pixie como con Phaser y optaré por este último porque es más completo.

Diseño del mapa

Para no complicarnos la vida, el mundo será un grid 2D. Así que haremos un sistema simple que reciba un listado de "tiles". Cada tile, le indicará al mapa su posición (x,y) y el tipo: un río, tierra, carretera, un parking, etc.. Aparte de eso también estaría bien poder hacer zoom y ya la última funcionalidad que restaría es poder interactuar con los tiles.

Al clicar un tile, habría que obtener la información de qué demonios hay en el mismo, de quién es y si está a la venta. También, como es posible que la gente termine teniendo muchas tierras, haremos que se pueda asignar un nombre a estas. Así será más fácil seleccionar el trocito que quieres en el resto de pantallas.

Para hacer simple también el cálculo de distancias, cada tile será 1km.

Inspiración visual

Como a mí el diseño de interfícies se me da como el culo, le dejaremos a nuestro amigo GPT que nos proponga un diseño, dándole cómo única referencia las fichas del monopoly:

Por cierto, ¿Sabías que exiten billetes de monopoly laminados en oro?

Y el resultado es...

Maldita IA, es justo lo que quería aún sin saber qué quería.

Para el mapa también le voy a pedir a la IA que me haga la imagen de cada tipo de celda:

(Ignorad los .png, los he hecho yo, de ahí a que sean feos.)

Componentes del mapa

Con todo esto ya se puede componer el mapa y sólo queda hacer que sea fácil de implementar en cualquier sección. Para ello el mapa será un componente y crearemos también otro componente que sea un selector, para que si por ejemplo estás en la sección de almacén, puedas saltar rápido entre únicamente tus almacenes.

¡Bastante guay!