0

Me encuentro con el desarrollo de un proyecto en JavaScript, HTML y CSS y tengo una duda. Se trata de un juego en el que un personaje se va moviendo alrededor de un mapa. Mi objetivo (y duda) es a la hora de crear un minimapa (que puede consultar el personaje para saber su posición). Tengo la imagen con ese mapa, y con cada movimiento que hace el personaje actualizo el píxel que correspondería entre el mapa por donde se mueve y la imagen correspondiente a esa mapa. La imagen del minimapa es un png que se inserta en una ventana de modal, no utilizo canvas en este caso. Por tanto, el problema llega a la hora de insertar un texto (un punto es lo que quiero en mi caso) para situar al personaje en dicho minimapa, en el pixel exacto que quiero. Supongo que se trata de un problema más orientado a CSS. Inserto por aquí el código que dispongo para que le echéis un vistazo. Gracias de antemano.

function mostrarMapa(){
  $('#mostrarMapa').remove();
  //Mapa (imagen png) que se muestra
  var cadena = '<div align="center" id="mostrarMapa"><h5>Su Posición</h5>';
  cadena = cadena + '<div><img id="mapa" src="cliente/recursos/mundo-realista.png" 
     style="width:512pt;height:296pt" ></div></div>';

  $('#verMapa').append(cadena);
}
//Función por la que se pasan los datos exactos con los píxeles que corresponderían a esa mapa (imagen png)
function pintarMapa(x,y){
  console.log(x+' '+y);
}

Cada vez que se mueve el personaje se hace una actualización de la posición y su correspondencia con los píxeles (x,y) de la imagen con id=mapa, y se pasan esos datos a la función pintarMapa(x,y). El css actual que tengo es este.

#mostarMapa,#mapa{
  display: block;
  position: relative;   
}

Algo parecido a eso es lo que querría, borrando y poniendo el punto con cada actualización de movimiento que haga el personaje. Teniendo en los píxeles x e y dicha actualización

introducir la descripción de la imagen aquí

