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.

Instalar Magento 2 via DevBox para desarrollo en local

Introducción

Magento 2 DevBox es un paquete montado con Docker con el que tan solo ejecutando un script nos instalará un entorno local completo para empezar a trabajar con Magento 2. Este paquete viene con el siguiente software preinstalado:

  • Debian GNU/Linux 8 (jessie)
  • Apache 2.4.10
  • PHP 7.0.12
  • MySQL 5.634

Para poder trabajar es necesario tener el sistema Mac OS Yosemite o superior, o el sistema operativo Windows 10 Pro 64bits.

Docker

Magento 2 DevBox DockerDocker es un gestor de contenedores. En un contenedor puedes instalar lo que quieras, por ejemplo un entorno de desarrollo con todos los requisitos que comentaba arriba. Estos contenedores se pueden compartir e instalar tantas veces como se desee haciendo muy fácil que un grupo de usuarios tengan el mismo software funcionando con las mismas versiones o un equipo de desarrollo trabajen bajo el mismo sistema.

Para descargar e instalar Docker vamos a esta url https://www.docker.com/products/overview y seleccionamos el que haga referencia a nuestro sistema operativo.

Nota: este tutorial se ha hecho con Mac OS. Los pasos en un Windows serán muy similares pero no tienen porqué ser iguales.

Una vez descargado el fichero Docker.dmg hacemos click y se siguiendo los pasos dejaremos Docker instalado en nuestro ordenador.

Magento 2 DevBox

Para descargar el contenedor con Magento 2 vamos a https://magento.com/tech-resources/download

Magento 2 DevBox

Le daremos al botón “Get Started” y una vez registremos usuario o nos conectemos veremos la siguiente pantalla:

Magento 2 DevBox Options

Clickamos en la primera opción, “Create New Installation”, y se desplegarán una serie de opciones más abajo. Para que la instalación sea lo más ligera posible no añadiremos extras como el Sample Data o funcionalidades como Elastic Search o Varnish. Simplemente marcamos el sistema operativo, dejamos la versión community y añadimos nuestras claves.

Access Keys

Las access keys son necesarias para que composer pueda registrar aplicaciones, el sample data, etc. La forma de conseguirlas es muy sencilla. Entrado en https://www.magentocommerce.com/magento-connect/customer/account/login/ verás que a la izquierda una vez conectado hay un menú. Entras en “Secure Keys” y le das al botón “Generate new” poniendo primero un nombre (no tiene ningún valor).

Con esto ya tienes tus claves, la pública es el equivalente al “user name” y la privada es equivalente al “password”.

 

Una vez tengas todas las opciones dale a “Download DevBox Installer”.

Instalando Magento 2 DevBox

Se habrá descargado un .zip que puedes mover a tu carpeta de proyectos y descomprimir. Verás una carpeta con nombre muy largo del tipo “build-522265adfa0f6b1cd93433fe9ab2f3d3”. Entre desde una terminal en ella y ejecuta  ./m2devbox-init.sh

Veremos que en la terminal aparece información sobre el proceso de instalación. Es posible que si has seguido el tutorial de instalar Magento 2 en MAMP te acabe dando un error similar al siguiente:

Magento 2 DevBox error

Para resolverlo abrimos las preferencias de Docker y en la pestaña de “Files sharing” añadimos la ruta donde MAMP gestiona los proyectos /Applications/MAMP/htdocs, guardamos y reiniciamos Docker.

Magento 2 DevBox Docker Preferences

Volvemos a ejecutar el comando  ./m2devbox-init.sh y veremos que todo funciona bien ahora. Te da tiempo a tomarte un café mientras se instala todo.

Finalmente, si todo ha ido bien y después de un buen rato viendo como sucedían instalaciones de paquetes y módulos en la terminal deberías de ver un mensaje similar al siguiente:

Verás que se ha asignado una ip local con un puerto específico. Entrando a esa dirección verás la tienda de Magento 2 y entrando con las credenciales verás el backoffice.

Posibles problemas

Es posible que te surja algún problema que no me haya pasado a mi así que puedes comentarlo más abajo. A mi, en concreto, me pasaba que el Magento 2 DevBox intentaba instalar la versión 2.1.4 de Magento 2 cuando solo estaba hasta la 2.1.3. Editando el archivo docker-compose.yml cambié la versión y se instalo perfectamente. Ten en cuenta que desde este mismo archivo se pueden modificar otras muchas opciones.

Instalar Magento 2 en MAMP PRO

Introducción

Vamos a explicar como utilizar MAMP para dejar listo un entorno de desarrollo local para empezar a desarrollar en Magento 2. Si no conoces que es MAMP, es el equivalente a XAMP, LAMP, AMPPS, etc, es decir un entorno preconfigurado que funciona bajo el sistema operativo Macintosh (Mac) con Mysql y PHP (entre otros lenguajes). Viene con una serie de configuraciones y puertos predeterminados para poder empezar a trabajar en sitios web sin esfuerzo ni configuraciones imposibles.

