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: 
tifroz
Streaming Star

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 6
squirreltown
Roku Guru

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
TheEndless
Channel Surfer

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
Streaming Star

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
RokuJoel
Binge Watcher

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
Streaming Star

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
RokuJoel
Binge Watcher

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