2
  • 1
    Se que a lo mejor ya tienes una buena parte del juego creado en html, css y javascript, pero te invito a leer sobre el elemento canvas si es que no lo conoces: w3schools.com/html/html5_canvas.asp es mucho mejor usar canvas si vas a hacer un juego, aunque siempre si no deseas usar canvas podemos mirar que hacer en el código que propones.
    – Layer
    el 20 abr. 2020 a las 15:04
  • Sí, si de hecho para el juego utilizo pixi.js que utiliza canvas. Pero en este caso el minimapa (la imagen) quiero que aparezca en una ventana de modal (#verMapa) sobre el canvas. Eso lo tengo hecho, lo que falta es situar el punto en la propia imagen. Gracias! el 20 abr. 2020 a las 16:31

2 respuestas 2

1

No he usado pixi.js nunca pero se que puedes dibujar nativamente imagenes con canvas directamente e incluso escalarlas y transformarlas según lo que desees, por lo tanto en pixi.js tambien se podrá, ya que no tiene sentido que pixi si usa canvas no soporte esto, sería una mala librería entonces, lo unico es que tendrias que ver cual es el equivalente de esta función para dibujar una imagen en pixi, así que miremos la función CanvasRenderingContext2D.drawImage();.

como ya hay una referencia muy muy buena acerca de este metodo entonces te dejare la referencia para que la estudies mas a fondo:

CanvasRenderingContext2D.drawImage()

Aquí un código ejemplo, te recomiendo mucho que amplies el snippet para verlo completo:

const canvas = $("#canvas")[0];
const ctx = canvas.getContext("2d");
const mapRoute = "https://thumbs.dreamstime.com/b/fondo-del-juego-de-la-historieta-57884203.jpg";

const mapWidth = 800;
const mapHeight = 600;

//Baja el valor 8 si quieres mas grande el minimapa.
const miniMapWidth = mapWidth / 8;
const miniMapHeight = mapHeight / 8;

//Asumamos que nuestro mapa es una imagen entera
function loadMap(route, name){

  return new Promise((res, rej) =>{
  
    const image = new Image();
    
    image.onload = ()=>{
      res({map: image, name});
    }
    
    image.onerror = e =>{
      rej(e);
    }
    
    image.src = route;
  
  })

}

function setup(){
  canvas.width = mapWidth;
  canvas.height = mapHeight;
}

function drawMap(image, ...params){
  ctx.drawImage(image, ...params);
}

loadMap(mapRoute, "mapa1").then(mapa =>{
  //Mapa cargado correctamente
  
  //Dibujamos el mapa entero...
  drawMap(mapa.map, 0, 0, mapWidth, mapHeight);
  
  //Dibujamos el mapa escalado simulando ser un minimapa
  drawMap(
    mapa.map, 
    0, 0,
    mapWidth, mapHeight,
    mapWidth - miniMapWidth, 0,
    miniMapWidth, miniMapHeight
  );
}).catch(e =>{
  //El mapa no ha podido ser cargado...
  console.error(e);
});

setup();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id = "canvas">Tu navegador no soporta el elemento canvas!</canvas>

Ademas recordemos que no es necesario que sea la imagen completa, si por ejemplo entre el mapa se interpone un menú y no quieres que eso sea dibujado como parte del minimapa, siempre puedes cortar esa parte haciendo uso del método CanvasRenderingContext2D.drawImage.

Ahora bien, para poder que se actualice en el minimapa la pocisión actual del minimapa de tu personaje, esto dependerá de como tengas el mapa, si tienes la idea de tu minimimapa como si fuese una versión pequeña de tu mapa pero en la que se muestra tu personaje de una manera distinta entonces lo mas fácil es usar las coordenadas que se van actualizando en tu personaje, dividirlas en la escala en la que se encuentra tu mapa y dibujar tu punto o tu sprite que vayas a usar como puntero o personaje en el minimapa usando estas coordenadas.

La escala del minimapa dibujado en el snippet es de 1:8 es decir, es 8 vecez mas pequeño que el mapa original.

Eso si, tambien deberás tener en cuenta en que punto del mapa dibujaras tu minimapa, es decir, si lo dibujaras en la esquina superior izquierda, superior derecha, inferior izquierda o inferior derecha, ya que esto influira en si debes restarle o sumarle algo a las coordenadas mapeadas de tu personaje en el mapa a full size.

Para el caso en el que se encuentra el minimapa en el snippet tendrías que primero dividir la pocisión actual de tu personaje tanto en x como en y por la escala en la que se encuentra el minimapa.

Y luego a cada una de estas coordenadas sumarle la coordenada en la que se encuentra el minimapa, en este caso para hallarla sería algo como esto:

coordXJugadorEnMiniMapa = (anchoMapa - anchoMiniMapa) + (actualCoordXJugador / scalaMiniMapa);

coordYJugadorEnMiniMapa = 0 + (actualCoordYJugador / scalaMiniMapa);

Donde coordYJugadorEnMiniMapa el primer componente es 0 debido a que esta pegado al borde superior.

Con esto ya te darás mas o menos una idea de como se puede hacer esto en tu código real, no te puedo dar una ayuda mas a fondo porque no he usado pixi.js pero con esto ya podrás hacer una correcta implementación en tu código usando pixi.js ademas, no he puesto un ejemplo haciendo esto de arriba que dije para poder determinar la coordenada X y Y en el minimapa debido a que me tendría que poner a crear un minimotor de juego añadir listeners y demas... mucha cosa por hacer.

Pero lo que si te puedo decir es que puedes dibujar sobre el minimapa tranquilamente, es decir, no tomes el minimapa como si fuera una imagen de HTML la cuál si lo es en realidad... pero tomala mas bien como un simple conjunto de pixeles en pantalla cuando estes usando canvas, esto quiere decir que puedes dibujar en cualquier punto de la imagen que te plazca.

EDIT

Decidi editar la respuesta para poner un ejemplo de como se dibujaría este texto en una imagen, realmente no estariamos dibujandolo en una imagen, si no en un conjunto de pixeles que forman una imagen, ya que como tal nuestro canvas no dibuja imagenes, dibuja pixeles.

const canvas = $("#canvas")[0];
const ctx = canvas.getContext("2d");
const mapRoute = "https://thumbs.dreamstime.com/b/fondo-del-juego-de-la-historieta-57884203.jpg";

const mapWidth = 800;
const mapHeight = 600;
const textoADibujar = "Soy un\ntexto de\nEjemplo".split("\n");

//Baja el valor 8 si quieres mas grande el minimapa.
const miniMapWidth = mapWidth / 8;
const miniMapHeight = mapHeight / 8;

//Asumamos que nuestro mapa es una imagen entera
function loadMap(route, name){

  return new Promise((res, rej) =>{
  
    const image = new Image();
    
    image.onload = ()=>{
      res({map: image, name});
    }
    
    image.onerror = e =>{
      rej(e);
    }
    
    image.src = route;
  
  })

}

function setup(){
  canvas.width = mapWidth;
  canvas.height = mapHeight;
}

function drawMap(image, ...params){
  ctx.drawImage(image, ...params);
}

function drawText(textoADibujar, shapeWidth, shapeHeight, coordX, coordY, fontSize = 10, color = "#fff", space = 10){
  ctx.save(); //Salva el estado actual del canvas
  ctx.strokeStyle = color;
  /*
    Se llaman template strings y permiten usar variables dentro de
    una cadena completa de texto.
  */
  ctx.font = `${fontSize}px arial`;
  ctx.textAlign = "center";
  
  for(let i = 0; i < textoADibujar.length; i++){
    ctx.strokeText(textoADibujar[i], (shapeWidth / 2) + coordX, (shapeHeight / textoADibujar.length) + (space * i) + coordY);
  }
  
  ctx.restore();  //Devuelve el canvas a su estado original
}

loadMap(mapRoute, "mapa1").then(mapa =>{
  //Mapa cargado correctamente
  
  //Dibujamos el mapa entero...
  drawMap(mapa.map, 0, 0, mapWidth, mapHeight);
  
  //Dibujamos el mapa escalado simulando ser un minimapa
  drawMap(
    mapa.map, 
    0, 0,
    mapWidth, mapHeight,
    mapWidth - miniMapWidth, 0,
    miniMapWidth, miniMapHeight
  );
  
  drawText(textoADibujar, miniMapWidth, miniMapHeight, mapWidth - miniMapWidth, 0);
}).catch(e =>{
  //El mapa no ha podido ser cargado...
  console.error(e);
});

setup();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id = "canvas">Tu navegador no soporta el elemento canvas!</canvas>

Entonces tenemos los siguientes cambios:

const textoADibujar = "Soy un\ntexto de\nEjemplo".split("\n");

La función split hace parte de los strings, y lo que hace es crearnos un arreglo de strings apartir de un delimitador de una cadena, en nuestro caso la cadena "\n" que se traduce a un salto de linea, por lo tanto lo que guarda texto a dibujar es enrealidad las partes de nuestro texto divididas como un array.

A continuación tenemos una nueva función:

function drawText(textoADibujar, shapeWidth, shapeHeight, coordX, coordY, fontSize = 10, color = "#fff", space = 10){
  ctx.save(); //Salva el estado actual del canvas
  ctx.strokeStyle = color;
  /*
    Se llaman template strings y permiten usar variables dentro de
    una cadena completa de texto.
  */
  ctx.font = `${fontSize}px arial`;
  ctx.textAlign = "center";

  for(let i = 0; i < textoADibujar.length; i++){
    ctx.strokeText(textoADibujar[i], (shapeWidth / 2) + coordX, (shapeHeight / textoADibujar.length) + (space * i) + coordY);
  }

  ctx.restore();  //Devuelve el canvas a su estado original
}

Donde aquí lo mas notable a explicar es que:

ctx.textAlign = "center";

Centra el texto horizontalmente y hace que el origen del texto sea su centro, es decir, ahora contamos desde su centro.

Lo siguiente a axplicar:

ctx.font = `${fontSize}px arial`;

Esos backticks `` son llamados template strings y nos permiten dentro de estos usar tanto cadenas de texto normalmente como variables dentro, donde para usar una variable la encerramos así: ${variable}

Ahora a explicar este loop:

for(let i = 0; i < textoADibujar.length; i++){
    ctx.strokeText(textoADibujar[i], (shapeWidth / 2) + coordX, (shapeHeight / textoADibujar.length) + (space * i) + coordY);
}

Lo primero es que recordemos que nuestra función recibe como parametros un array de cadenas de texto, en cuál cada cadena de texto en el array significa que hay que hacer un salto de línea.

Lo segundo es que para poder nosotros determinar el centro donde se encuentra nuestro miniMapa tendremos que pasarle el origen de sus coordenadas en el canvas y tambien su anchura y altura, donde:

  • shapeWidth: es el ancho de nuestro minimapa
  • shapeHeight: es el alto de nuestro minimapa
  • coordX: es cuanto queremos desplazarnos en x respecto al centro del minimapa.
  • coordY: es cuanto queremos desplazarnos en y respecto al centro del minimapa.
  • space: es la cantidad de espació que va a haber entre una linea del texto y otra de manera vertical, si es 0 el texto estara super puesto en el mismo sitio.

Entonces iteramos sobre nuestras cadenas de texto y con:

ctx.drawText(texto, coordX, coordY);

dibujamos un texto sin relleno, en este caso como es un loop vamos dibujando uno por uno los textos dependiendo del array.

como coordenada X hacemos el siguiente calculo:

(shapeWidth / 2) + coordX

Como anteriormente especificamos:

ctx.textAlign = "center";

entonces el origen que debemos calcular en X debe ser el centro de nuestra forma, en nuestro caso nuestro minimapa para que este en el centro, adicionalmente le sumamos coordX el cuál simplemente sería el dezplasamiento que hay que hacerle al texto en pixeles respecto al centro de nuestro minimapa, (en caso de que le hayas pasado un valor diferente de 0 al parametro coordX).

como coordenada Y calculamos lo siguiente:

(shapeHeight / textoADibujar.length) + (space * i) + coordY)