Proporciona un control y gestión de versiones de PHP y MYSQL así como la localización de los logs o una fácil edición de los archivos de configuración como el php.ini. En definitiva, un software que facilita y acelera el desarrollo de aplicaciones en local.

Dicho esto, nos vamos a centrar en instalar y seguir todos los pasos necesarios para dejar MAMP listo para cualquier tipo de proyecto y continuaremos en como dejar instalado y configurado en concreto Magento 2.

Nota: si no quieres pagar por MAMP PRO siguiendo los pasos del tutorial podrías instalar Magento 2 en la versión gratuita. Algunos pasos variarán o directamente los puedes saltar. En algunos cambia simplemente la interfaz de MAMP. Si tienes cualquier duda, te respondo en los comentarios.

Instalar MAMP PRO

Nota: para este tutorial he trabajado con la versión 3.5.2 de MAMP PRO. Actualmente van por la 4. Os aconsejo si comprais por primera vez hacerlo sobre la última versión aunque algún paso pueda variar levemente. 

Para descargar la última versión: https://www.mamp.info/en/downloads/

Url para descargar la versión 3.5.2: https://www.mamp.info/en/downloads/older-versions/

Comprar la última versión o anteriores si se desea: https://sites.fastspring.com/mamp/product/mamp-pro?language=en&tags=en

Una vez instalado el software siguiendo los pasos e insertada la clave deberías ver la pantalla de MAMP PRO:

MAMP PRO window

Inicia los servicios dando al botón verde de la esquina superior derecha y verás que se marcan Apache y Mysql como iniciados. Ahora dale al botón de al lado WebsStart y si ves una página web de MAMP con información del entorno quiere decir que todo funciona como debe.

A partir de ahora, los proyectos los trabajarás dentro de la carpeta que tiene MAMP preparada para alojarlos que se encuentra en la siguiente ruta: /Applications/MAMP/htdocs. Te recomiendo un acceso directo a htdocs para poder entrar de forma rápida.

Configuraciones extras

Te recomiendo que le des un vistazo a todas las opciones. Sobretodo quédate con donde tienes lo logs de mysql, php, etc. Habilita el máximo de logs posibles ya que en este entorno vas a desarrollar. Por último en la pestaña de PHP selecciona PHP 5.6.10 en vez de cualquier otra versión. Magento 2 funciona con PHP 5.6.10 y 7+ pero para esta guía uso la 5.6.10.

Instalar composer

Composer es un gestor de paquetes y Magento 2 ahora trabaja mano a mano con él por tanto hay que descargarlo e instalarlo. Desde la siguiente Url podemos hacerlo siguiente los comandos que nos indican https://getcomposer.org/download/.

Cuando finalices con los comandos te recomiendo un último para que puedas usar composer de forma global solo con “composer” y no con “php composer.phar”. Ejecuta lo siguiente desde el mismo directorio donde has ejecutado el resto:

mv composer.phar /usr/local/bin/composer

Configurar PHP terminal

Los Mac vienen con apache instalado de serie y seguramente tengáis también una configuración por defecto de dónde tiene que mirar el php. El problema al usar MAMP es que tiene una configuración propia encapsulada. Por tanto, el PHP que se está ejecutando en el servidor al cargar vuestros proyectos no es el mismo que ejecuta la terminal/consola. Esto hay que cambiarlo para que os funcionen bien los comandos que ejecutéis dentro de la aplicación y Magento 2 precisamente funciona a base de comandos.

El cambio es muy sencillo. Asegúrate de que has seleccionado en MAMP el PHP 5.6.10 descrito en la instalación de MAMP > Configuraciones extras.

Antes de ejecutar los pasos, hacemos un pequeño setup que os podéis saltar si ya lo tenéis.

Instalando BREW y VIM

Brew es un gestor de paquetes para Mac, en realidad es una herramienta inprescindible si tienes un Mac. Con brew puedes instalar paquetes de todo tipo, dependencias, etc. Para comprobar si ya tenemos Brew instalado ejecutamos en la terminal  brew , si nos devuelve opciones es que lo tenemos, en ese caso lo actualizamos con  brew update . En el caso de que no lo tengamos instalado podemos hacerlo siguiendo los pasos de este enlace http://brew.sh/index_es.html.

Una vez instalado Brew podemos instalar Vim que es un editor de texto. Si no os gusta Vim podéis configurar la terminal para abrir y editar ficheros con el que queráis. Los ejemplos a continuación serán con Vim. Para instalarlo desde la terminal escribimos  brew install vim . Hecho, ahora para editar un archivo bastará con ejecutar “vim nombredelarchivo”. Para saber comandos básicos sobre como usar Vim puedes visitar este enlace http://bullium.com/support/vim.html.

