Countless v2.0: a big update

 

App Store EnGoogle Play En

Press Kit

 

Over 5 months after the first release of Countless, a big update, the version 2.0, is available. This new version features lots of additions and improvements:

  • Use shields to protect you against mistakes
  • Collect coins to buy shields and skins
  • Multiple different skins to unlock
  • Fully revised difficulty curve
  • Improved touch response: now you can touch two pieces at the same time
  • Ads are now less annoying and give more rewards
  • Many visual improvements
  • By popular demand, now you can leave the name empty when you make a new record

Countless was born as a simple project with the idea of learning how to use Unity game engine, as well as being able to release a game in a short period of time. There were no plans to expand it very much, and I only planned to maintain it by fixing issues from time to time while I was working on a new project. But once I saw the game actually released and received feedback, I decided I needed to do some important changes, and here they are. Let’s take a detailed look into some of them.

Difficulty Curve

The original difficulty curve was very abrupt. It rapidly reached the most difficult point and stayed there for the rest of the game.

Here you can see how after just a few seconds, the board passes from 2x2 to 4x4 and the time per level is decreased to the minimum
Here you can see how after just a few seconds, the board passes from 2×2 to 4×4 and the time per level is decreased

In order to get a friendlier, more progressive difficulty curve, and at the same time offer a more challenging gameplay to those who manage to reach advanced levels, the progress in the game has been meticulously adjusted.

With the new, adjusted difficulty curve, the board increases its complexity in a much smoother way

Items

The game now allows you to collect two different item types: coins and shields. You can get coins in multiple ways (playing, viewing ads, and even as a gift!). With them, you will be able to buy shields and unlock skins or themes that change the colours in the game. Use the shields when playing to protect you against failures!

Everyday you will get a gift when opening the game

 

See the icon at the bottom left corner? Touch it to open the shop!

 

In the shop you will be able to buy stuff using the coins you have earned. You can also get free coins after watching an ad!

Visual Improvements

Many small visual improvements have taken place: more icons and less text, more color variety, and other improvements to make everything more clear.

Some new icons have replaced the old text markers, and a small separation between pieces in 2×2 boards has been added to improve the look and feel

 

With the new themes you can switch the color scheme to a different one if you have unlocked it

 

New colours have been added to support the new 5×5 boards as well

 

Hopefully this update will make the game much more fun and engaging. Are you enjoying it? Do you have anything to suggest or comment? Please leave a comment at the bottom of this post or use the Contact Form.

See you in the leaderboards!

Advertisements

UniShare: sharing scores to social media with Unity

Español

One of the features I have missed in Unity when developing Countless, is the ability to share scores to social networks like Twitter or Facebook, as well as any other media like email and other messaging applications. Today’s mobile operating systems have integrated, standard tools that allow applications to easily share text and images to the media chosen by the user, and it would make sense that Unity integrated a unified, multi-platform API to deal with these features when deploying to mobile devices, but it doesn’t.

 

iOS Sharing Dialog
An example of a standard sharing dialog

 

So, after searching a lot, I finally found what seems to be the best existing option at the moment: the UniShare plugin by Level One Games. It allows to easily get a screenshot and share it via the OS’ standard dialog. It is not free, but it is definitely worth its price.

 

Honestly, after installing it I didn’t find it very straightforward to start using it, because I could not manage to find any documentation, and despite of including an example, it didn’t work for me. But everything turned out to be quite simple after taking a look into its code.

 

How to use UniShare

 

After installing it, a new folder called UniShare will appear in your project under Assets/Plugins. It includes an example folder. You can simply remove it. So you will have a structure similar to this one:

 

UniShare Folder Structure

 

If you go to the Scripts folder, you will find a script called UniShare. If you open it, you can find some of the methods that you will need to perform the most common operations related to sharing, like TakeScreenshotTakeScreenshotAndShare, and ShareScreenshot. But… how and where can you use them?

 

Simple. Add a Script component to one of your game objects, with this script:

 

UniShare Script Component

 

There you can see the parameters you can set for sharing, like ShareText and the four Border values. All of them can be configured both in the UI and from code. Once you have this component, it is possible to go to a custom script attached to this same object and do something like this:

 

private UniShare uniShare;
private string originalSharingMessage;
...
void Start () {
    uniShare = gameObject.GetComponent<UniShare> ();
    
    // Compute values for borders depending on screen's aspect ratio if needed
    uniShare.BorderLeft = Screen.width * ...;
    ...
    // Keep the original text so we can update it afterwards
    originalSharingMessage = uniShare.ShareText;
}

 

In the example, I am storing the original value of ShareText in order to be able to update it afterwards. My intention here, is to define the text in Unity’s UI, but with a parameter ({0}):

 

UniShare Share Text

 