como:

ctx.textAlign = "center"

solo centra el texto horizontalmente y no verticalmente, entonces tendremos que hacer el centrado vertical de manera manual, para ello primero calculamos en cuantas secciones tendremos que dividir el espacio verticalmente equitativamente para que quepa nuestro texto:

(shapeHeight / textoADibujar.length)

Luego a esto le sumamos:

(space * i) + coordY

Que quiere decir que por cada iteración baje la linea en este caso 10px, es decir, que nos deje un espació de 10px entre linea (use 10px en el ejemplo), así que space * i en su segunda iteración valdría 10, luego a esto le sumamos el desplazamiento en Y que querramos.

con esto entonces ya tenemos preparada nuestra función y simplemente la usamos:

drawText(textoADibujar, miniMapWidth, miniMapHeight, mapWidth - miniMapWidth, 0);
3
  • Tambien existen opciones de transparencia en canvas, por si deseas que el minimapa tenga cierta transparencia, pero ahora mismo no recuerdo exactamente cuál era la transformación que permitia esto... pero sí, puedes dibujar tambien una imagen con cierta opacidad en canvas.
    – Layer
    el 20 abr. 2020 a las 17:34
  • Oops lo siento, lo que quieres es insertar texto en el minimapa, pero no se si eso sea conveniente, es decir, tendrías que hacer la letra muy pequeña para que quepa en el minimapa, de lo contrario se desbordaría... y aparte canvas no soporta por alguna razón saltos de línea, tendrías que hacer operaciones un tanto mas largas para poder hacer saltos de linea, y pues... a no ser de que lo hagas estatico para que no se mueva y lo acomodes de acuerdo a ello... no creo que convenga poner texto en el minimapa, a menos que vaya ser estatico y pequeño el texto.
    – Layer
    el 20 abr. 2020 a las 17:41
  • Si osea, lo he leído todo. Pero el problema no viene por dibujar sobre el canvas en sí. Ahora mismo yo sitúo la imagen de ese minimapa (la inserto como HTML <img>), sobre una ventana de modal. Por tanto lo que quiero es moverme por esa imagen para escribir sobre ella un punto, únicamente, que simule la posición del usuario en el mapa real (canvas). El problema como he comentado, viene en moverme al pixel exacto de la imagen el 21 abr. 2020 a las 8:55
