2D Zombies survival gameby @AdriaMJ_

MADRID · NOV 18-19 · 2016

Adrià Manzano

@AdriaMJ_Desarrollador en Pasiona consulting

amj1985@live.com@

MADRID · NOV 18-19 · 2016

DEMO (Single player)

MADRID · NOV 18-19 · 2016

¿ Cómo lo ha hecho ? Javascript basicamente, en el 99% de la aplicación

∘ Tecnologías usadas· Webpack· Gulp· Javascript· Phaser.io· SignalR (RTC Microsoft library)· .NET· ReactJS.NET

MADRID · NOV 18-19 · 2016

Webpack

Empaquetador de modulos de javascript Dispone de loaders que facilitan el compilado y la

transpilación de tu código a javascript nativo (Babel)

MADRID · NOV 18-19 · 2016

Gulp

Automatizador de tareas de javascript

MADRID · NOV 18-19 · 2016

Phaser.io

Framework de javascript para la realización de videojuegos - Build in ECMAScript6 - Open source - Funny!

MADRID · NOV 18-19 · 2016

ECMAScript 6

Standard de javascript que nos proporciona las herramientas clave para desarollar aplicaciones mantenibles en javascript

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedades

Arrow functions =>

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedades

Block-level-scope (let)

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedadesClasses

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedadesConstants

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedadesDefault parameters

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedadesDestructuring 

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedadesModules 

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedadesMap(que no el iterador map!! ¬¬) 

MADRID · NOV 18-19 · 2016

ECMAScript 6

Principales novedadesPromises 

MADRID · NOV 18-19 · 2016

ECMAScript 6

Promises [Promise.All]

MADRID · NOV 18-19 · 2016

ECMAScript 6

Promises [Elements.reduce]

MADRID · NOV 18-19 · 2016

ECMAScript 6

Promises tips

ReduceQueremos que se complete la accion antes de realizar la siguiente iteración.

Promise.All(Elements.map((element) => {});Queremos que en cada iteración se realice una promesa pero no queremos que espere a que termine la anterior.

MADRID · NOV 18-19 · 2016

Zombies GamePhaser.GroupRepresenta un grupo de sprites(imágenes), en función del orden del añadido de los mismos veremos los zombies o nos quedaran detrás del backgroundPhaser.SpriteRepresenta un solo sprite(imágen), esta misma clase tiene las propiedades y métodos de Phaser.Body, entre otros.Phaser.StateRepresentan los estados de la partida, muy útiles a la hora de precargar los assets etc...

MADRID · NOV 18-19 · 2016

Estructura

Src/assets => almacenamos todos los spritesheets y los json asociados a los mismos, las fuentes y los audiosprites.Src/common => Tendremos los estados del juego y las clases base de las que queremos extender, además de Utils y el hub de signalr.Src/config => ficheros javascript donde cargaremos los assets previamente almacenados, así como registrar las animacionesSrc/modules => Tendremos las clases que están extendiendo( o no) de nuestras clases base.

MADRID · NOV 18-19 · 2016

Spritesheet + JSON + JSzombie.png zombie.json atlases.js

MADRID · NOV 18-19 · 2016

Registrando assets

MADRID · NOV 18-19 · 2016

DEMO (Multiplayer)

MADRID · NOV 18-19 · 2016

SignalR¿ Qué es ?Apuesta de microsoft en real time comunication

¿ Qué nos proporciona?Envío massivo de datos entre los dispositivos conectados al hub

¿ Es díficil de implementar?Please…bitc..

MADRID · NOV 18-19 · 2016

SignalR flow

MADRID · NOV 18-19 · 2016

SignalR code

MADRID · NOV 18-19 · 2016

Special thanks

http://www.bionixwallpaper.com/

Unity3D

http://www.opengameart.org/

MADRID · NOV 18-19 · 2016

Q & A@AdriaMJ_

@amj1985@live.com