Movimientos en círculos

 En esta ocasión contaremos cómo mover un actor en círculos alrededor de otro usando un botón, la cual es una mecánica muy elegante y un tanto complicada de lograr. Divideremos el tutorial en dos: en una primera parte veremos el script o código de cada actor y en una segunda parte contaremos algunas modificaciones que se le pueden hacer.

Lo que queremos lograr es lo siguiente*:

*extraido de un juego para android que estoy haciendo

1.El script y su modo de uso.

Vamos a requerir 4 actores:

• Un actor que será el centro, en este caso una nave.
• Otro actor que se moverá en círculos alrededor del centro, en nuestro caso será una mira.
• Dos botones: uno moverá en el sentido horario, llamado horario_girar,  y otro en sentido anti horario, llamado antihorario_girar.

Nos quedaría algo así:

Y los correspondientes códigos serían:

• Para la Mira:

class mira extends Actor {

  angulo_con_nave: number;

  nave: Actor;

  iniciar() {

     this.angulo_con_nave = 0;

    //el cero determina la posición inicial de la mira

    this.nave = this.pilas.obtener_actor_por_nombre("nave");

  }

  actualizar() {

    //el 200 determina la distancia con la nave

    let x_distancia = 200 * Math.cos(this.angulo_con_nave);

    let y_distancia = 200 * Math.sin(this.angulo_con_nave);

    this.x = this.nave.x + x_distancia;

    this.y = this.nave.y + y_distancia;

  }

  //mensaje enviado por cada botón

  cuando_llega_el_mensaje_cambiar_angulo(datos) {

    let angulo = this.pilas.utilidades.convertir_radianes_a_angulos(this.angulo_con_nave);

    //datos.cantidad es el valor que envían los botones, no importa

     que el valor enviado sea negativo.

    angulo += datos.cantidad;

    this.angulo_con_nave = this.pilas.utilidades.convertir_angulo_a_radianes(angulo);

  }

}

• Para el botón de girar en sentido horario:

class horario_girar extends Actor {

  iniciar() {

    this. fijo = true;

  }

  

  cuando_hace_click() {

    //mensaje interceptado por la mira

    this.enviar_mensaje_global("cambiar_angulo", { cantidad: -10 })

// el -10 dice que la mira se moverá 10º en sentido anti horario,

     es decir en contra de las agujas del reloj, si lo cambiamos por -20,

     entonces se moverá 20º en sentido antihorario.

  }

}

• Para le botón de girar en sentido anti horario:

class antihorario_girar extends Actor {

  iniciar() {

    this. fijo = true;

  }

  cuando_hace_click() {

    //mensaje interceptado por la mira

    this.enviar_mensaje_global("cambiar_angulo", { cantidad: 10 })

   // el 10 dice que la mira se moverá 10º en sentido horario, es decir

     a favor de las agujas del reloj, si lo cambiamos por 20, entonces 

     se moverá 20º en sentido horario.

  }

}

Aquí les dejo el proyecto con este simple ejemplo: 

https://mega.nz/file/9IFARToS#TTcnvpVfxAKhRZm56oOhd60HydTDftPSz89QIS3W3LA

2 Algunas modificaciones fáciles de hacer

A continuación modificaremos los códigos para lograr algunas mecánicas nuevas.

Si quisiéramos mantener pulsado el botón y que la mira gire automáticamente y no tener que apretar varias veces, deberíamos agregar a los botones una variable booleana que se active al pulsar y se desactive al dejar de pulsar de tal forma que al estar en true active un contador que automaticamente haga girar la mira.

Si quisieramos lanzar un misil y que este fuera en la dirección que apunta la mira, deberíamos guardar el angulo_con_nave como una variable de proyecto y hacer que el misil se mueva con la función:

this.avanzar(this.rotacion, 10)

Donde this.rotacion es igual al angulo_con_nave pero convertido otra vez en grados. Para no ir llenando el vlog con mucho código les comparto el proyecto con estas modificaciones:

https://mega.nz/file/UAsHUIKb#S54dDfu8iG-b3a4EH_JPeVBr0fAo5vCehsG6LQEH6Tw

3. Matemáticamente hablando:

Pilas Engine mueve las cosas a través de los llamados ejes cartesianos X,Y, este sistema de ejes permite mover muy fácilmente los actores en la direcciones adelante-atrás y arriba-abajo, pero no es sencillo mover cosas en círculos o curvas.

Para mover algo en círculos, pero sin cambiar de ejes, recurrí a lo que en matemáticas se llama "coordenadas polares" en donde un punto de la forma (X,Y) se reescribe como (r, θ) donde r es la distancia del punto al centro (0,0) y  θ es el ángulo entre el punto y el eje X. Para este caso el punto (0,0) es la posición del actor nave.

Básicamente lo que hice fue transformar la posición de la mira en coordenadas polares, sumarle o restarle un valor a θ para moverla y volver a convertir esas coordenadas polares en coordenadas cartesianas X,Y mediante las siguientes fórmulas:

x = r * cos( θ)

y = r * sen(θ)

QDR.