Common Media for Roku Development

When anyone is getting started with Roku development, they soon find that there are a variety of media files involved.  While these images and videos can be anything the author wishes, there are some formatting restrictions.  My goal is to outline the basics of media formatting in this post.

Most of this information has come from the Roku documentation, trial-and-error, and other internet sources.

Video

There are two video types the Roku supports:  standard definition (SD) and high definition (HD).

SD video:  4:3 aspect ratio, 480i, 720 x 480 px
HD video:  16:9 aspect ratio, 720p, 1280 x 720 px
HD video (high end units):  1080p, 1920 x 1080 px

The video format supported by Roku is H.264.  There are a ton of different encoding specifics you can use, I would say if you are going to do anything out of the norm, refer to their Encoding Guide available on their developer page.

Roku recommends that each video is provided with a BIF file (Base Index Frames).  Basically these are the individual frames that appears when a viewer is fast forwarding or rewinding a video.  It is just nice to have for stored video.  I will cover this in a future post since there are several things that are involved with this process.

General Image Information

It is really helpful to have a professional image editor when setting up images.  While I am sure the lower end editors that came with a system might work, it just saves time and energy to have software that works with you (not against you.)

This comes from the Roku document “Artwork Guidelines”:

• Set RGB color values between 16 and 235.  You can do this by adding a level adjustment layer over your image.
• Your square image should be 100% filled.  This means no rounded corners, borders, or any transparency.
• It is best to use PNG files for your image format.  You can use JPEG if you want.
• Don’t use supper bright colors.  TV’s can sometimes make these colors look awful.  You might need to use trial-and-error on this one.
• Cool colors (i.e. blues) look better than warm colors (i.e. reds).
• Use thick lines in images.  Thin lines can flicker on some TV’s.

Their artwork guide also describes the process of setting non-square pixels for any SD images.  Because older SD televisions did not have a perfectly square pixel, it can make uncorrected images look squashed.  The non-square ratio is .91.  Photoshop can actually set an image to this non-square ratio and convert any image copied into it.

Common Images

I will not be able to have an exhaustive list of images needed for channel development, but hopefully I will capture the major ones.  Roku is a very standardized system.  This works well for the end-user (they do not have to relearn each channel’s interface) and good for us as developers since we do not have to re-invent the wheel with each channel we develop.

Overhang Logo – channel branded band at the top of the screen.  The image should be your channel logo.  While there is no required width or height, it should fit into the designated height of the overhang.  You should also alpha-blend (transparency) it to the background (meaning this image will need to be a PNG file.)
SD:  83 – 92 pixels height
HD:  124 – 138 px max height

Overhang Background
SD:  720 x 110 px
HD:  1280 x 165 px

Channel Store Image
SD:  214 x 144 px
HD:  290 x 218 px

Main Channel Menu – This is the image that appears in the main channel menu with the other channels.  There are two sizes: when the channel is in focus (or selected) and when it is not in focus or on the side.
Focus SD:  248 x 140 px
Focus HD:  336 x 210 px
Side SD:  80 x 46 px
Side HD:  108 x 69 px

Content Images – These are images that represent a specific piece of content.  This could be a frame from a video, a poster or artwork for a video, or album artwork.  The Roku will resize a larger image to fit into the designated space.  Just remember that SD still needs to be saved with non-squared pixels.  Use the cheatsheet links below to find the specific item you wish to create.

Cheatsheets

Below are a couple of links with more image size information in “cheatsheet” form.

Roku Forums Post
http://forums.roku.com/viewtopic.php?f=34&t=50854&p=345011#p344967

IRC
http://www.instantrokuchannel.com/help/poster_styles_and_display_modes