genie

Genie Developer Hub

Welcome to the genie developer hub. You'll find comprehensive guides and documentation to help you start working with genie as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    API Reference

Shots

A shot is the starting point for your creatives, a building block of sorts. You use JSON based markup to create a shot.

Let's begin with a simple shot - A 500x500 canvas with a single rectangle.

Follow along by opening Studio at this link. The page will already be populated with the following configuration -

A Simple Shot

{ ๐Ÿ‘‡Notice the shot and parameters tabs below๐Ÿ‘‡}
Learn more about Parameters

{
  "duration": 1000,
  "objects": [
    {
      "comment": "Background Layer",
      "opacity": 1,
      "kind": "rectangle",
      "scale": 1,
      "color": "{{backgroundColor}}",
      "position": {
        "x": 0,
        "y": 0
      },
      "type": "shape",
      "size": {
        "h": "500",
        "w": "500"
      }
    }
  ],
  "size": {
    "h": "500",
    "w": "500"
  }
}
{
  "backgroundColor": {
    "default": "#00d5e9",
    "type": "color",
    "title": "Background Color"
  }
}

Understanding the basics

There's a few things happening in the shot. Let's first look at shots.json above and understand the keys at the top level which are duration, objects and size. Any valid shot would need all three.

Field

Description

duration

specifies in milliseconds how long a shot should last. Any value <= 1000 identifies the output of a shot as an image. To make the output a Video or a GIF use a value greater than 1000

objects

is an array of all the objects in the shot (duh). An object can be of type text, image or shape. In this sample shot there is a single shape object of kind rectangle

size

The height and width of the canvas in pixels

๐Ÿ“˜

Detailed descriptions, defaults & available values of each property mentioned anywhere in the docs can be found in the Glossary

The output of the shot -

The output of this shot is this 500x500 blue rectangleThe output of this shot is this 500x500 blue rectangle

The output of this shot is this 500x500 blue rectangle

Understanding the rectangle

Now, let's focus on the rectangle. The JSON used is -

{
  "comment": "Background Layer",
  "opacity": 1,
  "kind": "rectangle",
  "scale": 1,
  "color": "{{backgroundColor}}",
  "position": {
    "x": 0,
    "y": 0
  },
  "type": "shape",
  "size": {
    "h": "500",
    "w": "500"
  }
}

Let's unpack and understand each field.

Field

Description

comment

This is just a field where you can name the object for your reference

opacity

Defines the opacity of the rectangle. It is a floating point value that can go from 0 to 1.

kind

The kind of shape. Values could be rectangle, circle, polygon.

scale

Defines the scale of the rectangle. It is multiplied with the specified size to calculate the final height and width. You could zoom in or zoom out the rectangle using this field.

color

Defines the color of the rectangle. You could use a hex code such as #333333. In this case, we have specified a special value {{backgroundColor}} to define the color. This is called a parameterized value. More on this right after this table here.

position

The coordinates of the rectangle with respect to the top left of the canvas.

type

Type of object. Could be shape, text, image, video. Since we need a rectangle we have used shape.

size

height and width of the object respectively

Parameterization

In the previous section we saw that the value of the color was {{backgroundColor}}. This is called a parameterized value. A parameter is a way to create a named variable. You can then change the value of the parameter in one place and the value will be automatically updated everywhere that the parameter is used.

In this case, if you switch to the parameters tab in studio you will see

{
  "backgroundColor": {
    "default": "#00d5e9",
    "type": "color",
    "title": "Background Color"
  }
}

You can then use this parameter as the value of any field in the shot by referring to it as {{backgroundColor}}.

Let's now unpack the fields in a parameter definition -

Field (in parameters config)

Description

default

The default value for the parameter.

type

The type of the value being passed.
Can be "text", "image", "color" etc. We could have specified text here and the shot would still work. Using color gives us a fancy color picker when this shot is used in the campaign flow.

title

The title that will show up when you export and expose this shot in a storyboard.

Saving a Shot

๐Ÿ’พ Save and name/rename the shot. Tadaa ๐Ÿ™Œ! you just made your first shot!

Updated about a year ago


What's Next

Convert this shot into a storyboard to expose & use it for customisation

Shot to Storyboard
Parametrisation
Objects

Shots


A shot is the starting point for your creatives, a building block of sorts. You use JSON based markup to create a shot.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.