1

con respecto a como obtener una coordenada en especial teniendo en cuenta la pocisión en el mapa usando solo html, css, javascript y no canvas, me puse a hardcodear un poco ciertas coordenadas absolutas para pocisionar el mapa en algo que no sea el centro, para mostrar que efectivamente esto funciona, para poder mostrarte un buen ejemplo, cuando me refiero a obtener ciertas coordenadas me refiero a las coordenadas que tendrían que ir según el minimapa, es decir calcular el mismo punto pero en el minimapa, pero para ello te voy a dar una introducción acerca del metodo:

HTMLElement.getBoundingClientRect();

Este metodo getBoundingClientRect, lo que nos permite es obtener principalmente un rectangulo de acuerdo a la pocisión de la ventana, en este caso obtiene principalmente las siguientes propiedades:

  • top respecto a la ventana del navegador
  • left respecto a la ventana del navegador
  • right respecto a la ventana del navegador
  • bottom respecto a la ventana del navegador
  • coordenada x respecto a la ventana del navegador
  • coordenada y respecto a la ventana del navegador

Como vemos estas ultimas dos propiedades conforman justo aquello que requerimos, es decir, las coordenadas X e Y de acuerdo a la distancia que hay entre los bordes de la ventana y nuestro elemento.

En pocas palabras, nos permite saber la pocisión origen x de nuestro minimapa y la pocision origen Y de nuestro minimapa, por lo cuál ya tendremos por donde empezar.

