Unity 3D Integrando Google Play Game Services

Introducción

Hace unos días puse Google Play Game Services en un juego que estoy desarrollando y, aunque al final todo ha ido bien, me sorprendió lo difusa y complicada que es la documentación y la información repartida en diversos tutoriales en vídeo y escrito, por no hablar de la cantidad de incidencias abiertas al respecto en páginas como los foros de Unity o StackOverflow. Por ese motivo escribo este tutorial, para tener una referencia clara donde siguiendo todos los pasos tendremos integrados en nuestro juego de Unity3D los Google Play Game Services.

Requisitos previos

  • Android Studio instalado con el último SDK.
  • Última versión de Java.
  • Unity preparado para usar el Android SDK.
  • Como mínimo Android 6.0 (API 23). Esto se instala desde el SDK Manager o desde Android Studio.
  • La librería de Google Play Services. Esto se instala desde el SDK Manager o desde Android Studio.
  • La librería de soporte de Android. Esto se instala desde el SDK Manager o desde Android Studio.

Si tenéis alguna duda sobre como instalar Android Studio y los componentes comentados o como configurar Unity para trabajar con el Android SDK usad los comentarios. Si hubiesen muchas dudas al respecto haríamos un pequeño tutorial sobre esto.

El proyecto

Vamos a crear un proyecto muy sencillo en Unity3D que contendrá una escena con 6 botones desde los cuales ejecutaremos las acciones básicas de Google Play Game Services como LogIn, guardar datos en un Leaderboard, ver el Leaderboard, desbloquear un logro y Logout. Antes de llegar a tener el proyecto funcionando pasaremos por todos los pasos necesarios de configuración tanto del plugin de Unity de Google Play Game Services como de la Google Play Console donde hay que dar de alta el juego. Comentaremos también una serie de trucos poco documentados y necesarios para que algunas acciones funcionen bien. La mecánica de la aplicación es sencilla, cada botón lanza una acción y el botón de More Points sumará puntos de 100 en 100 que luego podremos guardar con el botón Save leaderboard.

Iniciando el proyecto

  1. Abrimos Unity y creamos un nuevo proyecto seleccionando que sea 2D ya que nos interesa tener una pantalla sencilla con los botones.
  2. Descargamos el plugin oficial de Google Play Game Services desde este enlace https://github.com/playgameservices/play-games-plugin-for-unity , hay que entrar en current build y descargar el zip. 
  3. Desde Unity haremos click derecho en la carpeta Assets > Import package > Custom package y seleccionaremos el paquete que hemos descargado en el paso anterior. En el popup que aparece nos fijamos que esté todo seleccionado e importamos. 
  4. Preparamos la interfaz para que se visualice en portrait 2:3, añadimos un Canvas que contenga un texto y los 6 botones. Lo preparamos todo lo más parecido a la siguiente imagen 
  5. Por último en este apartado, guardamos nuestra escena con el nombre que queramos y vamos a File > Build Settings… Primero cambiaremos, si no lo tenemos ya, a Android clickando en su icono y dándole al botón Switch Platform y arrastraremos nuestra escena al hueco de Scenes in Build.

