> For the complete documentation index, see [llms.txt](https://help.smartico.ai/welcome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/voyager-skins.md).

# Voyager Skins

{% hint style="success" %}
We can provide a Figma template for Mini-games skins upon request.

Please note that any images exported from the template must be compressed before uploading them to the Back-Office. You can use [this link](https://tinypng.com/) to compress your images.

For further assistance, please contact your Customer Success Manager!
{% endhint %}

For general guidelines on skin uploads, 9-slice popup styling, and CSS customization, see [Custom skins for Mini-games](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games).

For the **'Voyager,'** you need to upload a set of images using the reference package from the archive. Below you can find our global skins, which are available in the Back Office. If you'd like to customize them, you can use the reference packages provided:

{% file src="/files/Ii8EdrgqrfStmiK5dxhS" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-1c201d76134af55e7a5af6ceed06a8eaef7873dc%2FScreenshot_77.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% file src="/files/VFLeuBpNCASDFIcsWJ6V" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-f4092d20b9e5d0245733e21c460afcb82e306a30%2FScreenshot_76.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% file src="/files/1hMgqsbJTJp81e4hZiHU" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-5aecc9ffd495acb981796a24adccebfac83ac8f9%2FScreenshot_50.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% file src="/files/xaAL95Qf3MYgrSXO80x8" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-9fcb095ee9934ac40e72b44165cb502d7a06e685%2FScreenshot_53.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% file src="/files/0xjeZPJltgJQxtsbLcKt" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-b8f15e77b2480c7d7d6b655b7b46fe0fc67e75da%2FScreenshot_52.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% file src="/files/gyv2pYEol7KNSmr3xGM7" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-56e8f3556d6d4e2049c48e05055aac17385b1b55%2FScreenshot_51.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% file src="/files/TsfAHOYhuXk9fGx37RfZ" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-af0e995309311bd489d85c7708307c73284a636a%2FScreenshot_17.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% file src="/files/1H9Wi4RN048Zi9r6zOAj" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-76b5df6da63f46a705f760f7ca69282850aeb125%2FScreenshot_27.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% file src="/files/jNXoIUCr1hZWAru5HGzB" %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-b91f9b95f98936d4a88239ca6123bdba3c3ce8ca%2Fimage.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

### Animated Main Object

Voyager supports animated main objects. You can make the main moving object (plane, boat, car, etc.) animated using sprite animation instead of a static image. This allows you to create more dynamic and visually engaging game experiences.

### Required Asset Package Structure

A Voyager skin package requires specific image and audio files. All files must match exact filenames:

* **Backgrounds & Stages:** `game-bg.png` (Desktop background), `game-bg-mob.png` (Mobile background), `start-desktop.png` / `start-mob.png` (Start platform), `finish-desktop.png` / `finish-mob.png` (Finish line).
* **Game Objects:** `moving-object.png` (Main character/vehicle — static image or 400×400 px sprite sheet), `bumping-object.png` (Obstacles), `active-box.png` (Prize tile), `winnings-box.png` (Opened prize), `moving-object-effect.png` (Particle/wake trail).
* **Life Bar & HUD:** `life-bar-background.png`, `life-bar-fill.png`, `life-icon.png`, `move-left.png`, `move-right.png`.
* **Modifiers:** `multiply-two.png`, `multiply-five.png`, `multiply-ten.png`, `divide-two.png`, `divide-five.png`, `divide-ten.png`, `zero-modifier.png`, `reset.png`.
* **UI Elements:** `promo-image.png`, `ico.png`, `prize-no-image.png`, 9-slice popup graphics (`popup_bg_*.png`), and button states (`button_primary_bg_*.png`, `button_secondary_bg_*.png`).
* **Audio Effects (.mp3):** `voyager-background.mp3`, `bump.mp3`, `box-opening.mp3`, `empty-box.mp3`, `positive-modifier.mp3`, `negative-modifier.mp3`, `reset-modifier.mp3`, `you-won.mp3`, `you-lose.mp3`, `button-click.mp3`.

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-14b93097928f613c3042883e29d553d560b220a1%2FGame%20view%20desktop%20(21)%201.png?alt=media" alt=""><figcaption></figcaption></figure>

**What is Sprite Animation?**

Sprite animation is a technique where multiple frames are combined into a single image file (sprite sheet).
 These frames are displayed sequentially to create the illusion of movement.\
Instead of uploading separate images, all animation frames must be merged into one sprite sheet.

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-001d3aded87307e7b885a064a0b5863de59477ec%2FAnimation.gif?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-d89712731a8d543b631c8cb679d10598033d8a5c%2FGroup%201%20(9)%202.png?alt=media" alt=""><figcaption></figcaption></figure>

**Technical Requirements**

Each frame must be exactly 400 x 400 pixels.

All frames must have:

* The same width and height
* The object positioned consistently (no shifting between frames)
* Background should remain transparent (if required by your template)

Consistency is critical. If one frame has a different size or alignment, the animation will appear to “jump.”

**How to Prepare the Animation**

1. First, create the sprite animation frame by frame.

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-2f6054ae543e8dbaec7b3eac02194e647049bac9%2FFrame%2010834%201.png?alt=media" alt=""><figcaption></figcaption></figure>

2. Each frame must be 400 × 400 px.
3. All frames must have identical dimensions and alignment.
4. Combine all frames horizontally into a single horizontal strip (sprite sheet), arranged left-to-right in animation order.

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-564df769dbda38347020cf81167134ca03bfb3ea%2Fmoving-object%201.png?alt=media" alt=""><figcaption></figcaption></figure>

5. Save and export the final sprite sheet.
6. Upload the sprite sheet as picture for the main object asset.

### Frequently Asked Questions

**Can I upload the reference package as a .zip file directly?**

No. Reference packages downloaded from this page must be extracted first. Upload the unpacked folder of image and audio files into the **Skin images** field in the Back-Office.

**How can I adjust popup text size and styling?**

Open your skin in **Gamification** → **Mini games' skins** and click the **Custom CSS** button. You can add custom CSS rules to adjust modal titles, prize text, and button styles with live preview.

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-d83051bcae86e6daf2d4e4253eec81f641836bd4%2FScreenshot%202026-02-19%20at%2010.29.38%201.png?alt=media" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/voyager-skins.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.