Roku: get rid of component poster image flicker

Question

I have simple a brightscript roku app. I just want to play a full screen image after the splash screen and I get a strange full screen black then gray background that shows before my full screen image.

I can display a full screen image using roImageCanvas but I don't want to use that hack. I require use of a component.

Here is a quick video showing what I am seeing.

Here is my main.brs:

sub Main()
' THIS does NOT cause flicker
'  background = {
'        Color: "#000000"
'    }
'    loadingImage = {
'        Url: "pkg:/images/main-background.png"
'        TargetRect: {
'            x: 0,
'            y: 0,
'            w: 1280,
'            h: 720
'        }
'    }
'    loadingText = {
'        Text: "Loading...",
'        TextAttrs: {
'            Font: "Large",
'            VAlign: "Top"
'        },
'        TargetRect: {
'            x: loadingImage.TargetRect.x,
'            y: loadingImage.TargetRect.y + 25,
'            w: loadingImage.TargetRect.w,
'            h: 30
'        }
'    }
'    canvas = CreateObject( "roImageCanvas" )
'    canvas.SetLayer( 0, [ background, loadingImage, loadingText ] )
'    canvas.Show()  

  showChannelSGScreen()

'  canvas.Hide()
end sub

sub showChannelSGScreen()
  screen = CreateObject("roSGScreen")
  m.port = CreateObject("roMessagePort")
  screen.setMessagePort(m.port)
  scene = screen.CreateScene("ZORenderablesExample")
  screen.show()

  while(true)
    msg = wait(0, m.port)
    msgType = type(msg)

    if msgType = "roSGScreenEvent"
      if msg.isScreenClosed() then return
    end if
  end while

end sub

And my component:

<?xml version = "1.0" encoding = "utf-8" ?> 

<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<component name = "ZORenderablesExample" extends = "Scene" >

  <script type = "text/brightscript" >

    <![CDATA[

    sub init() 
    end sub

    ]]>

  </script>

  <children>
        <Poster
            id="mainBackground"
            translation="[0, 0]"
            uri="pkg:/images/main-background.png"
            width="1280"
            height="720"
            visible="true">
            <Label 
                id = "loading" 
                translation = "[ 0, 244 ]" 
                width = "1280" 
                height = "720" 
                font = "font:SmallBoldSystemFont" 
                text = "Loading..." 
                horizAlign = "center" 
                vertAlign = "center"
                visible = "true" />            
        </Poster>

        <!-- Overhang logo -->
        <Poster
            translation="[79, 36]"
            uri="pkg:/images/header-logo.png"
            width="156"
            height="49"
            visible="true" />
  </children>
</component>

I made a github repo where you can get at my full code

How do I prevent the flicker? Is there a way I can keep the splash screen up until the component and full screen image has completed rendering?

FWIW I am using the newest roku stick (4 core)

Answer 1

There is no way to get rid of the flicker during the hard-cut when using scene graph XML.

The full background can be found at this Roku forum thread

Roku needs a better solution for scene graph as everyone runs into this same problem. Allowing to keep the splash up until scene beneath renders would be one solution.