Skip to main content

Adding customizable assets

Similar to Playground Fields, which are great for tweaking gameplay-related elements, choosing the first level and so on, Creative Suite supports configurable assets that it can replace within your playable, opening a whole new set of customisation abilities.

Please note that these steps are also detailed on our community github alongside 2 example folders containing ready-to-upload playables.

Adding Playground fields to a playable

1. Open playground.json configuration file and locate "assets" key.

2. Add as many assets as you like.

Each asset is defined as a simple JSON object residing under specific asset key. Let's take this by example: consider the below playground.json:

"title": "Basic Playable",
"icon": "", // Icon next to the playable in Creative Suite, takes a Data URL.

"fields": {},

"assets": {
"my-sprite-001": {
"id": "001",
"title": "Custom Image",
"type": "texture",
"section": "",
"order": 0

The asset key (my-sprite-001 in the above example) can be chosen arbitrary - just like with Creative Suite Fields and their class/field names, this will be used by Creative Suite during playable updates to keep the mapping between previously stored settings and a new playable.

The important keys in the asset JSON are:

  1. id - please set to some unique value for each asset, will be used down the road
  2. type - please choose between texture, videoclip and audioclip to hint Creative Suite on which file types to allow for upload.

3. Make an inlined asset customizable

To do so, please locale (or create new) <img />, <audio /> or <video /> tag in your playable HTML file and make sure it meets the following requirements:

  1. id attribute is set to "asset/ID", where ID stands for the id value you chose for each asset on step #2.
  2. src attribute is set to some Data URI value, can be faux, i.e. <img src="data:image/png;base64," />
In order to avoid errors, please make sure the id attribute in the tag is set before the src attribute.

For the asset defined in the example on step #2, the following bit of HTML is expected to be present somewhere in the Playable:

<!-- ... -->
<img id="asset/001" src="data:image/png;base64," />

This is it! Uploading such a playable to Creative Suite will expose asset fields in the editor section, allowing you to replace images, audio clips and video clips within your playable.

Ready-to-use example

Feel free to check the example residing at for a minimal setup of a playable using Playground Assets.