Skip to main content

Part 1: Prepare Scenes

This document explains the steps for preparing scenes in CGI Studio. A total of nine scenes will be created.

Creating the Main Menu Scene

The Main Menu scene is used to display the current context (Navigation, Media, Phone).

Renaming the Scene and Placing Nodes

  1. Start Scene Composer and select [Empty] from [Samples and Templates] on the startup screen.

    • A new solution will open as an Empty solution.

  2. In the Solution Explorer, select [Scene2D] under the [Scenes] folder, then choose [Rename] from the context menu.

    • Scene2D will enter rename mode.

  3. Rename it to [Main Menu].

    drawing-4-1742205749.png



  4. Drag and drop [Overlay Layout] from [Nodes 2D] in the [Toolbox] panel onto the [Main Menu] scene tree.

    • [OverlayLayout] will be added to the scene tree.

    • The [Position] under [Transform] in the [Properties] panel will be automatically set to X=0, Y=0.

  5. Similarly, drag and drop [Text Node] from [Nodes 2D] onto [Overlay Layout].

    • [TextNode] will be added as a child node of [OverlayLayout].

      drawing-4-1742205791.png



  6. Select [TextNode], then choose [Clone] from the context menu.

    • The [Clone Item] dialog will appear.

      drawing-4-1742205824.png



  7. In the [Clone Item] dialog, select the [Multiple Clone] tab, set [ Number of Copies ] to 2, and click [OK].

    • [TextNode_1] and [TextNode_2] will be added as child nodes of [OverlayLayout].

      drawing-4-1742205850.png

 

Renaming Text Nodes

  1. Rename the three added text nodes to Navi, Media, and Phone.

    • To rename, select the node, choose [Rename] from the context menu, or press F2.

      drawing-4-1742205899.png



  2. Select [Navi] in the scene tree.

    • The [Properties] panel will display [Navi] properties.

  3. In the [2D Text Node] section of the [Properties] panel, change [Text] to "Navi Title".

    • "Navi Title" will be displayed in the Scene Editor (overlapping with other text nodes).

      drawing-4-1742205954.png



  4. Similarly, update [Text] for [Media] and [Phone].

    • The Scene Editor will display the text nodes overlapping.

  5. Select [Media] and [Phone] together in the scene tree, then uncheck [Enable Rendering] in the [Properties] panel under [Item].

    • Rendering for [Media] and [Phone] will be disabled, displaying only "Navi Title" in the Scene Editor.

      drawing-4-1742206021.png

 

Deleting Unnecessary Scenes

Delete unnecessary scenes from the Empty sample solution that are not needed for this tutorial.

  1. In [Solution Explorer], select [Scene3D] under the [Scenes] folder, then press Delete.

    • The [Delete Item] dialog will appear.

  2. Click [OK] in the dialog to proceed with deletion.

    • [Scene3D] will be removed from the [Scenes] folder in [Solution Explorer].

The Main Menu scene setup is now complete.

 

Adding the Navigation Scene

Add two new scenes, setting them as Navigation and Phone, with text displaying "Navigation" and "Phone" respectively.

  1. Click [Add a new 2D Scene] in the toolbar.

    • The [Add New Scene 2D] dialog will appear.

      drawing-4-1742206065.png



  2. In the [Add New Scene 2D] dialog, rename [Name] to "Navigation", then click [OK].

    • The [Navigation] scene will be added under [Scenes] in [Solution Explorer].

    • The Navigation scene will appear in the scene tree.

  3. Drag and drop [Text Node] from [2D Nodes] in the [Toolbox] onto the Navigation scene tree.

    • "Text" will be displayed in the Scene Editor.

  4. In the [Properties] panel, change [Text] under [2D Text Node] to "Navigation".

    • The text displayed in the Scene Editor will change to "Navigation".

      drawing-4-1742206143.png



  5. Set the text node position using [Transform] in the [Properties] panel as the below table.

    Position X 25
    Position Y 150

The Navigation scene setup is now complete.

 

Adding the Phone Scene

The Phone scene is created by duplicating the Navigation scene.

  1. In [Solution Explorer], select [Scenes > Navigation], then choose [Clone] from the context menu.

    • The [Clone Item] dialog will appear.

      drawing-4-1742206203.png



  2. In the [Clone Item] dialog, select [Single Clone], rename [Name] to "Phone", then click [OK].

    • The Phone scene will be created.

    • The scene tree will display the newly created Phone scene.

  3. Select the text node in the Phone scene tree, then update [Text] in the [Properties] panel under [2D Text Node] to "Phone".

    • The text displayed in the Scene Editor will change to "Phone".

