Table Of Contents

Previous topic

23.1. The TurbulenzServices Object

Next topic

23.3. The Turbulenz Services Game Data

This Page

23.2. The Turbulenz Services Assets

Badges, leaderboards and store items all require images in order to be published to turbulenz.com. Each of these services require PNG images of 256x256 pixel size. The services support PNG images with transparency.

23.2.1. Leaderboards and Store Icons

Leaderboards and Store icons are commonly rendered on Turbulenz sites, in emails and social networks at 32, 48, 56, 80 and 256 pixels square. You are only required to provide the images in 256x256 pixels. Any of the other resolutions will be automatically generated by resizing from the 256x256 image. However, for better low resolution quality you can also provide the images at 32x32 and 48x48 pixels explicitly.

For example:

../_images/rocket256.png

Leaderboard/Store icon 256x256 pixels. This image size must be provided in order to deploy your game to turbulenz.com.

../_images/rocket48.png

Leaderboard/Store icon 48x48 pixels. This is optional but recommended as automatic resizing of the 256x256 pixel image might not give aesthetically pleasing results.

../_images/rocket32.png

Leaderboard/Store icon 32x32 pixels. This is optional but recommended as automatic resizing of the 256x256 pixel image might not give aesthetically pleasing results.

The Store and Leaderboard icons are not processed in anyway after they are resized.

23.2.2. Badges Icons

Badges are different to the Leaderboards and Store icons as they are required to fit a pre-defined aesthetic structure. Badges icons are commonly rendered on Turbulenz sites, in emails and social networks at 32, 48, 56, 80 and 256 pixels square. Unlike leaderboards and store icons, badges icons can only be given as 256x256 pixels.

Processing

Badges are taken as a 256x256 pixel image. For example:

../_images/original.png

The image size must be 256x256 in order to deploy your game to the Gamesite. See the badges.yaml definition for information on how to set the badge icon. When your image is uploaded to the Hub it will be processed to make it fit a pre-defined aesthetic structure. These are the steps taken to convert your asset into the correct structure.

  • Your image will be masked depending on the badge type. There are 2 types of badges: circle and diamond. For more information on the badge types see the badges.yaml definition.

    ../_images/badge_mask_circle.png ../_images/mask_circle.png

    Left: Area masked for circular badges. Right: Badge circular mask 256x256 pixels.

    ../_images/badge_mask_diamond.png ../_images/mask_diamond.png

    Left: Area masked for diamond badges. Right: Badge diamond mask 256x256 pixels.

    Note

    The visible area is not vertically centered.

    So the above example as a circle badge, once masked, looks like this:

    ../_images/masked.png
  • Next a textured border is applied in the hexadecimal CSS color code you specify.

    ../_images/badge_anatomy1.png

    The badge image and border hexadecimal CSS color code are required.

  • Finally, the icon is resized to 32, 48 and 256 pixels square.

Badge Visual Anatomy

There is a 3 step composition process for a badge graphic:

  • Diffuse Pass (Colored border) – this is the border surrounding the badge image. Developers must pick an hexadecimal CSS color code for this to compliment the badge image.
  • Badge image – this is the main image of the badge encapsulated by the border. Developers must submit an image to fill this space.
  • Detail Pass (Thread pattern overlay) – The thread pattern overlay (alpha PNG) is composited over the first two layers to create the final badge.
../_images/badge_anatomy2.png

Exploded view of the composition steps.

Left: Border in specified hexadecimal CSS color code. Center: Input image after mask in 256x256 pixels. Right: Thread pattern overlay.