Ahora bien, ten en cuenta que para poder poner una imagen encima de otra lo que hice fue usar pocisionamiento absoluto (Espero estes familiarizado con este), lo cuál me permite poner una imagen encima de otra sin tener que usar canvas, con esto ya podemos mirar el siguiente ejemplo de código:

window.onload =()=>{

    const mapa = document.getElementById("mapa");
    const miniMap = new Image();

    //Nos devuelve la pocisión del mapa respecto a la ventana y demas propiedades.
    let rectanguloMapa = mapa.getBoundingClientRect();
    let rectanguloMiniMapa;
    let coordActualesCoordenadasJugador = {x: 60, y: 500};

    function setup(){
        miniMap.src = mapa.src;
        miniMap.id = "miniMap";
        miniMap.width = mapa.width / 8;
        miniMap.height = mapa.height / 8;
        document.body.appendChild(miniMap);
        rectanguloMiniMapa = miniMap.getBoundingClientRect();
    }

    function mainLoop(){

        /*
            Supongamos que este es tu mainloop, recuerda que para que el
            minimapa preserve el aspecto de tu mapa, deberás de dividir su
            ancho y alto por el mismo numero.
        */

        const coordenadaXJugadorEnMiniMapa = 
            rectanguloMiniMapa.x + ((rectanguloMapa.x + coordActualesCoordenadasJugador.x) / 8);
        const coordenadaYJugadorEnMiniMapa = 
            rectanguloMiniMapa.y + ((rectanguloMapa.y + coordActualesCoordenadasJugador.y) / 8);

        /*
            Entonces usamos estas coordenadas para dibujar tu pixel, en caso de que quieras
            dibujarlo en una determinada coordenada respecto al minimapa deberas hacer
            algo como esto:
        */

        /*
            Con respecto al minimapa supongamos que quieres poner un pixel en la coordenada x = 25 y y = 400,
            si quieres que este pixel, no se vea reflejado en el mapa, si no en el minimapa, entonces no pienses
            en las coordenadas del minimapa, piensa en las del mapa, y luego dividelas entre el factor de escalado
            del minimapa, esto dara como resultado la misma coordenada exacta pero con respecto al minimapa,
            pero claro, a esto debes sumarle la coordenada en la que se encuentra tu minimapa respecto a tu mapa:
        */
        let tuCoordenadaPersonalizadaDondeQuieresPonerElPixel = {x: 25, y: 400};
        const coordenadaEnElMiniMapa = {
            x: rectanguloMiniMapa.x + ((rectanguloMapa.x + tuCoordenadaPersonalizadaDondeQuieresPonerElPixel.x) / 8),
            y: rectanguloMiniMapa.y + ((rectanguloMapa.x + tuCoordenadaPersonalizadaDondeQuieresPonerElPixel.y) / 8)
        }

        console.log(`X jugador minimap: ${coordenadaXJugadorEnMiniMapa}, Y jugador minimap: ${coordenadaYJugadorEnMiniMapa}`);
        console.log(
            `coordenada del punto 
            x: ${tuCoordenadaPersonalizadaDondeQuieresPonerElPixel.x}, 
            y: ${tuCoordenadaPersonalizadaDondeQuieresPonerElPixel.y}
            respecto al minimapa:
            x: ${coordenadaEnElMiniMapa.x}, y: ${coordenadaEnElMiniMapa.y}`
        );
    }

    setup();
    mainLoop();

}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#mapa, #miniMap{
    position: absolute;
    top: 200px;
    left: 200px;
}

