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:

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

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 https://github.com/LunaCommunity/Playable-Examples/tree/master/assets for a minimal setup of a playable using Playground Assets.