Retropie: Add Artwork to Apps Section

If you followed my previous guide on Dualbooting Raspbmc and Retropie you probably found that the apps section you added was out of place as it was not themed.

This guide assumes that you have already edited your es-systems.cfg file(/etc/emulationstation/es_systems.cfg) and added this:

<system>
    <fullname>Apps</fullname>
    <name>apps</name>
    <path>~/RetroPie/roms/apps</path>
    <extension>.sh .SH</extension>
    <command>%ROM%</command>
    <platform>pc</platform>
    <theme>apps</theme>
</system>

Now you will want to copy the /etc/emulationstation/themes/simple/apps/ports folder to your computer.

Now rename the ports folder to whatever is inside these tags(case-sensitive)

<theme>apps</theme>

From here on out its actually a simple process if you have the images you want to use ready you will need to move these images to the apps/art folder
You will need at least 2 files, a background image and a logo image.
The background image will be high resolution .jpg file I used the second background found in the ports folder as ports_art_blur.jpg
The logo image will be the image shown in the middle system selection bar.

I have provided a quick template you can use, it does not have an icon, you will need to add it and make the background transparent and save it as png.

apps template

NOTE:As far as I’ve tested you can use .png .svg and .jpg files I recommend PNG as they are a lot easier to work with than .SVG(even though they scale better) and because .jpg doesn’t support transparency.

Now we need to edit the theme.xml file (I recommend you use Notepad++ as it makes it easier to edit xml files):

You will need to edit the following lines with the paths of your own images and what you want written in the top left corner of the rom selection screen

line 8

<path>./art/ports2_art_blur.jpg</path>

line 12

<path>./art/ports.svg</path>

line 25

<text>Game Ports</text>

line 36

<path>./art/ports.svg</path>

Save this file and copy the apps folder to /etc/emulationstation/themes/simple/ on your pi. When you restart emulationstation you should see your images.

If you want to theme each app you can proceed if not you are done.

First thing you’ll want to do is run the scrapper and skip each time it fails to find this will create a skeleton gamelist.xml at /home/pi/.emulationstation/gamelists/apps which you will edit.

Second you will want to move the icons you will use to /home/pi/.emulationstation/downloaded_images/apps (mine are all .jpg files but I believe other file types are supported.)

Now just edit the contents of your gamelist.xml as needed here is my example for StartX you can do this either in Notepad++ or by pressing select within emulationstation.

<game>
<path>./StartX.sh</path>
<name>StartX</name>
<desc> Start a Desktop Environment</desc>
<image>~/.emulationstation/downloaded_images/apps/Raspbian.jpg</image>
<rating>1.000000</rating>
<releasedate>20140905T000000</releasedate>
<developer>Raspberry Pi</developer>
<publisher>Linux</publisher>
<genre>OS</genre>
</game>

And the results are this:
photo 3

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s