Aprende a crear juegos en HTML5 Canvas

domingo, 23 de noviembre de 2014

Proyección parabólica

Aprovechando que viene el nevado invierno en el hemisferio norte, he creado un prototipo temático a petición de uno de los seguidores del blog que me gustaría compartir con todos ustedes. Mark solicitó ayuda con la proyección de un tiro parabólico, y el resultado de ello ha sido cargado en el siguiente fiddle*: http://jsfiddle.net/daPhyre/on4ay7mk/

En esta ocasión no explicaré a detalle cada paso dentro del código, estoy seguro que con todos los conocimientos que han aprendido anteriormente a lo largo del blog, podrán comprender la mayor parte del código. Sin embargo, si hay algunos puntos que me gustaría resaltar de él.

En sí, el movimiento parabólico del objeto debe ser familiar para ustedes, pues la fuerza la hemos aplicado en el juego de plataformas, y la fórmula para convertir de ángulo y rapidez a vectores en X y Y la aprendimos en el seguidor de ratón. Simplemente aplicamos la función para obtener los vectores, y en cada turno desplazamos las bolas de nieve existentes, aplicando sobre su vector Y la fuerza de gravedad correspondiente:
        for (var i = 0, l = snowballs.length; i < l; i++) {
            snowballs[i].x += snowballs[i].vx * deltaTime;
            snowballs[i].y += snowballs[i].vy * deltaTime;
            snowballs[i].vy += gravity * deltaTime;
        }
Ahora, el verdadero reto es poder dibujar la proyección de dicha parábola. Para ello una variable booleana "moving" me indica cuando el ratón acaba de ser movido, y en ese momento recalculo el ángulo α y la posición de los círculos que señalan la proyección de la parábola.

En el presente ejemplo calculo 5 posiciones en el futuro de la parábola, cada una a un tercio de segundo de la posición anterior, valor que guardo en una variable "time". Posteriormente calculo la posición de la proyección dado ese valor de tiempo. Calcular su posición en X no es problema, pues utilizo directamente la misma formula con la que calculo su fuerza inicial. Sin embargo, en el eje Y debo sumar también la influencia de la gravedad pasado ese tiempo. Para ello, utilizo la fórmula "gravedad por tiempo al cuadrado sobre dos", que al final se ve aplicada en el código de esta forma:
            for (var i = 0; i < 5; i++) {
                var time = (i + 1) / 3;
                var x = player.x + Math.cos(alpha) * cannonSpeed * time;
                var y = player.y + Math.sin(alpha) * cannonSpeed * time + gravity * time * time / 2;
                track.push(new Circle(x, y, 2));
            }
Y es de esta forma que podemos obtener la proyección de una parábola. Espero este ejemplo les sirva a todos ustedes cuando desarrollen un juego que ocupe esta clase de proyección. ¡Mucha suerte en sus proyectos! ¡Felices fiestas decembrinas! ¡Y felices códigos!

9 comentarios:

  1. man soy seguidor de tu blog y he de decir que es genial e aprendido mucho de el por cierto no puedo ver el codigo en jsfiddle se desaparece cuando intento leer mas para abajo espero y haya solucion saludos

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias por tu apoyo! De momento he probado el fiddle en varios dispositivos y no he tenido el problema que mencionas. ¿En qué dispositivo lo ves tú? Quizá podamos encontrar una solución a tu problema.

      Eliminar
    2. perdona por no responder antes, lo veia desde mi pc pero ya me funciona normal por cierto tengo una inquietud he probado tus tutoriales y funcionan de maravilla pero cuando intento probar en un android los fps me bajan un monton... y disculpa

      Eliminar
    3. ¿Qué tipo de Android es? He visto muchos celulares que ni los juegos nativos logran soportar en su flujo deseado, pero depende mucho del dispositivo.

      En mi caso personal, mi Android responde bien con los ejemplos presentes en el blog, pero como dije antes, depende mucho de la capacidad del modelo.

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. bueno lo he probado en dos dispositivos uno es una tablet pc7074me 252mb ram y otro es una htc butterfly de 2gb de ram y de los 75 fps de la pc me baja a 10-20 fps pero por las dudas como los pruebas? osea los conviertes en apk y de ser el caso me podrias decir cual programa usas para convertirlo?

      Eliminar
    6. Aún siendo el HTC Butterfly un dispositivo móvil Full HD de dos años y medio, se me hace demasiado que baje a 20fps para su quad core.

      También debo preguntar ¿Que clase de proyecto tienes de pruebas? Ya que los que yo he probado son los presentes en el blog directo de la web, aunque en realidad son proyectos muy ligeros.

      Eliminar
    7. jaja si la verdad bueno no es algo muy complicado que digamos es un runner implementando los conocimientos de tus tutoriales y solo le puse lo basico los mapas, el personaje y un hunter xD pero nada fuera de lo normal aunque quizas la forma en que estoy agregando los mapas tenga algo que ver osea, lo hago como en los tutoriales pero por decirlo asi la forma en que necesitos los mapas quizas sea muy extensa digamos 1000x25 bloques

      Eliminar
    8. Quizá sea eso. Sí tienes tu ejemplo online, podría revisarle para ver si el problema ocurre también conmigo, y en tal caso, y ver qué puede afectar su rendimiento y como optimizarlo.

      Eliminar