The Phone scene setup is now complete.

 

Adding the Media Menu Scene

This scene is similar to the Main Menu scene. It includes an overlay layout node with three child text nodes: Radio, Bluetooth, and USB. Therefore, the Main Menu scene will be duplicated and set up it as Media Menu scene.

  1. In Solution Explorer, select [Scenes > Main Menu], then choose [Clone] from the context menu.

    • The [Clone Item] dialog will appear.

  2. In the [Clone Item] dialog, select [Single Clone], rename [Name] to "Media Menu", and click [OK].

    • A new scene named Media Menu will be created.

    • The scene tree panel will display the Media Menu scene.

    • The scene tree will contain an overlay layout node with three text nodes.

  3. Select the Overlay Layout in the scene tree, then update the [Position] under [Transform] in the Properties panel:

    Position X 0
    Position Y 50

  4. Select each text node in the scene tree and update the Properties as follows:

    General > Name 2D Text Node > Text
    Radio Radio Title
    Bluetooth Bluetooth Title
    USB USB Title

The Media Menu scene setup is now complete. Since this was duplicated from the Main Menu scene, the Enable Rendering setting for Bluetooth and USB text nodes is disabled, so only "Radio Title" will be displayed in the Scene Editor.

 

Creating the Media Radio Scene

The Media Radio scene is displayed when the Media Menu is selected. This scene is created by duplicating the previously created Navigation scene.

  1. In Solution Explorer, select [Scenes > Navigation], then choose [Clone] from the context menu.

    • The [Clone Item] dialog will appear.

  2. In the [Clone Item] dialog, select [Single Clone], rename [Name] to "Media Radio", and click [OK].

    • A new scene named Media Radio will be created.

    • The scene tree panel will display the Media Radio scene.

  3. Select the Text Node in the scene tree and update the [Text] under [2D Text Node] in the Properties panel to "Radio".

    • The text displayed in the Scene Editor will change to "Radio".

The Media Radio scene setup is now complete.

 

Adding the Media Bluetooth and Media USB Scenes

Two additional scenes, Media Bluetooth and Media USB, will be created similarly to the Media Radio scene by duplicating it.

  1. In Solution Explorer, select [Scenes > Media Radio], then choose [Clone] from the context menu.

    • The [Clone Item] dialog will appear.

  2. In the [Clone Item] dialog, select [Multiple Clone], set [Number of Copies] to 2, and click [OK].

    • Two new scenes named Media Radio_1 and Media Radio_2 will be created.

    • The scene tree panel will display the newly created Media Radio_1 scene.

  3. In Solution Explorer, rename Media Radio_1 to Media Bluetooth and Media Radio_2 to Media USB.

  4. Select the text node in the Media Bluetooth scene tree and update the [Text] under [2D Text Node] in the Properties panel to "Bluetooth".

    • The text displayed in the Scene Editor will change to "Bluetooth".}

  5. Similarly, select the text node in the Media USB scene tree and update the [Text] to "USB".

    • The text displayed in the Scene Editor will change to "USB".

The Media Bluetooth and Media USB scene setups are now complete.

 

Adding the Clear Scene

A Clear Scene containing only a camera is added to erase the contents of the old framebuffer. This scene is always rendered to ensure that previous frame contents do not appear.

  1. Click the [Add a new 2D Scene] button in the toolbar.

    • The [Add New Scene 2D] dialog will appear.

  2. In the dialog, set [Name] to "Clear", then click [OK].

    • The Clear scene will be added under the [Scenes] hierarchy in Solution Explorer.

The Clear Scene setup is now complete.

 

Adding the Swap Scene

An additional Swap Scene is required to ensure proper rendering (switching of render target buffers) and correct display in Scene Composer.

However, this scene is only necessary for Scene Composer display purposes and is not required for the Courier application, as buffer swapping is handled automatically in Courier.

  1. Click the [Add a new 2D Scene] button in the toolbar.

    • The [Add New Scene 2D] dialog will appear.

  2. In the dialog, set [Name] to "Swap", then click [OK].

    • The Swap scene will be added under the [Scenes] hierarchy in Solution Explorer.

    • The scene tree panel will display the newly created Swap scene.

The Swap Scene setup is now complete.

 

Disabling Clear Color Buffer

