Create config json

Config.json is the central configuration file in the engine. It can be found in project/game and contains global game settings, build settings, and a list of all the files that will be included in the game. Its structure takes the following form: { "global": {}, "builds": [], "source": {}, "client-supports":[] } Below is a description of each of these various sections that comprise the config.json file:

##Global The global section specifies settings that determine behavior for the Game object.

• initialScene (string) - Once the game is loaded, this scene is automatically loaded.

• fps (number) - The target framerate at which to run the game.

• rootElement (string) - Optional. Defines the id of the root DOM element used by the game. The default is "root" and this element is created if it does not already exist.

• nativeAssetResolution (number) - Optional. Screen width in pixels that the source images were originally designed for.

• aspectRatio (number) - Optional. Whether the rootElement should be automatically resized to maintain aspect ratio. Leave this off if the rootElement is to be strictly styled using CSS. For example, if you don't set this property and set width and height style to 100%, the game will fill the entire screen.

• resizeFont (boolean) - Optional. Whether to adjust the body element's fontSize to proportionally match current window size. Useful for cascading the value of em's across all game DOM elements.

  "global": { "initialScene": "menu", "fps": 60, "rootElement": "root", "nativeAssetResolution": 960, "aspectRatio": 1.333, "resizeFont": true }

##Builds This is an array of objects describing the different builds that will be compiled and their settings. For more detail about the builds section, check out Build-Instructions. Here the most basic example to show proper syntax, but review the compilation guide for additional options. The build "id" field determines the project/builds/ subfolder where the compiled game will be located. So the following will cause the compiled game to appear in the project/builds/game folder:

"builds": [{"id": "game"}]

##Source This section is a listing of the collection of all the source materials in the game. This section takes the following form, with each sub-section described in additional detail below. { "assets": [], "classes": [], "components": [], "entities": [], "includes": [], "scenes": [], "levels": [] }

###Assets The assets section lists art and audio assets and properties that define those assets. In their most simplified form, the listing may look something like this: "assets": [ {"id": "powerupsound", "src": "../audio/powerup.ogg"}, {"id": "powerupimage", "src": "../images/powerup.png"} ]

• id (string) - A unique id for the asset that you will use to refer to this asset elsewhere in the code.
• src (string) - The source file.

However, the reality of HTML5 audio necessitates multiple file types and rendering on small screens may require smaller art. These issues can also be addressed in the asset load definition as needed. Considering this, an example of a full audio asset definition covering multiple file types may look more like this: { "id": "powerupsound", "src": { "ogg": "../audio/powerup.ogg", "mp3": "../audio/powerup.mp3", "m4aCombined": { "assetId": "combined", "src": "../audio/combined.m4a", "data": {"offset": 5000, "length": 370} } } } In this case, src is an object containing key/value pairs rather than a single string. Each key matches a "client-supports" definition (reference the last section of this article) with a string value containing the file path. The client-supports section determines which browser will load the file associated with the key tag. Additionally, there is one instance above where the value is another object with additional details defining a segment of audio within a larger clip. This case is explained in further detail in this guide: Creating-Mobile-Audio-Tracks.

Image assets also accept additional properties to ensure they are imported and sliced correctly if nativeAssetResolution is set in global settings above. An example of this could appear like this: { "id": "buttons",
"src": "../images/buttons.png", "data": {"rows": 1, "columns": 4} } Setting nativeAssetResolution causes the game to reduce the size of images if the current device loading the game has a smaller screen size than the native resolution the assets were designed for. By explicitly stating the number of rows and columns a sprite sheet requires, the game is able to make sure the sprite sheet is scaled in a way that maintains whole pixel values for individual sprites. Accordingly, this data does not need to be provided if nativeAssetResolution is left unspecified or if the image asset is not a sprite sheet. For more information about loading and using sprite sheets, check out the following guide: How-To-Draw-Your-Sprites.

###Classes The section lists the JavaScript files containing the classes used in the game.

• id (string) - A unique id for the class. NOTE This is not used anywhere. It's simply for readability.
• src (string) - The class file.

Example of class entry: { "id": "Game",
"src": "../engine/game.js" }

###Components This section lists the entity component JavaScript files used by the game.

• id (string) - A unique id for the component. This value will be used to indicate the 'type' of component in the entity json definitions.
• src (string) - The component file.

Example of a component entry: { "id": "enable-ios-audio",
"src": "../engine/components/enable-ios-audio.js" }

###Entities This section lists the JSON entity definitions used in the game. The entity definitions may be described here or If a src key is included, this will be replaced by the JSON structure in the linked file.

• id (string) - A unique id for the entity. This id should match the id at the top of the entity json file.
• src (string) - The entity json file.

Example of an entity entry: { "id": "desktop-interface-layer",
"src": "entities/desktop-interface-layer.json" }

###Includes This section lists other files to be included in the game. The order of the files determines the order of compilation for local files and the inclusion order for all other files. External scripts and styles are listed first and compiled local files are listed second so that they can take precedence in the presence of conflicts. CSS files are automatically added to the head of index.html and JavaScript files are added before the closing body tag.

• id (string) - A unique id for the file. NOTE This is not used anywhere. It's simply for readability.
• src (string) - The file to include.

Example of an include entry: { "id": "EaselJS",
"src": "http://code.createjs.com/easeljs-0.5.0.min.js" }

###Scenes This section lists the scenes used in the game. If "src" key is included, the listed item will be replaced by the JSON structure in the linked file.

• id (string) - The unique id of the scene. Used elsewhere in code to reference the scene.
• src (string) - The src json file containing the definition of the scene.

Example of scene entry: { "id": "scene-level-1", "src": "scenes/scene-level-1.json" }

###Levels The levels that make up the game. If "src" key is included, this will be replaced by the JSON structure in the linked file.

• id (string) - The unique id of the scene. Used elsewhere in code to reference the level.
• src (string) - The src json file containing the level definition.

Example of level entry: { "id": "level-2", "src": "levels/level-2.json" }

##Client-Supports Client Supports is an array of objects. Each object contains several fields which define resource sets to load (e.g. ogg files, mp3 files, etc.). The array associated with the field is which user agent checks will trigger the game to load that resource option. A single user agent check cannot be in two arrays in an object. However, if multiple user agent checks are true, the first one that is found is used to determine the resource set is loaded, so the order that these fields are arranged matters. In the example below Safari on iPad will use m4aCombined rather than mp3 because the user agent check for iPad comes before that for Safari.

The current example has a single object for all the audio types, but more objects could created for other resource types.

Example of a client support entry: {
"ogg": ["firefox", "opera", "chrome"],
"m4aCombined": ["android", "silk", "ipod", "ipad", "iphone"], "mp3": ["msie", "safari"] }