Cómo utilizar la biblioteca Box2D para crear un juego de física 2D
Autor: Juan Felipe Belon Perez
¿Qué puedes ver en los rankings de juegos y sitios web de juegos flash más populares? Muchos juegos 2D tienen muy buena física y diseño artístico. Ahora vamos a aprender qué física usan esos juegos y cómo crearlos con Box2D.
Además de saber "qué", es más importante saber "cómo hacerlo". En primer lugar, me gustaría hacer una pregunta a los lectores: si quieren replicar la mecánica o el comportamiento. De los juegos físicos, ¿qué tecnologías y métodos necesitas?
Hace un año me hice la misma pregunta y "6 Dimensiones" fue la respuesta. El juego es una caja creativa, y cada lado contiene un conjunto diferente de mecánicas de juego creadas utilizando la física Box2D junto con la estética visual. Aquí, compartiré este juego contigo. Hice este juego para mejorar el motor de juego Codea (desarrollado por Crabitron), y escribí este tutorial para presentarte la física, el arte y el diseño de juegos realistas... ***mientras mejoramos nuestro nivel de desarrollo de juegos.
En mi juego, diseñé 6 lados. Usando la misma idea, les presentaré la física, la mecánica y las técnicas artísticas que usé copiadas de otros juegos.
1. Forma
《Thomas estaba solo》,《Angry Birds》,《Crayon Physics》
física de crayones (de gamasutra)
p>
En "Crayon Physics", puedes usar el dedo o el mouse para dibujar en la pantalla, como círculos, triángulos, rectángulos, etc. Cuando sueltas el mouse o quitas el dedo, las líneas se convertirán en Objetos de física tridimensional (en un mundo virtual).
¿Cómo se hace esto?
De hecho, es bastante simple. Debe guardar los puntos de coordenadas de la ruta de dibujo del mouse/dedo desde el principio hasta el final. Cuando ocurre el evento de liberación, llama a una función de Box2D. que genera polígonos basados en estos puntos:
cuerpo local = física.cuerpo(POLYGON, unpack(points) )
Primero debes saber qué formas hay en Box2D:
POLYGON( Polygon):
Para formas cerradas como geometrías básicas (no circulares), utiliza una serie de vértices (x, y) dispuestos en el orden especificado por cada API
CÍRCULO (Círculo):
Se pueden convertir en bolas, gotas de agua, estrellas, etc.
EDGE (borde):
Se utiliza para crear paredes, pisos y segmentos de línea con solo puntos inicial y final.
CADENA:
Igual que arista, pero puedes cerrarla (como un polígono pero no convexo) o no cerrarla (como una arista pero con más de 2 puntos)
p>
Después de conocer la forma del cuerpo, también es necesario comprender sus diferentes comportamientos, o tipos de cuerpo:
ESTÁTICO (estático): como su nombre indica, este rígido El cuerpo permanecerá estacionario en los puntos x, y especificados (suelo, pared, base de columna o base de cuerda, etc.).
DINÁMICO (Dinámico): Choca con otros objetos y se mueve
CINEMÁTICO (Cinemático): Choca pero no se mueve con el objeto dinámico, solo puedes cambiarlo cambiando es x, y o Dale una velocidad lineal o aplícale una fuerza para moverlo.
El verdadero significado se entiende en la ejecución de la API. Utilizo esto en este artículo porque es el código más simple que puedo encontrar.
Pero cambiar el código a cualquier idioma es muy sencillo, Box2D tiene casi todas las versiones de idiomas (Flash as3, c, objc, java, javascript, procesamiento java, etc.).
Debes guardar los resultados de esa función como variables personalizadas como body.position (posición), body.radius (radio), body.linearVelocity (velocidad lineal), body.angularVelocity (velocidad angular) , masa, etc.
Cuando se crea el cuerpo rígido, es posible que desee definir algunas propiedades para él, como restitución, escala de gravedad, amortiguación, etc. Estas propiedades se pueden asignar al estado de rebote o flotación del objeto físico.
La complejidad de Box2D es, por supuesto, más que esto. Otros juegos con este tipo de mecanismo de juego físico ("Magic Pen") también son relativamente complejos. En "Magic Pen", puedes dibujar cosas que parecen "nodos", pero los desarrolladores los llaman "uniones". Se utilizan para conectar cuerpos rígidos. También se pueden utilizar varios tipos, dependiendo del mecanismo que se desee. para hacer el comportamiento entre cuerpos rígidos conectados:
physics.joint(REVOLUTE, bodyA, bodyB,)
El cuerpo rígido gira alrededor de un punto fijo (ancla) de rotación
Por ejemplo: las ruedas del coche, el nodo rojo en "Crayon Physics" y "Magic Pen"
physics.joint(PRISMATIC, cuerpoA, cuerpoB, anclajeA, dirección)
Mantenga una distancia fija entre los respectivos puntos fijos del cuerpo rígido. La distancia inicial entre dos articulaciones depende de la distancia inicial entre estos dos puntos fijos en el espacio virtual. Ajustar la tasa de frecuencia y la tasa de amortiguación de la articulación puede hacer que se comporte como un resorte blando.
physics.joint(DISTANCIA, cuerpoA, cuerpoB, anclajeA, anclajeB)
La rotación de la articulación fuerza a los dos cuerpos rígidos a moverse a lo largo del eje entre dos puntos fijos. Permite el movimiento telescópico pero limita la rotación relativa entre dos cuerpos rígidos.
physics.joint(WELD, bodyA, bodyB, Anchor)
La articulación limita el movimiento y la rotación relativa entre dos cuerpos rígidos, convirtiéndolos en un solo cuerpo rígido. Debido a la naturaleza iterativa del solucionador, las uniones pueden deformarse cuando se someten a tensión; las uniones pueden fallar por completo cuando las fuerzas que soportan son demasiado grandes o cuando varias uniones se unen para formar un objeto más grande.
physics.joint(ROPE, bodyA, bodyB, AnchorA, AnchorB, maxLength)
La unión de cuerda limita la distancia máxima entre dos cuerpos rígidos
Por ejemplo : Cuerda en Cortar la Cuerda
Descripción general:
1) Crear: un cuerpo rígido o caja o cualquier otra geometría poligonal con contactos (un conjunto de puntos 2D: x, y), Establezca las propiedades físicas que necesitamos (como los diferentes comportamientos en "Thomas estaba solo"). Por ejemplo, si el cuerpo rígido es de tipo estático, entonces puede establecer su masa, densidad, gravedad, etc.
2) Atributos opcionales: adjuntar a otro cuerpo rígido. Por ejemplo, puedes adjuntar un cuerpo rígido a otro cuerpo rígido estático que esté configurado como sensor (no afecta la física del mundo del juego, pero hay un evento de colisión), y luego active el atributo enableMotor (activo) de la articulación REVOLUTE, que también requiere motorSpeed (velocidad), maxMotorTorque (par) y maxMotorForce (fuerza) para determinar la rotación de este objeto.
3) Arte Visual: Después de tener un cuerpo rígido, si quieres dibujarlo, no como una forma, sino como una entidad con color o textura, tienes que triangular estos puntos para generarlo. Modelo de malla poligonal (malla) y establezca color y material.
Ejemplo:
Box2D_POLYGONS(de gamasutra)
thomas Was Alone Boxes(de gamasutra)
Para "Thomas Was Alone" para Para determinar el comportamiento de la caja, puede configurar un sistema de animación de "jugo" simple (evolucionado a partir de "cuadros intermedios") para que cuando seleccione la caja y presione la tecla de salto (o colisione con otros cuerpos rígidos de física diferente) , activará el comando "jugo comando = animación", que produce efectos de animación como apretar y agitar. Cada acción tiene sus propios parámetros de animación, como propiedades físicas como masa, velocidad lineal y atenuación.
Ejemplos de caja (de gamasutra)
Para "Angry Birds", puedes crear un nivel definiendo diferentes propiedades para la caja, dibujar diferentes sprites o crear diferentes mallas de material. , de modo que en caso de colisión, el cuerpo rígido de la caja quedará más vivo, cambiando la textura de la caja para hacerla más acorde con el estado actual (madera rota, cristales rotos, etc.).
Puedes utilizar la función applyForce(vec2(x, y)) de cuerpo rígido simple para hacer que el pájaro se lance. Varias aves también tienen sus propios atributos como masa y atenuación...
2 Cuerpos de agua
"¿Dónde está mi agua?", "Sprinkle Ilsands"...
Cuando preguntas a expertos en codificación en Internet cómo crear una física del agua como el juego anterior, te hablarán sobre Metaball:
Metaball_contact_sheet (de gamasutra)
Pero usar la tecnología Metaball en los juegos es engorroso y difícil, y requiere muchos cálculos, a menos que encuentres algunos trucos y le adjuntes algunos materiales artísticos.
Por eso no hay muchos juegos que utilicen la física del agua. Hablé de esto hace unos meses y gracias a la ayuda de muchas personas obtuve un gran modelo de física del agua. En ese modelo, utilicé cuerpos rígidos CIRCLE en Box2D lib para hacer bolas dinámicas.
El código del modelo es fácil de entender. La pelota es un cuerpo físico rígido. Estos cuerpos rígidos tienen parámetros que hacen que se comporte como una gota de agua, como son la estitución, la fricción, la amortiguación y la linealidad. speed), luego dibujamos estas bolas usando técnicas de sombreador (GLSL) y materiales que requieren una malla, como ripple fx u otras muestras de sombreador GLSL que usan materiales, configuramos el ancho y la altura de esta malla en toda la pantalla, comenzando desde el middle:
mesh: addRect(WIDTH/2, HEIGHT/2, WIDTH, HEIGHT)
De esta manera, podemos usar la posición (x, y) de cada bola en el virtual Dibújalas en el espacio y cada bola tendrá un efecto de textura degradada.
para k, b en ipairs(balls) haz
sprite(ballTexture, b.x, b.y)
end
Entonces, Tienes que usar modos de distorsión adicionales para agregar texturas a estas bolas de colores y mezclarlas con el fondo.
Ejemplo:
Box2D_water Physics(de gamasutra)
Como dije, cada bola tiene una textura (degradado generado procedimentalmente) que se puede combinar con otras Esferas. Los materiales se mezclan utilizando un filtro de bajo nivel.
dónde está mi agua (de gamasutra)
《¿Dónde está mi agua?》
Puedes usar diferentes capas para cada comportamiento, o combinar todo Líquido o Todos los terrenos dinámicos se convierten en la misma capa para hacer los mismos efectos de agua, luego cambia el valor del filtro y el color en el sombreador (agua, magma, etc.).
Da un ejemplo de colisión, cuando dos cuerpos rígidos chocan, debes verificar qué tipo de cuerpos rígidos son el cuerpo A y el cuerpo B que chocan, si uno es un gas (el valor de escala de gravedad/masa/densidad es en realidad 0 , por lo que flota) y el otro es "hielo", luego conviertes esta bola en agua...
Da otro ejemplo, si el cuerpoA es magma, entonces el cuerpoB se convierte en gas... Es así de simple como cambiar las propiedades de la pelota para que cambie en box2d en respuesta a que vuelvas a dibujar el estado del juego.
Ejemplo de terreno:
El terreno estático puede ser un cuerpo rígido POLÍGONO, que se utiliza para leer la imagen completa del terreno y crear una serie de píxeles x, y no transparentes (vec2) función y luego regresó a la función box2d.
El terreno dinámico puede ser solo una malla, y cuando lo tocas, eliminas los puntos de contacto en las coordenadas x, y, y tienes que rehacer el cuerpo físico rígido con una nueva malla.
Por ejemplo, cuando una gota de agua (CÍRCULO de cuerpo rígido físico) salpica a un pato (objeto de cuerpo rígido con sensor activado), debes eliminar esa gota de agua y cambiar la animación del pato para que el nuevo estado se represente hasta Se llena completamente de agua, luego se retira el pato y se registra el resultado.
Las gotas de agua tienen pequeños trazos, estos se dibujan usando las propiedades linearVelocity y angularVelocity, puedes obtener la dirección y la velocidad para poder calcular el ángulo y la distancia del trazo.
De hecho, cualquier comportamiento que desees está disponible.
sprinkle_islands_boss(de gamasutra)
En "Sprinkle Ilsands", el sombreador del cuerpo de agua es diferente al que aprendimos. Además de usar efectos de partículas, también tiene el atributo linearVelocity. .
Pero el comportamiento puede seguir siendo el mismo cuando la bola de agua (CÍRCULO de cuerpo rígido) golpea el sensor de fuego, el fuego se apagará, y lo mismo ocurre con la malla de agua en el mar. En cuanto a las rocas, puedes agregar algunos detalles como efectos de grano, etc.
En este lado no encontramos ninguna unión, por lo que puede que no sea necesaria, en "Sprinkle Ilsands", la manguera es la cuerda, que es lo que analizaremos en el siguiente lado.
3. Rubber Band
"Contre Jour", "Cut the Rope", "Fruit Ninja"
Me tomó un mes hacer los juegos anteriores. El prototipo de cuerda, pero después de terminar la cuerda, sentí que el cuerpo rígido y blando era fácil de hacer, porque entendía mejor las uniones.
Para hacer una cuerda realista, necesitas crear un conjunto de cuerpos rígidos (ya sea CÍRCULO o POLÍGONO) y unirlos al cuerpo rígido ESTÁTICO como base. Hay dos tipos de uniones que se utilizan para combinar estos cuerpos rígidos de cuerda, DISTANCIA o REVOLUTA, pero la unión en la base de conexión (ESTÁTICA) del extremo (DINÁMICA) sólo puede ser la unión de CUERDA para hacer cuerdas elásticas. Ajuste la respuesta/amortiguación/elasticidad mediante propiedades de restitución y frecuencia.
Ejemplo:
Box2D_ElasticRopes(de gamasutra)
Para hacer un cuerpo rígido blando, tienes que hacer un cuerpo rígido blando alrededor de otro cuerpo rígido central (puede ser ESTÁTICO o DINÁMICO) Serie CIRCLE cuerpo rígido, por supuesto afectará a otros cuerpos rígidos. Si cambia el tipo de unión, encontrará que este cuerpo rígido se deformará automáticamente y deberá usar una malla para dibujar todo el grupo. de cuerpos rígidos.
Contre-Jour(de gamasutra)
"Contre Jour"
En este juego, puedes encontrar cuerpos rígidos blandos: terreno deformable; : cuerda elástica y cuerda fija. Estas cuerdas fijas utilizan tecnología más avanzada que las cuerdas elásticas.
snotDiagram(de gamasutra)
js Rope Segmented(de gamasutra)
《Cut the Rope》
cortar-la-cuerda (de gamasutra)
Este es el mejor ejemplo de la física de Box2d haciendo cuerdas. Las cuerdas en el juego también son dinámicas y puedes ver la malla a lo largo de la base hasta la pelota, con el caramelo sujeto a un extremo.
Puedes hacer este tipo de cuerda como en el ejemplo anterior y establecer las propiedades físicas de la bola (caramelo): masa, densidad, escala de gravedad, para crear un efecto de burbuja. Puedes usar el modo de fusión multicapa para dibujar las burbujas. Otro enfoque es convertir el cuerpo rígido en un sensor y moverlo con su propio algoritmo de gravedad, pero no aprendemos esta técnica hasta el lado cinco.
Si la burbuja-bola-de-cuerpo-rígido choca con una rana o una araña, o si el jugador toca la burbuja, la burbuja explotará. Para hacer esto, agregarás una animación de explosión a la burbuja y cambiarás. la física del caramelo nuevamente...
Código de caso:
if (vec2:distance(bFrog_Mouth, bCandy) lt; maxDistance) then
– Cambiar la animación de la rana de "inactivo" a "comer"
– Pausar la entrada
– Interpolar y activar la animación de final del juego
final
4. Gravity
En este lado podemos encontrar muchos juegos que usan la fuerza para luchar contra la gravedad, pero este es un tipo de juego.
Por ejemplo, puede generar un terreno simple basado en la función seno de box2d, que devuelve un cuerpo rígido ESTÁTICO en forma de cadena o borde.
Tiny Wings 2 (de gamasutra)
Puedes usar Box2d para hacer tus propias "Tiny Wings". El principio básico es que la bola (CÍRCULO de cuerpo rígido) cae bajo la acción de la gravedad. Puedes aumentar la velocidad lineal de la caída tocando la pantalla cuando tocas la parte apropiada de la colina (puedes verificar la altura de tu seno). función) cuando se suelta, la velocidad de caída aumenta... Otra forma es simplemente usar la fuerza.
Ejemplo:
Box2D_JumpRun(de gamasutra)
Para dibujar el bucle, agregue efectos de partículas a las pastillas, estados de calentamiento, etc. Los materiales se pueden crear usando imágenes en color aleatorias generadas por procedimientos, usando ruido gaussiano para agregar detalles, bordes, etc...
Jetpack-Joyride (de gamasutra)
《Jetpack Joyride》
¿Puedes ver las características de este juego? Si has leído los ejemplos anteriores, entonces debes saber que el personaje de cuerpo rígido se comporta de la misma manera, debes forzarlo contra la gravedad, las diferentes físicas de cada avión, misiles y varios vehículos, etc.
Juegos como "Madcoaster", "Rocket Chicken", "Whale Trail", etc. son todos iguales.
Pero hay otros mecanismos de este lado, como la física planetaria y la gravedad.
Puedes usar la fórmula simple para simular la física de gravedad cero.gravedad(0, 0), y la fuerza de atracción de la línea es como se muestra a continuación:
Box2D_Forces_Gravity(de gamasutra)
p>función Planeta: atraer(m)
– Dirección de la fuerza
fuerza local = self.body.position – m.body.position
local d = fuerza:len() — = m.body.position:dist(self.body.position)
fuerza = fuerza:normalize()
local dir = vec2(self.mass/m.body.mass, self.mass/m.body.mass)
– Magnitud de la fuerza
fuerza local = (GRAVEDAD * self.mass * m.body.mass)/(d*d)
fuerza = fuerza * fuerza
m.body：applyForce(force)
stroke(( 1 math.floor(force.y))*110, (1 math.floor(force.x))*110, 10, 255)
– trazar una línea entre atractor/motor
line(m.body.x fuerza.x, m.body.y fuerza.y, (self.body.x), (self.body.y))
fin
Esta función hace que la bola del personaje orbite el planeta.
5. Líneas y superficies
"Save the Seed", "Crayon Physics"...
Solo líneas: Dibujando líneas, puedes hacer formas. Cuerpo rígido de CHAIN y clases de cuerpo rígido ESTÁTICO o DINÁMICO.
Para el diseño de niveles, los obstáculos también son ESTÁTICOS, que pueden ser BORDE o POLÍGONO...
guardando-semillas-hd-doodle-physics-screenshot(de gamasutra)
Con esa estructura, podrías replicar un juego como Save the Seeds.
Box2D_Lines(de gamasutra)
El código es el mismo que el del primer lado, pero tienes que cambiar las reglas del juego, comienzas con el motor de física en pausa, luego dibujas y generar una forma estática de CADENA, cuando el jugador presiona el botón de inicio, el juego debe generar la bola del jugador (así como la recuperación, la gravedad, la masa y otros parámetros), reiniciar el motor de física, solo un comando (física.pausa ( ) y física.resume()) Eso es todo.
Solo permanece en el bucle del juego y se utiliza para confirmar colisión y velocidad lineal, cambiar el estado del juego...
Puedes cambiar la realidad de todo el juego girando la gravedad. encendido o apagado, como "Thomas estaba solo" o "ibb y obb".
6. Transporte
"BMX Adventure", "Mountain Racing"
Si has visto esto, entonces haz un juego sobre la locura. Un juego de transporte.
A la hora de realizar trabajos de transporte, simplemente piensa en las juntas y ruedas como cuerpos rígidos CÍRCULOS, y conecta el POLÍGONO (la forma de un coche, bicicleta, etc.) con ellos mediante una junta rotativa con el anclaje correcto. punto.
Usa una malla texturizada para dibujar el cuerpo rígido principal de la bicicleta/automóvil y los sprites de las ruedas, a menos que uses cuerpos rígidos suaves para hacer esto, agrega rastros, efectos de partículas, etc.
Ejemplo de generación de código:
Box2D_BezierRampage(de gamasutra)
Para carreteras, use algo de ruido o sinusoidal, ya sea ESTÁTICO o DINÁMICO, puede usar la curva de Bezier.
ejemplo de código (de gamasutra)
"BMX Adventure"
Conozco este juego y su física gracias a que vi el artículo An de alguien.
Pero el autor del artículo no mencionó nada sobre Box2D, pero supongo que este juego usa Cocos2d (y Corona SDK). De todos modos, ahora sabes cómo crear efectos de vehículo y alboroto.
En "Canvas Rider", hay dos modelos de bicicleta que puedes cambiar en el juego. Encontrarás que el cuerpo rígido de la bicicleta es una estructura conjunta que permite cierta amortiguación cuando cambias de bicicleta. , esta dinámica El cuerpo rígido se destruye y el juego genera un nuevo tipo de bicicleta.
Además, las líneas que tu bicicleta puede tocar en el juego son CADENA estática. Cuando diseñas la carretera, el ratón toca x, y... tal como lo hicimos antes.
Arriba. Espero que puedas obtener algunos resultados con Box2D.
Por supuesto, hay muchos juegos creados usando Box2D a través de diferentes métodos, pero pueden usar una combinación de los anteriores, por ejemplo, "Braid", "Super Meat Boy", etc., puedes usar Se producen cuerpos rígidos, mecánicas y sombreadores apropiados.