Añadiendo nuestro juego en la Google Play Console

  1. Vamos a este enlace https://play.google.com/apps/publish/ y accedemos con nuestra cuenta de Google. Veremos una interfaz con un menú a la izquierda. Clickamos en Servicios de Juegos y al botón de Añadir Juego Nuevo. Nos aparecerá un popup donde mantendremos la opción de “Aún no utilizo las API de Google en mi juego”, pondremos el nombre de nuestro juego,  seleccionaremos como categoría Casual y le damos a Seguir.
  2. Vamos a crear una keystore. A grandes rasgos es la identidad que conectará de forma segura vuestro juego con la aplicación de Google Play Console. Esta Keystore está firmada con una clave SHA1 que ahora generaremos y que deberemos utilizar en el siguiente paso del tutorial. Vamos el editor de Unity, File > Build Settings… y en la pantalla que aparece le damos al botón Player Settings. En la parte derecha, en el inspector podemos ver ahora las Player Settings, nos interesa el apartado con el icono de android, en concreto el último que aparece Publishing Settings. Marcamos Create a new Keystore, le damos a Browse Keystore y nos pedirá que le pongamos un nombre y la guardemos. Elegid bien donde la estáis guardando por que váis a necesitar esa ruta. Añadimos un password, lo repetimos y en Alias seleccionamos la Keystore que acabamos de crear y ponemos el password. Ahora nos falta nuestra firma SHA1.
  3. Abrimos una consola o terminal y vamos hasta donde tenemos instalado Java al directorio bin. En windows puede ser algo similar a esto variando la versión de Java que tengáis  C:\Program Files\Java\jdk1.7.0_09\bin . A continuación ejecutamos el siguiente comando  keytool -list -v -keystore "C:\la\ruta" -alias tunombredekeystore -storepass tucontraseña -keypass tucontraseñadonde cambiaremos C:\la\ruta por la ruta donde habéis guardado vuestra Keystore, pondremos en alias el nombre que le  habéis dado y los passwords que habéis generado. Nota: Si estás en Windows 10 para ejecutar este comando desde PowerShell tendréis que poner .\keytool y el resto del comando.
  4. Una vez ejecutado el comando os aparecerá en la terminal el resultado, copiad la clave SHA1.
  5. Con nuestra clave copiada volvemos a la Google Play Console y estando dentro del juego que hemos añadido le damos al menú de la izquierda en Aplicaciones Vinculadas, seleccionamos Android y rellenamos los datos, en nombre del paquete pondremos algo como com.vuestronombre.nombredeljuego y pegamos nuestra clave SHA1.

Leaderboard y Rewards

Ya hemos pasado la parte más dura. Ahora vamos a crear un Leaderboard y un reward. Para el Leaderboard hay que clickar en Marcadores y darlo de alta, ponemos un nombre y el resto de opciones por defecto. Para el Reward lo mismo, clickando en Logros, le ponemos un nombre y especificamos cuantos puntos ganaremos al desbloquearlo. Si queréis que se vea todo más bonito podéis subir alguna imagen en el tamaño que os especifican. Estas imágenes son las que se verán luego al desbloquearlos. Fijaros que tanto el leaderboard como el logro tienen un código específico una vez creados, estos códigos los usaremos pronto.

Programando los botones

Desde el editor de Unity vamos a crear un C# Script que llamaremos GpgsScript. En los comentarios están las explicaciones de cada función. Añadimos en las directivas using las siguientes:

Dos variables de clase:

El método Start:

El método LogIn:

El método mostrar Leaderboard. Comentada la forma de mostrar todos los marcadores activos, en uso la forma de mostrar uno concreto usando su código. Sustituir “CgkIuJGt07gTEAIQAQ” por vuestro código de leaderboard:

El método añadir puntuación al leaderboard, cambiad “CgkIuJGt07gTEAIQAQ” por vuestro código de leaderboard:

El método desbloquear logro, cambiad “CgkIuJGt07gTEAIQAg” por vuestro código de logro:

El método para sumar puntos:

El método para desconectarse:

Ahora asignamos desde Unity el script a la Main Camera arrastrando o desde el inspector añadiendo componente. Arrastramos el Texto al campo de texto. Y añadimos en cada botón la función que tiene que hacer.

Unity Google Play Game Services Botones Acciones

Build y testing de los Google Play Game Services

Hemos llegado al final, solo nos queda hacer la Build de nuestro juego conectado a los Google Play Game Services. Os recomiendo que marquéis en File > Build Setting… la opción de Developments Build y Script Debugging. Antes de hacer la build, le damos el botón Player Settings y en el apartado Other Settings > Package Name ponemos el mismo que habéis puesto en la Google Play Console com.vuestronombre.nombredeljuego. Ahora si, hacemos la build que generará un .apk que debemos enviar a nuestro móvil e instalar.