… so, from my script, I can use that exact text but replacing the parameter with the needed value:

 

public void openSharingDialog(int _score) {
    uniShare.ShareText = string.Format (originalSharingMessage, _score);
    uniShare.TakeScreenshotAndShare ();
}

 

Another important feature, is the ability to set borders for the screenshot. In my custom script, you have seen I was updating the screenshot’s width according to some criteria and depending on screen’s aspect ratio. The parameters defined by UniShare for this, are values between 0 and 1 that are relative to screen’s width and height. In order to make it easier to know what we are doing, UniShare allows us to print a semi-transparent rectangle in Unity’s simulator indicating the area that will be captured, by checking “Simulate Captured Area” in the script’s parameters:

 

UniShare Simulating Captured Area

 

So, you can use that information to tweak the borders and get the data you need to adjust the screenshot.

Comment/share

 

==============

 

UniShare: compartiendo en redes sociales con Unity

 

Una de las funcionalidades que he echado en falta en Unity al desarrollar Countless, es la posibilidad de compartir puntuaciones en redes sociales como Twitter o Facebook, así como cualquier otro medio como email u otras aplicaciones de mensajería. Los sistemas operativos móviles de hoy en día tienen herramientas integradas y estándar para compartir fácilmente texto e imágenes a los medios escogidos por el usuario, y tendría sentido que Unity integrase una API unificada y multiplataforma para acceder a esas características al exportar nuestro proyecto a dispositivos móviles… pero no lo hace.

 

iOS Sharing Dialog
Un ejemplo de un diálogo estándar para compartir

 

De modo que, tras buscar mucho, finalmente encontré lo que parece ser la mejor opción existente en este momento: el plugin UniShare de Level One Games. Permite obtener una captura de pantalla y compartirla fácilmente a través del cuadro de diálogo estándar del sistema operativo. No es gratuito, pero sin duda vale la pena por su precio.

 

Sinceramente, tras instalarlo no encontré demasiado intuitivo cómo comenzar a usarlo, porque no logré encontrar documentación, y a pesar de incluir un ejemplo, este no me funcionó. Pero todo resultó ser muy sencillo tras echar un vistazo a su código.

 

Cómo usar UniShare

 

Tras instalarlo, una nueva carpeta llamada UniShare aparecerá en tu proyecto bajo Assets/Plugins. Incluye una carpeta con un ejemplo. Puedes simplemente borrarla. Así, tendrás una estructura similar a esta:

 

UniShare Folder Structure

 

Si vas a la carpeta Scripts, encontrarás un script llamado UniShare. Si lo abres, verás algunos de los métodos que necesitarás para realizar las operaciones más comunes relacionadas con la funcionalidad de compartir, como TakeScreenshotTakeScreenshotAndShare, y ShareScreenshot. Pero… ¿cómo y dónde puedes usarlos?

 

Simple. Añade un componente Script a uno de tus game objects, con este script:

 

UniShare Script Component

 

Ahí puedes ver los parámetros que puedes configurar para compartir, como ShareText y los cuatro valores Border. Todos ellos pueden ser configurados tanto en la UI como por código. Una vez tengas este componente, es posible ir a un script custom enlazado a este mismo objeto y hacer algo como esto:

 

private UniShare uniShare;
private string originalSharingMessage;
...
void Start () {
    uniShare = gameObject.GetComponent<UniShare> ();
    
    // Calcular valores para los bordes dependiendo de la relación de aspecto de la pantalla, si es necesario
    uniShare.BorderLeft = Screen.width * ...;
    ...
    // Guardar el texto original de modo que podamos actualizarlo después
    originalSharingMessage = uniShare.ShareText;
}

 

En el ejemplo, estoy almacenando el valor original de ShareText para poder actualizarlo después. Mi intención aquí, es definir el texto en la UI de Unity, pero con un parámetro ({0}):

 

UniShare Share Text

 

… y así, desde mi script, puedo usar ese texto pero reemplazando el parámetro con el valor requerido:

 

public void openSharingDialog(int _score) {
    uniShare.ShareText = string.Format (originalSharingMessage, _score);
    uniShare.TakeScreenshotAndShare ();
}

 

Otra característica importante, es la posibilidad de establecer bordes para el screenshot. En mi script custom, has visto que actualizo el ancho de la captura de pantalla de acuerdo con algún criterio y dependiendo de la relación de aspecto de pantalla. Los parámetros definidos por UniShare para esto, son valores entre 0 y 1 relativos al ancho y alto de pantalla. Para hacer más fácil saber lo que estamos haciendo, UniShare nos permite activar un rectángulo semitransparente en el simulador de Unity indicando el área que será capturada, si activamos “Simulate Captured Area” en los parámetros del script:

 

UniShare Simulating Captured Area

 

