Programacion de video juegos

INCLU

VERSIÓN D YE IGITAL

GRATIS

GRATIS

La industria de los videojuegos está en su mejor momento. Las herramientas actuales permiten que cualquier persona pueda adquirir los conocimientos para crear un videojuego, sea programador, diseñador, gamer o un entusiasta. Este libro está pensado para lograr ese objetivo. Desde cero, se guía al lector en el desarrollo, hasta llegar a un juego funcional para, finalmente, publicarlo, exponerlo a la comunidad mundial e incluso generar ingresos.

VERSIÓN DIGITAL

Programación de videojuegos

/ Cómo funciona un videojuego: el bucle principal, transformar código en gráfico, interacción con el usuario, inteligencia artificial. / La creación: entorno de trabajo, dibujar y mover los objetos y el jugador a través de periféricos. Desarrollo a partir del clásico “1942”. / JavaScript para principiantes: variables, código, funciones, desplazamiento de los objetos. / JavaScript avanzado: optimizar los cuadros por segundo, detección de colisiones. / Ambientación de un videojuego: animaciones de scroll infinito, puntaje, sonidos y efectos especiales. / Programar con ayuda de frameworks: JavaScript Game Framework / Frameworks avanzados: Phaser. / Integración con dispositivos móviles: migrar el videojuego, compilar para Android y otros dispositivos. / Monetización: plataformas, GameJolt.

¡CON EJEMPLOS PRÁCTICOS!

SOBRE EL AUTOR Matías Iacono es Ingeniero en Sistemas. Es un activo promotor del desarrollo de videojuegos, brindando charlas y conferencias. Ha creado varios frameworks de código abierto para el desarrollo de videojuegos y ha publicado más de 40 videojuegos para diferentes plataformas.

NIVEL DE USUARIO

CATEGORÍA

Intermedio / Avanzado

Desarrollo

Programación de videojuegos

EN ESTE LIBRO ENCONTRARÁ:

YECTO O R P IO P O R P U T DESARROLLA T Y HTML5 CON JAVASCRIP por MATÍAS IACONO

REDUSERS.com

PROFESOR EN LÍNEA

En nuestro sitio podrá encontrar noticias relacionadas y también participar de la comunidad de tecnología más importante de América Latina.

Ante cualquier consulta técnica relacionada con el libro, puede contactarse con nuestros expertos: profesor@redusers.com.

Programacion de video juegos.indd 13

11/03/2016 12:29:16 p.m.

TÍTULO:

Programación de videojuegos

AUTORES:

Matías Iacono

COLECCIÓN:

Manual Users

FORMATO:

24 x 17 cm

PÁGINAS:

320

Copyright © MMXVI. Es una publicación de Fox Andina en coedición con DÁLAGA S.A. Hecho el depósito que marca la ley 11723.

Todos los derechos reservados. Esta publicación no puede ser reproducida ni en todo ni en parte, por ningún medio actual o futuro sin el permiso previo y por escrito de Fox Andina S.A. Su infracción está penada por las leyes 11723 y 25446. La editorial no asume responsabilidad alguna por cualquier consecuencia derivada de la fabricación, funcionamiento y/o utilización de los servicios y productos que se describen y/o analizan. Todas las marcas mencionadas en este libro son propiedad exclusiva de sus respectivos dueños. Impreso en Argentina. Libro de edición argentina. Primera impresión realizada en Sevagraf, Costa Rica 5226, Grand Bourg, Malvinas Argentinas, Pcia. de Buenos Aires en IV, MMXVI.

ISBN 978-987-734-057-0

Iacono, Matías Programación de videojuegos / Matías Iacono - 1a ed. - Ciudad Autónoma de Buenos Aires : Fox Andina; Ciudad Autónoma de Buenos Aires : Dalaga, 2016.

320 p. ; 24 x 17 cm. - (Manual Users; 277) ISBN 978-987-734-057-0 1. Desarrollo de Programas. 2. Diseño de Videojuegos. I. Título CDD 005.4

5

PROGRAMACIÓN DE VIDEOJUEGOS

Prólogo Corrían los años 90 y una Club Nintendo me maravillaba: la revista incluía una nota sobre DigiPen, la universidad canadiense donde se aprendía a desarrollar videojuegos, esos que consumía al máximo como muchos otros niños de mi generación. Fue la primera vez que me entró en la cabeza: los videojuegos se construyen por personas como yo. El artículo dejaba claro que había que dominar las matemáticas si se aspiraba a ser estudiante de DigiPen. Así que lo intenté y, a ciegas, le puse empeño a las matemáticas que nos daban en el colegio.

Una década después, volví a cruzarme con el desarrollo de videojuegos, ya que estudiarlo es ahora posible en Argentina.

Para mi suerte, Matías Iacono estaba entre los educadores a cargo y era uno de esos a los que el viaje que proponía aquella Club Nintendo le calzaba perfecto. Se adaptó a la escasez de herramientas e información de aquellas épocas y, en un presente lleno de frameworks predigeridos, conserva el gusto artesanal propio de un veterano en la materia. No es tarea fácil enseñar JavaScript a un ilustrador/escritor con tantas habilidades para programar como un mineral subterráneo tiene para producir fotosíntesis. Pero, contra todas las probabilidades, aprendí en todas y cada una de sus clases.

El que tenga la suerte de leer este libro encontrará una nueva versión de las excelentes clases que imparte el autor, con las ventajas del diseño editorial. Transitará un camino claro y conciso a través de JavaScript y HTML5, con presentaciones sencillas y sintéticas, enlaces de refuerzo, conceptos relacionados y curiosidades. Sin darse cuenta, estará entendiendo cómo pensar para que la máquina piense, y, al final, saldrá con un nostálgico ejemplo práctico, un 1942 hecho en casa. En fin, que pase el lector por este humilde umbral, hacia esta ganga de herramientas para la forja de videojuegos, con la marca de autor de un gran herrero de la vieja escuela, y que disfrute pronto la fragua de este inmersivo arte.

Nahuel G. Dimarco Bustos Ilustrador y escritor

www.redusers.com

6

PRELIMINARES

El libro de un vistazo Este libro está dirigido a todos aquellos que quieran aprender sobre el desarrollo de videojuegos mediante las tecnologías y plataformas que más se han expandido en los últimos años. Cada capítulo está pensado para que el lector adquiera nuevos conocimientos de forma incremental, afianzando lo aprendido y dejando paso a nuevas técnicas, hasta el punto de tener un juego completamente funcional.

libro. Además, aplicaremos estas técnicas de PARA ENTENDER LOS VIDEOJUEGOS

programación en la implementación de funciones

La forma de crear el código de los videojuegos

para el manejo del teclado y el mouse, y así

difiere de las aplicaciones tradicionales, como

podremos mover nuestros objetos de juego

las de escritorio o Web, requiriéndonos conocer

en la pantalla con estos periféricos.

nuevas ideas y conceptos. En este capítulo aprenderemos conceptos centrales como el de “bucle principal”; veremos las diferencias entre los juegos 2D y 3D y conoceremos qué es la inteligencia artificial.

