Ayuda con las animaciones del personaje

1

Hola a todos, tengo un problema y es que no se me ocurre una forma de reproducir una animación para cuando el personaje va en diagonal, el problema es que al ir en diagonal no reproduce ninguna animación y queda medio feo.
Con este código yo muevo y reproduzco animaciones del personaje:

let velocidad = 7;
    if (this.pilas.control.izquierda || this.pilas.control.tecla_a) {
      this.x -= velocidad;
      this.animacion = "zanahoria_izq";
    }

    if (this.pilas.control.derecha || this.pilas.control.tecla_d) {
      this.x += velocidad;
      this.animacion = "zanahoria_der";
    }

    if (this.pilas.control.arriba || this.pilas.control.tecla_w) {
      this.y += velocidad;
      this.animacion = "zanahoria_atras";
    }

    if (this.pilas.control.abajo || this.pilas.control.tecla_s) {
      this.y -= velocidad;
      this.animacion = "zanahoria_frente";
    }
    if (!this.pilas.control.abajo && !this.pilas.control.tecla_s && !this.pilas.control.arriba && !this.pilas.control.derecha && !this.pilas.control.izquierda && !this.pilas.control.tecla_w && !this.pilas.control.tecla_d && !this.pilas.control.tecla_a) {
      this.animacion = "zanahoria_quieta";
    }

Pensaba en crear una función que controlara las animaciones, pero no soy tan buen programador y no se como armar una cadena lógica larga que combine && y ||. La otra opción es quitar lo de que pueda moverse con las teclas WASD, pero me gustaría dejarlo.

2

Hola @lukeitor!!, se me ocurre que tal vez una buena forma de resolverlo es teniendo algunas variables auxiliares como izquierda, derecha, arriba y abajo. Las variables las podes declarar al principio del código así siempre valen false hasta que le cambies de valor.

No puse el código en sí para definir la animación, pero dejé unos comentarios para que veas dónde habría que cargarlas. Deberían ser unas 8 animaciones más la animación de reposo si no equivoco:

let velocidad = 7;

let derecha = false;
let arriba = false;
let izquierda = false;
let abajo = false;

if (this.pilas.control.izquierda || this.pilas.control.tecla_a) {
  this.x -= velocidad;
  izquierda = true;
}

if (this.pilas.control.derecha || this.pilas.control.tecla_d) {
  this.x += velocidad;
  derecha = true;
}

if (this.pilas.control.arriba || this.pilas.control.tecla_w) {
  this.y += velocidad;
  arriba = true;
}

if (this.pilas.control.abajo || this.pilas.control.tecla_s) {
  this.y -= velocidad;
  abajo = true;
}

if (arriba) {
  if (derecha) {
    // mostrar animacion diagonal-arriba-derecha
  } else {
    if (izquierda) {
      // mostrar animacion diagonal-arriba-izquierda
    } else {
      // mostrar animación solo para arriba.
    }
  }
} else {
  if (abajo) {
    if (derecha) {
      // mostrar animación diagonal-abajo-derecha
    } else {
      if (izquierda) {
        // mostrar animación diagonal-abajo-izquierda
      } else {
        //mostrar animación solo para abajo
      }
    }
  } else {

    if (derecha) {
      // mostrar animación para ir hacia la derecha (sin pulsar arriba ni abajo)
    } else {
      if (izquierda) {
        // mostrar animación para ir hacia la izquierda (sin pulsar arriba ni abajo)
      }
    }
  }
}

if (!arriba && !abajo && !izquierda && !derecha) {
  // mostrar animación del personaje en reposo, sin que se esté pulsando ninguna tecla
}

¡Abrazo!

1 Like
3

muchísimas gracias, así es más fácil que la forma en la que yo pensaba hacerlo la verdad