Así, puedes usar esta información para configurar los bordes y obtener los datos que necesitas para ajustar la captura de pantalla.

 

Countless, my new game

Español

CountlessTitle

And here it is. Or almost 🙂 . After some months spending part of my very limited spare time learning how to use Unity and working on a game, it is almost finished. Let me introduce Countless.

 

2016_08_13_ScreenshotSaturday

 

Countless is a very simple game. The player is presented with a square board full of squares. Each square has a number, and the player must match numbers, in correct order, as quick as possible. The player will fail when not matching the next pair of squares in time. The goal? Match as many pairs as you can.

 

2016_08_20_ScreenshotSaturday

 

Despite of its simplicity, developing Countless has been (and is being) very didactic when it comes to using Unity game engine. It involves a lot of animations, data persistence, scene and object management, event handling, UI configuration, ads, and access to some target systems’ features. And a lot of scripting. This is my first experience using a third-party game engine. My previous game, EggOrama, was developed from scratch using my own engine.

 

Gameplay1

 

For me, Countless serves a dual purpose. On one hand, it is a game that I will publish. It will be free, but include some ads (as well as a little gamification of this). On the other hand, by working on it I have been able to learn a lot about the game engine without having to spend too much time on each feature. After releasing this game, I will be prepared to start another one (but won’t forget updates for Countless as well).

 

Countless will be released soon, for iOS and Android, featuring both local and online leaderboards. More platforms could eventually join the party. No specific release date yet, though!

Comment/share

 

==============

 

Countless, mi nuevo juego

CountlessTitle

Y aquí está. O casi 🙂 . Tras algunos meses pasando parte de mi muy limitado tiempo libre aprendiendo cómo usar Unity y trabajando en un juego, está casi terminado. Permitidme presentaros Countless.

 

2016_08_13_ScreenshotSaturday

 

Countless es un juego muy simple. Ante el jugador se muestra un tablero cuadrado lleno de cuadrados. Cada cuadrado tiene un número, y el jugador debe emparejarlos, en el orden correcto, tan rápido como sea posible. El jugador fallará cuando no empareje el siguiente par de cuadrados a tiempo. ¿El objetivo? Hacer tantas parejas como puedas.

 

2016_08_20_ScreenshotSaturday

 

A pesar de su simplicidad, desarrollar Countless ha sido (y está siendo) muy didáctico en lo que a usar el motor Unity se refiere. Involucra un montón de animaciones, persistencia de datos, gestión de escenas y objetos, configuración de UI, publicidad, y acceso a algunas características de los sistemas de destino. Y mucho scripting. Esta es mi primera experiencia usando un motor de juego de terceros. Mi anterior juego, EggOrama, se desarrolló desde cero usando mi propio motor.

 

Gameplay1

 

Para mí, Countless sirve para un doble propósito. Por un lado, es un juego que voy a publicar. Será gratuito, pero incluirá algo de publicidad (así como un poco de gamificación de esta). Por otro lado, al trabajar en él he podido aprender mucho sobre el motor sin tener que pasar demasiado tiempo en cada característica. Tras publicar este juego, estaré preparado para empezar otro (sin olvidarme de las actualizaciones para Countless).

 

Countless será publicado pronto, para iOS y Android, e incluirá tablas de clasificación tanto local como online. Puede que más plataformas se unan a la fiesta en el futuro. ¡Pero no tengo una fecha de lanzamiento específica todavía!

Creating a hierarchical HUD in Unity

Español

 

UnityGameProject

I have been “playing” a bit with Unity for the last few months, building a very simple game (which the image at the top of this post belongs to) that I expect to release soon, and I have learned quite a few things about Unity. In this case I want to share my experience setting up hierarchical HUDs.

There are a bunch of great official tutorials on creating user interfaces (UI) in Unity, which are quite useful to learn about this functionality provided by Unity. But… what do I mean by “hierarchical HUDs”?

As you probably know, a HUD is basically the set of indicators a game shows in the display to give some information to the player. In the game I am creating, I found myself creating a HUD composed by several text objects: Score and Remaining Time. But sometimes, I needed to handle all of them as a single object. For example, when fading them in and out (because I have animated them to show and hide with a smooth animation). If they are independent, we have to create a separate animation for each of them, and handle each of them separately as well from our scripts.

The solution is to create a hierarchy with our HUD elements.

 

First step: create a UI hierarchy using an additional GameObject

HierarchicalHUD

A hierarchy in UI elements in Unity works very much as every game object hierarchy: we can create an empty GameObject in our Canvas (which I have named HUD in this case), and then drag all of the components inside of it. Very simple. BUT…

The fact that UI elements have sizes and positions relative to the screen (or, more precisely, relative to their parent object) forces us to make some adjustments so the components of the HUD keep working correctly on all screen resolutions.

 