#miniMap{
    top: 200px;
    left: 900px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://thumbs.dreamstime.com/b/fondo-del-juego-de-la-historieta-57884203.jpg" alt="" id = "mapa"
    width = "800" height="600">
</body>
</html>

Donde podemos ver como es posible obtener nuestra coordenada especifica en el minimapa, es decir, podemos tanto obtener una coordenada que nosotros especifiquemos en el mapa y mapeandola al minimapa, como tambien podriamos obtener la coordenada x o y del personaje respecto al mapa en el minimapa, es decir, mapear la coordenada X e Y de nuestro personaje en el minimapa, se que en el snippet no se dibuja la coordenada, pero creo que es suficiente este ejemplo para demostrar que las coordenadas no son erroneas, intenta adaptarlo a tu código, espero funcione.

9
  • Por cierto miralo a pantalla completa porfavor.
    – Layer
    el 21 abr. 2020 a las 23:51
  • Muy buena solución, pero tengo una duda. Esta solución está pensada si el mapa ocupa toda la pantalla del navegador verdad? De tal forma hace luego este cálculo x: rectanguloMiniMapa.x + ((rectanguloMapa.x + tuCoordenadaPersonalizadaDondeQuieresPonerElPixel.x) / 8),, e igual con y. Sin embargo en mi caso, el mapa está ampliado (como zoom) y ocupa más que la ventana de navegador (por ello el minimapa para ver tu posición). Entonces getBoundingClientRect no me sería del todo útil para el mapa el 22 abr. 2020 a las 9:01
  • Lo que he pensado.. es si se pudiese utilizar para el minimapa, situado en mi ventana modal (de tal forma que tendría las coordenadas x e y respecto de la ventana del navegador como has indicado), y solo tendría que sumar dichas coordenadas a las coordenadas previas calculadas anteriormente. Probaré eso el 22 abr. 2020 a las 9:03
  • Muchas gracias por la ayuda y descubrirme este método, ya te contaré! el 22 abr. 2020 a las 9:03
  • Si el mapa es mas grande que la pantalla tu minimapa debería ser gigante tambien... de lo contrario va a haber cada vez menos precisión y mas problemas a la hora mapear las coordenadas del jugador en el minimapa, pero entonces por lo que veo tu juego no tiene camara fija, ya que de lo contrario el jugador siempre se vería en el minimapa y estaría en el centro, si no tienes camara fija, considera que el jugador no se salga de los limites visibles de la pantalla, porque de lo contrario sería mejor en el minimapa solo dibujar la region de la pantalla donde no se ve el jugador.
    – Layer
    el 22 abr. 2020 a las 18:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.