Roku Basic App Creation

Question

I have done roku setup on device and one basic hello world program too.

Next thing i want to create a layout alignment with logo. Its very hard to search source for this. Could anyone help me out to solve this ?

Answer 1

That's really not an answerable question without more details. There are different ways of doing that. The simplest way to do just what you described would be with roScreen or roImagecanvas, but each of those choices require more questions. Go through the examples in the Roku SDK. Find things that look interesting and side-load them and look at the source code, you'll find many answers there.

Answer 2

Create these files first: main.brs in source folder, LayoutTop.xml, LayoutTop.brs, HomeScene.xml and HomeScene.brs in components.Then add this code in those files: main.brs file:

sub Main()
    showSGScreen()
end sub

sub showSGScreen()
    screen = CreateObject("roSGScreen")
    m.port = CreateObject("roMessagePort")
    screen.setMessagePort(m.port)
    m.scene = screen.CreateScene("HomeScene")
    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

LayoutTop.xml:

<?xml version="1.0" encoding="UTF-8"?>
<component name="layoutTop" extends="Group" xsi:noNamespaceSchemaLocation="https://devtools.web.roku.com/schema/RokuSceneGraph.xsd">

<script type="text/brightscript" uri="pkg:/components/LayoutTop.brs"/>
<children>
    <Poster
      id="backgroundPoster"
      uri="pkg:/images/backgroundTop.jpg"
      width="1920"
      height="150"
      translation="[0, 0]" 
    />


    <Poster
      id="icon"
      uri="pkg:/images/html5.png"
      width="128"
      height="128"
      translation="[10, 10]" 
    />

</children>

</component>

LayoutTop.brs:

sub init()

end sub

HomeScene.xml:

<?xml version="1.0" encoding="UTF-8"?>
<component name = "HomeScene" extends = "Scene" >
<script type="text/brightscript" uri="pkg:/components/HomeScene.brs"/>
<children>
    <Poster
      id="background"
      uri="pkg:/images/background.jpg"
      width="1920"
      height="1080"
      translation="[0, 0]" 
    />

    <Group >
        <layoutTop
          translation="[0, 0]" 
        />

    </Group>

  </children>
</component>

HomeScene.brs:

sub init()

end sub

After all this you should get this Screen on your Roku: