Integración de Facebook en Unity para apps Android

Banner Unity y Facebook

Además de la monetización, otro aspecto a tener muy en cuenta en las apps o juegos para smartphone es el componente social de las mismas. La posibilidad de que el jugador pueda compartir sus puntuaciones con sus amigos o invitarlos a jugar es un aspecto clave para que el juego se extienda y adquiera más usuarios. Una de las maneras de hacer esto es a través de Facebook, una de las mayores redes sociales del mundo. En este tutorial veremos cómo integrar el SDK de Facebook en nuestro proyecto Unity para android (aunque los primeros pasos son idénticos para cualquier plataforma).

Registro de la App en Facebook

Lo primero que haremos es dar de alta nuestra aplicación o juego en Facebook. Para ello accedemos a la página de desarrolladores (https://developers.facebook.com/) y pulsamos en Apps > Add new app. Se mostrará un popup con 4 tipos de aplicación diferentes, pero pulsamos en el texto inferior donde pone advanced setup. Entonces aparecerá el siguiente popup:

Creacion app facebook

Rellenamos el campo del nombre y seleccionamos la categoría de la aplicación. En el caso de ser una aplicación android (mi caso) no será necesario rellenar el Namespace.

Una vez creada la aplicación veremos que se le ha asignado un App ID, que será necesario más adelante.

Descarga y configuración del SDK de Facebook

Lo siguiente será descargar e importar a Unity el SDK de Facebook. El SDK puede descargarse de la siguiente página: https://developers.facebook.com/docs/unity/downloads. Una vez descargada la versión más reciente, importamos el package a Unity de la manera habitual, lo que creará varias carpetas en nuestros Assets y un nuevo menú llamado Facebook en la parte superior de Unity.

menuSi no se muestra el menú de Facebook, hacer click en otro menú y aparecerá. Esto es un pequeño glitch de Unity según parece.

Ahora que tenemos el menú de Facebook lo pinchamos y hacemos click en Edit Settings, lo que abrirá la configuración del SDK de Facebook:

settings

Aquí es donde debemos introducir el App Id obtenido previamente de Facebook.

Con esto ya tendríamos configurado Facebook para nuestro proyecto de Unity. Ejecutando las escenas de ejemplo que se encuentran en la carpeta Assets > Examples podremos hacer login y publicar historias en el muro de Facebook, además de probar el resto de funciones del SDK:facebookExample

Al pulsar en Login aparecerá la siguiente ventana pidiéndonos un User Access Token. Podemos obtenerlo pulsando en Find Access Token, que nos llevará al Access Token Tool de Facebook, donde podremos generarlo y copiarlo a Unity.FacebookLogin

Esto sería todo lo básico para configurar el SDK de Facebook en Unity. Si además queremos configurarlo para funcionar en android, tendremos que hacer algunos pasos más.

Configuración del SDK de Facebook para Android

Es muy probable que en el apartado Android Build Facebook Settings veamos la alerta “OpenSSL not found. Make sure that OpenSSL is installed, and that it is in your path“:
openssl

Esto es normal si no hemos instalado previamente OpenSSL en nuestro equipo. OpenSSL es un conjunto de herramientas relacionadas con la encriptación y la seguridad. Podemos descargarlo de https://code.google.com/p/openssl-for-windows/downloads/list y descomprimirlo en una carpeta de nuestro equipo.

El siguiente paso será modificar la variable de entorno Path, añadiéndole la ruta a la carpeta bin de OpenSSL. Para acceder a las variables de entorno en Windows 7 hay que ir a las propiedades del Equipo (Botón de Inicio, click derecho en Equipo, propiedades) y pinchar donde pone Configuración avanzada del sistema en la parte izquierda. Se abrirá una nueva ventana, y en la pestaña de Opciones avanzadas hay que pulsar en Variables de entorno. Se abrirá otra ventana con la lista de todas las variables de entorno del sistema. Buscamos la que se llama Path y la editamos, añadiéndole al final un ‘;‘ para separar las rutas y a continuación la ruta a la carpeta bin de OpenSSL, que en mi caso tiene esta pinta: “C:\Program Files (x86)\OpenSSL\openssl-0.9.8k_X64\bin”

Si ahora reiniciamos Unity y vamos a las settings de Facebook debería haber desaparecido la alerta anterior. Sin embargo, es posible que se muestre una nueva alerta: “Keytool not found. Make sure that Java is installed, and that Java tools are in your path“:
keytool copia

Keytool es una herramienta que viene con cualquier paquete de Java, tanto la JDK como la JRE, por lo que haremos una serie de comprobaciones.

  • Comprobar que tenemos instalada una JDK o una JRE (más habitual) de Java en nuestro sistema. Suelen instalarse en la carpeta Archivos de programa/Java. Si tenemos curiosidad podemos ver que en la carpeta bin de nuestra JDK o JRE está, efectivamente, la herramienta Keytool.
  • Comprobar que la variable de entorno Path contiene una ruta a la carpeta bin de la JDK o JRE de Java instalada. En caso negativo añadirla de la misma manera que se hizo previamente para OpenSSL. Otra manera de comprobarlo es abrir una línea de comandos (Inicio > Ejecutar > cmd) y ejecutar el comando keytool. Si lo reconoce es que el Path está bien configurado.

Tras estas comprobaciones podemos afirmar que keytool está instalado y que el Path está correctamente configurado, luego la alerta debería desaparecer. Sin embargo es posible que aun así la alerta se mantenga, por lo que se trata de un bug del SDK de Facebook que, afortunadamente, podemos arreglar eliminando una línea del código.

Editamos el fichero FacebookAndroidUtil.cs que está en Assets > Facebook > Editor > android y buscamos el siguiente código:


if (!DoesCommandExist("keytool"))
{
    setupError = ERROR_NO_KEYTOOL;
    return null;
}

Vemos que este código primero comprueba si existe el comando keytool, y en caso negativo hace un return null que evita que continúe la ejecución. Lo que haremos será comentar la línea “return null;” con // para que no se ejecute, así:


if (!DoesCommandExist("keytool"))
{
    setupError = ERROR_NO_KEYTOOL;
    //return null;
}

Si guardamos el fichero y volvemos a Unity, la alerta habrá desaparecido y podremos continuar con la configuración de la app.

Una vez nos hayamos deshecho de las alertas, podremos ver debajo el Package Name, el Class Name y la Debug android key hash:
datos

Estos datos deben introducirse en el apartado Settings de la app de Facebook creada al principio. Tendremos que añadir una nueva plataforma android pulsando en Add Platform e introducir los 3 valores y guardar.

Haciendo esto ya podremos probar a compilar y desplegar la aplicación en el dispositivo android. Para probar rápidamente la integración de Facebook podemos usar las escenas de ejemplo que vienen con el SDK, añadiendo una de ellas a la lista de escenas de las Build Settings y haciendo que se ejecute en primer lugar.

En el dispositivo android no se nos pedirá un User Token al hacer login pero puede que se produzca el siguiente error: “Invalid key hash. The key hash ***** does not match any stored key hashes…Screenshot_2014-10-09-00-04-39

Y es que la key hash que proporciona el SDK de Facebook en sus settings es la de debug, mientras que al desplegar la app en el dispositivo se usa otra, que es la que muestra el mensaje de error. Tendremos que añadir esta key hash en la página de Settings de la app de Facebook, a continuación de la que introdujimos previamente.

Para ello tenemos dos opciones. O bien podemos copiarla directamente del mensaje de error que aparece, o bien usar la herramienta monitor.bat del android SDK para monitorizar los mensajes de debug de la aplicación y obtenerla de ahí. Personalmente recomiendo la última opción, ya que al copiarla a ojo es fácil confundir las “íes” mayúsculas con las “eles” minúsculas.

Usando la herramienta monitor.bat mientras ejecutamos la app en el dispositivo podremos ver los mensajes y crear un filtro para ver sólo los de Unity. Así podremos ver la key hash que nos interesa:

Captura de pantalla 2014-10-09 00.12.03

Sólo tendremos que copiarla a las Settings de la app de Facebook y guardar para que el login se haga correctamente en el dispositivo.

Y eso es todo, ya tenemos facebook integrado con nuestra app o juego android de Unity! El siguiente paso será utilizarlo para hacer login, publicar historias, etc.
Banner Blog

Anuncios

5 pensamientos en “Integración de Facebook en Unity para apps Android

  1. Hola he tratado de dejar operativo este sistema pero me sale un error que es el siguiente…Your android debug keystore file is missing! You can créate new one by creating and building empty android Project in Eclipse. Estoy recién aprendiendo y nose como resolver esto. Me podrias ayudar? Muchas gracias

    • Hola Juan, probablemente como dice el error no hayas creado el keystore para firmar la aplicación. Es sencillo de hacer, en PlayerSettings en el último apartado puedes darle a Create Keystore para crear uno nuevo. Te pedirá que le des un nombre y una contraseña y listo!
      Gracias por visitar mi blog!

  2. Buenas, tengo el mismo problema. Ya cree una contraseña etc, es mas tengo el juego en la app de google… Pero no hay manera de que el plugin este detecte la keystore.

  3. Hola, muy buen tutorial, estoy acabando mi primer juego en Unity y voy a subirlo a Facebook y me ha sido de gran ayuda.
    Tengo una duda a la hora de compartir la puntuación obtenida en el juego, viene por defecto en el SDK alguna manera de hacerlo? O tengo que habilitar algún botón en la pantalla de fin de partida del juego por ejemplo, y luego asignarle a ese botón algún código especial o algo? Estoy un poco verde en esto.
    Muchas gracias.

  4. Hola muy buen tutorial.
    De que forma puedo publicar una foto y a esa foto etiquetar a los amigos que quiero.
    Yo pense con la forma de compartir pero no se me ocurre como armarlo

    public void ShareWithFriends()
    {
    FB.Feed (
    linkCaption: “Cualquier nombre”,
    picture: “http://www.Cualquiernombre/Cualquiernombre.png”,
    linkName: “Cualquier nombre”,
    );

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s