PROGRAMACIÓN AVANZADA CON JAVASCRIPT Aquí ampliaremos los conocimientos sobre JavaScript: entenderemos cómo son manejadas las funciones y los punteros en la memoria,

LA CREACIÓN DE UN VIDEOJUEGO

cómo mejorar el rendimiento de nuestro

En esta sección aprenderemos a crear el

videojuego y la detección de colisiones entre

área principal de trabajo, donde el juego será

objetos. Además, crearemos nuestro propio

ejecutado, así como el conjunto de herramientas

framework de videojuegos, que podremos

que usaremos a lo largo de todo el libro.

reutilizar en otros desarrollos.

Entenderemos cómo dibujar y mover objetos dentro del contexto de nuestro videojuego.

LA AMBIENTACIÓN DE UN VIDEOJUEGO Creado el videojuego funcional, en este capítulo CONCEPTOS BÁSICOS DE PROGRAMACIÓN CON JAVASCRIPT

iremos un poco más lejos agregándole otros elementos que enriquecerán nuestro desarrollo.

En este apartado aprenderemos las

Puntajes, efectos de movimiento en el entorno

particularidades de JavaScript, el lenguaje de

del juego, animaciones y sonidos nos ayudarán

programación que usaremos durante todo el

a darle el cierre a nuestro videojuego.

www.redusers.com

7

PROGRAMACIÓN DE VIDEOJUEGOS

y esperable. En este capítulo llevaremos nuestro PROGRAMAR CON AYUDA DE FRAMEWORKS

videojuego a un dispositivo móvil, tomando como base Android para luego afirmar el conocimiento

Con nuestro videojuego terminado, tomaremos

con otras plataformas.

todo lo creado y aprendido y nos mudaremos de ambiente. Aprenderemos a utilizar un framework profesional migrando el código a jsGFwk, lo que nos permitirá ahorrar tiempo y esfuerzo al momento de desarrollar futuros videojuegos.

MONETIZACIÓN DE LOS VIDEOJUEGOS Aprender a desarrollar videojuegos puede ser una tarea desafiante y entretenida. Pero además de divertirnos, también es posible obtener un rédito económico por esta tarea.

FRAMEWORKS AVANZADOS

En este apartado, aprenderemos cómo podemos

En este capítulo migraremos nuestro código

monetizar nuestro desarrollo en una de las

a uno de los frameworks más populares

plataformas más conocidas en la actualidad.

del mercado, que cuenta con una gran comunidad de desarrolladores en la actualidad: Phaser. Conoceremos sus características y aprenderemos cómo utilizar esta nueva herramienta para crear videojuegos.

WINDOWS 10 COMO PLATAFORMA PARA VIDEOJUEGOS Si hay algo que no podemos negarle al sistema operativo de Microsoft es su masividad.

Por eso es importante entender cómo

INTEGRACIÓN CON DISPOSITIVOS MÓVILES

podemos servirnos de este sistema para masificar nuestros desarrollos. En este último

El desarrollo para dispositivos móviles

apéndice, aprenderemos a migrar el videojuego

—y más, el de videojuegos— se ha vuelto,

a la plataforma de Microsoft y así llegar a

en la actualidad, algo prácticamente natural

millones de posibles consumidores.

INFORMACIÓN COMPLEMENTARIA A lo largo de este manual, podrá encontrar una serie de recuadros que le brindarán información complementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados. Para que pueda distinguirlos en forma más sencilla, cada recuadro está identificado con diferentes iconos: CURIOSIDADES E IDEAS

ATENCIÓN

DATOS ÚTILES Y NOVEDADES

www.redusers.com

SITIOS WEB

8

PRELIMINARES

Contenido

Moviendo al jugador ..............................................47 Animando al jugador .............................................50

Sobre el autor ............................................................. 4

Resumen ....................................................................53

Prólogo ....................................................................... 5

Actividades ................................................................54

El libro de un vistazo .................................................. 6 Información complementaria..................................... 7 Introducción ............................................................. 12

Para entender los videojuegos Cómo funciona un videojuego ..................................14 El bucle principal ..................................................14 Transformar el código en gráficos .........................16 Interacción con el usuario......................................19 Diferencias entre los juegos en 2D y 3D ................20

Resumen ....................................................................23

Conceptos básicos de programación con JavaScript

Actividades ................................................................24

JavaScript para principiantes ...................................56

Inteligencia artificial en los videojuegos ................22

Variable y tipos de datos........................................56 Formatear el código ..............................................59 Estados de las variables ........................................61 Comparar variables ...............................................64 Funciones ..............................................................68 Objetos ..................................................................72 Movimientos con el teclado y el mouse....................77 Activar las teclas ...................................................78 Capturar el mouse .................................................88 Resumen ....................................................................91 Actividades ................................................................92

La creación de un videojuego El entorno del videojuego .........................................26 Área de trabajo .....................................................26 Contexto de dibujo.................................................31 Dibujar en la pantalla.................................................33 Figuras geométricas ..............................................34 Imágenes en pantalla ............................................41 Cómo cargar las imágenes.....................................43

www.redusers.com

9

PROGRAMACIÓN DE VIDEOJUEGOS

Resumen ..................................................................171 Actividades ..............................................................172

Programación avanzada con JavaScript JavaScript avanzado ..................................................94 Manejo avanzado de funciones ..............................94 Parámetros de entrada en las funciones ................98 Optimizar el máximo de cuadros por segundo......106 Colisiones y objetos activos ....................................110 El archivo framework.js ......................................114 El archivo teclado.js ............................................116 El archivo mouse.js..............................................117 El archivo avion.js ...............................................118 El archivo enemigo.js ..........................................122

Detección de colisiones ...........................................131

Programar con ayuda de frameworks

Manejo del estado del objeto..................................136

Frameworks y herramientas para el desarrollo

Resumen ..................................................................141

de videojuegos ........................................................174

El archivo bala.js .................................................126

Actividades ..............................................................142

Un vistazo a los frameworks de desarrollo ..........174 JavaScript Game Framework (jsGFwk) ..................179 Configurar el entorno de trabajo..........................179 Cargar recursos en la memoria............................187 Dibujar la pantalla...............................................192 Mejorar el comportamiento del avión..................194 Colisiones entre objetos.......................................201 Incorporar los sonidos .........................................209 Agregar múltiples canales de sonido....................213 Puntaje y tipografía .............................................215 Agregar las escenas y los estados en el juego ......217 Mejoras en el desempeño con temporizadores ....223

La ambientación de un videojuego El ambiente y la temática .......................................144 Animaciones de scroll infinito ..............................144 Animaciones de scroll con Parallax ........................................................150 Puntaje.....................................................................154 Sonidos y efectos especiales...................................166

www.redusers.com

10

PRELIMINARES

Resumen ..................................................................225 Actividades ..............................................................226

Monetización de los videojuegos Plataformas de monetización ................................296

Frameworks avanzados

Publicar en GameJolt..........................................297

Primeros pasos con Phaser .....................................228 Instalación del framework ...................................228 Configuración ......................................................235 Carga de recursos ................................................238 Agregar la portada del juego ...............................243 Crear el juego en Phaser .....................................253 Agregar el puntaje y los sonidos ..........................263 Resumen ..................................................................267 Actividades ..............................................................268

