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, Luna Playground 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 Luna Playground, 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 Playground Fields and their class/field names, this will be used by Playground 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 Playground 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. src attribute is set to some Data URI value, can be faux, i.e. <img src="data:image/png;base64," />
  2. id attribute is set to "asset/ID", where ID stands for the id value you chose for each asset on step #2.

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 src="data:image/png;base64," id="asset/001" />
</body>
</html>

This is it! Uploading such a playable to Playground 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.