Second step: make the container object match the Canvas

When we have just created our empty HUD game object, it appears as a square centered inside the Canvas:

CanvasGameObject

It has a fixed size. Given all HUD components will size and position relative to their parent object (the HUD object), we need the HUD object to adjust to the Canvas so it keeps being relative to the screen dimensions (otherwise, all HUD components will have fixed size and positions as well).

For this, we have to set the HUD to stretch to completely match its parent, so we select the HUD object and go to the Inspector, and set this configuration:

HUDObjectRectTransform

(when selecting the Stretch configuration, if we hold Alt while clicking on the stretch option, the dimensions will be automatically adjusted for us; otherwise we will have to manually set all values -Left, Top, Right, Bottom- to 0).

 

Third step: fix HUD components’ positions and sizes

After this, HUD components’ positions will probably be incorrect. We only need to configure their positions, sizes and anchor presets again and then we will have our hierarchical HUD working.

Now, it will be possible to activate or deactivate the whole HUD at once, or animate all of its components with a single animation and animation controller, or to store it as a prefab and instantiating it with a single line of code. For me, this has been quite useful. Hope it helps you too 🙂

 

Comment/share

 

==============

 

Creando un HUD jerárquico en Unity

 

UnityGameProject

He estado “jugando” un poco con Unity durante los últimos meses, construyendo un juego muy simple (al que pertenece la imagen de cabecera de este post) que espero publicar pronto, y he aprendido bastantes cosas sobre Unity. En este caso, quiero compartir mi experiencia configurando HUDs jerárquicos.

Hay un puñado de tutoriales oficiales geniales sobre crear interfaces de usuario (UI) en Unity, que son muy útiles para aprender sobre esta funcionalidad proporcionada por Unity. Pero… ¿a qué me refiero con “HUDs jerárquicos”?

Como probablemente sabéis, un HUD es básicamente el conjunto de indicadores que un juego muestra en pantalla para dar información al jugador. En el juego que estoy creando, me encontré creando un HUD compuesto por varios objetos de texto: Score y Remaining Time. Pero a veces, necesitaba manejarlos todos como un único objeto. Por ejemplo, al hacerlos aparecer y desaparecer con suavidad (porque los he animado para mostrarse y ocultarse con una animación suave). Si son independientes, tenemos que crear una animación separada para cada uno de ellos, y manejarlos también por separado desde nuestros scripts.

La solución es crear una jerarquía con los elementos de nuestro HUD.

 

Primer paso: crear una jerarquía de UI usando un GameObject adicional

HierarchicalHUD

Una jerarquía en elementos de UI en Unity funciona como cualquier jerarquía de objetos: podemos crear un GameObject vacío en nuestro Canvas (que yo he nombrado HUD en este caso), y entonces arrastrar todos los componentes a su interior. Muy simple. PERO…

El hecho de que los elementos de UI tengan tamaños y posiciones relativos a la pantalla (o, para ser más precisos, relativos a su objeto padre) nos fuerza a hacer algunos ajustes para que los componentes del HUD sigan funcionando correctamente en todas las resoluciones de pantalla.

 

Segundo paso: hacer que el objeto contenedor coincida con el Canvas

Cuando creamos nuestro objeto HUD vacío, aparece como un cuadrado centrado dentro del Canvas:

CanvasGameObject

Tiene un tamaño fijo. Dado que todos los componentes del HUD se escalarán y situarán relativos a su objeto padre (el objeto HUD), necesitamos que el objeto HUD se ajuste al Canvas de manera que siga siendo relativo a las dimensiones de pantalla (de lo contrario, todos los componentes del HUD tendrán también posiciones y tamaños fijos).

Para esto, tenemos que configurar el HUD para estirarse (stretch) hasta coincidir completamente con su padre, así que seleccionamos el objeto HUD y vamos al Inspector, para poner esta configuración:

HUDObjectRectTransform

(al seleccionar la configuración de Stretch, si mantenemos pulsado Alt mientras hacemos clic en la opción de stretch, las dimensiones se ajustarán automáticamente para nosotros; si no, tendremos que establecer manualmente todos los valores -Left, Top, Right, Bottom- a 0).

 

Tercer paso: arreglar posiciones y tamaños de los componentes del HUD

Tras esto, las posiciones de los componentes del HUD serán probablemente incorrectas. Sólo necesitamos configurar sus posiciones, tamaños y anchor presets de nuevo y tendremos nuestro HUD jerárquico funcionando.

Ahora, será posible activar o desactivar el HUD completo con una única acción, o animar todos sus componentes con un solo animation controller, o almacenarlo como un prefab e instanciarlo con una única línea de código. Para mí, esto ha sido muy útil. Espero que os ayude a vosotros también 🙂