- What is in and out of scope for theming?
- Individual component theme specification
- What are the asset requirements?
- How do I test my theme?
- What are the applicable Children’s Games Standards that need to be followed?
- How do I get my game onto Children’s platforms?
- How do I get my theme onto Children’s platforms?
- What acceptance tests will the BBC carry out?
A theme is a set of assets that give a Genie component a certain look and feel, and can be swapped out to 'reskin' the components. For example, a 'Danger Mouse' or a 'Worst Witch' theme could be applied to the same game to change the branding.
Audio, Animations, Sprites, Graphics and Fonts are in scope for theming. Alterations to the code other than configuration changes in JSON files to support new assets are currently out of scope.
There is a default theme for components in the themes folder that can be copied and renamed with the name of your skin to use as a template. There is also a balloon theme to use for comparison. The links to view them locally are here (you will first need to cd to the folder and run npm install and npm run start in a terminal):
http://localhost:8080/?theme=default http://localhost:8080/?theme=balloon
Theming is currently undertaken mainly by performing a straight swap on assets, replacing images / audio / sprites like for like in order to create the desired theme. There are several JSON files that contain the asset packs. The common ones may be found in themes/[name of theme]/assets-master-pack.json. Inside this file, the assets are divided up by screen (the screen names are determined in main.js). Any screen names not listed here will have their own JSON asset files. For example, in the default theme, the game.json and game-button-select.json config files are set, as the game and game-button-select keys are not listed in assets-master-pack.json.
Additional configuration not related to assets (for things like font size and colour) is done by modifying themes/[name of theme]/config.json.
To quickly view a specific theme, you can launch it using the query string 'theme': http://localhost:8080/?theme=themeName, replacing themeName with the name of your theme. If none is specified, it will load the default theme.
This will vary for each gameplay component.
The assets for GEL buttons can be found in the folder: themes/default/gel/. These can be copied across directly. The other assets needed will also vary for each gameplay component.
A reference file for the Sketch application is also provided in this folder and named "GEL_UI_EXAMPLE.sketch".
Audio will need to be provided in two formats to in order to support all devices: MP3 and OGG.
Check out the starter pack Github repository and add your theme in a directory, basing the theme's structure on the existing default theme. Push to the remote repository and the BBC team will create an entry on our iSite CMS which will allow the theme to be viewed on a BBC url hosted in our CAGE platform.