Beginner's Guide to Composer (Building Custom Graphics)

Singular's Composer gives you the tools to create stunning overlays with impressive animations, powerful controls, and live data integration. But how do you get from a blank page to a full set of graphic overlays? Here's a step-by-step guide to get you started making some basic graphics.

1 - Create a Subcomposition for Your First Graphic

Each individual graphic should be built within its own Subcomposition. Think of a Subcomposition as a container. To add a new Subcomposition, click the "Add" dropdown button in the Composition Tree Toolbar, then select Subcomposition. Rename the Subcomposition to the desired name of your first graphic.

Add a new Subcomposition to contain your first graphic

2 - Assign your Subcomposition to a Logic Layer

Assigning a Logic Layer to your overlays is important when using a control application, as it allows overlays within the same layer to smoothly replace one another rather than overlapping.

To add a graphic to a Logic Layer, open the Composition Navigator, select the Logic Layer dropdown, type in the layer name, and hit enter.

Select a Logic Layer for your overlay

3 - Build Your Graphic Contents

Go into your Subcomposition by clicking the small arrow on the right of the layer within the Composition Tree. Next, add and group together your desired widgets to create a graphic.

Combine widgets to create your graphic

4 - Add Control Nodes

Once the structure of your graphic is built, you'll want to make sure it can be edited and controlled by adding control nodes. To add a control node, click on the underlined property in the Property Panel that you wish to add a control node to. Then, enter in a name for the control field (what will see seen in the control application) and click Add. You will see the property turn green, indicating a connection has been made.

You can test the connection by entering new values into the Data Interface and Control Panel in the lower right.

Assign Control Nodes

5 - Add Animations

Open the Animation Timeline and click the icon on the left that corresponds to the layer you wish to animate. Adjust the settings, and click and drag on the timeline to adjust the duration of the animation.

Give Your Graphic an Animation

6 - Repeat Steps 1-5 for all Desired Graphics

You've built a simple graphic! Now repeat this process to build the remaining graphics in your composition.

Follow the same steps to build the rest of your graphics

7 - Open in Your Control Application

Once your composition is finished, open it with a control application like Studio. Notice when adding graphics how they've been grouped based on their layer logic. Try experimenting with your various control fields and make sure everything is to your liking. You're ready to go live!