Why do we need Markup
Markup helps us build the design we want in code!!
We need the design in code to modify it later with desired changes to be able to make bulk-creatives.
Let's see an example (that we saw earlier) to understand better.
You must've seen the Welcome to Kubric poster while going through Say Hello World
You tried out the cURL request there that looked like -
http://genie.kubric.io/api/hello?name=Human&textcolor=%234d4d4d&bgcolor=%23fffef1
Here we populate this API call with a 'name', 'textcolor' & 'bgcolor', And we see a personalized poster with our name in the given color and the background color we specified - This is the magic of Kubric
You design once, make infinite creatives after!
Let's look at the code
//explain hello human welcome to kubric fuky here, point to objects used, image etc and that API ka relation
{
"duration": 1000,
"objects": [
{
"comment": "background",
"kind": "rectangle",
"color": "gray",
"stroke": {
"color": "black",
"width": 10,
"join": "bevel"
},
"fill": "{{bg_color}}",
"position": {
"y": 0,
"x": 0
},
"type": "shape",
"size": {
"h": "{{canvas_size_h}}",
"w": "{{canvas_size_w}}"
}
},
{
"comment": "Right img",
"opacity": 1,
"url": "https://lh3.googleusercontent.com/rsuAdgsQWrxqngRGlRO_9UXAPhYdWA5iSVU7zEADKkcHEp0dpQTnamWu6KZrMw6eHqqkdK6UZExVgj39OLWfqbf5",
"position": {
"x": "[[{{canvas_size_w}} - {{canvas_size_w}}/3]]",
"y": 0
},
"type": "image",
"size": {
"h": "[[{{canvas_size_w}}/3]]",
"w": "[[{{canvas_size_w}}/3]]"
}
},
{
"comment": "Left img",
"opacity": 1,
"url": "https://lh3.googleusercontent.com/I7-uE4Flofvb6AW4iWZHnqt7YP170j3MI7v_M4CHXiuzYTzzqfGyCQQ5rq6-Hi5ad4mMDzy9DSB-B_J6HWaC4w",
"position": {
"y": "[[{{canvas_size_h}} - {{canvas_size_w}}/2]]",
"x": 20
},
"contain": {
"x": "left"
},
"type": "image",
"size": {
"h": "[[{{canvas_size_w}}/2]]",
"w": "[[{{canvas_size_w}}/2]]"
}
},
{
"comment": "Hello",
"opacity": 1,
"color": "{{text_color}}",
"text": "Hello",
"fontFamily": {
"url": "https://assets.kubric.io/b928f515-9668-411c-b4f9-dfeef8152cab.ttf",
"name": "Playlist Script"
},
"align": "center",
"fontSize": "[[{{canvas_size_w}}/6]]",
"letterSpacing": 1,
"position": {
"x": "[[ {{canvas_size_w}}/2 - 40 ]]",
"y": "[[ {{canvas_size_h}}/2 - {{canvas_size_w}}/7 + 10]]"
},
"type": "text",
"axis": -10
},
{
"comment": "Human",
"opacity": 1,
"color": "{{text_color}}",
"text": "{{human_name}} !",
"fontFamily": {
"url": "https://assets.kubric.io/b928f515-9668-411c-b4f9-dfeef8152cab.ttf",
"name": "Playlist Script"
},
"align": "center",
"fontSize": "[[{{canvas_size_w}}/12]]",
"letterSpacing": 1,
"position": {
"x": "[[ {{canvas_size_w}}/2 - 40 ]]",
"y": "[[ {{canvas_size_h}}/2 + {{canvas_size_w}}/12 + 20]]"
},
"type": "text",
"axis": -10
},
{
"comment": "welcome text",
"opacity": 1,
"color": "{{text_color}}",
"text": "Welcome to Kubric",
"fontFamily": "Montserrat-Light",
"align": "center",
"fontSize": "[[{{canvas_size_w}}/25]]",
"letterSpacing": 6,
"position": {
"x": "[[ {{canvas_size_w}}/1.8]]",
"y": "[[ {{canvas_size_h}}/1.2]]"
},
"type": "text"
}
],
"size": {
"h": "{{canvas_size_h}}",
"w": "{{canvas_size_w}}"
}
}
{
"canvas_size_h": {
"default": 500,
"type": "text",
"title": "Canvas Height",
"hideInSheet":"true"
},
"canvas_size_w": {
"default": 750,
"type": "text",
"title": "Canvas Width",
"hideInSheet":"true"
},
"human_name": {
"default": "human",
"type": "text",
"title": "Human Name"
},
"text_color": {
"default": "#FFB6C1",
"type": "color",
"title": "Text Color"
},
"bg_color": {
"default": "#fffef1",
"type": "color",
"title": "Background Color"
}
}
As you can see the in the parameters tab above, we have 5 param-objects.
These can be divided into 2 broad types -
- Internal parameters
canvas_size_h, canvas_size_w - have item hideInSheet set to true; This means they are internal parameters. These are helpful in declaring a certain value that cant be changed through the campaign generation or the API call. The parameter objects marked hidden this way are mostly used to manipulate their values within the design. (imagine them like constants in code.) [manipulation example in image objects in the shot config]
eg -
"position": {
"x": "[[ {{canvas_size_w}}/1.8]]",
"y": "[[ {{canvas_size_h}}/1.2]]"
},
- External/ Exposed parameters
These are the parameters that are exposed out (they do not need to have hideInSheet as false - that's the default).
These are the ones exposed - human_name, text_color, bg_color.
This is how we code in a design & make multiple (♾) versions of it. [which can be done via the Genie API / The Kubric Campaign generation Flow] But before you can make your own cool designs and generate creatives lets -
Beginning with basics
- Understanding Shots
- Buiding a Storyboard
- What are Objects
Advanced
- Learn advanced Text Styling
- Draw Curves
- Build Shapes
- Understand Color Gradients
- Making Masks
- Know more about Object Rotation
- Motionise with Animations & Videos
- Construct intelligent creatives with Smart Assist
Follow the Creative
Some ready-made shots to give you an idea of how you can construct your full creatives -
- Learn mixing elements together with Composition - A Cupcake example
- Learn Styling with Pancakes
- Use Masking in a Sunlit example
Updated about a year ago