Roku SDK Documentation : Tutorial Overview

Every ZIP file example in this tutorial is a complete application, in that it consists of at least a scene component (a component extended from a scene node class, such as Scene, or OverhangPanelSetScene), and possibly any other components needed for the example. It also includes all of the graphic images, and content meta-data (or links to content meta-data) required for the application, and the main.brs and manifest files needed to launch the application.

But each example is designed to isolate and demonstrate a specific Roku SceneGraph node class, or design/development principle. The examples only show the very specific aspects of each example to demonstrate their use in general Roku SceneGraph development. For this reason, the scene component used in the examples typically only contains the minimum amount of code required for a typical application, to highlight the example usage.

In most cases, the scene component includes code in the <script> element init() function to set the background image for the application, center the example in the screen, and set focus on the scene:


sub init() = "pkg:/images/rsgde_bg_hd.jpg"
  example ="exampleRectangle")
  examplerect = example.boundingRect()
  centerx = (1280 - examplerect.width) / 2
  centery = (720 - examplerect.height) / 2
  example.translation = [ centerx, centery ]
end sub


As this code (or equivalent) is found in almost all the example scene XML component files, it is not described in the tutorial. Likewise, since virtually the same code is used in the every example main.brs and manifest file, these files will not be described in the tutorial, as well as the files in the package images directory. The only time any of these files will be covered in this tutorial is if they serve a specific purpose in the specific example.

Tutorial Examples UI Resolution

All of the examples in this tutorial have been designed for HD (1280x720 pixels) UI resolution (see Specifying Display Resolution). Be aware that if you design your application for FHD (1920x1080 pixels) UI resolution, any and all of the hard-coded dimensions shown in the examples must be multiplied by 1.5 to have the same appearance on a FHD display output. For example, any hard-coded screen size dimensions would be 1920 width and 1080 height, rather than 1280 width and 720 height as shown in the examples; a space of 20 pixels between elements in the HD examples would be 30 pixels in a FHD UI application.