¿Cómo dibujo mi mundo de Box2D utilizando HTML5 Canvas en lugar de Debug Draw?

sé canvas de HTML5 bastante bien, sé lo básico y los bucles de animación usando etc.¿Cómo dibujo mi mundo de Box2D utilizando HTML5 Canvas en lugar de Debug Draw?

Demostración estoy trabajando con: (haga clic para hacer formas) http://henry.brown.name/experiments/box2d/example-canvas.html

lo que no estoy muy familiarizado con es Box2D. Estoy usando el puerto Box2DWeb, escuché que era más nuevo que Box2D-js, no estoy seguro de cuál es el mejor.

Sé cómo inicializar el 'mundo' y puedo colocar objetos en el mundo. Luego uso Step para animar el mundo; sin embargo, para mostrarlo en la pantalla hasta ahora solo he podido hacer que funcione con depuración, ya que básicamente hace todo por ti.

En lugar de utilizar el dibujo de depuración, me gustaría utilizar un lienzo para dibujar, por ejemplo, un automóvil en lugar de solo un cuadrado. ¿Cómo adjunto la física de un cuadrado a la imagen de un automóvil? Simplemente no puedo entender cómo integrar el lienzo con Box2D.

¡Todos los consejos serán enormemente apreciados!

Gracias

Fuente

2011-09-03 Henryz

enlace impresionante, usted estará interesado en http://www.uselesspickles.com/jsballs/, que no tiene nada que hacer con la pregunta, pero también es una asombrosa simulación de física de JavaScript –

Hey. Me preguntaba si resolviste este problema. Tengo el mismo problema. No tengo idea de cómo acceder a los parámetros como posición, velocidad, ángulo de un objeto. Debug Draw, dibuja todo usando todos esos parámetros. Quería saber cómo podemos acceder directamente a ellos. – batman

Respuesta muy tardía, pero sí tengo el problema resuelto. Voy a comentar dentro de las otras respuestas. – Henryz

Si no está familiarizado con Box2D que debe salir la documentación en http://www.kyucon.com/doc/box2d/. Esto debería decirle todas las propiedades que necesita. Que yo sepa, la forma estándar de usar Box2D es adjuntar una imagen con userData. Vea este tutorial de ejemplo para el uso de imágenes y lienzos.

http://www.jeremyhubble.com/box2d.html

Fuente

2011-12-19 17:43:45

http://www.kyucon.com/doc/box2d/ es un gran recurso! – Henryz

http://www.jeremyhubble.com/box2d.html finalmente me ayudó a resolver esta solución. Mis nuevos experimentos con Box2D están en mi sitio web www.henry.brown.name – Henryz

Los documentos de box2d son geniales, sin embargo, la IU puede ser un poco difícil de navegar. Solo se advirtió que los documentos no son como jQuery. –

que tenían la misma pregunta. here es la documentación del mismo. Puede usar llamadas como GetBodyList(), GetAngle() y miembros como m_position para obtener todo lo que necesita para pintar lo que sea utilizando la biblioteca que desee utilizar en un lienzo.

Fuente

2012-10-13 19:16:36 batman

Pasé los últimos días intentando lo mismo. encontré Jonny Strömberg's tutorial, que no es muy detallado, pero analizando el código que encontré cómo se recupera la posición del cuerpo:

var b = world.GetBodyList()

GetBodyList() parece ser una matriz iterativo, por lo que el siguiente cuerpo es accesible a través de b. m_next.

A continuación, puede utilizar

b.GetPosition().x 
b.GetPosition().y 
b.GetAngle()

para recuperar las coordenadas del cuerpo.

EDIT: este código es para la biblioteca Box2dweb, que me pareció mejor documentados que Box2djs

Fuente

2012-12-13 10:57:47 Thibaut

Excelente respuesta, gracias por iluminarme en GetBodyList. – Henryz

¿Cómo dibujo mi mundo de Box2D utilizando HTML5 Canvas en lugar de Debug Draw?

Respuesta

Cuestiones relacionadas