Actualmente estoy investigando opciones para trabajar con el lienzo en una nueva aplicación HTML 5, y me preguntaba cuál es el estado actual de las bibliotecas y marcos de JavaScript de lienzo HTML.
En particular, ¿existen marcos que admitan el tipo de cosas necesarias para el desarrollo de juegos: animación compleja, gestión de gráficos de escena, gestión de eventos e interacciones de usuario?
También dispuesto a considerar productos comerciales y de código abierto.
javascript
frameworks
html
canvas
Toby Hede
fuente
fuente
Respuestas:
He estado trabajando en fabric.js , una biblioteca de lienzo para ayudar exactamente con eso, manipulando objetos en el lienzo, manejando eventos e interacciones de usuario. Aún no se lanzó, pero eche un vistazo a una demostración de vista previa simple .
También puede verlo en acción en este editor de diseño , para el que fue creado originalmente.
Editar: el proyecto ahora está disponible en github (código abierto bajo licencia MIT)
Para comenzar, consulte:
¿Cómo se compara Fabric con otras bibliotecas de lienzo de JavaScript? Aquí tienes una tabla comparativa .
fuente
Me sorprende que nadie haya mencionado WebGL y los marcos basados en él. Lo consideraría uno de los primeros en la lista de vanguardia para gráficos 3D acelerados por GPU y animaciones complejas en lienzo HTML / javascript.
WebGL es muy sólido en su soporte para gráficos acelerados por GPU. Vea estas demostraciones de sombreadores GLSL . :-) Y vea ChemDoodle como un ejemplo de interacción del usuario.
He estado trabajando en una aplicación que usa el marco O3D de Google , que administra el gráfico de escena y usa WebGL para renderizar (solía usar su propio complemento). O3D es un trabajo en progreso, y su documentación no está completamente actualizada, pero está en desarrollo activo y hay algunas buenas demostraciones por ahí . 3D Pool puede ser lo más adecuado para usted. Los desarrolladores de Google son muy receptivos a las preguntas en el grupo de discusión.
Hay una serie de otros marcos creados en WebGL; ver aquí . Los que mencionan el desarrollo de juegos y los gráficos de escena incluyen Copperlicht, SceneJS, X3DOM.
WebGL se ejecuta en versiones de desarrollo recientes de varios navegadores , pero no en IE. He estado usando Firefox ("Minefield") y Chromium con buenos resultados. Necesitará uno de estos para ejecutar las demostraciones anteriores.
Sin embargo, si sus requisitos son que no debe tener dependencias más allá de HTML 5 canvas / js, es posible que WebGL no sea la opción correcta. No parece que IE lo admita pronto.
Actualización: después de poner mucha resistencia, MS decidió admitir WebGL en IE 11 .
fuente
three.js , por el sr. doob , es un fantástico motor 3D para javascript que incluye scenegraph (versiones aceleradas de software y WebGL / hardware), sombreado, partículas, animación de piel (creo) y efectos de iluminación. Compruébalo, es un tipo superdotado.
Debo agregar que necesitará el Google Chrome más nuevo o equivalente para ver la mayoría de las demostraciones, uno de mis favoritos es: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html
fuente
KineticJS es una biblioteca emergente que se jacta de crear y animar "capas" individuales en el lienzo para un alto rendimiento.
http://www.kineticjs.com/
fuente
CAKE.js ya no se mantiene, pero es un marco bastante poderoso: http://code.google.com/p/cakejs/
Demos aquí: http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html
fuente
Eche un vistazo al framework Processingjs . Además, la próxima versión 2.0 de mootools tiene el proyecto artístico para trabajar con lienzo.
fuente
Raphael parece una biblioteca de lienzos bastante buena; está basado en SVG (o basado en VML en Internet Explorer) y, por lo tanto, admite muchos eventos de entrada de usuario. Es bastante pequeño (60kb comprimido en gzip), por lo que no es una dependencia demasiado grande.
También parece tener un tweener agradable: http://raphaeljs.com/reference.html#animate (vea aquí y aquí para ver ejemplos).
Para ver un ejemplo de lo que puede hacer, eche un vistazo a esta pequeña demostración inteligente .
¡Espero que esto ayude!
fuente
He descubierto que dos bibliotecas son extremadamente competitivas y mucho mejores que fabric.
Kinetic.js y easel.js tienen un manejo de eventos, agrupación y abstracción general de formas extremadamente buenos. Encontrarás mucho para amar en ambos; El caballete parece tener más filtrado y orientación a la imagen.
Los handlins de eventos de Fabric son MUCHO peores que cualquiera de estos: básicamente trata todo el lienzo como un gran evento y te dice cuándo se ha hecho clic en "Algo". No adjunta eventos a formas individuales o grupos de formas.
fuente
Hay una biblioteca interesante que tiene como objetivo mejorar algunos de los fundamentos del trabajo con la API de lienzo llamada canto.js por David Flanagan, autor de Javascript: The Definitive Guide .
fuente
Además, el marco Javascript joven, pero no está mal, y eso (animación compleja, administración de gráficos de escena, manejo de eventos e interacciones de usuarios) todo al respecto: jCanvaScript . Puede ser, excepto 'gestión de gráficos de escena'.
fuente
He estado trabajando con bHive para producir gráficos y mover encabezados de sitios, parece impresionante y poderoso, a diferencia de los demás, parece que se están desarrollando. Adobe Edge también merece la pena, aunque estrictamente no Canvas.
http://www.bhivecanvas.com
y
http://labs.adobe.com/technologies/edge/
fuente
Aves Engine es realmente genial: http://www.dextrose.com/en/projects/aves-engine
Además, Akihabara parece bueno: http://www.kesiev.com/akihabara/
fuente
Si desea utilizar Javascript, Dojo es una excelente manera de hacerlo. Tiene una API de gráficos vectoriales compacta y multiplataforma (SVG, VML, Canvas, Silverlight) que es muy poderosa. Puede encontrarlo en dojo.gfx y dojox.gfx.
Hemos utilizado esto para construir un tutor de física interactivo que permite a los estudiantes dibujar vectores, elipses, etc. (incluso agregar imágenes) y realizar todo tipo de transformaciones en ellos. Puede ver lo que hemos hecho en http://gideon.eas.asu.edu/web-UI/login.html, simplemente inicie sesión con cualquier nombre de usuario.
He echado un vistazo a fabric.js y dojox.drawing hace muchas de las mismas cosas. Si observa las pruebas en el kit de herramientas (una vez que lo tenga en su dojox / drawing / tests /) encontrará ejemplos de todo, desde gráficos vectoriales hasta imágenes y sombras creadas mediante programación.
fuente
Estoy impresionado con Akihabara como motor de juego. Tiene documentación fantástica en forma de tutoriales y una API. Incluso he visto en algunos foros hablar de un lanzamiento de Akihabara 2. Desafortunadamente, toda esa charla es de un año o más. Realmente espero que este motor aún se esté desarrollando.
fuente
Acabo de lanzar la primera iteración de una nueva biblioteca de dibujo e interpolación dirigida a personas con experiencia en desarrollo AS3 / Flash. Si bien mi biblioteca aún no admite trazados de dibujo complejos o gráficos, espero que ayude a la gente a dibujar rápidamente y animar primitivas básicas de una manera familiar.
Los comentarios y sugerencias son bienvenidos. http://www.quietless.com/kitchen/introducing-js3/
fuente