Actualización 10-04-2013
Nuevo blog del proyecto: http://ss2d.wordpress.com/
------------------------------------------------
Hola a todos
Hoy mismo he publicado un proyecto en el que llevo unos meses trabajando, se trata de un framework de javascript para hacer juegos 2D o aplicaciones multimedia en tiempo real para navegador, es mi primer proyecto open source. Aquí el repo:
https://github.com/Galloman/ss2d
Todavia necesita bastante documentación y tutoriales, el código está muy comentado y anotado, aunque mi inglés no es muy bueno y necesita muchas correcciones espero que se entienda. Hay una JsDoc generada a partir de las annotations, en la página inicial de README tenéis la url si os interesa. Estas son algunas de sus características.
- Manejo sencillo de los elementos de una escena con una jerarquia en árbol, propagando las transformaciones automáticamente de padres a hijos (posición, rotación, escala).
- Interfaz de input del jugador (estado del mouse/dedo, teclas pulsadas) compatible con navegadores de escritorio, móviles y tablets pero solo admite 1 touch por ahora, simulando al mouse.
- Gestor de recursos que permite precargar sonidos, texturas o recursos propios, controlar esa precarga (loading bar) de forma sencilla y hace transparente el uso de estos recursos tanto si están pre cargados como si necesita cargarlos justo en el momento de usarlos.
- Una característica que espero que haga popular al framework es que permite crear juegos multijugador online en tiempo real utilizando node.js para el servidor y WebSockets de HTML5 para el cliente, incorpora una serie de clases y métodos de serialización para que pueda llegar a ser trivial al menos para pruebas de concepto o prototipos, se puede apreciar en el código de la demo multijugador.
- Por ahora utiliza context 2d del elemento Canvas de HTML5 para renderizar (compatible con móviles y tablets), pero está planeado que también se pueda utilizar WebGL en el futuro.
- Utiliza la AudioContext API si está disponible, es decir que en Chrome y Safari el audio tiene un funcionamiento mas óptimo que en el resto de navegadores, donde utiliza el elemento Audio de HTML5.
- Proporciona una serie de clases para crear llamadas a funciones con timer y transformación en tiempo real de los objetos de la escena en pocas lineas de código similar a las que proporciona ActionScript (Tween).
- Incluye detección de colisiones básica para testear cuando dos objetos se tocan o determinar si el mouse está encima de un objeto en una sola linea de código.
ej: if(elemento.hitTestPoint(input.mMousePoint)){ ... }
ej2: if(elemento.getBounds().intersects(element2.getBounds())){ ... }
- Está implementado para utilizarse con Google Closure Builder, que permite construir un archivo optimizado, compacto y ofuscado con toda la aplicación dentro (ver código fuente demostraciones).
- Podeis ver unas demostraciones aquí:
Sandbox: http://virtualcraft.net/b/
Multiplayer Sandbox: http://virtualcraft.net/mmoballs/
Match3: http://virtualcraft.net/m3/
Versión anterior del proyecto con WebGL (descontinuado): http://www.virtualcraft.net/wgl/
Mas o menos esto es un resumen de lo que compone el Framework, ahora queda crear documentación, corregir bugs, ampliarlo y hacerlo popular. Si os ha interesado y os puede servir para vuestros proyectos estaré encantado de resolver dudas y agrecidismo de recibir sugerencias, colaboraciones o asesoramiento en temas open source. Si conoceis de alguien a quien le pueda interesar esta tecnologia por favor envidale este mensaje.
He publicado un video de live coding donde se muestra como utilizar ss2d do forma muy sencilla, sin compilación ni nada, simplemente importando el js y crear la escena.
http://www.youtube.com/watch?v=S-nS3MIT-_s
A ver si así se anima un poco el hilo y recibo feedback :P.
Gracias por el comentario y el aviso sobre ss2d.Sprite, es por el generador de documentación basado en anotaciones que no es perfecto, en cuanto pueda subo la corrección. Seguro que hay mas fallos de este estilo, me viene bien que me lo comenteis.
Lo de la m para las propiedades mira, me salió así XD, no te sabria dar un motivo claro, simplemente todo lo que empieza por m seguido de una mayúscula es una variable miembro del objeto.
Ahora mismo estoy intentando incorporar compatibilidad con generadores de contenido, empezando por TexturePacker para poder utilizar atlas en lugar de texturas sueltas. También subiré el código de la demo del Match3 (http://www.virtualcraft.net/m3/), pero falta adaptarlo ya que está implementado y construido en una versión muy primigenia del framework (julio 2012). La demo de Match3 me gustaría publicarla junto con un tutorial, es un ejemplo perfecto para mostrar el uso de diferentes componentes como texturas, sonidos y la api de animación.
El próximo live coding intentaré que sea mas ameno comentando el código con voz, pero de ser así probablemente lo haga en español y lo subtitule en inglés :P.
Agregada compatibilidad para Atlas generados con TexturePacker, formato: JSON (Hash). Se ha substitudio el 4º parámetro del constructor de ss2d.Sprite de color (inutil en context 2d, ya que no hay nada en la api para tintar imágenes en tiempo real) para indicar el atlas:
var sprite = new ss2d.Sprite(0, 0, 40, 40, 'referencia_frame_atlas', 'mi_atlas.json');
El loader se encargará de buscar el atributo image dentro del atlas para cargar la textura correspondiente.
Dos detalles de exportación:
El Sprite no se ajusta auotmáticamente de tamaño al cambiar el frame (propiedad mTexture cuando se esta utilizando un altas, se podria mirar de agregar con un flag) por lo que si un mismo sprite va a contener varias imágenes del atlas que supuestamente son del mismo tamaño, se debe desactivar la opción de "trim" del texture packer, para que no se coma los espacios en blanco entre la imagen y su borde.
También se debe modificar el JSON el bloque meta, para agregarle al atributo image el directorio donde se encuentra, TexturePacker cuenta con una opción para esto llamada "Texture Path" pero aparentemente es ignorada para este formato.
Por lo demás funciona perfectamente, si hay el requisito de utilizar imagenes de distinto tamaño en un mismo sprite y que se redimensione de forma automática por ahora recomiendo extender ss2d.Sprite con una clase propia y sobreescribir el método de render para que lo haga. De todas formas este es el objetivo de las clases aún en desarrollo relacionadas con "ReelSprite", para crear animaciones basadas en frames.
Si esque como muchas cosas de la api estaban para WebGL (de la anterior versión del framework) las dejé, pero en context 2d la verdad es que entre que no se pueden tintar imagenes, ni aplicarles alpha ni nada es bastante penoso, estoy por priorizar la implementación con WebGL para contar con ese tipo de efectos básicos otra vez.
Gracias, lo pondré esta tarde a ver que tal va, no se por que percibí que globalAlpha modificaba el alpha del propio canvas (lo que conllevaba a renderizar en un canvas a parte para crear imágenes transparentes i luego utilizarlo como textura).
Agregada semitransparencia. Además se hereda de padres a hijos, se puede cambiar el mAlpha de un contenedor para que todos los elementos que contenga multipliquen su alpha por el del contenedor.
Otra pequeña demo para testear algunos arreglos:
http://virtualcraft.net/car/
Nuevo Live Coding, esta vez comentado con voz en "english" que no es precisamente el mejor del mundo:
http://www.youtube.com/watch?v=_1hZDi-zx2I
En este se muestra como utilizar SmoothStep2D para crear un pequeño top-view shooter a un nivel básico. La implementación del shooter en si es mas o menos la primera mitad del video, la segunda mitad está dedicada a la introducción de como crear una clase propia extendiendo un ss2d.Quad que se utiliza para los proyectiles (aunque debido a un error mio vereis que estoy bastante rato intentando averiguar por que no funciona esta clase XD), reemplazando parte del código implementado en la primera mitad.
Disfrutadlo y no dudéis en hacerme cualquier consulta, en breve subiré el código a la página de github:
http://galloman.github.com/ss2d/samples/
Próximamente intentaré introducir mejores gráficos con texturas en lugar de quads para que las demos luzcan un poco mas, se agradecen donaciones de sprites hehe.
Agregados dos nuevos tipos de sprite para generar texto.
Demo: http://galloman.github.com/ss2d/samples/text.html
ss2d.TextSprite: para mostrar textos simples por pantalla:
//x=20, y=30,
var texto = new ss2d.TextSprite(20, 30, //x, y
'hola texto', //texto
'#ff0000', 16, //color, font-size
'Verdana', 'italic bold'//font-family estilo
);
scene.addObject(texto)
ss2d.BitmapTextSprite: para mostrar textos a partir de un bitmap en formato BMFont XML.
var goldText = new ss2d.BitmapTextSprite(50, 175, //x, y
'hola texto bitmap', //texto
'assets/fonts/fuentebm01.fnt', //xml en formato bmfont
55 //font-size
);
Ambos textos se pueden "scrollear", es decir, mostrar solo una porción de las letras para crear animaciones. Podeis generar este tipo de bitmaps con aplicaciones como BMFont o GlyphDesigner.
¿Que ide recomiendas/usas para las movidas java? ¿eclipse?, quiero ver si le doy un vistazo y obviamente xcode no vale
Yo hace tiempo para hacer videojuegos con j2me usaba netbeans. Ahora para hacerlos para android uso eclipse
Asumiré que querias decir Javascript (nada que ver con Java salvo las 5 primeras letras del nombre hehe) que es en lo que está hecho el framework ;).
Utilizo Aptana Studio, un plugin gratuito de eclipse que también te lo puedes descargar como IDE (eclipse+plugin preinstalado), lo utilizo sobretodo para organizar el código en proyectos, creo un workspace en el que realmente no guardo nada de código, el código está en directorios a parte y los agrego como referencia al proyecto, de esta manera lo tengo organizado pero el directorio queda limpio de cara al repositorio donde no guardo nada referente al workspace de Aptana.
Ocasionalmente también utilizo SublimeText como editor sobretodo para los bash script o codigo de ejemplo que no forma parte de ningún proyecto.
Obviamente queria decir javascript, pero por vagancia al teclear no lo he puesto completo xD lo cual es obviamente un terrible error.
Le dare un vistazo al eclipse ya que lo tengo instalado por el combo unity+android :)
Yo en mi respuesta me referia a Java. En cuanto a javascript solo lo he utilizado para aplicaciones de gestión que desarrollo con .NET y uso el visual studio porque es lo que utilizo para desarrollar los proyectos con tecnologia MS.
Si quieres algo mas ligero ya te digo que con Sublime Text suficiente, ademas realmente el autocompletado no es algo que vayas a utilizar demasiado en javascript.
Lo que si que es importante mas que el IDE o editor es la herramienta de debug que vayas a utilizar, eso te lo da el navegador. Yo por ejemplo mayormente utilizo las herramientas de desarrollo que vienen tanto en Chrome como en Safari , Firefox también tiene unas propias pero en Firefox suelo utilizar el plugin Firebug.
Estamos hablando de herramientas que te permiten debugar utilizando breakpoints en el código e inspeccionar variables de javascript en tiempo de ejecución como lo harías por ejemplo con visual studio y c++, eso es tremendamente útil, además de la consola y de las características de javascript que te permitirá en medio de la ejecución cambiar un valor o redefinir una función al instante para probar rapidamente posibles soluciones a un error, eso en mi opinion es lo que mas agiliza y facilita el desarrollo.
(http://virtualcraft.net/jsdebug.png)
Agregado un nuevo ejemplo, esta vez se trata del código base para un juego de football:
http://galloman.github.com/ss2d/#samples/football.html
En este ejemplo no se muestra ninguna característica concreta del framework, simplemente es un ejemplo de implementación de gameplay, en este caso un juego de football.
Se ha agregado un componente de Rigid Body para otorgar físicas 2D a los elementos de la escena. Podeis encontrar un ejemplo aquí:
http://galloman.github.com/ss2d/#samples/physics.html
Utiliza box2d para las físicas, por ahora sirve para crear cajas, en breve añadiré otras formas básicas como pelotas y triángulos y mas adelante hay planeado agregar un loader para polygonShapes. También se agregarán otros componentes como el de MouseJoint que se utiliza en el ejemplo atacando a la API de box2d directamente para mover objetos con el mouse.
Saludos.
He agregado una nueva demo, podeis encontrar el código fuente en el repositorio, demos/physicsMultiplayer. Se trata de nuevo de un escenario online pero con físicas 2d, podeis probarlo aquí:
http://virtualcraft.net/physworld/
En esta ocasión además cada jugador puede mover el viewport del escenario con WASD, y escalarlo con Z y X, de esta forma los jugadores pueden ver el mismo escenario desde diferentes "lugares", el servidor seguirá reconociendo correctamente la posición de su puntero.
He empezado con la guia de usuario, de momento explicando los componentes más básicos con ejemplos sencillos. Poco a poco iré introduciendo cada elemento del motor.
http://galloman.github.com/ss2d/manual/
Las secciones que podeis ver en el índice son componentes existes y ya funcionales del framework, pero no están documentados. También se ha agregado una mejora en BitmapTextSprite que permite crear animaciones muy divertidas con las letras, podeis revisitar la demo de textos para ver un ejemplo.
Y por supuesto se han ido corrigiendo algunos bugs sobretodo en temas de propagar correctamente la transformación entre objetos de la escena y se han eliminado los parpadeos de la escena en juegos multiplayer cuando hay mucho retraso de linea entre otros pequeños cambios.
Recordad que el proyecto es open source y está abierto a colaboraciones. Cualquier aportación será bien recibida.
Saludos.
He finalizado el desarrollo de la clase SpriteReel, ya se pueden utilizar Sprite Maps (https://www.google.es/search?q=sprite+map&hl=es&tbm=isch&tbo=u&source=univ) para mostrar animaciones, por supuesto heredando todas las funcionalidades ya existes para un Sprite, aquí podeis ver un ejemplo:
http://galloman.github.com/ss2d/#samples/reels.html
Como metadata se utiliza un formato propio en json que contiene la información de todas las animaciones que se pueden reproducir de un sprite map, acepto sugerencias de herramientas para crear animaciones con sprites de este estilo para hacer conversores de formato como comando o como plugin o sugerir al creador la inclusión de mi formato ;).
Ejemplo formato:
Imagen: http://galloman.github.com/ss2d/samples/assets/reels/goldknight.png
Metadata: http://galloman.github.com/ss2d/samples/assets/reels/goldknight.reelset
También se agradecen donaciones de imágenes con licencia abierta para crear ejemplos, desde luego lucen mucho mas con buenas imágenes que con quads y círculos coloreados.
Saludos.
Agregado soporte parcial para animaciones esqueletales 2D creadas con Spine ( http://esotericsoftware.com/ ).
El soporte aún no es completo, falta implementar el intercambio de imágenes en un mismo slot (animación de sprites) y la compatibilidad con la interpolación stepped y con curva de Bezier, aún así lo considero un gran avance y los ejemplos lucen muy bien incluso sin contar con esas features, podeis ver una demo aquí:
http://galloman.github.com/ss2d/#samples/skeletons.html (click aquí (http://galloman.github.com/ss2d/samples/skeletons.html) si el iFrame os da problemas)
También se han agregado mas secciones a la guia de usuario desde la última actualización, podeis ver la guia de usuario aquí:
http://galloman.github.com/ss2d/manual/index.html
Saludos.
Agregado soporte para WebGL, ahora la lib se deploya en dos archivos, una versión que seguirá renderizando con Canvas2D llamada ss2dLib.js / ss2dLib-min.js y otra con WebGL llamada ss2dLibWGL.js / ss2dLibWGL-min.js, disponible en la página principal:
http://galloman.github.com/ss2d
Se ha agregado alguna mejora para aprovechar WebGL, por ejemplo, ahora las imágenes de los sprites o contenedores de sprites se pueden tintar en tiempo real, para ilustrar esta característica se ha creado un ejemplo con los modelos esqueletales 2D a los que se les puede cambiar el color con un sencillo color picker que hay en el panel superior:
http://galloman.github.com/ss2d/#samples/skeletonsWGL.html
También se ha agregado un nuevo componente llamado ParticleSystem que carga archivos XML .pex generados con Particle Designer (http://www.71squared.com/en/particledesigner) y su representación en la escena GPUParticleEmitter, hay otra versión en desarrollo que utilizará la CPU.
Por ahora se puede ver una demo de la versión GPU que ejecuta toda la lógica de las partículas en la tarjeta gráfica mediante un vertex shader, pero su funcionalidad no es completa. La versión de CPU no será tan potente al calcular la transformación en javascript pero permitirá utilizar algunas características de Particle Designer que la versión en GPU por ahora no es capaz de hacer por la falta de transformation feedback, aquí el ejemplo de las partículas:
http://galloman.github.com/ss2d/#samples/particlesWGL.html
Estoy buscando ayuda para promocionar el framework aunque sea en forma de sugerencias, voy haciendo la guia de usuario y ejemplos a la par que agrego nuevas características y me consume mucho tiempo, si alguien tiene algun consejo cobre como promocionar proyectos open source, se agradecerá.
Enjoy.
He creado un blog para unificar un poco fuentes de documentación, sitio de descarga, noticias, etc, podeis visitarlo aquí:
http://ss2d.wordpress.com/
A partir de ahora las novedades del framework se irán anunciando en noticias del blog así queda mas centralizado.
El dia 2 de Mayo hago una charla sobre SmoothStep2D en Barcelona, he agregado info del evento en el foro de Calendario:
http://www.stratos-ad.com/forums/index.php?topic=16078.0
Quiero felicitarte por el curro que te has pegado con el framework,
no tengo mucha idea de javascript, pero me encanta ver buen codigo
y estoy aprendiendo un montón.
Tengo que hacer un pequeño proyecto y me he acordado de tu framework, he estado un buen rato con el y me he encontrado muy comodo, asi q he decidido usarlo.
Te animo a q completes el manual, y a quien busque un framework para javascript basado en canvas q le eche un ojo.
Muchas gracias blau, estos comentarios siempre son de agradecer. Últimamente lo tengo un poco parado por que entré a trabajar en una empresa de videojuegos finalmente :D, y algunos planes que hice en verano para el framework los he dejado aparcadillos.
Uno de los objetivos del proyecto era hacer curriculum para intentar encontrar un trabajo como el que tengo ahora y me estoy tomando un descanso en mi tiempo libre :), que ha sido un año durillo de no parar, casi recuerdo el septiembre de 2012 como si hubieran pasado semanas.
Me gustaría retomar esos planes en algún momento, también está la cuestión de que ss2d no es mi único proyecto, y tenia la esperanza de encontrar colaboradores a lo largo del año para que mas gente llevaras las riendas, lamentablemente hay tantos proyectos de este estilo que la visibilidad es casi nula. De todas formas se que hay mas gente que al menos está experimentando o prototipando alguna idea con ss2d, yo siempre que puedo doy soporte, pero lo suyo seria darle un empuje para completar la documentación y acabar de pulirlo.
Por necesidades del trabajo llevo un par de meses haciendo un motor similar a éste (pero sólo usando Canvas, WebGL y móviles como que no van de la mano de momento) ¿Has notado una bajada de rendimiento con la última versión de firefox (la 25)? Mi código corría sobre los 200 fps (y así sigue en Chrome) y de repente no consigo que suba de 50 fps. Pasa sólo con usar el "fill" de un único texto. Parece un bug de Firefox (no es precísamente la primera vez que la cagan y baja el rendimiento de repente) pero no encuentro nada en google al respecto.
En fin, ya dirás algo. Enhorabuena por el proyecto :D
EDIT - He encontrado el problema. Cuando la ventana del navegador se pone detrás del botón de menú de Windows 7 de repente pierde 200 frames porque sí. Sólo pasa en Firefox, así que no sé si es un bug de Firefox o de Aero. Vaya cagadas...
pd.- También han cambiado algunos eventos y ahora fallan mientras en Chrome y otros navegadores no. Para mi que la han cagado.