martes, 4 de julio de 2017

Libros que todo desarrollador de juegos debe leer

He aquí una colección de libros muy interesantes enfocados al desarrollo de juegos. Algunos son más teóricos, otros son más prácticos. Algunos son más genéricos y otros se centran en partes específicas del desarrollo de juegos.

Game Programming Patterns

Personalmente, uno de mis preferidos, es el que elijo para encabezar la lista. Este libro nos cuenta las diferentes formas (patrones) de estructurar un videojuego complejo. El autor, Robert Nystrom, trabaja para Electronic Arts y es uno de los libros más completos al respecto. El libro no se centra en ningún lenguaje en concreto, y aunque pone los ejemplos en C++, lo cierto es que lo que cuenta el libro puede aplicarse a cualquier lenguaje de programación.
http://amzn.to/2tmSwvv

Clean Code

Un clásico de los libros de programación. Un libro que cualquier programador, no solo de juegos debería leer. En él, Uncle Bob nos enseña qué pautas debemos seguir para mantener un buen estilo de programación, mantenible, legible y poco propenso a errores.

Game Engine Architecture

Este libro se centra en los motores de los videojuegos, más que en los juegos en sí, pero es un auténtico libro de referencia en la materia. Cuenta con información de primera mano del desarrollo de The Last of Us.

The Art of Game Design: A book of lenses 

El mejor libro que existe sobre el diseño de juegos. Este libro ayuda a los lectores a encontrar una jugabilidad divertida y que desafíe al jugador. Una auténtica referencia que se centra en el núcleo de lo que debe ser un buen juego.
 

A Theory of Fun for Game Design

Complementando a The Art of Game Design, este libro también nos enseña las cualidades de un gameplay que haga que la gente quiera jugar a tu juego.

Programming Game AI by Example

Si tienes interés en la inteligencia articial aplicada a los videojuegos, este libro, ya con unos añitos, es de lo mejor que uno puede encontrarse. El único fallo es que usa demasiado en profunidad C++, por lo que puede resultar costoso adaptarlo a otros lenguajes.

The Pragmatic Programmer: From Journeyman to Master

Por último, acabamos con otro libro no solo recomendado para desarrolladores de juegos sino para programadores en general.

Los que faltan

Hemos decidido elegir solo unos pocos libros, los más importantes. Hemos eliminado aquellos que tienen que ver con una tecnología en concreto (Phaser, libgdx, SDL, SFML, OpenGL,..) pues un buen programador de juegos no se pierde en las diferencias entre una librería y otra, al contrario, sabe lo esencial que necesita el juego y después lo implementa en una librería en concreto. 

También hemos eliminado algunos de gran calidad sobre renderizado 3D, pues el tiempo ha demostrado que en pleno siglo XXI un buen juego no necesita ser 3D para serlo. ¿Conoces algún libro más que merezca la pena incluir? ¿Has leído alguno, cuáles son tus opiniones? Podéis escribir en los comentarios.

 

Twisted City, un fantástico juego de puzzles en Phaser

Twisted City es un fantástico juego de puzzles hecho en Phaser. Creo que es uno de los juegos de más alta calidad hechos en Phaser hasta la fecha y aparte de ser divertido e interesante (que lo es), creo que podemos y debemos ponernos como objetivo alcanzar ese nivel de calidad en nuestros juegos. Obviamente el camino será difícil, pero no es inalcanzable. Si intentas hacer cada juego mejor que el anterior, si cada día dominas mejor el arte de programar juegos, algún día llegarás al nivel del título de Orange Games.


La jugabilidad es muy interesante, la música y los efectos se integran bien, la interfaz es muy clara y las animaciones cumplen muy bien.

Sin más dilación, os dejo el enlace al juego:

miércoles, 28 de junio de 2017

Fiverr, encuentra recursos para tu juego

Los buenos juegos son piezas que requieren de habilidades multidisciplinares. Podemos ser muy buenos programando pero si nuestros gráficos no acompañan, nuestro juego no dejará de ser mediocre. En Fiverr podemos encontrar gente que nos ayude, por muy poco dinero con alguna de las tareas más importantes del mundo de los juegos:
  • Diseñar logos
  • Diseñar algún recurso gráfico (2D, 3D, ilustraciones, ...)
  • Componer música
  • Obtener efectos de sonido
  • Marketing
  • Traducciones
  • Y mucho más...

La verdad es que Fiverr ofrece una gran variedad de ofertas y con sus sistema de reputación sabremos rápidamente quien puede hacer un buen trabajo. En Fiverr todo funciona a través de gigs, pero en realidad conviene leer la descripción de cada oferta para saber cuanto nos costará algo.

Integrar anuncios de AdMob en tu juego