Windows 10 como plataformas para videojuegos Videojuegos y Universal Apps ................................304 Un videojuego dentro de una Universal App ..............304

Integración con dispositivos móviles Migrar nuestros desarrollos ..................................270 Eligiendo las herramientas ..................................270 Crear un proyecto en Intel XDK .............................273 Migrar el videojuego ...........................................276 Compilar para Android ........................................284 Migrar a otros dispositivos móviles ........................287

Servicios al lector

Resumen ..................................................................293

Índice temático........................................................312

Actividades ..............................................................294

Sitios web relacionados...........................................314

www.redusers.com

12

PRELIMINARES

Introducción El desarrollo de videojuegos está, hoy, más pujante que nunca.

A diferencia de 10 o 20 años atrás, cuando el acceso al hardware y a los conocimientos estaban al alcance de una minoría, hoy podemos acceder a herramientas de trabajo, IDEs de desarrollo, foros, chats y documentación sobre esta temática con un solo clic. Mientras en aquellos años no encontrábamos un libro que nos enseñase cómo construir nuestro propio videojuego, hoy podemos contar con este y otros para que nos guíen y nos pongan en la senda del desarrollo de este apasionante apartado en el desarrollo de software.

Este libro tiene el objetivo de ayudar a aquellas personas, desarrolladores novatos o expertos que quieran incursionar en el mundo del desarrollo de videojuegos, a cumplir con este ideal.

JavaScript y HTML5 ya se han consolidado en el mundo del desarrollo de software al punto en que son utilizadas para la creación de aplicaciones empresariales de alto rendimiento.

Las grandes empresas de desarrollo de software han apostado por estas dos tecnologías y las han incorporado en todas sus herramientas de desarrollo. Es por esto —y por mucho más— que este libro toma estas tecnologías y las aplica al desarrollo de videojuegos, demostrando su gran potencia y flexibilidad, al mismo tiempo, dándole al lector la posibilidad de crear videojuegos con las herramientas que se usarán, cada vez más intensivamente, durante los siguientes años.

Eligiendo un conjunto de herramientas, entre un lenguaje de programación hoy en auge y un estándar de maquetado utilizado en cada una de las computadoras del mundo, el contenido de este libro nos enseña todo lo que necesitamos saber para poder crear nuestros videojuegos, ejecutarlos en un navegador, integrarlos con un framework de alta calidad, migrar nuestros desarrollos hacia los dispositivos móviles y hasta monetizarlos en la Web. Por todo esto, no hay dudas de que el lector de este libro encontrará todo aquello que estaba buscando para comprender, aprender y publicar sus propios videojuegos e, incluso, aprender nuevas técnicas de desarrollo para aplicar en otras áreas de la computación.

www.redusers.com

13

PROGRAMACIÓN DE VIDEOJUEGOS

Para entender los videojuegos En este primer capítulo aprenderemos los principales conceptos que están detrás del desarrollo de videojuegos.

Conoceremos su estructura, los lenguajes y tecnologías que debemos considerar en el desarrollo de videojuegos para la Web, las diferencias al programar en 3D y 2D, y qué entendemos por inteligencia artificial.

▼

Cómo funciona

Inteligencia artificial

un videojuego........................... 14

en los videojuegos ............................ 22

El bucle principal ............................. 14 Transformar el código en gráficos ... 16

▼

Resumen................................... 23

▼

Actividades............................... 24

Interacción con el usuario ................ 19 Diferencias entre los juegos en 2D y 3D....................................... 20

www.redusers.com

14

1. PARA ENTENDER LOS VIDEOJUEGOS

Cómo funciona un videojuego Antes de comenzar el desarrollo de un videojuego, es importante entender qué lo diferencia del desarrollo de aplicaciones tradicionales para PC de escritorio, dispositivos móviles o la Web. A diferencia de una aplicación tradicional, cada línea de código adicional o cada cálculo matemático implementado de forma incorrecta pueden afectar dramáticamente el resultado final del videojuego.

Cuidar la performance y el rendimiento final de nuestro desarrollo resulta uno de los trabajos más importantes en un videojuego.

El bucle principal Una primera diferencia entre el desarrollo de una aplicación para escritorio, dispositivos móviles o la Web en lenguajes de alto nivel y el desarrollo de videojuegos es el bucle principal del programa.

Es importante señalar que un videojuego, a diferencia de una aplicación tradicional, requiere redibujar constantemente la pantalla para poder mostrar los diferentes gráficos del juego y que se genere una apariencia de movimiento.

Como si se tratase de un viejo rollo de película para el cine, donde cada cuadro representaba un instante de la película que se proyectaba en la pantalla, un videojuego necesita replicar este comportamiento: se debe intentar mostrar hasta 24 cuadros por segundo para generar una sensación, ante el ojo humano, de que los diferentes gráficos cobran vida y efectivamente se mueven.

Para nuestro código, entonces, será necesario contar con un mecanismo mediante el cual podamos repetir una y otra vez las

BRACKETS Existen diferentes editores de texto que nos ayudarán a escribir el código de un videojuego.

Brackets es una aplicación gratuita con soporte para JavaScript y HTML5 que usaremos en este libro.

Puede descargarse desde el sitio web http://www.brackets.io

www.redusers.com

15

PROGRAMACIÓN DE VIDEOJUEGOS

