Part 1: Prepare Scenes

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…".

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 the 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 positon 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.

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

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.

Create a 2D Scene with the name "Navigation"

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.

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

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

Phone Scene

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

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.

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

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

Media Scenes

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".

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.

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).

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.

The resulting scene will look like this.

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".

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.

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.

Uncheck the Clear Color Buffer for the selected cameras.

Addional 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

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.

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.

The sequence numbers can be adjusted in the camera properties.

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.