Setting Up a Simple UIRenderer Layout#

A simple example is the best way to better understand UIRenderer layouts. This example will print a scrolling marquee, Star Wars-intro like, with some icons at the corners of the marquee, scrolling text, and some text in the corners of the screen. This starts from being a single point in the centre of the screen and blows up to take up the entire screen.

The steps are as follows:

  1. Create text for the lines marquee, image for the icons, and put those in a MatrixGroup.

  2. Put this MatrixGroup in a PixelGroup.

  3. Set the anchor of the marquee texts to Centre, and calculate the fixed PixelOffset of each text based on line spacing. On each frame add a number to each text’s PixelOffset.``y to scroll them.

  4. Anchor the TopLeft of the top left symbol to the TopLeft of the matrix group. Anchor the BottomRight of the bottom right symbol to the BottomRight of the MatrixGroup, and so on.

  5. Calculate a suitable transformation with a projection to nicely display the marquee relative to its containing group. The marquee and symbols will move as one item here.

  6. Anchor the corner text with the same logic, potentially offsetting it so it does not touch the borders.

  7. Finally, centre the PixelGroup, and set its scale to a very small number. As it increases frame by frame, the group takes up the whole screen when it reaches the value of one.

To see this in action, take a look at the PowerVR SDK demo, IntroducingUIRenderer.

UI Renderer