En este nueva entrada de Diario Breakout, explicaré cómo integrar las funcionalidades de Clay.io en mi juego Breakout. He integrado las siguientes funcionalidades: Logros, Puntuaciones, Estadísticas y Publicidad.

Después de lanzar la primera versión jugable de Breakout, he decidido poner una tabla de puntuaciones para animar los piques personales entre jugadores. He descubierto entonces Clay.io, una API en javascript que puedes integrar gratuitamente en tu código y utilizar para mejorar muchísimo las funcionalidades de tu juego. La documentación de Clay.io es bastante clara y suficiente para trabajar con la API pero voy a explicar cómo la he utilizado en mi juego. Clay.io también es una plataforma de distribución de juegos, donde puedes jugar a multitud de juegos subidos por usuarios.

Instalación

Es muy sencillo, consiste en copiar y pegar el script que aparece en la documentación.

Recomiendo usar el script de la api completa porque yo he probado a integrar sólo los módulos que iba a utilizar y parece que los módulos de Cross Promotion y Advertisement no son añadidos correctamente de esa manera. Posiblemente sea un bug que será solucionado en breve.

Después de instalar el script debéis de iniciar el juego una vez esté cargada la API, esto se hará de la siguiente manera:

Si conoces jQuery, te sonará este código.

Logros – Achievements

Los logros están muy de moda desde hace unos años con la última generación de consolas. Muchos pensamos que los logros son una excusa para aumentar la duración de vida de un juego de forma artificial, otros muchos son unos fanáticos e intentan conseguirlos todos. En Clay.io, tienen una clasificación general a todos los usuarios de la plataforma, los logros que estos usuarios consiguen en cada juego les dan puntos adicionales. Para cada juego subido, puedes repartir 100 puntos entre los logros que decidas crear. En el caso de mi Breakout, he creado 15 logros:

1. Nivel 1 superado.
2. Nivel 2 superado.
3. Nivel 3 superado.
4. Nivel 4 superado.
5. Nivel 5 superado.
6. Nivel 6 superado.
7. Nivel 7 superado.
8. Nivel 8 superado.
9. Nivel 9 superado.
10. Nivel 10 superado.
11. Juego terminado.
12. Has terminado el juego y no has perdido ninguna vida.
13. Super combo! Has destruido 20 bloques sin tocar la pala de por medio.
14. Has terminado el juego y has recogido todos los power-up positivos y negativos.
15. Has terminado el juego y no has recogido ningún power-up ni positivo ni negativo.

Cada logro tendrá un identificador asignado que será el identificador que tendré que enviar a la api para registrar la consecución de un logro por parte del jugador.

Para poder asignar los logros a los jugadores he creado un nuevo método en mi clase «Game».

Este método recibe como parámetro una cadena «achievement» que contendrá una cadena en la que vendrá el logro que hay que asignar al jugador. Cada logro tiene un id diferente y además añadirá puntos a la cuenta del usuario. Las últimas líneas envían el logro al servidor de Clay.io y actualización la puntuación del usuario.

Los logros serán llamados en los siguientes puntos:

• El logro de superar cualquier nivel se da en el método «gamewin», una vez superado el nivel.
• El logro de terminar el juego se da en el mismo método, una vez que no quedan niveles.
• El logro de no haber perdido vidas se da en ese mismo método, una vez terminado el juego, se comprueba el valor de una variable booleana. Esta variable booleana es verdadera cuando se inicia el juego pero si el jugador pierde una vida su valor cambia a falso. Si al final del juego, la variable sigue siendo verdadera, se le otorga el logro al jugador.
• El logro de recoger todos los power-up funciona de la misma manera. Existe una variable booleana que es verdadera desde el inicio. Si un power-up desaparece sin haber sido recogido por el usuario, la variable pasará a ser falsa.
• El logro de no recoger ningún power-up es igual. Si el jugador recoge un power-up la variable booleana pasará a ser falsa.
• Por último, la destrucción de 20 bloques de forma consecutiva se hace creando una variable en la clase «Game» que almacenará el número de bloques destruido en cada «tirada». Cuando la bola toque la pala, este número se pondrá a 0. Cada vez que esta variable actualiza su valor se comprueba si es superior o igual a 20, si es así, se otorga el logro al jugador.

