Título: Rotar solo el drawImage javascript Publicado por: SrTrp en 15 Abril 2020, 05:35 am Buenas estoy haciendo un "juego" donde tengo sprite pero necesito rotar la imagen, cuando intento usar el rotate o tranlate, todo el canvas se rota, se me ocurrio crear imagenes "sprites" para cada direccion pero me seria algo mas tedioso y tendria que cargar mas archivos e indagando encontre esas soluciones pero me rota todo el canvas y solo quiero mi opjeto este esmi codigo
Código
Título: Re: Rotar solo el drawImage javascript Publicado por: engel lex en 15 Abril 2020, 05:49 am creo que buscas es el transform
https://www.w3schools.com/tags/canvas_transform.asp Título: Re: Rotar solo el drawImage javascript Publicado por: EdePC en 15 Abril 2020, 19:03 pm Es completamente normal que todo el canvas se rote ya que estas rotando el ctx que es el canvas. Lo normal que tener un Sprite Sheet como el siguiente:
(https://i.stack.imgur.com/gZ3c5.png) - Luego agregar la imagen al canvas usando las coordenadas adecuadas, por ejemplo si quiero el sprite(2, 3) se agregaría así: Código
- El primer argumento es la imagen <img src="https://i.stack.imgur.com/gZ3c5.png"> - El segundo es la coordenada "x" en pixeles del sprite a extraer, se suele multiplicar por el tamaño del sprite para hallar la columna adecuada - El tercero es la coordenada "y" en pixeles del sprite a extraer, se suele multiplicar por el tamaño del sprite para hallar la fila adecuada - El cuarto y quinto son el tamaño en pixeles ancho y alto respectivamente del sprite a extraer desde el Sprite Sheet - El sexto y séptimo son las coordenas destino - El octavo y el noveno son los tamaños que tendrá el sprite dibujado en el canvas. Pero si quieres trabajar con un solo sprite y transformarlo, tienes la opción de guardar el estado de tu canvas (ctx.save()), luego voltear el canvas ya sea vertical u horizontalmente, dibujar tu sprite en las coordenadas adecuadas considerando que el canvas está volteado para al final restaurar tu canvas con canvas.restore() - El siguiente ejemplo muestra como dibujar una imagen (sprite) de 300x150 volteado horizontalmente en un canvas de 800x600 Código
Título: Re: Rotar solo el drawImage javascript Publicado por: SrTrp en 15 Abril 2020, 22:10 pm Muchas gracias a ambos, y si me estuve complicando la vida así que ya obte por un sprite sheet, gracias!
|