Agregar elementos SVG o HTML5 existentes a Box2D World

Tengo un logotipo SVG compuesto principalmente de elementos. Quiero animar esto, o más específicamente, dejarlo caer en un "mundo de gravedad". Esperaba usar Box2D (puerto web).Agregar elementos SVG o HTML5 existentes a Box2D World

Soy novato en realidad en Box2D y Canvas, pero llegué a convertir mi SVG en canvas HTML5 usando canvg y ahora estoy leyendo los tutoriales de inicio para Box2dWeb y puedo ver cómo crea un mundo con gravedad, pero no puedo encontrar ejemplos de caminar un SVG o Canvas existente y simplemente agregar las formas a ese mundo.

Parece que necesita usar los métodos de dibujo de Box2D. ¿Alguien me puede señalar un ejemplo simple que toma existente conjunto de formas (SVG o en lienzo) y simplemente los deja en un mundo de gravedad Box2DWeb para que simplemente colapsen en la parte inferior, al igual que casi todas las demos y tutoriales existentes de Box2D ?

Ten en cuenta que con CanVG no estoy agregando las formas a Canvas por mí mismo, sino que está creando el Canvas para mí desde SVG.

Fuente

2012-07-05 cirrus

Cambié mi respuesta después de darme cuenta de que necesitaría algo de trabajo para poder funcionar con SVG, por favor vea mi respuesta actualizada a continuación. –

que había estado esperando que con una recompensa que alguien podría ilustrar para mí el "mundo hola" de los "demos de gravedad" que Podría animar algunas formas arbitrarias. Los artículos y enlaces que me han mostrado (y han encontrado) hasta ahora son mucho más complicados de lo que estoy buscando.

Aunque odio responder mi propia pregunta, me gustaría establecer el listón. Esto es EXACTAMENTE lo que estoy buscando;

http://mrdoob.com/projects/chromeexperiments/google-gravity/

Este script para este código está licenciado bajo GPL3 entiendo y lo he probado con éxito en mi sitio. De hecho, solo hace que caigan todos los DIV en mi página, por lo que es solo el ticket y podría usarlo.

No es, sin embargo, un simple script.Hubiera preferido una simple muestra independiente si fuera posible. En su defecto, esperamos que esta respuesta ayude a cualquier persona que busque algo similar.

[Actualizado]

También he encontrado ya que este plugin, aunque es un poco de la CPU y se estrelló Chrome para mí.

http://tinybigideas.com/plugins/jquery-gravity/

todavía estaría encantada de conceder la generosidad de las mejores respuestas.

Fuente

2012-10-17 14:07:13 cirrus

Puede agregar lo que desee encima de box2d. Si querías dibujar elefantes bailarines en lugar de una forma de caja, eso depende de ti. De lo contrario, los juegos se verían bastante aburridos.

Nada le impide usar SVG, canvas, WebGL o incluso HTML con box2d, no necesita usar los métodos de dibujo box2d si no lo desea.

Consulte this blogpost (y code) para usar box2d junto con raphaël (SVG). Dmitry Baranovskiy (el autor de Raphaël) también tiene shown some demos de un puerto/contenedor personalizado box2d llamado newton.js. Todavía no se ha lanzado AFAIK, pero promete una API más simple y más similar a un javascript.

Fuente

2012-07-05 12:02:48

Gracias, pero esa no es la simple introducción que estaba buscando. Entonces se puede hacer, pero como otros ejemplos lo he visto, casi se puede hacer cualquier cosa. Lo que realmente necesito es un simple ejemplo de cómo agregar mis elementos existentes a un mundo Box2D y hacerlos caer. – cirrus

No sé realmente 'Box2d', y no estoy seguro de si esto es lo que quieres decir, pero solo para aclarar si llega a donde lo necesitas, en HTML5, funciona como si tuviera el fondo o estilo a <table>, que si no sabe es casi lo mismo que una tabla en MS Word.

lienzo muestra:

<canvas id="myCanvas" width="200" height="100"></canvas>

más color & Estilo:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Y si se permite en 'Box2D' añadir un poco de javascript:

<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 

    ctx.fillStyle="#FF0000"; 
    ctx.fillRect(0,0,150,75); 
</script>

Fuente

2012-10-17 13:41:38 internetgho5t

Estoy un poco confundido - ¿estás publicando una respuesta a la pregunta correcta? – cirrus

Eso es lo que quise decir en la parte superior, no estaba seguro de si esto es lo que quieres decir y no estoy totalmente familiarizado con 'Box2d' – internetgho5t

Estoy bastante seguro de que esto es lo que deseas, utiliza Gravity Script (del archivo tan grande, ya que incluye jQuery y Box2d.js):

Demostración: http://jsfiddle.net/SO_AMK/Cf7jn/

JavaScript: Ninguno! Está en su configuración predeterminada.

Fuente

2012-10-17 15:42:30

Gracias por intentarlo, pero como dices, no es hola mundo, ni es formas cayendo bajo la gravedad SVG ID la guinda del pastel en realidad. Los DIV están bien, y los elementos SVG no son tan diferentes. Estoy casi seguro de que esto se puede hacer con una muestra de código que encajaría dentro de una publicación SO, pero claramente es un nicho, y uno complicado. Debo aclararles a todos que no estoy buscando averiguar si se puede hacer. Ya lo sé y seleccioné la tecnología, incluso tengo un ejemplo en mi respuesta. Pero para una respuesta SO útil, debe ser una muestra de hello world que ilustre la caída de los elementos HTML. – cirrus

Esa fue mi última respuesta (algo así como) que pensé que no era buena, la estoy revirtiendo. –

Gracias. Pero este es el mismo guión que ya demostré en mi propia respuesta.Realmente necesito que alguien que entienda Box2DWeb y el código de esqueleto necesarios para incluir elementos y aplicar la gravedad ya que no he podido encontrar dicho tutorial en la Web. Todavía estoy seguro de que este es un snippit de código que cabría en una respuesta SO. – cirrus

Por favor, echa un vistazo a estos enlaces,

1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE

En cuanto a los elementos HTML a aplicar efectos box2d Tampoco puedo encontrar otros enlaces esperan que el uno que mencionaste en tu respuesta.

Fuente

2012-10-18 10:35:55 thomasbabuj

Gracias. Esos enlaces (especialmente el último) parecen prometedores (la contribución más útil hasta el momento), pero no veo cómo agregar formas SVG existentes. Parece que esa demostración usa las funciones de dibujar poli directamente de nuevo. – cirrus

Este enlace no tiene una explicación paso a paso, pero puede verificarlo: http://soledadpenades.com/2011/10/31/macabre-pool/ – thomasbabuj

Bueno, Dmitry's newton.js aún no es público. Pero como @cirrus, necesitaba algo similar. Así que me adelanté y creé mi propio newton.js. No está bien probado, pero tiene API similar a lo que puedo ver en el vídeo de Dmitry + mi propio requisito (que quería crear un motor de juego en la parte superior de Rafael como procesador)

favor tenedor - https://github.com/dbose/newton.js

@cirrus, también tiene un test.html simple, que toma un elemento Raphael simple y lo agrega al "mundo" de Box2D

Contextualmente, lo necesitaba porque el núcleo de mi aplicación (Mixow) era un editor de Raphael y luego quise crear un creador de juegos. (http://www.mixow.com)

Fuente

2013-03-10 16:19:46 dbose

Agregar elementos SVG o HTML5 existentes a Box2D World

Respuesta

Cuestiones relacionadas