SmoothStep2D | Framework Javascript Juegos 2D

[Gallo]

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.

[Gallo]

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.

[Gallo]

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.

[Gallo]

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:

Código [Seleccionar] Expand


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.

[Gallo]

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.

[Gallo]

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).

[Gallo]

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.

[Gallo]

Otra pequeña demo para testear algunos arreglos:

http://virtualcraft.net/car/

[Gallo]

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.

[Gallo]

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:

Código [Seleccionar] Expand


//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.

Código [Seleccionar] Expand


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.

[Eskema]

¿Que ide recomiendas/usas para las movidas java? ¿eclipse?, quiero ver si le doy un vistazo y obviamente xcode no vale

[bnl]

Yo hace tiempo para hacer videojuegos con j2me usaba netbeans. Ahora para hacerlos para android uso eclipse

[Gallo]

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.

[Eskema]

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 :)

[bnl]

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.