jsGFwk en videos–Nuevas características

En este video enumeramos las nuevas características agregadas durante la semana pasada a jsGFwk.

  1. Documentación auto generada.
  2. Plantilla para Visual Studio 2013.
  3. Nuevo plugin para mejora de rendimiento en el dibujado.
Anuncios

jsGFwk – Plantillas para Visual Studio 2013

jsGFwkGracias a una sugerencia reciente sobre la posibilidad de incluír jsGFwk dentro de Visual Studio 2013, se me cruzó la idea de crear una plantilla de proyectos que sea accesible directamente desde la herramienta.

Para descargar el instalador de la plantilla pueden acceder aquí: https://github.com/matiasiacono/jsGFwk/tree/master/Tools

A continuación un pequeño tutorial de cómo usarlo.

1) Descargar el instalador e instalarlo.

2) Con el proceso de instalación finalizado, en Visual Studio 2013, podremos comprobar su funcionamiento entrando a Tools (Herramientas) => Extensions and Updates (Extensiones y Actualizaciones)

image

3) Al crear un nuevo proyecto de tipo C#, aparecerá la opción de jsGFwk Game Template

image


jsGFwk–Nuevos plugins

jsGFwk

Durante la semana pasada, además de agregar nuevos videos para aprender a desarrollar video juegos con jsGFwk, he creado algunas nuevas funcionalidades importantes.

Filtros sobre sprites

La primera de estas funcionalidades es la posibilidad de aplicar filtros para modificar los sprites antes de comenzar a usarlos.

Con estos filtros es posible tomar nuestras imágenes y cambiarlas a escala de grises, invertir sus colores, oscurecer los colores y agregar “blur”.

jsGFwk.Sprites.createSpriteCollection(“fallingGuy”, jsGFwk.ResourceManager.graphics.character.image,
                    [{left: 409, top: 34, width: 66, height: 26},
                     {left: 480, top: 34, width: 66, height: 26},
                     {left: 558, top: 34, width: 66, height: 26},
                    ], jsGFwk.Sprites.filters.GRAYSCALE);

En el ejemplo anterior, además de recortar y separar una sprite sheet en diferentes sprites, agrupándolos para luego manipularlos como una animación, es posible aplicar un pre filtro. Esto, cuando las imágenes son recortadas las transformará a escala de grises.

Manejo de tipografía

HTML5 y CSS3 (En especial este último) nos brinda la posibilidad de transportar tipografías para que las computadoras que no poseen la tipografía que queremos utilizar puedan ver nuestra página tal cual la diseñamos.

Estas tipografías también pueden ser utilizadas en nuestros juegos, para lo que se creó un nuevo plugin para dar soporte a esto.

// Agregamos el plugin
jsGFwk.include(“Fonts”);

// Creamos la tipografía
jsGFwk.Fonts.createFont({name: ‘zxBold’, source: ‘../SampleResources/zxBold.ttf’});

// La usamos dentro del juego
context.fillStyle = “white”;
context.font = “30pt zxBold”;
context.fillText(“Font Test: zxBold.ttf”, 20, 20);

Fast animations

El último plugin creado hace referencia a una mejora en el renderizado del juego y en la cantidad de cuadros por segundo que podemos obtener.

Hasta el momento contábamos con el plugin “BasicAnimation”, el cual nos daba la posibilidad de dibujar e interactuar con el objeto canvas. A pesar de darnos esta funcionalidad, el rendimiento no es el mejor ni el más rápido.

Por lo tanto, un nuevo plugin aparece para proponer una nueva forma, más optimizada.

Para este caso, solo deberemos remplazar el anterior componente por el nuevo:

jsGFwk.include(“FastAnimation”);

 

Si quieren probar el framework: https://github.com/matiasiac/jsGFwk


jsGFwk en videos–Manejo de tipografías

Hoy veremos como importar tipografías para nuestro juego.