Nota: Para que la pantalla de leaderboard se vea tenemos que modificar el AndroidManifest.xml situado dentro de GooglePlayGames > Plugins > Android > GooglePlayGamesManifest.plugin y añadir lo siguiente antes del cierre de  </application> 

Unity AndroidManifest

Imágenes del resultado

Google Play Game Services LogIn

LogIn

Google Play Game Services LogIn

LogIn

Google Play Game Services Points

Subiendo puntos

Google Play Game Services LogIn

Leaderboard

 

 

 

 

 

 

 

 

 

 

Podéis descargar el proyecto completo desde este enlace https://github.com/EdgarGomez/UnityGooglePlayGameServices

Cualquier duda o problema que os surja no dudéis en dejar un comentario y os atenderé lo antes posible.

Cuenta atrás – Unity 3D Playground

Introducción a la Cuenta Atrás

En esta entrada vamos a montar una cuenta atrás, es decir, un texto que muestre un resta de segundos hasta llegar a 0 y cambiar el mensaje.

countdown

Elementos y configuración

Creamos un nuevo proyecto de Unity, puede ser 3D o 2D. Si es 3D marcaremos la opción de vista 2D. Guardamos la escena con el nombre CountDown.

Añadimos un texto en la vista de jerarquía de tipo UI > Text. Al ser el primer elemento de UI  en existir en esta escena se crearán automáticamente el Event System y el Canvas.

Dentro del Canvas está nuestro texto que podemos renombrar por Cuenta atrás clicando sobre el. Aprovechamos para añadir las siguientes configuraciones:

  • Texto: “Countdowns seconds remaining =”
  • Font size: 20
  • Horizontal overflow: overflow
  • Vertical overflow: blanco
  • Color: Blanco

En la propiedad Rect Transform clicamos en el cuadro (anchor presets) y manteniendo Shift+Alt marcamos la opción Center-Top.

A continuación y aunque no es necesario creamos una carpeta Scripts y dentro creamos una nuevo Script y lo llamamos CountDown.

Asignamos el Script como componente de nuestro objeto texto. O bien lo arrastramos o bien añadimos el componente desde el botón añadir componente del objeto.

Código

Abrimos el fichero y añadimos el siguiente código:

Hay una variable,  textClock , que referencia al objeto Texto donde queremos mostrar la cuenta atrás.

El método  CountdownTimerReset () registra en las variables el número de segundos que quedan y cuando ha sido llamado.

El método  CountdownTimerSecondsRemaining() devuelve un valor entero con los segundos que quedan para que acabe la cuenta atrás.

Hay una variable,  textClock , que referencia al objeto Texto donde queremos mostrar la hora. Está referencia la hacemos en el método  Start() . Al método  LeadingZero (int n)  le pasamos el número de segundos que quedan y si es una cifra de un solo dígito añade un cero a la izquierda. En el método  Update() , que se ejecuta una vez por cada frame, le da valor a la variable  timeMessage con un mensaje de que la cuenta atrás ha terminado. Se comprueba que los segundos que quedan son mayores que cero y si lo son con el método  CountdownTimerSecondsRemaining() actualizamos el mensaje con los segundos restantes.

Ya está, si damos al Play veremos en ejecución nuestra Cuenta atrás.


He decidido empezar un pequeño proyecto en el que recopilar pequeñas pruebas, tutoriales y proyectos de bajo calibre que puedan reutilizarse en proyectos más grandes. Mi playground particular de Unity 3D.

El ejemplo completo junto con el resto del Playground lo puedes descargar desde el repo de Github Unity 3D Playground.

Reloj digital – Unity 3D Playground

Introducción al Reloj Digital

En esta entrada vamos a montar un reloj digital, es decir, un texto que muestre la hora actual con el siguiente formato: hora:minutos:segundos.

digitalclock

Elementos y configuración

Creamos un nuevo proyecto de Unity, puede ser 3D o 2D. Si es 3D marcaremos la opción de vista 2D. Guardamos la escena con el nombre DigitalClock.

Añadimos un texto en la vista de jerarquía de tipo UI > Text. Al ser el primer elemento de UI  en existir en esta escena se crearán automaticamente el Event System y el Canvas.

Dentro del Canvas está nuestro texto que podemos renombrar por Digital Clock clicando sobre el. Aprovechamos para añadir las siguientes configuraciones:

  • Texto: “Time:”
  • Font size: 20
  • Horizontal overflow: Overflow
  • Vertical overflow: Overflow
  • Color: Blanco

En la propiedad Rect Transform clicamos en el cuadro (anchor presets) y manteniendo Shift+Alt marcamos la opción Center-Top.

A continuación y aunque no es necesario creamos una carpeta Scripts y dentro creamos una nuevo Script y lo llamamos DigitalClock.

Asignamos el Script como componente de nuestro objeto texto. O bien lo arrastramos o bien añadimos el componente desde el botón añadir componente del objeto.

Código

Abrimos el fichero y añadimos el siguiente código:

Hay una variable,  textClock , que referencia al objeto Texto donde queremos mostrar la hora. Está referencia la hacemos en el método  Start() . Al método  LeadingZero (int n)  le pasamos las horas, minutos y segundos y los convierte de enteros a strings añadiendo un cero a la izquierda si no tienen 2 dígitos (09:33:22). En el método  Update()  almacenamos la hora en una variable que partimos en tres variables distintas (horas, minutos, segundos) con time.Hour , time. Minute ,  time.Second  siempre pasándolas por LeadingZero. Finalmente, hacemos referencia a la variable texto de nuestro objeto Text y le concatenamos el resultado. Gracias a que el método Update se ejecuta en cada frame conseguimos que el texto se actualice modificando los segundos, minutos y horas de forma dinámica.

Ya está, si damos al Play veremos en ejecución nuestro Reloj digital.


He decidido empezar un pequeño proyecto en el que recopilar pequeñas pruebas, tutoriales y proyectos de bajo calibre que puedan reutilizarse en proyectos más grandes. Mi playground particular de Unity 3D.

El ejemplo completo junto con el resto del Playground lo puedes descargar desde el repo de Github Unity 3D Playground.

Unity3D Inteligencia artificial básica

Vamos a trabajar el concepto de inteligencia artificial en Unity3D de una forma muy básica enfocándonos en la simplicidad que nos ofrece la herramienta  utilizaremos la opción Navigation. Para llevar a cabo el tutorial te aconsejo que sigas cada punto en orden y pasando al siguiente solo si entiendes y funcionan los anteriores. Como puedes ver en el siguiente gif, al final del tutorial tendrás un laberinto donde un objeto encontrará a otro de forma automática.

Probando AI básica Unity3D

Preparando la escena en Unity3D

Creamos un nuevo proyecto 3D en Unity3D y guardamos la escena vacía inicial. En la ventana de jerarquía hacemos click derecho y añadimos 3D Object > Quad. Desde el inspector modificamos la escala a X = 20, Y = 20,  Z = 20 y lo dotamos de una rotación X = 90, Y = 0, Z = -90. Veremos que tenemos un cuadrado blanco a modo de suelo. Desde el inspector le cambiamos el nombre a Ground. Hasta el momento deberías ver algo similar a la siguiente imagen:

Ground Unity3D

Descargando y aplicando texturas

Vamos a utilizar algunas texturas para que los objetos no parezcan tan simples y sean blancos. Usaremos un paquete gratuito que podéis utilizar para otros proyectos y que nos proporciona un buen número de texturas, en este caso, metálicas.  Busca en la asset store de Unity3D “Yughues Free Metal Materials” y filtra por “Free only”, una vez abierta la página del asset solo tienes que darle al botón “Install” y luego aceptar la instalación y la importación de los assets.

Cuando acabe deberías tener en tu vista de Proyecto una carpeta nueva llamada Metal textures pack.

