Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
tifroz
Level 7

PNG with transparent gradient image with roImageCanvas

I want to use a png image with a transparency gradient as a background for text in the context of an roImageCanvas, but Roku is rendering pixels with partial transparency as 100% opaque instead of say 50% (completely transparent pixels are correctly rendered as transparent)

Does Roku support any kind of image format with partial pixel transparency? If not, is there a workaround?


Here's the PNG I tried (below)
0 Kudos
6 Replies
squirreltown
Level 9

Re: PNG with transparent gradient image with roImageCanvas

"tifroz" wrote:


Does Roku support any kind of image format with partial pixel transparency?


Yes, absolutely. I only use roScreen so perhaps someone else can help with specific roCanvas issues.
Kinetics Screensavers
0 Kudos
Highlighted
TheEndless
Level 7

Re: PNG with transparent gradient image with roImageCanvas

Make sure you haven't overridden the default CompositionMode. It needs to be "Source_Over" to enable transparency.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
tifroz
Level 7

Re: PNG with transparent gradient image with roImageCanvas

Thanks for the help - it turns out I was drawing the same gradient image multiple time in a loop (there is a small animation involved), this made semi-transparent pixel look completely opaque.

My loop was essentially doing something like

[start loop]
canvas.clearLayer(1)
canvas.setLayer(1, myContent)
[end loop]

..apparently this wasn't enough to clear the existing layers drawn on each iteration, canvas.show() needs to be called in order for the clearLayer() command to take effect.

Quick rant: the roImageCanvas apis are severely under-documented considering they behave in ways that are less than intuitive. In particular I have a number of unanswered questions related to multiple layers (they don't seem to be drawn independently of each other, aka clearing a #1 layer will also clear a #2 layer). Of course I could build a dozen of test cases to figure out answers one by one but why make it so hard/time-consuming on developers
0 Kudos
Roku Employee
Roku Employee

Re: PNG with transparent gradient image with roImageCanvas

roImageCanvas is really not the ideal way to do graphics or animations. It works best for static screens, and is OK for slideshows. It is possible to do a UI with it but performance will rarely be better than barely adequate except on the higher end roku devices. It is recommended to use roScreen or roSGScreen if you desire something that is more responsive and functional and which supports smooth animations.

- Joel
0 Kudos
tifroz
Level 7

Re: PNG with transparent gradient image with roImageCanvas

"RokuJoel" wrote:
roImageCanvas is really not the ideal way to do graphics or animations.


This certainly appears to be true, however I need to overlay images on top of a video and as I have read, roImageCanvas combined with an roVideoPlayer is the only way to achieve this. This said, I would love to hear if there is a better alternative.

For background, the animation involved is very basic - a simple progress bar when the video is buffering, so a 5fps animation will do the job...hopefully it won't flicker too much on low end devices, but if it does, so be it.
0 Kudos
Roku Employee
Roku Employee

Re: PNG with transparent gradient image with roImageCanvas

Hi Tifroz,

"tifroz" wrote:
d, roImageCanvas combined with an roVideoPlayer is the only way to achieve this. This said, I would love to hear if there is a better alternative.


roScreen combined with an roVideoPlayer is a way to do this with much more responsive graphics. Please see this thread which includes a downloadable example:

viewtopic.php?f=34&t=51332&hilit=rovideoplayer#p348595

- Joel
0 Kudos