Does EmulationStation Support Layered Images?

AlphaBetaPie

I recently noticed that all my videos for my GameBoy collection were recorded in black and white. While I'm sure that's OK for most, I actually miss my green tinted video from my OG Gamboy (call me crazy). I came up with an idea, which would involve me using a green square in png format (set to about 50% opacity) and position it over my video window in my GameBoy menu (thus giving me back my tint).

However, in EmulationStation, it seems like everything in the menus always are grouped under the content it pulls from the media folders. Is there a way to set up a theme to where the semi-transparent green png file is the top layer, so the video is directly under it on screen? Again, not under it like one is at the top of the screen and the other is at the bottom. But layered.

dudleydes

@AlphaBetaPie It is possible to render elements, images, videos etc in EmulationStation by setting a z-index for each element. You can find documentation at: https://github.com/RetroPie/EmulationStation/blob/master/THEMES.md#element-rendering-order-with-z-index

Using the Carbon theme as my example, my approach would be to download the theme from the Github Page and place the es-theme-carbon-master folder in /opt/retropie/configs/all/emulationstation/themes on my Pi - the themes folder may need to be created. The custom theme will appear as ES-THEME-CARBON-MASTER when selecting a theme in UI SETTINGS in ES.

I would then use an image editor to create an 8px by 8px white PNG image, call it white.png and place it in the art folder of the custom carbon theme - SAMBA shares is great for this.

As the green tint would be required for GameBoy only, I would then edit the theme.xml file in the gb folder of the theme and add the following here:

   <view name="video">
	  <image name="video-overlay" extra="true">
		<pos>0.763 0.400</pos>
		<maxSize>0.366 0.436</maxSize>
                <origin>0.5 0.5</origin> 
		<tile>true</tile>
		<path>./art/white.png</path>
		<color>9bbc0f80</color>
                <zIndex>31</zIndex>
	  </image>
    </view>

where

<view> tag makes sure the overlay will only be applied for the video element.
<pos>, <maxSize> and <origin> values have been obtained from the video element in the Carbon theme here so the overlay should fit over the video element
<tile> set to true so that the PNG image will stretch to the area defined by <maxSize>
<path> is the path to the white PNG image
<color> is the colour of the overlay with transparency. The green colour 9bbc0f has been chosed from here and 80 sets the overlay to 50% opacity.
the default z-index for the video element is 30 so setting it to 31 will make sure the overlay will appear on top.

The changes should take effect after restarting ES.

AlphaBetaPie

First off, thanks dudleydes! So very helpful man. All this great info and the breakdown of each field really helps. I actually already had everything I needed up to the "z index" value. It was that one little line that I needed. I had already created a transparent png file in the color I wanted set around 10% (just to give it a nice tint without overpowering the image/video quality). Then I just resize it to the shape of my gameplay window and copied those values over. After I was able to use the z axis to move the layer to the top, BOOM! All things looking nice and pretty now. Brings back that classic GameBoy feel.

And for those wondering, it is still possible to do this with the above method. I wanted to try it out to see if I could match it, which I did. The color you'll want in Photoshop is "Pure Pea Green". The color value for it is 8dc63f. The hexadecimal value for 10% opacity is 1A. So your line will become: <color>8dc63f1A</color> (and don't forget your white solid png file in the art folder).

Now just one more thing...I don't suppose there is a way to add a feature in the menu that will toggle this on or off (for those that don't like the green, or already have green images that might get screwed up by a second green overlay)?

mitu

@AlphaBetaPie said in Does EmulationStation Support Layered Images?:

Now just one more thing...I don't suppose there is a way to add a feature in the menu that will toggle this on or off (for those that don't like the green, or already have green images that might get screwed up by a second green overlay)?

There isn't - however you can create a theme.xml file with your modifications and instruct users how to switch to it. Something like

add the transparend image in gb/art
create a theme_overlay.xml with your modifications.

If users would like to add that to the theme, then they just rename the original theme.xml and copy your files.

Alternatively (I know it's a bit late), Skyscraper can add an overlay image after scraping the artwork, I think the scanlines effect can overlay chosen image on-top of the existing artwork.

AlphaBetaPie

Thanks for the suggestion. That will prob work best, just having them move the green overlay from one folder to another, if they do want that. If not, they can just not touch it and it'll stay default black and white. Also, is there a Windows desktop version of Skyscraper? Even though that would work for images, I assume that wouldn't for video files (since it would have to re-encode them). If this was an image only issue, it would have been an easy fixed. I could have just auto processed the whole batch of GB screens with the green overlay in Photoshop.

mitu

@AlphaBetaPie There is an alpha version for Skyscraper for Windows - http://www.muldjord.com/downloads/Skyscraper_3.1.5_unsupported_win_version.zip - that might work. For videos - I don't think Skyscraper converts or does any processing, that's going to be more tricky to do.