Metal Textures Pack Unity3D

Vamos a la carpeta “pattern 40” y arrastramos la esfera, que es en realidad el material, a nuestro Quad. Verás que automáticamente se aplica la textura que en este caso es como una malla metálica azul eléctrico. Fíjate que al hacer click en los diferentes objetos de la carpeta “pattern 40” abajo del todo aparece la extensión. El .mat es el que identificado a un material. Por supuesto, puedes probar cada uno de los 42 materiales y poner el que quieras al suelo y objetos que añadiremos a continuación.

Añadiendo paredes al laberinto

Vamos a añadir un cubo desde la vista de jerarquía con botón derecho > 3D Object > Cube. A este cubo le añadimos los siguiente parámetros:

Cube Unity3D

Aplicamos el material número 8 para que no sea blanco y se distinga bien de la malla azul que conforma el suelo. A partir de este cubo clonamos hasta tener 9 cubos en total que dispondremos sobre el suelo lo más parecido a la siguiente imagen:

Vista Aerea Unity3D

Calcular las zonas a recorrer

Vamos a dejar listo la zona que haremos al un objeto recorrer en busca de otro. Para ello vamos al menú Window > Navigation. Se nos abrirá una nueva pestaña a la derecha, antes de tocar nada hay que seleccionar todos los cubos y nuestro Ground en la vista de jerarquía. Con todos los objetos seleccionados, en la ventana del Navigation marcamos la opción “Navigation Static”. Si quieres echar un vistazo a las opciones en Bake verás que son para configurar un poco los márgenes de la malla. Para aplicar los cambios hay que clickar el botón que hay abajo llamado “Bake“. Veremos como se marca en azul las zonas a recorrer, principalmente nuestra malla azul y las zonas superiores de los cubos.

Navigation Unity3D

Creando al agente y al objetivo

Añadimos una esfera que posicionaremos en X = 8, Y = 0.60, Z = -9. Le añadimos el material número 2 para identificarla bien de forma visual. Desde los componentes le añadimos Navigation > Nav Mesh Agent. Aparecerá un nuevo panel con opciones que por el momento no vamos a tocar pero que aconsejo jugar con ellas cuando acabemos el tutorial para tener otras velocidad, giros, etc. Llamaremos a la esfera Agente.

Añadimos una capsula. La renombramos a Objetivo y le añadimos el material número 12. La posición de esta capsula es X = 8, Y = 1, Z = 8.5.

Por último vamos a alinear la cámara. Partiendo en que tenemos la vista como en la imagen anterior. Clickamos en la “Main Camera” y desde el menú Game Object clickamos la opción “Align With View”. Con esto conseguimos que al ejecutar el juego veamos lo mismo que hemos estado viendo hasta ahora, una vista aerea de nuestro laberinto. Deberías ver todos los objetos de la siguiente manera:

Vista completa Unity3D

Añadiendo código y probando

Por último vamos a añadir un Script muy básico para que se produzca el efecto de búsqueda. Cuando ejecutemos el juego, lo que ocurrirá es que el Agente recorrerá el laberinto en busca del Objetivo hasta llegar a su misma base. Creamos un nuevo script y lo llamamos MovementScript en C#. El código a continuación lo que hace es instanciar al agente de navegación y usar la función nativa de Unity3D Start() para indicarle cual es su objetivo. Se instancia también un Gameobject público donde asignaremos la capsula objetivo.

Añadimos este Script a nuestro Agente y arrastramos desde la jerarquía el objetivo hasta el campo Destino que aparece dentro del area del Script. Si haces click al botón “play” de Unity3D deberías ver la escena con la esfera recorriendo nuestra malla azul esquivando las paredes y llegando finalmente hasta la cápsula.

Probando AI básica Unity3D

Espero que te haya servido este tutorial para ver con que facilidad podemos añadir una opción que parece tan complicada como es que un objeto encuentre a otro en un mapa. No dudes en comentar tus dudas para que pueda también mejorar el contenido.