Ultimando configuraciones

En terminal ejecutamos:  vim ~/.bash_profile

A este archivo le añadimos dos lineas:

Guardamos el archivo y ejecutamos en la terminal:   source ~/.bash_profile

Por último y a modo de comprobación ejecutamos en terminal  php --ini  y deberiamos ver algo parecido a lo siguiente (las rutas apuntando a MAMP):

php --ini

Basicamente hemos creado y editado un archivo en nuestra “home” donde le indicamos donde un alias para ejecutar composer (solo para asegurarnos) y la ruta del php que tenemos que ejecutar que como ves está dentro de MAMP. Al ejecutar “source” lo que hacemos es “guardar” esta configuración. Con esto, evitamos que al ejecutar comandos php nos salten errores por utilizar versiones de php distintas.

Instalar Magento 2

Hay varias formas de descargar Magento 2. Con composer, descargando el repositorio oficial de github o descargando el paquete desde magento.com. Esta última manera es la que utilizo para esta guia. Entra en esta url https://magento.com/tech-resources/download y descarga la última versión del software. Si te decides por alguna otra forma, los pasos siguiente son muy similares.

Una vez descargado, movemos el fichero comprimido dentro de /Applications/MAMP/htdocs lo descomprimimos y lo renombramos a magento2.

Entramos dentro de la carpeta Magento 2 y ejecutamos:

composer install

composer install

Veréis algo parecido a esto (no tiene por que ser igual), fijaros que no sea un error y que ponga que se han cargado los repositorios de composer, se han instalado dependencias y se han cargado los ficheros “autoload”.

Creando un Virtualhost

Este paso, tampoco es necesario para continuar, pero el tutorial seguirá usando las url’s de un Virtualhost. Es aconsejable que sigas este punto también. Crear un virtualhost con MAMP PRO es muy sencillo.

Magento 2 Virtual Host con MAMP PRO

Siguiendo la imagen anterior, ve a la sección “Hosts” de MAMP PRO. Abajo a la izquierda dándole al símbolo “+” crearas una nueva entrada. Por defecto esa entrada usará el PHP que tengas configurado en MAMP PRO. Arriba a la derecha puedes darle un nombre, en este caso lo he llamado “magento2.dev”. Lo último que falta apuntar a la carpeta donde está Magento 2 y por último dale a “Guardar”. MAMP preguntará si deseas reiniciar los servicios para que los cambios se hagan efectivos, dile que si. Una vez reiniciado MAMP PRO y si accedes a la siguiente url http://magento2.dev:8888/ deberías ver la pantalla del inicio de la instalación de Magento 2.

Creando la base de datos

Desde la pestaña MySQL de MAMP PRO puedes ver que hay un apartado llamado “Administrar MySQL con”. Por defecto MAMP PRO tiene instalado phpMyAdmin pero podéis gestionarlo también con Sequel Pro y MySQLWorkbench. Lo único que tienes que hacer es crear una nueva base de datos llamada magento2 con coalición UTF-8.

Instalando Magento 2

Ahora si, ya lo tienes todo listo, si accedes a la url http://magento2.dev:8888/ y sigues todas las pantallas paso a paso acordándote de que al poner los datos de la base de datos tienes que, en el host poner localhost:8889 al final verás una pantalla con una barra de progreso. Una vez acabe una pantalla te indicará que todo ha finalizado y podrás acceder tanto a la parte frontal de Magento 2 como al backoffice con la Uri y los datos que hayas ingresado en el proceso.

Comandos útiles

Antes de dar por finalizado el tutorial, vamos a probar que funcione la terminal. Magento 2 tiene unas opciones que se gestionan mediante comandos. Desde la raíz de la instalación de Magento 2 ejecutamos  php bin/magento . Si todo funciona como es debido debería de devolvernos un listado de comandos con sus descripciones. Para usar cualquiera de esos comandos solo tienes que repetir la llamada anterior y añadirle el comando que quieras ejecutar. A estos comandos además se les puede pasar argumentos. Algunos de los comandos más útiles a la hora de desarrollar en Magento 2 son:

  • Para poner la aplicación en modo developer  php bin/magento deploy:mode:set developer
  • php bin/magento module:disable añadiendo el nombre del módulo lo deshabilitariamos y cambiando disable por enable lo habilitariamos.
  • Actualiza la aplicación y la base de datos. Si estás trabajando en un módulo este comando hará que Magento 2 se entere de que existe.  php bin/magento setup:upgrade
  • php bin/magento sampledata:deploy con esto y siguiendo las instrucciones que salen por pantalla se instalan en base de datos una buena cantidad de datos de prueba como productos, categorías, etc.

Espero que este tutorial te haya servido para empezar a investigar y trabajar con Magento 2.

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.