Una de las maneras de ganar dinero con nuestros juegos es integrar anuncios entre niveles. AdMob es una de las plataformas líderes en este sector. Propiedad de Google, se integra perfectamente en Android, iOS y Windows. En este post veremos como añadir los anuncios en un juego hecho en Phaser para Android. Para la conversión usé Apache Cordova.

El primer paso es tener una cuenta en AdMob. En mi caso el proceso fue muy sencillo ya que disponía cuenta de Google AdSense aprobada. Actualmente no sé exactamente cuál es el proceso a realizar. Una vez estemos dentro vamos a monetizar una aplicación nueva. Introducimos los datos de forma manual. Posteriormente generamos un nuevo anuncio de tipo Intersticial (anuncios de pantalla completa).

Se nos generará un código de bloque de anuncios.

Mostrando los anuncios en el juego

Ahora vamos a mostrar los anuncios. Como hemos usado Cordova, podemos usar los plugins que hay. En mi caso, suelo confiar en el plugin cordova-admob-pro. Es un plugin gratuito hasta que ganemos 1.000$, en ese momento deberemos pagar 20$. Unas condiciones totalmente razonables para uno de los mejores y más completos plugins de AdMob.

En la carpeta con el fichero config.xml presente ejecuta esto:
cordova plugin add cordova-plugin-admobpro 

Se instalará el plugin de Cordova. Ahora añadimos una referencia a Cordova en el fichero index.html
Ahora, cuando el nivel se esté cargando podemos pedir que se cargue el anuncio:

if(AdMob) AdMob.prepareInterstitial( {adId: "ca-XXXXXXXXXXXXXX", autoShow:false} );

Y justo cuando queramos mostrarlo (al salir de un nivel por ejemplo), lo mostramos:

if(AdMob) AdMob.showInterstitial();

¡Y listo! Ya deberían verse los anuncios. AdMob tarda unas horas en mostrar anuncios, así que si ha pasado poco tiempo desde que creaste la aplicación posiblemente no se vea todavía, no te preocupes, es normal. Si quieres, existen IDs de prueba, para los anuncios intersticiales el ID de prueba es: ca-app-pub-3940256099942544/1033173712

Convertir juego en Phaser en APK de Android con Apache Cordova

Hoy vamos a ver como convertir un juego que tenemos hecho en Phaser a un APK para Android, listo para subir a Google Play y Amazon AppStore. Para ello vamos usar Apache Cordova. Para seguir este tutorial necesitarás tener npm instalado.

Instalando Apache Cordova

El primer paso será instalar Apache Cordova con npm. Abre la terminal de tu sistema operativo y ejecuta lo siguiente:

npm install -g cordova
En sistemas Linux quizá debas poner sudo delante. Con esto ya tendremos Apache Cordova instalado.

Instalando el Android SDK

De forma paralela podemos ir instalando el Android SDK, necesario para generar los APK. Hay varias formas de obtenerlo, la más rápida y sencilla es instalar Android Studio en tu ordenador.

El archivo config.xml

La configuración principal de Cordova se almacena en un archivo config.xml. En este archivo se define el nombre de la aplicación, una descripción, las plataformas donde funciona (Cordova soporta iOS y Windows también), así como los plugins que usaremos.

Este es un fichero config.xml de ejemplo.

Crea uno tú de forma similar, cambiandolo eso sí los detalles de tu aplicación. Una vez lo tengamos, vamos a descargar el soporte a plataformas y plugins que hemos definido en config.xml. En icon debes especificar la ruta a los iconos que se usarán en Android.

Copia el juego a una carpeta llamada www. Ahí residirá toda nuestra aplicación y no deberemos de tocar nada más.
Dentro de la carpeta www, el archivo principal del juego debe llamarse index.html.


Escribimos
cordova prepare
Y se empezará a descargar el soporte a Android de Cordova así como los plugins.

Generar el APK para Android

Ahora vamos a generar el APK. Primero vamos a generar uno de prueba. Escribe:
cordova build android
Este comando ejecutará muchas cosas, compilará Java y realizará tareas específicas de Android. Puede dar muchos fallos, no obstante para cualquier duda se puede preguntar en el foro de Gamedev Hispano. Si todo ha ido bien tendremos un APK listo en la carpeta platforms/android/build/outputs que se habrá generado. Este APK sin embargo es de tipo Debug y aunque puede instalarse en los móviles, no se puede subir a Google Play.

Generar un APK para Google Play

Los APK válidos deben estar firmados, para ello hace falta primero generar un archivo de llaves. Es muy importante que guardes el fichero de llaves en un lugar seguro pues sin él no podrás subir actualizaciones a Google Play.

Usa este comando para generarun fichero KEYSTORE.

keytool -genkey -v -keystore JUEGO.keystore -alias JUEGO -keyalg RSA -keysize 2048 -validity 10000

Te hará varias preguntas y deberás poner una contraseña.

Ahora para que Cordova genere el APK y lo firme:

