2

Hace poco comencé a desarrollar un juego que consiste en tirar una pelota y conseguir que ésta se enceste (en este caso en un rectángulo), lo que viene siendo un tiro parabólico en toda regla.

En el juego hay distintos objetos:

· La canasta (un simple rectángulo)

· Los objetos que actúan como obstáculos (más rectángulos).

· La pelota

· Y las paredes (el área del juego)

Pues bien, el lío que tengo es que a veces no se detecta el choque con el objeto y esto ocurre solo cuando la pelota va muy rápido y esto sucede porque entre cada fotograma el objeto avanza más píxeles (de golpe) que cuando la velocidad es menor, me explico:

Tengo un objeto que contiene los niveles:

var selLevel = 1;

    var level = {

        1: {
            basketPos: [600,500], //Basket pos
            basketSize: [200], //The width of the basket
            ballRad: 20, //ballRad
            ay: 25, //Aceleration y
            ax: 0, //Aceleration x
            bR: 0.2, //Bounce reduction
            objects: { //External objects (obstacles)
                1: [200,280,50,1000],
                2: [450,200,400,25]
            }
        }
    };

Este es el loop:

function animation() {

    //Se que hay variables y otras cosas que no aparecen en la función, pero para esto no son necesarias

    //Current speed
    vx = v0x+(ax*t);
    vy = -v0y+(ay*t);

    //Current position
    x=x0+(v0x*t)+(0.5*ax*Math.pow(t,2));
    y=y0+(-v0y*t)+(0.5*ay*Math.pow(t,2));

  //Este es el sistema que estoy usando para detectar los objetos
  for (var i = 1; i <= otherObjects.length; i++) {

      oX = level[selLevel]["objects"][i][0]; //Posición del obstáculo en el eje x
      oY = level[selLevel]["objects"][i][1]; //Posición del obstáculo en el eje y
      oW = level[selLevel]["objects"][i][2]; //Ancho del objeto
      oH = level[selLevel]["objects"][i][3]; //Alto del objeto

      //Adaptar posiciones y tamaños a la pantalla actual
      oX = (oX * windowWidth) / scaleSize[0];
      oY = (oY * windowHeight) / scaleSize[1];

      oW = (oW * windowWidth) / scaleSize[0];
      oH = (oH * windowHeight) / scaleSize[1];

      if (oW <= ballRad * 2) {
          oW = ballRad * 2;
      }

      if (oH <= ballRad * 2) {
          oH = ballRad * 2;
      }

      //Left object bounce
      if (x + ballRad >= oX &&
          x + ballRad <= oX + oW &&
          y >= oY &&
          y <= oY + oH &&
          vx > 0) {
          //Aquí está llamando a una función que se encarga de cambiar los valores para simular el rebote
          bounceLeft(fix);
          break;
      }

      //Right object bounce
      if (x - ballRad <= oX + oW &&
          x - ballRad >= (oX + oW) - oW &&
          y >= oY &&
          y <= oY + oH &&
          vx < 0) {
          bounceRight(fix);
          break;
      }

      //Top object bounce
      if (y + ballRad >= oY &&
          y + ballRad <= oY + oH &&
          x >= oX &&
          x <= oX + oW &&
          vy > 0) {
          bounceUp(fix);
          break;
      }

      //Bottom object bounce
      if (y - ballRad <= oY + oH &&
          y - ballRad >= oY &&
          x >= oX &&
          x <= oX + oW &&
          vy < 0) {
          bounceDown(fix);
          break;
      }
  } 

  //Aquí hay una adición del tiempo
  t=t+0.16; //Aquí lo he ocultado pero en el programa de verdad calculo el tiempo que tarda en hacer el loop y luego sumo el tiempo respecto a ese valor
  window.requestAnimationFrame(animation);
  }

Estoy simplificando mucho los guiones para ser lo menos denso posible

Pues bien, dicho esto, imaginemos que hay un objeto en la posición (200,300) y su tamaño es de (100,50) respectivamente, cuando la velocidad de la pelota es muy alta y se aplican las comprobaciones hay una diferencia de píxeles entre un fotograma y otro superior al alto del objeto, con lo cual es imposible que las condiciones se cumplan, entonces se me ocurrió hacer el cálculo de las operaciones en un intervalo independiente, y las acciones de pintar que se ejecutaran usando requestAnimationFrame() en otra función, y de este modo logré que funcionara pero el juego comenzó a tener mucho lag (por así decirlo) y la animación iba a saltos y daba trompicones. Entonces claro, no sé muy bien que hacer al final, si alguien me pudiera ayudar le estaría muy agradecido, y también me gustaría saber si estoy usando un método más o menos correcto para la detección de estos objetos.

Gracias.

4
  • 2
    Es bastante complejo manejar la física. te recomiendo que uses una implementación ya creada como por ejemplo brm.io/matter-js , otro ejemplo brm.io/matter-js/demo/#terrain , te vas a ahorrar una montonera de tiempo. Commented el 6 abr. 2017 a las 18:47
  • @ArieCwHat Gracias Arie, probaré esa librería tiene buena pinta, esto simplemente lo empecé para intentar hacer el código desde 0, básicamente como si fuera un reto.
    – lromeraj
    Commented el 6 abr. 2017 a las 19:29
  • 1
    Bueno, si es un reto, puedes tomar referencias de libros como shop.oreilly.com/product/0636920012221.do , hay mucha documentación matemática sobre el tema. Mira esta pregunta gamedev.stackexchange.com/questions/16362/… Commented el 6 abr. 2017 a las 19:33
  • @ArieCwHat Gracias de nuevo Arie!
    – lromeraj
    Commented el 7 abr. 2017 a las 5:31

1 respuesta 1

0

El problema es que realizas tu proceso tantas veces como tu equipo pude hacerlo, así que gastas todos los recursos en ello.

si realizas el calculo en un hilo diferente, puedes pausarlo un tiempo determinado (milisegundos) para ahorrar recursos.

es cuestión de que calibres el tiempo de pausa para lograr el equilibrio entre precisión y rendimiento.

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.