Sprite

Object sprite

A sprite is the basic object in a scene. In its simplest definition, it is a decorative element but it also may have interaction with the user.

Identity Properties

Like the other objects, a sprite is defined by its:

• id - A unique number specific of the object.
• class - The object type. Here is sprite.
• description - Few words describing the object.

The property display

A sprite is displayed as a media (image, animated GIF, video, audio, etc.) or as a shape ( a clickable area).

Here is an example of media sprite.

...
  {
    "id": 10,
    "class": "sprite", 
    "description": "Button 1", 
    "display": {
        "media":{
          "image":"assets/button01.png"
        },
        "position": [520,514],
        "width": 80,
        "height": 40
      }
    }
  }, 
...

And the following shape sprite is defined as a circle-shaped clickable area of radius 40 and of center (100 , 200).

...
  {
    "id": 11,
    "class": "sprite", 
    "description": "Circle 1", 
    "display": {
      "shape": {
        "type": "Circle",
        "data": [100,200,40]
      }
    }
  }, 


...

The general properties that you can modify are:

• height: Define an height for your sprite
• width : Define an width for your sprite
• position XY-coordinates of the top left corner of the asset in the parent scene.

The property display.media

A media — aka asset — is defined by its:

• image Path to access to an image.
• audio Path to access to an audio.
• video Path to access to a video.
• svg Path to access to an svg.

The property display.shape

A shape sprite is defined as:

• A circle
• A rectangle
• A polygon

The property action

The sprite can listen user events. The property action describes the action triggered by a user interaction — a click — with or without the combination of an item. When clicked, the target triggers the display of new object(s) in the parent scene.

In the example below, a action of id 10 is displayed — by default — and when it is clicked, it adds a new object (id 110) in the parent scene.

...
  {
    "id": 11,
    "class": "sprite", 
    "description": "Circle 1", 
    "display": {
      "target": {
        "data": ["C",100,200,40]
      }
    },
    "action" : {
      "onclick": [
        "new_nodes": [110]
      ]
  }, 
...

The *clickable area corresponds to the area covered by the shape or the graphics area.

Sub-property onclick

All the events attached to this object will occur when a click is made on him.

Sub-property onended

All the event attached to this object will occur when the media is over. This is useful only for video and audio.

List of Events

• new_nodes : permet de créer un nouveau node à partir de l'id d'un objet du storyboard. Cet event prend un array d'un ou plusieurs id en arguments.
• del_nodes: permet de supprimer un ou plusieurs nodes dans l'arborescence du jeu. Cet event prend un array d'un ou plusieurs id en arguments.
• play: permet de lancer le média dont l'id est indiqué en argument. Cet event prend un array d'un id en argument.

Property features

Sub-property click

By default, the clickable area of the target corresponds to a rectangular area covering the background image. However, you can define a specific area like a circle, rectangle, and a polygon.