cordova build android --release -- --keystore=JUEGO.keystore --storePassword=password --alias=JUEGO --password=password

Con esto ya deberías tener un APK en modo Release y firmado. Listo para ser publicado en Google Play.

viernes, 2 de junio de 2017

Publicado Tiled 1.0.0

Tiled, el famoso editor de mapas en 2D, ha lanzado la versión 1.0. Después de años de trabajo, Thorbjørn Lindeijer, el creador del proyecto, cree que Tiled ya es lo suficientemente maduro como para lanzar la 1.0. Si quieres saber como usar Tiled con Phaser, tenemos un tutorial aquí.

Por supuesto, el mundo del desarrollo del videojuego ha celebrado la noticia. Para muchos, incluido yo, Tiled ya era un producto maduro y estable. Gran cantidad de juegos para todas las plataformas ya venían usando Tiled de forma habitual, incluso dentro del mundo de Unity, muchos desarrolladores prefieren usar Tiled y el plugin Tiled2Unity a desarollar los mapas en Unity.

Novedades

Las mejoras principales de esta versión son:
  • Soporte para external tilesets (TSX). Ahora se podrán usar tilesets con metadatos que podrán editarse de forma independiente. Los embedded tilesets siguen pudiéndose utilizar.
 
  • Jerarquía de capas. Ahora es posible agrupar las capas en carpetas de forma jerárquica que heredan las propiedades personalizadas de la carpeta superior.
  • Typed Tiles. Ahora se podrá asignar a ciertos tiles un tipo, al igual que en un lenguaje de programación cualquiera. Esto se ha diseñado para permitir añadir entidades complejas de forma más sencilla.
  • Objetos de Texto. Ahora se pueden añadir objetos de texto a los mapas
  • Fix de los mapas hexagonales. Se han corregido numerosos fallos presentes en la creación de mapas hexagonales.
El creador del proyecto también confirma que se está trabajando en Tiled 1.1, con la ayuda de Google a través del programa Google Summer of Code.

Tiled 1.0.0 ya se puede descargar en MapEditor.org

viernes, 26 de mayo de 2017

Usando mapas de Tiled en Phaser

Retomamos el tutorial de Tiled. Deberíamos tener ya un mapa de Tiled con dos capas (Paredes y Suelo), una con el atributo pasable en desactivado y en otro no.

Vamos a Tiled y exportamos el archivo en formato JSON (CSV también nos valdría pero no lo he probado).

Cargando el tilemap y el tileset

En la función preload cargamos el JSON con la descripción del mapa (tilemap) y las imágenes que usa el mapa (tileset). Es muy parecido a como vimos en Iniciar Phaser.js.

function preload(){
    game.load.tilemap("Mapa","Mapa.json",null,Phaser.Tilemap.TILED_JSON);
    game.load.image("Tileset-1","Wall.png");
Ahora creamos los objetos en pantalla dentro de la función create.

var map, paredes, suelo;

function create(){
    map = game.add.tilemap("Mapa");
    map.addTilesetImage("Wall","Tileset-1"); // El nombre Wall hace referencia a como se llama el tileset en Tiled
    suelo = map.createLayer("Suelo"); // El nombre hace referencia a como se llama la capa en Tiled
    paredes = map.createLayer("Paredes");
}
Es importante usar los nombres que hemos usado en Tiled previamente. Además, el orden en que llamemos a createLayer importa, ya que no tiene en cuenta el orden de las capas que hubiese en Tiled.

Colisiones

Vamos ahora a hacer que las paredes sean objetos no atravesables, mientras que el suelo sí lo sea. Para gestionar las físicas vamos a usar Arcade Physics aunque con P2 es parecido.

var map, suelo, paredes, player;

function create(){
    game.physics.startSystem(Phaser.Physics.ARCADE);

    map = game.add.tilemap("Mapa");
    map.addTilesetImage("Wall","Mapa-TileImage");
    suelo = map.createLayer("Suelo");
    paredes = map.createLayer("Paredes");

    console.log("Paredes es pasable?: "+paredes.layer.properties.pasable);
    
    map.setCollisionBetween(1,10000,true,paredes);

    suelo.resizeWorld();
    paredes.resizeWorld();
  
    ... crear player y activar arcade physics en él...
    player = game.add.sprite(100,100,"player");
    game.physics.arcade.enable(player);
}

function update(){
    game.physics.arcade.collide(paredes,player);
}


En la función create he usado la propiedad que definimos en Tiled como pasable. En realidad lo pongo como ejemplo para que se vea como es posible definir atributos arbitrarios en Tiled y acceder a ellos desde Phaser.

La función setCollisionBetween se encarga de que todos cuadrados de la capa paredes se vuelvan infranqueables. Posteriormente en update hacemos la comprobación de física con cada cuerpos ajeno al tilemap que lo necesite, habitualmente el jugador.