Storyboard

1. Storyboard

1.1 Introduction

A mini-game is described in a single JSON file termed storyboard.json. This file is an array of various objects (or nodes) — defined by a unique ID — belonging to one of these five categories (called class, here):

• scene
• item
• switch
• machine
• sprite (all the other cases). See definition in Wikipedia.

A storyboard.json is thus organized as follows:

[
  {"id":1 , "class"="scene", ...},
  {"id":5 , "class"="item", ...},
  {"id":17, "class"="switch", ...},
  {"id":22, "class"="machine", ...},
  {"id":34, "class"="machine.lockDigit[4]", ...}
]

1.2. Objects/Nodes

The storyboard describes a scenegraph [Wikipedia] . Thus, in this data structure, objects are classified in two categories:

• Group Objects containing children like scene, switch .
• Leaf Objects like machine, item, and sprite.

1.2.1. Declaration

Each object is defined by a unique ID and at minima contains:

• id: a numerical identifier.
• class: a class among scene, item, switch, machine, and sprite.
• description: A comment describing the object. Not use by the crazyBioGame Engine.
• display: a section defining how the object is displayed in the scene. Not mandatory for switch
• features: a parameter section defining the object's behavior. Not mandatory for sprites or for switch

{
  "id": 12,
  "class":"item",
  "description": "A cup",
  "display":{
      "height":210,
      "width":340,
      "media":{
          "image":"assets/yourimage.png" 
      },
},
  "features": {
    "popup" : {
      "title": "A cup of coffee"
  }
}

1.2.2. Display

Sometimes, the objects must be displayed in the scene (with or without user interaction).

...
  "display": {
    "position": [100,200],
    "width": 512,
    "height": 256,
    "media": {
      "image": "path/filename.png"
    }
  }
...

If you want to display an audio file or a video you must replace the property image by, respectively audio or video

1.2.3. Features

1.2.3.1. Window Popup

Except the scene, most of the objects are available via a user interaction (pointer click) and displayed in a popup window. The window contains a maximum of three parts:

• a title ( mandatory - a single line of text)
• a content section [optional]
• a graphics section [optional]

using the following layout.

Popup Layout
A popup contains a maximum of three sub-sections corresponding to the (i) description, (ii) content, and (iii) graphics

and the corresponding JSON ...

...
  "popup": {
    "title": "Description"
    "content": [
      "<h3>Content</h3>",
      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
      "Phasellus volutpat bibendum egestas. ",
      "Sed euismod et tellus vel finibus. Quisque ac ipsum ut ipsum pulvinar hen.</p>"
    ],
    "media": {
      "image": "path/filename.png"
    }
  }
...