Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
AngelWire
Visitor

Display an image

Hello, I'm practically brand new at developing for Roku and I need some help. What I need is a script that displays an image on the screen that can be moved around with the arrows(like the simple2d example). I wanted to just strip down the simple2d example until all it did was display a ball. But I ran into some trouble.

Thanks
0 Kudos
17 REPLIES 17
jbrave
Channel Surfer

Re: Display an image

Prolly the best place to get started is by downloading the Picnic Defense app that someone posted to the forum a few months ago:

viewtopic.php?f=34&t=40243&start=0&hilit=picnicdefense

But just to give you some hints:

1. create an roscreen. for beginner, don't use doublebuffering (useful later when you are trying to extract the most performance you can get out of the CPU)
2. create a bitmap from a file
3. create a region from the bitmap
4. create a sprite from the region using rocompositor
5. create a port
6. assign roscreen to port
7. listen for input from port, use that to determine which way to move your sprite
8. use rosprite moveto or moveoffset to move the sprite. with offset, you can just put in the amount to move, with moveto, you give the coordinates to moveto

- Joel
Screenshades: The first Screensaver for Roku2!
Musiclouds: The best free internet music, on your Roku!
Ouroborialis: Psychedelic Screensaver for Roku!
0 Kudos
AngelWire
Visitor

Re: Display an image

Here is what I have so far:
Function Main()
while true
Draw()
end while
end Function

Function Draw()
screen = CreateObject("roscreen", false, 640,480)
player = CreateObject("robitmap","pkg:/images/truck.png")
region = createobject("roregion", player, 0,0,64,64)
compositor = createobject("rocompositor","pkg:/images/truck.png")
compositor.draw()
screen.drawobject(0,0,player)
return true
end Function

And it doesn't work. What am I doing wrong?
0 Kudos
RokuChris
Roku Employee
Roku Employee

Re: Display an image

I see two problems right off...
  • the constructor for roCompositor only takes one parameter, the debug console reports this problem immediately.
    BrightScript Component function call does not have the correct number of parameters. (runtime error &hf5) in ...AA9QwPvk/pkg:/source/Main.brs(18)
    018: compositor = createobject("rocompositor","pkg:/images/truck.png")

  • You don't want to recreate the screen, bitmaps, etc every time you envoke your Draw() routine. You want to create those things once, hold them in memory, and use them to update the screen from your Draw() routine.
0 Kudos
YungBlood
Streaming Star

Re: Display an image

I've been working quite a bit with basic roscreens. Do you plan on using an animated sprite?

For a non-animated image, this would work. In fact, it is a piece of one of my games. I'm using double buffering.


Sub Main()
W = 640
H = 480
screen=CreateObject("roScreen", true, W, H)
if type(screen) <> "roScreen"
print "Unable to open screen"
return
endif
msgport = CreateObject("roMessagePort")
screen.SetPort(msgport)
DrawImg(screen)
End Sub

Sub DrawImg(scr as object)
port = scr.GetPort()
cw = int(scr.getwidth()/2)
ch = int(scr.getheight()/2)
logo = CreateObject("roBitmap", "pkg:/images/logo.png")
while true
BackGround(scr)
scr.drawobject(cw-280, ch-160, logo)
scr.swapbuffers()
msg = wait(0, port)
if type(msg) = "roUniversalControlEvent" then
if (i = 6) then
exit while
end if
end if
end while
end sub

Sub Background(scr as object)
scr.clear(0)
cw = int(scr.getwidth()/2)
ch = int(scr.getheight()/2)
bg = CreateObject("roBitmap", "pkg:/images/background.png")
scr.drawobject(cw-360, ch-240, bg)
End Sub


Try that. It should be enough to get you a background plus an image on your screen. If you want to do more complex things, you will need to study what jbrave said.
YungBlood

Bringing more fun to Roku!
0 Kudos
AngelWire
Visitor

Re: Display an image

Thanks for the help YungBlood, But I have another question: How would I make the image transparent? I'm using a png with transparency, but there's still a black box around the image. By the way, is there any information about roscreens in the documentation?
0 Kudos
jbrave
Channel Surfer

Re: Display an image

"AngelWire" wrote:
Thanks for the help YungBlood, But I have another question: How would I make the image transparent? I'm using a png with transparency, but there's still a black box around the image. By the way, is there any information about roscreens in the documentation?


Use screen.setalphaenable(true) for an image that has transparent sections, or if drawing to a bitmap, mybitmap.setalphaenable(true)

If mixing transparent and non transparent images, set true for the transparent and false for the non-transparent. Here is an example from a 2D Defender style game I'm working on:

while true
'...do a bunch of calculations....
' now draw everything:
screen.setalphaenable(false) 'set transparent alph blend OFF
starsregion.offset((movex/2),0,0,0) 'move background starfield
screen.drawobject(0,-150,starsregion) 'draw starfield at new position
screen.setalphaenable(true) 'set transparency ON
earthregion.Offset(movex,0,0,0) 'move earth
screen.drawobject(0,-250,earthregion) 'draw landscape on top of starfield
playsprite.moveto(ps.posx,ps.posy) 'move player's character
compositor.drawall() 'draw all sprites
screen.SwapBuffers() 'swap screen buffers
end while

Screenshades: The first Screensaver for Roku2!
Musiclouds: The best free internet music, on your Roku!
Ouroborialis: Psychedelic Screensaver for Roku!
0 Kudos
YungBlood
Streaming Star

Re: Display an image

For more info on roscreen, get the latest beta SDK here:
http://forums.roku.com/viewtopic.php?f=34&t=39272#p260031
YungBlood

Bringing more fun to Roku!
0 Kudos
AngelWire
Visitor

Re: Display an image

Thanks everyone for your help but I'm still having some problems.
Sub Main()
W = 640
H = 480

screen=CreateObject("roScreen", true, W, H)
if type(screen) <> "roScreen"
print "Unable to open screen"
return
endif
msgport = CreateObject("roMessagePort")
screen.SetPort(msgport)
DrawImg(screen)
End Sub

Sub DrawImg(scr as object)
x = int(128)
y = int(128)
port = scr.GetPort()
cw = int(scr.getwidth()/2)
ch = int(scr.getheight()/2)
logo = CreateObject("roBitmap", "pkg:/images/corporal.png")
while true
BackGround(scr)
scr.drawobject(x, y, logo)
scr.swapbuffers()
msg = wait(0, port)
if type(msg) = "roUniversalControlEvent" then
if (i = 3) then
scr.setalphaenable(true)
else
scr.setalphaenable(false)
end if
end if
end while
end sub

Sub Background(scr as object)
scr.clear(0)
cw = int(scr.getwidth()/2)
ch = int(scr.getheight()/2)
bg = CreateObject("roBitmap", "pkg:/images/grass.png")
scr.drawobject(cw-360, ch-240, bg)
End Sub

Here's the problem: I'll run my program on the roku, and if I press a button it will go back to the main screen. I'll run the program again and press a button nothing happens. So I press the home button, run the program again, press a button and it will end. So it just goes back and forth like that.

And I also have a question, instead of using moveto(), could I just draw the object at x and y and change their values?
Thanks for your help once again.
0 Kudos
RokuMarkn
Visitor

Re: Display an image

Are you using port 8085 to see the debugging output? Trying to write an app without the debug output is like driving blind. If you look at the debug output when you run your app, you will see this:

Use of uninitialized variable. (runtime error &he9) in ...aaNP9/pkg:/source/appMain.brs(29)
029: if (i = 3) then

which immediately points to the problem (you did not initialize the variable "i" anywhere).

--Mark
0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.