Since the Clear Scene erases the contents of the old framebuffer, the Clear Color Buffer setting should be disabled for all scene cameras except the Clear Scene camera. This is necessary as all scene cameras overlap.

  1. In the [Render Targets] panel, select all cameras except the Clear Camera.

    • Hold down Shift key while selecting to choose multiple cameras.

      drawing-4-1742207857.png



  2. In the Properties panel, under the [Camera] category, uncheck [Clear Color Buffer].

    • This will disable the Clear Color Buffer setting for all selected cameras at once.

      drawing-4-1742207897.png

 

Setting Enable Swapping

The Swap Scene executes buffer swapping. Therefore, the Enable Swapping setting must be disabled for all scene cameras except the Swap Scene.

  1. In the [Render Targets] panel, select all cameras except the Swap Camera.

    • Hold down Shift key while selecting to choose multiple cameras.

      drawing-4-1742207923.png



  2. In the Properties panel, under the [Camera] category, uncheck [Enable Swapping].

    • This will disable the Enable Swapping setting for all selected cameras at once.

      drawing-4-1742208003.png

 

Setting Camera Sequence Number

The rendering order of cameras is determined by the [Sequence Number] property. Cameras with smaller sequence numbers are rendered as backgrounds for those with larger numbers.

In the Render Targets panel, each camera's [Sequence Number] is displayed next to its name in parentheses, indicating their rendering order.

How to Set Sequence Number

The Sequence Number can be set using the following steps:

  1. In the Render Targets panel, select the target camera(s) to be configured.

    • The Properties panel will display the properties of the selected camera.

    • To select multiple cameras, hold down Shift or Ctrl key while clicking.

  2. In the Properties panel, under the [Camera] category, change the [Sequence Number] value.

    drawing-4-1742208075.png

Sequence Number Configuration

For this tutorial, set the Sequence Number for each camera as follows:

drawing-4-1742208120.png
Sequence Number Camera Name
0 Clear
1 Main Menu
2 Media Menu, Navigation, Phone
3 Media Bluetooth, Media Radio, Media USB
4 Swap

With this, all necessary scenes are now prepared for the State Machine Configuration in the next section.

 

 

 

 

 

 

 

 

 

Main Menu Scene

This scene will display the currently selected context. The text "Navigation", "Media" or "Phone" will be shown in the top left corner.

When creating a new solution, an initial 2D and 3D scene is already created. For training purposes, let's delete both scenes by selecting them in the Scene Editor Panel on the left and hit the delete key.

Create a 2D Main Menu Scene using the Menu "Scene – New 2D Scene…".

drawing-5-1728043962.png

In the first option choose the "Scenes" folder, where you will collect all scenes for this solution. Enter a suitable name "Main Menu" for this scene and press "OK".

Drag an Overlay Layout from the Toolbox into the Scene Tree Panel. By dragging it into the Scene Tree Panel it will automatically be positioned correctly to the position X=0 and Y=0.

Add three TextNodes to this Overlay Layout by dragging them from the Toolbox onto the Overlay Layout in the Scene Tree Panel.

drawing-5-1732876312.png

Adapt the texts of the three TextNodes in the Properties Panel to "Navi Title", "Media Title" and "Phone Title".

drawing-5-1728046454.png

Since only one of the TextNodes should be visible at a time, two of the TextNodes will be configured "Rendering disabled". Navigation will be the default context, so you will select Media and Phone using multiple selection in the Scene Tree Panel and uncheck the "Enable Rendering" property in the Properties panel.

Multiple items can be selected by drawing a rectangle around these items with the mouse or by selecting one item, pressing "Ctrl" and adding an additional item to the selection with another mouse click.

drawing-5-1728046518.png

drawing-5-1694153972.png

Navigation Scene

Create a 2D Scene with the name "Navigation"

drawing-5-1728046707.png

Add a TextNode to the Scene by dragging it from the Toolbox into the Scene Tree panel (or into the Scene Editor). Change its text to "Navigation" to indicate this being the navigation scene.

drawing-5-1732875980.png

Change the position of the TextNode in the Transformation Properties of the TextNode.

drawing-5-1728046984.png

The final simple navigation scene in the Scene Editor looks like this.

drawing-5-1694155782.png

Phone Scene

Create a 2D Scene with the name "Phone" similar to the Navigation Scene.

drawing-5-1728047111.png

Add a TextNode to the Scene by dragging it from the Toolbox into the Scene Tree panel or into the Scene Editor. Change its text to "Phone" to indicate this being the phone scene.

drawing-5-1732876054.png

Change the position of the TextNode to position X=25, Y=100.

drawing-5-1728049111.png

The final simple phone scene in the Scene Editor looks like this.

drawing-5-1694156152.png

Media Scenes

Media Menu Scene

This scene is the similar to the Main Menu. It contains TextNodes for various media sources like "Radio", "Bluetooth" and "USB" that are inside an Overlay Layout. Only the active media source will be visible.

Create a 2D Scene with the name "Media Menu".

drawing-5-1728049161.png

Drag and drop an Overlay Layout from the Toolbox into the Scene Tree Panel and position it below the Main Menu. You can use the Properties Panel to adjust the Overlay's position.

drawing-5-1728049394.png

This Overlay Layout has to be filled with three TextNodes. So, drag and drop three TextNodes from the Toolbox onto the Overlay Layout.

Change the texts of the TextNodes to "Radio Title", "Bluetooth Title" and "USB Title". You can also rename the TextNodes in the Scene Tree (see screenshot below).

drawing-5-1732876244.png

Similar to the Main Menu, only one Media device shall be visible at a time. Therefore, rendering has to be disabled for two of the TextNodes. Radio will be our default device. Select Bluetooth and USB and uncheck the "Enable Rendering" property in Properties panel.

drawing-5-1728049705.png

The resulting scene will look like this.

drawing-5-1694157797.png

Media Radio Scene

To create the Media Radio Scene, copy the Navigation Scene in the Solution Explorer Panel. To do this, right click on the Navigation Scene and choose "Copy", right click into the Solution Explorer Panel and choose "Paste". This will create a Scene called "Navigation_1".

drawing-5-1728049903.png

Rename the new scene to "Media Radio" and change the Text of the TextNode to "Radio".

Media Bluetooth Scene

Create another similar scene "Media Bluetooth" repeating the steps above. Change the TextNode's text to "Bluetooth"

Media USB Scene

The last Media Scene is the USB Scene. Create a Scene called "Media USB"repeating the steps above and change the TextNode's text to "USB".

Additional Scene for Clear

We add a clear scene that includes only a camera, the purpose of which is to clear the content of the old framebuffer. This clear scene will be rendered always and ensures that no old content is visible.

The Clear Color Buffer of all other cameras will be disabled because they are all overlapping.

Depending on the concrete custom scenario, non-overlapping cameras might be a better choice. But this is not topic of this tutorial.

Create a new 2D scene called "Clear". This scene consists of a camera only.

drawing-5-1732876283.png

Additionally, the settings of the following cameras have to be adapted. Select the cameras in the Render Target Panel (use multi selection) and adjust the settings in the Properties panel.

drawing-5-1728050163.png

Uncheck the Clear Color Buffer for the selected cameras.

drawing-5-1728050273.png

Additional Scene for Swap

To ensure a correct rendering (correct swapping of the render target's buffers) in Scene Composer, we need an additional Swap Scene.

This is only needed for correct display in Scene Composer. This is not necessary for Courier applications because Courier is handling the swap automatically.

Create another scene called "Swap". This scene also contains only a camera. Select the camera in the Scene Tree to view the properties in the properties panel. The camera's configuration is as follows:

    Clear Color Buffer is disabled Enable Swapping is enabled
    drawing-5-1728050396.png

    Swapping the buffers should only be performed once. As we have introduced a Swap scene to do this task, all other cameras should be configured to disable swapping.

    Select the following cameras in the Render Target panel using multi select.

    The order of the cameras in the RenderTarget may be different in your solution. This will be taken care of in the next chapter.

    drawing-5-1728050554.png

    Adjust the Camera's Sequence Numbers

    The order in which the cameras are rendered depends on their sequence numbers. A lower sequence number is rendered in the background of a higher sequence number. A camera's sequence number can be seen next to the camera's name (in brackets) in the Render Target panel; in fact, the cameras are ordered by their sequence number.

    drawing-5-1728050868.png

    The sequence numbers can be adjusted in the camera properties.

    drawing-5-1728050913.png

    In our sample the Clear camera is our black background. It receives the sequence number 0.
    The Main Menu camera comes next in line. Its sequence number will be 1.
    Let's configure a sequence number of 2 to Phone, Navigation and the Media Menu.
    The Media devices USB, Bluetooth and Radio get the sequence number 3.
    And last of all, the Swap camera (which is only needed for Scene Composer), has sequence number 4.


    Back to top