elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Rotar solo el drawImage javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Rotar solo el drawImage javascript  (Leído 3,263 veces)
SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Rotar solo el drawImage javascript
« 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
  1. ctx.drawImage(obj1,serpiente[i].x, serpiente[i].y);
  2.  


En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: Rotar solo el drawImage javascript
« Respuesta #1 en: 15 Abril 2020, 05:49 am »

creo que buscas es el transform

https://www.w3schools.com/tags/canvas_transform.asp


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.156



Ver Perfil
Re: Rotar solo el drawImage javascript
« Respuesta #2 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:



- Luego agregar la imagen al canvas usando las coordenadas adecuadas, por ejemplo si quiero el sprite(2, 3) se agregaría así:

Código
  1. ctx.drawImage(img, 64*1, 64*2, 64, 64, 0, 0, 64, 64)

- 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
  1. ctx.save()
  2. ctx.translate(800,0)
  3. ctx.scale(-1,1)
  4. ctx.drawImage(img,800-300,0)
  5. ctx.restore()
En línea

SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Re: Rotar solo el drawImage javascript
« Respuesta #3 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!
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
rotar video
Multimedia
ostkapi 2 2,281 Último mensaje 9 Mayo 2005, 10:07 am
por ostkapi
Rotar video
Multimedia
4aicampo 5 13,341 Último mensaje 22 Diciembre 2006, 14:50 pm
por Songoku
rotar div
Desarrollo Web
basickdagger 1 2,367 Último mensaje 14 Junio 2013, 22:31 pm
por engel lex
javascript crear un margen donde solo se pueda dar click
Desarrollo Web
SrTrp 0 1,709 Último mensaje 12 Febrero 2017, 01:15 am
por SrTrp
[Resuelto] [Pregunta]: Input sólo letras con javascript
Desarrollo Web
Leguim 3 3,140 Último mensaje 27 Septiembre 2019, 16:08 pm
por MinusFour
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines