Understanding Overlay Render Ordering

👨🏻‍💻 Learn how overlay render ordering works in Yepic AI.

Suggest Edits

1. Introduction

Understanding how overlay renders ordering works is important for creating captivating compositions. This documentation aims to provide clear instructions on how overlay render ordering functions within the Yepic AI, ensuring that users can achieve their desired visual effects.

2. Ordering of Overlays

When multiple overlays are specified in Yepic AI, they are rendered in the order they are listed: from bottom to top. By following this order, users can control the layering of overlays and achieve a visually appealing composition.

📘

Info:

This ordering mechanism aligns with how SVG (Scalable Vector Graphics) elements are ordered.

3. Background Image/Video

If you intend to include a background image or background video in your composition, it is recommended to specify it as the very first overlay. This ensures that it serves as the foundation for other overlays.

3.1. Background Image as an ImageOverlay

To add a background image in Yepic AI, users can employ the ImageOverlay component. By designating the background image as the first ImageOverlay in the overlay list, users can establish it as the foundational layer for their composition.

Below is an example of ImageOverlay when creating the video:

curl --request POST \
     --url https://api.yepic.ai/v1/videos \
     --header 'X-API-KEY: YOUR_API_KEY' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "slides": [
    {
      "soundtrack": {
        "assetId": "acousticstrings",
        "volume": 0.5
      },
      "transition": {
        "type": "wipeleft"
      },
      "overlays": [
        {
          "type": "ImageOverlay",
          "assetId": "00000000-0000-0000-0000-000000000000",
          "height": 50,
          "width": 50
        }
      ],
      "backgroundColor": "#ffffff"
    }
  ],
  "videoTitle": "myfirstvideo",
  "videoFormat": "mp4",
  "videoHeight": 100,
  "videoWidth": 200
}
'

3.2. Background Video as a VideoOverlay

Similarly, if a background video is preferred over an image, users can utilize the VideoOverlay component in Yepic AI. By placing the VideoOverlay at the beginning of the overlay list, users can designate it as the background video layer for their composition.

Below is an example of ImageOverlay when creating the video:

curl --request POST \
     --url https://api.yepic.ai/v1/videos \
     --header 'X-API-KEY: YOUR_API_KEY' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "slides": [
    {
      "soundtrack": {
        "assetId": "acousticstrings",
        "volume": 0.5
      },
      "transition": {
        "type": "wipeleft"
      },
      "overlays": [
        {
          "length": "Loop",
          "type": "VideoOverlay",
          "assetId": "00000000-0000-0000-0000-000000000000",
          "height": 100,
          "width": 200,
          "volume": 0.5
        }
      ],
      "backgroundColor": "#ffffff"
    }
  ],
  "videoTitle": "myfirstvideo",
  "videoFormat": "mp4",
  "videoHeight": 100,
  "videoWidth": 200
}
'

4. Best Practices

To optimize your compositions and achieve the desired visual impact, consider the following best practices:

  • Plan your overlay order: visualize the desired arrangement of overlays and determine the appropriate order based on their importance and intended effects.
  • Experiment with layering: try different overlay orders to explore various visual outcomes and discover the most appealing compositions.
  • Background image/video considerations: assess when background images or videos are suitable compared to other overlay types. Background elements often set the tone or provide context for the rest of the composition.

The code example below shows that the bottom layer order consists of a VideoOverlay, indicating that the video is used as the background video. The subsequent layer is an ImageOverlay, used to display the image.

curl --request POST \
     --url https://api.yepic.ai/v1/videos \
     --header 'X-API-KEY: YOUR_API_KEY' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "slides": [
    {
      "soundtrack": {
        "assetId": "acousticstrings",
        "volume": 0.5
      },
      "transition": {
        "type": "wipeleft"
      },
      "overlays": [
        {
          "type": "ImageOverlay",
          "assetId": "00000000-0000-0000-0000-000000000000",
          "height": 50,
          "width": 50
        },
        {
          "length": "Loop",
          "type": "VideoOverlay",
          "assetId": "00000000-0000-0000-0000-000000000000",
          "height": 100,
          "width": 200,
          "volume": 0.5
        }
      ],
      "backgroundColor": "#ffffff"
    }
  ],
  "videoTitle": "myfirstvideo",
  "videoFormat": "mp4",
  "videoHeight": 100,
  "videoWidth": 200
}
'

📌 Need help?

If you require assistance or encounter any issues, we recommend referring to our FAQ page first. If you are still unable to resolve your issue, please don't hesitate to contact us for further support.

Updated 10 months ago