Developing Screensavers with SceneGraph in Roku

01 October 2020

Roku is not limited to only application development and game development. It also allows us to create or develop a custom screensaver for it. It’s just as easy as other developments on Roku and that’s the reason Roku channel store is growing exponentially.

This post will be helpful for all the budding developers who are going to start their journey with Roku development.

Overview

Screensavers are basically channels designed with different screens to be played in the background of any other channel. Designing of the UI is the same for screensaver just like other channels, it’s just a change in entry point from main().

Types of Screensavers

Public –  SceneGraph screensavers use the RunScreenSaver as an entry point and other options will be including RunUserInterface or Main() function.

Private – Private screensavers will not be added in the screensaver menu and it overrides the current screensaver being used. It is only displayed within a specific channel. To make screensaver private, create an entry named ‘screensaver_private’ in the manifest file of the channel.

Entry Points

RunScreenSaver – This function will be called when the screensaver is launched from the screensaver menu.

RunUserInterface – This function will be called when the screensaver is launched from the home screen. It allows the use of any BrightScript or SceneGraph component.

RunScreenSaverSettings – This function can be used to modify settings such as colors, fonts, etc.

Creating a Screensaver

roSGScreen component will be used while creating a screensaver with SceneGraph. It will allow us to directly create a scene with nodes. These components should be created in the main BrightScript file.

screen = CreateObject(“roSGScreen”)

While creating a screensaver using RunUserInterface function, a message port should be used to observe events from SceneGraph XML. It is useful for triggering responses from the screensaver based on events.

m.port = CreateObject(“roMessagePort”)

screen.setMessagePort(m.port)




glb = screen.getGlobalNode()

glb.AddField(“MyField”, “int”, true)

glb.MyField = 100




Scene = screen.createScene(“screensaver”)

screen.show()

Initialization

The first function which is called when a channel is launched is init(). This function can be used to call other functions, set listeners, and observable events in SceneGraph.

function init()

m.animationNode = m.top.findNode(“SceneAnimation”)

m.top.backgroundURI = “pkg:/images/background.jpg”

slideRectangle()

end function

Animation

Animation can also be added to screensavers using animation nodes. Just create a node that needs to be animated and add an animation node to modify its behavior.

<Rectangle 

id="Ball"

color="0x0000FFFF"

width="500"

height="400"

translation="[300, 150]" >




<Label 

text="SceneGraph Screensaver" 

horizAlign="center" 

vertAlign="center" 

width="300" 

height="200" 

color="0x200000FF"/>

</Rectangle>




<Animation 

id="ScreenSaverAnimation" 

repeat="true" 

duration="10" 

easeFunction="linear" >

<Vector2DFieldInterpolator 

id="AnimationInterpolator" 

key=“[0,1]”

keyValue=“[[0,0],[500,500]]”

FieldToInterp=“Ball.translation” />

</Animation>

To know in more details about Screensavers in Roku and its implementation, please visit: developer.roku.com/en-gb/docs/developer-program/media-playback/screensavers.md