Tabla de puntuaciones – Leaderboards

Primero, debo crear una tabla de puntuaciones en la administración de Clay.io. Esta tabla tendrá también un identificador asignado y al iniciar el juego (en el método «initialize» de «Game») debo almacenar en una variable de la clase, la tabla de puntuaciones.

Además he creado un nuevo método en la clase «Game» que se encarga de enviar la puntuación al servidor.

Este método envía la puntuación sólo si es superior a 0. Además muestra la tabla de puntuaciones y la tabla de logros obtenidos por el jugador. Este método es llamada tanto con un game over, como cuando el jugador termina el juego.

Publicidad – Cross Promotion y Advertising

Existen dos tipos de publicidad en Clay.io. La primera se llama Cross Promotion. Esta publicidad consiste en mostrar un banner de otros juegos de Clay.io. Cuando alguien pincha en un juego de ese banner, se dan créditos al juego desde el que se ha pinchado. Estos créditos se pueden gastar para que ese juego aparezca en otros banners. Es un método interesante de publicidad a cambio de publicidad.

Integrar este banner es muy sencillo con esta simple llamada:

En mi caso, le he puesto de ancho «120px», de alto «600px» y el id del div que será su contenedor es «barclayio». He colocado el banner en la parte derecha del canvas del juego.

La otra forma de publicidad es más tradicional, es un banner en el que se cobra por cada clic en él, tipo AdSense. Según qué publicidad sea, cada clic os puede reportar entre el 50 y 70% del pago total. El resto se lo queda Clay.io y terceras partes. Para integrar la publicidad es muy similar a la anterior, una simple llamada es suficiente:

He escogido el banner de 120px por 600px de ancho. La posición será en función del div con id «container» y he enviado los valores de right y top. He fijado que se refresque cada 120 segundos. La documentación indica también como refrescar la publicidad manualmente.

Estadísticas – Analytics

Esto permite rastrear cómo la gente juega a tu juego y qué cosas puedes mejorar. Una de las cosas más interesantes es la superación de niveles, comprobar el tiempo que pasa cada usuario en cada nivel para saber si la dificultad es ascendente o está mal repartida. Para eso, sólo hay que hacer tres llamadas desde el código:

• En el método «startLevel», una llamada indicando que el usuario ha empezado el nivel.

• En el método «gameover», una llamada indicando que el usuario ha fallado el nivel.

• En el método «gamewin», una llamada indicando que el usuario ha completado el nivel.

Esto es todo pero hay mucho más

Sí, esto es todo lo que yo he integrado pero existen muchas más cosas que se pueden integrar:

• Procesamiento de pagos in-game.
• Almacenamiento de partidas guardadas en la nube, para que el usuario pueda seguir su partida desde su móvil o su tablet.
• Integración con Facebook y Twitter y permitir al jugador compartir rápidamente su puntuación para picar a sus amigos.
• Capturas de pantalla, también ideal para compartir en redes sociales.
• Salas de multijugador, para los juegos multijugadores…
• Valoraciones, para facilitar que el jugador valoren tu juego.

Se puede integrar la API totalmente gratis y además se puede publicar el juego en su listado de juegos. Yo he publicado Breakout. Podéis también vender vuestro juego a través de esta plataforma, ellos se quedarán el 20% del precio final. También os ayudan a publicar en otras plataformas como Chrome Web Store o Facebook.

Este artículo forma parte de una serie:

1. Introducción: Another Breakout game…
2. Diario Breakout – Parte 1
3. Diario Breakout – Parte 2
4. Diario Breakout – Parte 3
5. Diario Breakout – Parte 4
6. Diario Breakout – Parte 5 y ¿última?
7. Diario Breakout – Integrar Clay.io

Prueba la versión final.