mismas acciones hasta que el juego termine. Existen diferentes formas de conseguir esto, algunas de las cuales requerirán más control de nuestra parte, como se observa en el siguiente ejemplo de código: <script type=”application/javascript”> for ( ; ; ) { //Tareas varias } </script>

En el caso anterior, simplemente creamos un bucle for sin restricciones y dejamos que gire indefinidamente. El principal problema con el que nos encontramos al realizar esto es que nosotros deberemos realizar arduas tareas de sincronización en la ejecución del juego para alcanzar determinados cuadros por segundo o FPS (frames per seconds).

En el caso de JavaScript, una de las formas más fáciles de manejar la cantidad de FPS es mediante la función setInterval, dejando al entorno de ejecución y al lenguaje que se encarguen de ello. function bucleDeJuego() { console.log(‘ejecutado’); } setInterval(bucleDeJuego, 1000/33);

En el Capítulo 2 nos ocuparemos de la función setInterval en detalle.

De cualquier manera, el código anterior garantizará 33 FPS, donde por

FENÓMENO PHI Max Wertheimer, psicólogo de la Gestalt, definió en 1912 el llamado fenómeno Phi. Este postula que el cerebro y el ojo humano pueden percibir que algo está en movimiento a partir de una sucesión de imágenes estáticas si estas se muestran a una frecuencia particular.

www.redusers.com

16

1. PARA ENTENDER LOS VIDEOJUEGOS

cada uno de los cuadros del juego se ejecutará la función bucleDeJuego y su código, pudiendo usar esta como punto inicial de nuestro juego.

En la Figura 1 podemos ver el resultado de la ejecución de este bucle infinito.

Figura 1. La consola del navegador muestra continuamente el mensaje dentro de la función.

Transformar el código en gráficos Otra de las bases fundamentales en el desarrollo de videojuegos se relaciona con la capacidad para mostrar los resultados de los cálculos matemáticos en la pantalla.

Desde los juegos que solo interactúan con el usuario por medio de texto plano hasta aquellos con gráficos tridimensionales de alta resolución, todos requieren interactuar con la pantalla o con algún periférico que le dé al usuario información sobre lo que está pasando en el juego.

En el caso de HTML5, contamos con un componente especializado para esto y con el que podremos interactuar desde JavaScript de forma directa. ... <body> <canvas id=”lienzo” width=”640” height=”480”></canvas> </body> ...

www.redusers.com

25

PROGRAMACIÓN DE VIDEOJUEGOS

La creación de un videojuego En este capítulo comenzaremos a crear nuestro primer videojuego: conoceremos los diferentes componentes para el dibujado en 2D, el manejo de cuadros por segundo y aprenderemos cómo dibujar imágenes en la pantalla.

El videojuego cuya creación iniciaremos aquí irá evolucionando a través de los capítulos hasta convertirse en un juego totalmente funcional.

▼

▼

El entorno del videojuego ....... 26

Cómo cargar las imágenes ............... 43

Área de trabajo................................ 26

Moviendo al jugador ........................ 47

Contexto de dibujo ........................... 31

Animando al jugador........................ 50

Dibujar en la pantalla ............... 33

▼

Resumen................................... 53

▼

Actividades............................... 54

Figuras geométricas......................... 34 Imágenes en pantalla....................... 41

www.redusers.com

26

2. LA CREACIÓN DE UN VIDEOJUEGO

El entorno del videojuego Antes de comenzar a ver otros elementos que forman parte de nuestro desarrollo, es necesario configurar el entorno donde crearemos el videojuego. Para esto, y como se indicó en los ejercicios del Capítulo 1, usaremos Brackets como entorno de desarrollo.

Si bien cada desarrollador podrá utilizar cualquier herramienta con la que se sienta cómodo, Brackets provee gran soporte para el desarrollo de videojuegos con HTML5 y JavaScript.

Es importante destacar que el desarrollo con estas tecnologías, como Brackets, en este caso, se sustenta en la escritura de código en texto plano y, por lo tanto, no requiere de procesos de compilación.

Es el navegador web el responsable de interpretar y ejecutar el código que hayamos escrito.

Figura 1. Presionando sobre el botón azul en el centro de la página podremos descargar Brackets en nuestra computadora. Una vez instalado, ya podemos empezar a configurar nuestro entorno de trabajo.

Área de trabajo Para crear nuestro videojuego, lo primero que es necesario configurar, como parte del entorno, es el área de trabajo. Se trata del lugar donde vamos a escribir nuestro código y que servirá, además, para configurar todos los aspectos visuales que rodean al videojuego. www.redusers.com

27

PROGRAMACIÓN DE VIDEOJUEGOS

PAP: CREACIÓN DEL ÁREA DE TRABAJO

01

Abra Brackets y, en la barra de herramientas, presione sobre File y luego Open Folder. Esto mostrará una ventana emergente que permitirá seleccionar la ubicación de nuestro proyecto.

02

Navegue con la ventana de exploración hasta el directorio o carpeta de su elección.

Este será su lugar de trabajo final. Presione el botón Select Folder para abrir la carpeta.

www.redusers.com

28

03

04

2. LA CREACIÓN DE UN VIDEOJUEGO

Una vez abierto el directorio, presione con el botón derecho del mouse sobre el área de trabajo de la izquierda y luego elija la opción New File.

Nombre el archivo creado como index.html y luego haga doble clic sobre él.

Este archivo será el punto de entrada de nuestro videojuego.

www.redusers.com

55

PROGRAMACIÓN DE VIDEOJUEGOS

Conceptos básicos de programación con JavaScript En este capítulo aprenderemos los conceptos esenciales de JavaScript, su estructura, sintaxis y palabras clave. Al mismo tiempo, comprenderemos cómo capturar y manejar desde nuestro código el teclado y el mouse y, finalmente, cómo mover nuestro personaje por la pantalla para generar interacción entre el jugador y los objetos de nuestro videojuego.

▼

JavaScript para

▼

Movimientos con el teclado

principiantes ............................ 56

y el mouse ................................ 77

Variable y tipos de datos .................. 56

Activar las teclas ............................. 78

Formatear el código......................... 59

Capturar el mouse............................ 88

Estados de las variables ................... 61 Comparar variables.......................... 64

▼

Resumen................................... 91

▼

Actividades............................... 92

Funciones ........................................ 68 Objetos............................................. 72

www.redusers.com

56

3. CONCEPTOS BÁSICOS DE PROGRAMACIÓN CON JAVASCRIPT

JavaScript para principiantes En el Capítulo 2 llegamos a escribir las primeras líneas de código para darle vida al objeto principal del videojuego, aunque no profundizamos por completo sobre el lenguaje de programación que estamos utilizando. En este capítulo agregaremos más funcionalidad a nuestro videojuego pero al mismo tiempo comenzaremos a involucrarnos más profundamente con JavaScript y sus particularidades como lenguaje de programación dinámico.

Conocer esto es de suma importancia para poder realizar nuestros propios videojuegos en el futuro sin la ayuda de una guía directa.

Variable y tipos de datos JavaScript no es un lenguaje de programación convencional.

Si estamos acostumbrados a lenguajes como C# o Java, notaremos que existe cierta similitud en su sintaxis, aunque se diferencie por completo en la forma como se manejan las variables, funciones y referencias. Podemos nombrar dos principales diferenciadores, que serán tratados en el transcurso de este capítulo y en el Capítulo 4: el lenguaje no tipado y dinámico, por un lado, y el uso de prototipos, por el otro.

Si ya hemos desarrollado en diferentes lenguajes tipados, lo primero que debemos aprender a diferenciar es el modo en el que trabajamos con los tipos de datos. En JavaScript no es necesario declarar explícitamente el tipo de dato que contendrá una variable y, aunque así lo quisiéramos hacer, no contamos con palabras reservadas comparables a otros lenguajes que identifiquen estos tipos de datos.

Al mismo tiempo, una variable podría, durante el transcurso de su vida, cambiar de tipo simplemente asignándole otro valor.

LENGUAJES TIPADOS Se denomina lenguajes de tipado fuerte a todos aquellos lenguajes de programación que requieren explícitamente definir un tipo de dato previo para una variable particular. En este sentido, la variable y su ejecución están atadas fuertemente a su tipo de dato y solo puede contener valores de dicho tipo.

www.redusers.com

57

PROGRAMACIÓN DE VIDEOJUEGOS

<script type=”application/javascript”> //Variable numérica var a = 10; //Variables con texto var b = ‘mi texto’; var c = “mi otro texto”; //Variables buleanas var d = true; e = false; </script>

En el código anterior podemos ver los tipos de datos primarios comunes en JavaScript. En este caso, el uso de la palabra reservada var es opcional e incluso podremos crear una nueva variable sin esta. Pero, para una mejor lectura del código y para evitar problemas con versiones futuras de JavaScript y sus intérpretes, siempre conviene agregar var en una declaración de variable. Esto también será de gran ayuda para la legibilidad del código.

A pesar de que no podemos declarar el tipo de datos al momento de crear una variable, JavaScript asignará un tipo de datos específico

EN JAVASCRIPT LA DECLARACIÓN DE LOS DATOS SE REALIZA DE FORMA

en base al valor que tengamos del lado derecho

IMPLÍCITA

de la igualdad. Mientras los lenguajes tipados requieren una declaración explícita de los datos, en JavaScript se hace de forma implícita, o sea, el tipo está dado por el valor a albergar.

VAR NO ES VARIANT Si llevamos un tiempo destacable en el mundo de la programación y hemos utilizado lenguajes como Visual Basic, podríamos confundir el uso de var y el cambio de tipos con el tipo variant de este lenguaje.

En JavaScript, estas variables no son tipos variantes y no deben confundirse en su funcionamiento.

www.redusers.com

58

3. CONCEPTOS BÁSICOS DE PROGRAMACIÓN CON JAVASCRIPT

var a = 10; var b = ‘mi texto’; var c = “mi otro texto”; var d = true; e = false; console.log(typeof a); console.log(typeof b); console.log(typeof c); console.log(typeof d); console.log(typeof e);

Teniendo en cuenta el código anterior, podemos usar la palabra reservada typeof y obtener el tipo de dato que contiene cada una de las variables. En la Figura 1 vemos el resultado en la consola de comandos.

Figura 1. La consola muestra el tipo de dato de la variable para cada caso.

USO DE NEGACIONES Simplificar la escritura del código es muy importante al momento de programar. Un código compacto resulta más fácil de leer y entender. Si trabajemos con valores buleanos, siempre que queramos cambiar su valor, el mejor mecanismo será negarlo de la siguiente forma: A = !A

www.redusers.com

93

PROGRAMACIÓN DE VIDEOJUEGOS

Programación avanzada con JavaScript En este capítulo profundizaremos nuestros conocimientos sobre desarrollo de videojuegos con JavaScript, ya que llegar a dominarlo es tan importante como dominar el desarrollo de videojuegos. Aprenderemos aún más sobre objetos, referencias y funciones, variables y sus alcances, mientras seguimos construyendo nuestro videojuego.

▼

JavaScript avanzado ................ 94

El archivo enemigo.js..................... 122

Manejo avanzado de funciones ........ 94

El archivo bala.js ........................... 126

Parámetros de entrada en las funciones ............................... 98

▼

Detección de colisiones .........131

▼

Manejo del estado

Optimizar el máximo de cuadros por segundo.................. 106

del objeto ...............................136 ▼

Colisiones y objetos activos ..110 El archivo framework.js ................. 114

▼

Resumen.................................141

▼

Actividades.............................142

El archivo teclado.js....................... 116 El archivo mouse.js ........................ 117 El archivo avion.js .......................... 118

www.redusers.com

94

4. PROGRAMACIÓN AVANZADA CON JAVASCRIPT

JavaScript avanzado En el Capítulo 3, además de seguir desarrollando nuestro videojuego, aprendimos algunos conceptos básicos de JavaScript: diferentes tipos de comparadores, nomenclaturas particulares del lenguaje, creación de objetos, tipos de datos, entre otros.

En este capítulo iremos más lejos en la búsqueda de conocimientos sobre el lenguaje y técnicas de desarrollo de videojuegos. Aún quedan muchos trucos en el manejo de funciones, en la creación de objetos, en el manejo de datos y memoria. También optimizaremos la forma de dibujar en la pantalla para conseguir hasta 60 cuadros por segundo en nuestros juegos.

Manejo avanzado de funciones En el capítulo anterior dimos un pequeño vistazo sobre el manejo de funciones en JavaScript. Aprendimos qué son las funciones, cómo declararlas, cómo manejarnos con las funciones anónimas, encapsular nuestro código dentro de una función para reutilizarlo y, finalmente, usarlas para crear objetos. Ahora es momento de indagar más profundo y aprender lo que nos ofrece el lenguaje para flexibilizar el desarrollo de código.

Dijimos que JavaScript se diferencia, entre otras cosas, por ser un lenguaje dinámico, por no contar con una declaración específica para tipos de datos (aunque los infiera en base al valor asignado) y por tener una sintaxis simplificada. Todo lo anterior, además de ser aplicado independientemente —como con las variables, al no declarar tipos de datos, o la creación de objetos con una sintaxis simplificada—, podemos usarlo en conjunto con las funciones. <html> <head> <title>Funciones</title> </head> <body> </body> <script>

www.redusers.com

95

PROGRAMACIÓN DE VIDEOJUEGOS

function miFuncion() { ... ... } miFuncion(‘hola mundo’); </script> </html>

Como en cualquier lenguaje de programación, podemos enviarle parámetros a una función al momento de ejecutarla. En el caso de JavaScript, teniendo en cuenta los principios de dinamismo que mencionábamos, es posible enviarle estos parámetros de diferentes maneras, así como es posible que los capturemos (o no) desde la misma función. function miFuncion(mensaje) { console.log(mensaje); }

Como en cualquier lenguaje tradicional, tras cada parámetro enviado a una función, necesitaremos contar con una variable que almacene el parámetro enviado. Al estar trabajando en un lenguaje que infiere los tipos de datos, aquí tampoco será necesario definirlos. De esta forma, como en el ejemplo enviamos una cadena de texto, entonces la variable mensaje será de este tipo de dato. En la Figura 1 vemos el resultado de la ejecución de la función en la consola.

PALABRAS RESERVADAS JavaScript es un lenguaje de programación que posee pocas palabras reservadas. Dependiendo de la versión e implementación que utilicemos, estas pueden variar ligeramente, aunque de todas formas siempre serán muy pocas. Para conocer estas palabras reservadas podemos ingresar a: www.w3schools.com/js/js_reserved.asp

www.redusers.com

96

4. PROGRAMACIÓN AVANZADA CON JAVASCRIPT

Figura 1. En la consola vemos el texto enviado desde la llamada a la función.

Teniendo en cuenta el concepto de dinamismo del lenguaje, es posible enviar cualquier otro tipo de dato a la función.

Esta, por lo tanto, se adaptará al valor del parámetro de entrada. <script> function miFuncion(mensaje) { console.log(typeof(mensaje)); console.log(mensaje); } miFuncion(‘hola mundo’); miFuncion(123); miFuncion({ valor: 123 }); miFuncion(true); </script>

En el código anterior, hemos usado la misma función y le enviamos diferentes tipos de datos. Sin obtener error alguno, cada uno de los valores fueron pasados en el momento de la ejecución haciendo que la variable mensaje se adapte a este tipo. En la Figura 2 vemos el resultado de esta ejecución, donde en base al parámetro enviado, la función typeof nos muestra el tipo de dato inferido. www.redusers.com

143

PROGRAMACIÓN DE VIDEOJUEGOS

La ambientación de un videojuego En los capítulos anteriores hemos creado las partes fundamentales de un videojuego: animaciones, movimientos, interacción con los periféricos y colisiones de objetos. Además, construimos un micro framework reutilizable para futuras implementaciones. No obstante, aún nos falta cerrar algunas aristas; el sonido, el entorno visual y finalmente un menú de opciones y un contador de vidas terminarán de darle carácter y cohesión al juego. En este capítulo, entonces, veremos cómo implementar estos pequeños, pero vitales elementos.

▼

El ambiente y la temática .....144

▼

Sonidos y efectos especiales ...............................166

Animaciones de scroll infinito ........ 144 Animaciones de scroll con Parallax .................................. 150

▼

Resumen.................................171

Puntaje ..................................154

▼

Actividades.............................172

www.redusers.com

144

5. LA AMBIENTACIÓN DE UN VIDEOJUEGO

El ambiente y la temática Todos los videojuegos se sustentan en una historia de fondo, que puede ser tan simple o compleja como queramos. Esta historia es reforzada, generalmente, con el entorno visual. Esto quiere decir que lo que vemos en el videojuego forma parte de esa historia que debe ser contada. En nuestro caso, un avión de la Segunda Guerra Mundial se enfrenta a hordas de aviones enemigos pero, hasta el Capítulo 4, no contamos con un entorno visual: simplemente con una pantalla en blanco por donde se desplazan todos los objetos del juego.

Aprendamos, entonces, cómo crear ese entorno.

Animaciones de scroll infinito Tengamos en cuenta que en nuestro juego el avión se desplaza por la pantalla, los enemigos se acercan desde la parte superior de la misma, pero no se está moviendo realmente hacia algún objetivo.

Esto quiere decir que no está desplazándose como lo haría un avión verdadero.

Existen diferentes técnicas para generar la sensación de movimiento en un videojuego de dos dimensiones como el nuestro. La más común es la llamada scroll infinito o desplazamiento vertical infinito.

Esta técnica consiste en tomar una imagen con un patrón de colores o gráficos simples y desplazarla en sentido contrario al de nuestro personaje. En la Figura 1 vemos un diagrama de este concepto.

Figura 1.

El personaje posee un movimiento aparente hacia arriba, pero es el fondo el que se mueve hacia abajo. www.redusers.com

145

PROGRAMACIÓN DE VIDEOJUEGOS

De esta forma, entonces, desplazamos el fondo de manera constante hacia abajo creando la idea de que es el avión el que avanza. Es importante destacar que la velocidad de desplazamiento del fondo será la que cree la idea de velocidad. Mientras más rápido se mueva, más rápido parecerá que viaja nuestro personaje. Si bien nosotros usaremos un patrón simple, este puede ser tan complejo como nuestro videojuego lo requiera. En la Figura 2 vemos un ejemplo de estos patrones.

Figura 2. El fondo de la imagen representa el agua por donde sobrevolará nuestro avión, junto con un grupo de barcos que le dan contexto.

El primer paso, entonces, será cargar la nueva imagen en memoria para luego mostrarla en pantalla. var spriteSheet = new Image(), fondo = new Image(); spriteSheet.onload = function () { ... ... }; spriteSheet.src = ‘images/1942.png’; fondo.src = ‘images/fondo.png’;

www.redusers.com

146

5. LA AMBIENTACIÓN DE UN VIDEOJUEGO

Para esto crearemos una nueva variable, fondo, del tipo imagen.

Al igual que con la imagen que contiene los elementos principales del juego, asignaremos la dirección de la nueva imagen a la propiedad src del objeto fondo.

A continuación, y como aprendimos en el Capítulo 4, crearemos un nuevo archivo de JavaScript con el código que manejará nuestro fondo del juego. var fondoJuego = { actualizar: function (delta) { }, dibujar: function (contexto) { contexto.drawImage(fondo, 0, 0); } };

Por el momento solo crearemos el nuevo objeto y dibujaremos el contenido de la variable fondo en la pantalla. Los valores para el eje de coordenadas X e Y de la función drawImage quedarán en 0. Esto nos permitirá mostrar la imagen desde la parte izquierda superior del lienzo de dibujo y cubrir, en base al tamaño de la imagen, todo el lienzo.

Por último, agregaremos las referencias a este archivo externo en la página principal y lo incluiremos en los objetos a ser dibujados. <html> <head> <title>Mi videojuego</title> ... ... <!-- Agregamos la referencia al fondo del juego --> <script src=”scripts/fondoJuego.js” type=”application/javascript”></script> </head> <body> <canvas id=”miCanvas” width=”640” height=”480”></canvas> </body>

www.redusers.com

173

PROGRAMACIÓN DE VIDEOJUEGOS

Programar con ayuda de frameworks Hemos transitado la evolución natural en el desarrollo de videojuegos. Creamos las bases de código para dibujar elementos en pantalla, los hicimos moverse, disparar y atacar enemigos.

En este capítulo aprenderemos mucho más sobre los frameworks y terminaremos migrando nuestro desarrollo a uno en particular que nos ayudará a mejorar el funcionamiento de nuestro videojuego.

▼

Frameworks y herramientas para

Incorporar los sonidos .................... 209

el desarrollo de videojuegos ...174

Agregar múltiples canales

Un vistazo a los frameworks

de sonido........................................ 213

de desarrollo .................................. 174

Puntaje y tipografía ....................... 215 Agregar las escenas y los estados

▼

JavaScript Game Framework

en el juego ..................................... 217

(jsGFwk) ................................179

Mejoras en el desempeño con

Configurar el entorno de trabajo .... 179

temporizadores .............................. 223

Cargar recursos en la memoria ...... 187 Dibujar la pantalla ......................... 192

▼

Resumen.................................225

▼

Actividades.............................226

Mejorar el comportamiento de nuestro avión ............................. 194 Colisiones entre objetos ................. 201

www.redusers.com

174

6. PROGRAMAR CON AYUDA DE FRAMEWORKS

Frameworks y herramientas para el desarrollo de videojuegos Las herramientas para el desarrollo de videojuegos existen desde que los videojuegos existen; es un proceso inevitable. Las tareas repetitivas en la creación de un videojuego —como la confección de mapas, manejo de animaciones, texto y diálogos— tienden a empaquetarse en funciones más complejas reutilizables para evitar la reescritura de una solución ya probada. El aglutinamiento de muchas de estas funciones en un marco referencial suele decantar en lo que conocemos como frameworks de desarrollo de videojuegos: desde los más avanzados, como DirectX, Cry Engine, Unreal Engine, hasta algunos más simples como Scumm, Impact, Div Studio, o incluso otros que son un híbrido entre un framework y una herramienta de desarrollo como Unity 3D, Construct 2, entre otros.

Un vistazo a los frameworks de desarrollo En la actualidad existen cientos de frameworks y herramientas varias para el desarrollo de videojuegos. Podemos encontrarlas gratuitas y libres, con la posibilidad de modificar el código a gusto, o bien pagas o con limitaciones en algunas de sus características. Lo importante es trabajar con aquella que nos permita darle forma a nuestra idea de un modo eficaz. Debemos tener presente que una herramienta particular puede dejarnos crear un videojuego de forma rápida, pero limitar su funcionamiento a un área muy pequeña. Por ejemplo, un

SCUMM Scumm fue un sistema de script creado por Lucasfilm Games para uno de sus primeros juegos de aventuras gráficas. El objetivo era poder manejar de forma adecuada los diferentes objetos, diálogos y otros elementos del juego sin que se necesite crear código para ello, agilizando el desarrollo y los tiempos de producción.

www.redusers.com

175

PROGRAMACIÓN DE VIDEOJUEGOS

framework podría funcionar perfectamente con una versión de un navegador particular, pero no en todos los navegadores web, o tener un excelente motor de física incorporado, pero que vaya en detrimento del rendimiento general del juego.

Figura 1. El mejor lugar para estar si estamos aprendiendo.

En la Figura 1 podemos ver una matriz de dos dimensiones donde en su eje horizontal se encuentra el nivel de libertad que nos provee un determinado framework a la hora de desarrollar un videojuego.

En el eje vertical, el nivel de complejidad al utilizar dicho framework.

Elementos posicionados en el extremo superior derecho —esto es, muy complejos pero con mucha libertad— pueden ser lugares interesantes donde moverse, pero por su complejidad necesitaremos tener muchos conocimientos previos o consolidados antes de tomar este camino. Si no tenemos estos conocimientos, es probable que caigamos en los problemas que comentábamos inicialmente: problemas de performance, imposibilidad de ejecución del juego más allá del microambiente en el que lo creamos, errores desconocidos, entre otros.

De igual forma, si nos posicionamos en el extremo izquierdo, tanto en el cuadrante superior como inferior, podemos vernos atrapados en la imposibilidad de aprender las técnicas de desarrollo necesarias para mejorar nuestras habilidades en la creación de videojuegos.

Si el framework encapsula toda la funcionalidad para tratar de ser en extremo fácil de utilizar hará que todo el control esté en sus manos y nosotros nos veamos limitados en la creación de los juegos debido www.redusers.com

176

6. PROGRAMAR CON AYUDA DE FRAMEWORKS

a las propias limitaciones de la herramienta. En otras palabras, como la herramienta no permite salirse de sus límites, no habrá posibilidad alguna de modificarla para crear más allá de esos límites.

Por lo tanto, el punto ideal en el proceso de aprendizaje es contar con herramientas que puedan comenzar siendo complejas, debido a nuestro desconocimiento sobre ellas, pero que tiendan a estabilizarse, desafiándonos constantemente y que, al mismo tiempo, nos permitan interactuar más allá de sus restricciones originales.

Podemos encontrar un ejemplo claro de las limitaciones impuestas por la misma herramienta en las siguientes líneas. //MelonJS ... var font = new Font(font, size, fillStyle, textAlign); //ImpactJS ... var font = new ig.Font(‘font.png’); font.draw(‘Some text’, x, y, ig.Font.ALIGN.RIGHT);

Los dos ejemplos pertenecen a diferentes frameworks reconocidos, que pueden ser encontrados en Internet. Es importante destacar que ambos presentan diferentes prestaciones con excelentes resultados y no es nuestra intención menospreciarlos. Nuestro objetivo, en cambio, es mostrar cómo el intento de estos frameworks por controlar cada pieza del funcionamiento

A LA HORA DE ELEGIR UNA HERRAMIENTA DE TRABAJO, SE DEBEN TENER EN CUENTA SUS LIMITACIONES

hace que se utilicen de forma poco adecuada los recursos ya implementados por el sistema sobre el que se ejecutan.

En el caso de MelonJS, las líneas muestran la declaración de una fuente o tipografía. Como aprendimos en el Capítulo 5, podemos crear tipografías mediante CSS de forma relativamente simple, y luego usar funciones como font y fillText para definir y escribir, respectivamente, texto en la pantalla. Lo curioso de este framework es que, para definir una fuente, requiere de que nosotros

www.redusers.com

227

PROGRAMACIÓN DE VIDEOJUEGOS

Frameworks avanzados En el capítulo anterior, nos introdujimos en el mundo de los frameworks de desarrollo de videojuegos mediante jsGFwk, entorno de trabajo de nivel intermedio, con excelentes prestaciones, pero con carencias si lo comparamos con otros, como Phaser, que están comprendidos dentro de los entornos de trabajo profesionales. Estos no varían de forma directa en su forma de desarrollo, pero sí en las prestaciones que brindan. En este capítulo, entonces, migraremos nuestro juego para que funcione con uno de estos frameworks avanzados.

▼

Primeros pasos con Phaser ...228

Agregar el puntaje y los sonidos..... 263

Instalación del framework ............. 228 Configuración................................. 235

▼

Resumen.................................267

▼

Actividades.............................268

Carga de recursos .......................... 238 Agregar la portada del juego ......... 243 Crear el juego en Phaser ............... 253

www.redusers.com

228

7. FRAMEWORKS AVANZADOS

Primeros pasos con Phaser Phaser es uno de los frameworks profesionales más conocidos y apreciados en la actualidad. A diferencia de otros que hoy también se encuentran en el mercado, Phaser reúne ciertas características que son apreciadas por los usuarios: es gratuito, de código abierto y posee una gran comunidad que le brinda soporte a todos aquellos nuevos desarrolladores que se inician en el mundo del desarrollo de videojuegos. Además, muchas empresas líderes de software lo incluyen entre sus librerías y aplicaciones, lo que genera un beneficio mutuo.

Instalación del framework Como en todo desarrollo de videojuegos con JavaScript y HTML5, no necesitamos instalar ningún programa para poder utilizar un framework en particular. El código es interpretado por el navegador y con —simplemente— acceder a la página de inicio de nuestro juego ya estaremos ejecutándolo. Phaser, por lo tanto, se comporta de forma similar. De cualquier manera, necesitaremos descargar el framework y colocar sus partes funcionales dentro de nuestro juego para poder utilizarlo. Podremos comenzar la configuración desde la página web oficial de Phaser, como podemos ver en la Figura 1.

Figura 1. El sitio web oficial de Phaser nos ofrece una amplia gama de ejemplos y tutoriales para aprender a usarlo: www.phaser.io www.redusers.com

229

PROGRAMACIÓN DE VIDEOJUEGOS

Debido a que es de código abierto, Phaser está hospedado en un repositorio de código fuente muy popular en la actualidad, GitHub, por lo que lo descargaremos utilizando esta aplicación. Los siguientes pasos nos ayudarán a instalar GitHub en nuestra computadora.

PAP: DESCARGA Y CONFIGURACIÓN DE GITHUB

01

Desde el navegador, diríjase a la página https://desktop.github.com y presione sobre el botón Download GitHub Desktop. Elija una carpeta de descarga en su computadora.

02

Desde la carpeta donde ha descargado el programa, ejecute GitHubSetup.exe.

Siga los pasos de instalación hasta que el programa se haya cerrado.

www.redusers.com

230

03

7. FRAMEWORKS AVANZADOS

Si no posee una cuenta en el sitio de GitHub, ingrese a https://github.com para crear una. Complete el formulario de la derecha y presione el botón Sign up for GitHub.

04

Usando el navegador, ingrese al repositorio de Phaser en la siguiente dirección: http://github.com/photonstorm/phaser. Copie la dirección que aparece a la derecha del botón con la descripción HTTPS, presionando sobre el botón que despliega la leyenda Copy to clipboard.

www.redusers.com

269

PROGRAMACIÓN DE VIDEOJUEGOS

Integración con dispositivos móviles En la actualidad, existen otras plataformas igual de masivas que la Web, que están prácticamente en todos los bolsillos; nos referimos, por supuesto, a los celulares y otros dispositivos móviles. Estos equipos tienen hoy tanta potencia como cualquier computadora de hace algunos años, por lo que son un objetivo deseado por los desarrolladores de videojuegos. En este capítulo aprenderemos a llevar nuestro juego a estos dispositivos.

▼

Migrar nuestros

▼

desarrollos ............................270

Migrar a otros dispositivos móviles ...............287

Eligiendo las herramientas ............ 270

▼

▼

Resumen.................................293

▼

Actividades.............................294

Crear un proyecto en Intel XDK ..........................273 Migrar el videojuego...................... 276 Compilar para Android................... 284

www.redusers.com

270

8. INTEGRACIÓN CON DISPOSITIVOS MÓVILES

Migrar nuestros desarrollos En la actualidad existen tres plataformas o sistemas operativos principales para dispositivos móviles. Estos pueden evaluarse de diferentes formas, ya sea por la cantidad de dispositivos operativos, por la cantidad de aplicaciones vendidas en sus tiendas, o por sus prestaciones de hardware, entre otras. En cualquier caso, podemos decir que iOS de Apple, Android de Google y Windows Phone de Microsoft son las tres plataformas líderes en este momento y siempre será importante considerarlas a la hora del desarrollo.

Eligiendo las herramientas Existen diferentes herramientas con las cuales podremos migrar nuestro desarrollo para la Web a un dispositivo móvil. Cada una nos dará diferentes prestaciones y soporte para depurar el código, encontrar los errores involuntarios en él, así como poder trabajar con un dispositivo físico mientras nos movemos línea a línea por nuestro código analizando el estado de las diferentes variables. La mayoría de estas herramientas se basa, en la actualidad, en la tecnología llamada Apache Cordova, que permite, entre otras cosas, poder comunicar código encapsulado de JavaScript con las librerías nativas del dispositivo móvil en el que el programa se ejecute. Por otro lado, existen, así como frameworks de desarrollo, otras tecnologías para conseguir el mismo resultado. En la Tabla 1 podemos ver una lista de las más renombradas.

PRINCIPALES HERRAMIENTAS PARA EL DESARROLLO MULTIPLATAFORMA ▼ TECNOLOGÍA/IDE

▼ DESCRIPCIÓN

PhoneGap

Posiblemente haya sido una de las primeras en presentar la posibilidad de unir código JavaScript y HTML con el ecosistema de los dispositivos móviles. En el siguiente sitio podemos encontrar más información sobre esta tecnología: http://phonegap.com

Apache Cordova

Hoy ha ganado terreno y renombre desplazando a otras herramientas similares. Además, cuenta con el apoyo de gigantes como Microsoft e Intel.

Para saber más sobre Apache Cordova, podemos visitar el sitio: https://cordova.apache.org

www.redusers.com

271

PROGRAMACIÓN DE VIDEOJUEGOS

Intel XDK

Intel XDK es una interfaz de desarrollo con librerías propias para la integración con los diferentes dispositivos móviles. Además, la misma interfaz puede compilar nuestro videojuego para diferentes dispositivos móviles.

Xamarin

Tanto una interfaz de desarrollo como librería con soporte para Microsoft.Net, permite no solo crear aplicaciones para sistemas operativos de escritorio sino que puede crear también aplicaciones nativas para diferentes dispositivos móviles con prácticamente el mismo código.

Visual Studio 2015

Este es una IDE muy potente de desarrollo de software. En su versión 2015 se han incorporado funcionalidades para el desarrollo con Apache Cordova, Xamarin y JavaScript nativo en aplicaciones para Windows, incluyendo Linux, iOS y Android.

Tabla 1. Algunas de las principales herramientas para el desarrollo videojuegos multiplataforma.

Como podemos ver, contamos con una cantidad notoria de aplicaciones, interfaces de desarrollo (IDE, por sus siglas en inglés) y herramientas que nos permiten llevar nuestros desarrollo para la Web a un celular. Teniendo en cuenta el soporte integrado de Apache Cordova y por ser una herramienta gratuita, usaremos Intel XDK para la migración a Android. Para instalarlo, seguiremos los siguientes pasos.

PAP: DESCARGA Y CONFIGURACIÓN DE INTEL XDK

01

Desde el navegador, diríjase a la URL https://software.intel.com/ en-us/intel-xdk. Presione sobre el menú desplegable Choose another platform.

www.redusers.com

272

02

03

8. INTEGRACIÓN CON DISPOSITIVOS MÓVILES

De la lista, seleccione el sistema operativo con el que esté trabajando y presione sobre el vínculo Download for seguido del nombre de su sistema operativo.

La descarga comenzará a realizarse desde el sitio web. Una vez haya finalizado, ejecute el archivo descargado.

www.redusers.com

INCLU

VERSIÓN D YE IGITAL

GRATIS

GRATIS

La industria de los videojuegos está en su mejor momento. Las herramientas actuales permiten que cualquier persona pueda adquirir los conocimientos para crear un videojuego, sea programador, diseñador, gamer o un entusiasta. Este libro está pensado para lograr ese objetivo. Desde cero, se guía al lector en el desarrollo, hasta llegar a un juego funcional para, finalmente, publicarlo, exponerlo a la comunidad mundial e incluso generar ingresos.

VERSIÓN DIGITAL

Programación de videojuegos

/ Cómo funciona un videojuego: el bucle principal, transformar código en gráfico, interacción con el usuario, inteligencia artificial. / La creación: entorno de trabajo, dibujar y mover los objetos y el jugador a través de periféricos. Desarrollo a partir del clásico “1942”. / JavaScript para principiantes: variables, código, funciones, desplazamiento de los objetos. / JavaScript avanzado: optimizar los cuadros por segundo, detección de colisiones. / Ambientación de un videojuego: animaciones de scroll infinito, puntaje, sonidos y efectos especiales. / Programar con ayuda de frameworks: JavaScript Game Framework / Frameworks avanzados: Phaser. / Integración con dispositivos móviles: migrar el videojuego, compilar para Android y otros dispositivos. / Monetización: plataformas, GameJolt.

¡CON EJEMPLOS PRÁCTICOS!

SOBRE EL AUTOR Matías Iacono es Ingeniero en Sistemas. Es un activo promotor del desarrollo de videojuegos, brindando charlas y conferencias. Ha creado varios frameworks de código abierto para el desarrollo de videojuegos y ha publicado más de 40 videojuegos para diferentes plataformas.

NIVEL DE USUARIO

CATEGORÍA

Intermedio / Avanzado

Desarrollo

Programación de videojuegos

EN ESTE LIBRO ENCONTRARÁ:

YECTO O R P IO P O R P U T DESARROLLA T Y HTML5 CON JAVASCRIP por MATÍAS IACONO

REDUSERS.com

PROFESOR EN LÍNEA

En nuestro sitio podrá encontrar noticias relacionadas y también participar de la comunidad de tecnología más importante de América Latina.

Ante cualquier consulta técnica relacionada con el libro, puede contactarse con nuestros expertos: profesor@redusers.com.

Programacion de video juegos.indd 13

11/03/2016 12:29:16 p.m.