Tutorial - How to make a theme for Emulationstation and RetroPie

herb_fargus · 18 Aug 2016, 04:54

@mattrixk yes metapixel is in the theme installer. and yes if you have screenshots for it feel free to add them to the theme gallery on the wiki page, preferably one of the system view and one of the detailed (scraped) view. I just updated it so it should be simpler to add new images.

mattrixk · 18 Aug 2016, 05:38

@herb_fargus said:

I just updated it so it should be simpler to add new images

I saw that. It looks good. Any particular reason you didn't show the Basic Views? Is it just because they are basic and there usually isn't much to see?

herb_fargus · 18 Aug 2016, 05:41

@mattrixk yeah, most people scrape their roms so I figured it was most representative of the themes as people use them.

meleu · 18 Aug 2016, 05:55

Forgive me for this comment that adds nothing: I love this community! :D
The tutorial in the wiki became really fine! Good job guys!

Oh wait! I would like to suggest a thing: @mattrixk maybe it would be nice to say in the "About This Tutorial" that it is Windows-based.

mattrixk · 18 Aug 2016, 06:06

@meleu said in Tutorial - How to make a theme for Emulationstation and RetroPie:

say in the "About This Tutorial" that it is Windows-based

Well... I do make my themes on a Windows PC, but I don't think it really matters what operating system you use.

As long as you have a text editor you can edit the XML files, so you can do that in Win/Mac/Linux.
If you need to create images you can use any image editor on whatever OS, or even some online image editors.
I use Herb's Portable ES because I find it easier, but as long as you can SSH or FTP into your themes folder on the RPi, you can test your theme there (and I mention this in that section of the tutorial).
Rookervik's ES Theme Helper program is Windows only, but I don't actually use it in the tutorial.

Having said all that though, I will make a note in the intro that I'm working on a Windows PC.

Cheers for the kind words guys (at least I'm assuming you're all guys considering your gravatars are all men's faces).

This tutorial took me about 3 weeks to make, working every chance I got: lunch times at work and late at night after everyone else was in bed, so if you notice anything funky, let me know.

herb_fargus · 18 Aug 2016, 06:08

@mattrixk aww I didn't know other people used my portable es builds! I sorta did an update but retroarch got too fancy for my old computer and brokeded so I need to fix that before I can test it thoroughly enough to upload new binaries.

mattrixk · 18 Aug 2016, 06:17

@herb_fargus said in Tutorial - How to make a theme for Emulationstation and RetroPie:

I didn't know other people used my portable es builds

Yahuh. When I first started I learned from Rookervik that you could load ES on a Windows computer, so I did some googling. I found the GitHub for ES, but it talked about having to compile it and a bunch of other stuff I didn't understand, so I looked for some videos of how to do it and came across one of yours. That video had a link to another video for a portable version where everything was done for me. The clouds parted and bright sunshine fell upon me as the angels sang... or something.

Anyway, thank you so much for it. It's made things so easy.

I actually don't need any of the RetroArch stuff, as I use fake roms created from renamed .txt files, so I can't play them anyway. I'm going to see if ES will still work propery if I remove the 'Systems' folder entirely. It's nearly 900mb of useless data (useless for my purposes anyway), so getting rid of it would be quite helpful.

tekn0 · 6 Sept 2016, 22:09

This is a really great tutorial. Thank you for taking the time to make this.

mattrixk · 6 Sept 2016, 22:23

@tekn0 No worries. I'm glad people have found it useful. I wanted to do something to contribute to this community/project, so I was happy when I found something I could add.

winnetouch · 25 Dec 2016, 13:39

Hy. I tried using your tutorial but I get stuck at the very begining. I create all the folders copy all the images to them and then try to set the background color of the system view. I tried typing the code myself and to directly copy your code. But no matter what I do the theme color won't change. It stays white. I'm using the pi 0/1 build and I'm building it directly over FTP on my PI. Still... This should work. I've even tried using solid black background and it still doesn't work :/.

mattrixk · 26 Dec 2016, 04:19

@winnetouch Without seeing the code there isn't much I can do to help. Can you paste the code into a pastebin dump and give us the link?

winnetouch · 26 Dec 2016, 08:12

@mattrixk I realized what the problem was. I already had roms loaded in to my pi and had to create a folder and theme.xml for every single existing system that displayed, including the retropie folder. Without that the whole theme doesn't work.

Now I'm facing another problem. In the detailed view I don't want certain metadate like to display. I want only the image, game list and game description to display. I tried making the text transparent with this:

<text name="md_lbl_rating, md_lbl_releasedate, md_lbl_developer, md_lbl_publisher, md_lbl_genre, md_lbl_players, md_lbl_lastplayed, md_lbl_playcount">
<color>00000000</color>
<forceUppercase>1</forceUppercase>
<fontPath>./_inc/fonts/Roboto-Medium.ttf</fontPath>
<fontSize>0.04</fontSize>
<size>0.24 0.01</size>
</text>

<text name="md_developer, md_publisher, md_genre, md_players, md_playcount">
<color>00000000</color>
<forceUppercase>0</forceUppercase>
<fontPath>./_inc/fonts/Roboto-Light.ttf</fontPath>
<fontSize>0.04</fontSize>
<size>0.23 0.02</size>
</text>
<datetime name="md_releasedate, md_lastplayed">
<color>00000000</color>
<forceUppercase>0</forceUppercase>
<fontPath>./_inc/fonts/Roboto-Light.ttf</fontPath>
<fontSize>0.04</fontSize>
<size>0.23 0.02</size>
</datetime>

But no matter what I type the text isn't transparent :P

mattrixk · 26 Dec 2016, 09:58

@winnetouch I don't think you can do transparency on text (but don't quote me on that). What you can do is set

<pos>1 1</pos>
<origin>0 0</origin>

and that basically tells the top left of the text to be positioned 100% from the top and 100% from the left, effectively hiding the text under the view-able area.

I think there are other ways to do it, but is all I can think of at the moment. I hope it helps.

winnetouch · 26 Dec 2016, 10:57

Thank you. That was my plan B if transparency wasn't an option :P.

winnetouch · 26 Dec 2016, 11:48

@mattrixk said in Tutorial - How to make a theme for Emulationstation and RetroPie:

@winnetouch I don't think you can do transparency on text (but don't quote me on that). What you can do is set
<pos>1 1</pos>
<origin>0 0</origin>
and that basically tells the top left of the text to be positioned 100% from the top and 100% from the left, effectively hiding the text under the view-able area.

I think there are other ways to do it, but is all I can think of at the moment. I hope it helps.

Wel... Tried it... Doesn't work. Or maybe i put the code in the wrong place but adding that to any of the <text></text> lines crashes the template.

mattrixk · 26 Dec 2016, 22:42

@winnetouch Sorry, my bad. I just had a look at the ES Themes.md documentation for the <text> element. The <pos> will work, but <text> doesn't accept the <origin> element. That is what is breaking your theme.

(it's been a while since I've gone through the docs)

bumber · 13 Feb 2017, 07:00

Hey. I'm going through the tutorial right now, but I'm stuck at the beginning. No matter what I do, the background color refuses to change.
I tried what @winnetouch did and made sure I had the theme.xml in each system folder, but still nothing.
Here's what my code looks like: http://pastebin.com/DA52rHRH

EDIT: If it's any help, I'm using the portable ES build on Windows. I'm running it from a USB stick.

bumber · 13 Feb 2017, 08:13

@bumber I figured it out. There was a single extra slash in the closing tag for the theme.xml in each folder... Man, I'm bad at paying attention to details like that.

mattrixk · 13 Feb 2017, 10:17

@bumber I'm glad you figured it out. I'll quite often miss a semi-colon or something and wonder why my code won't work. Sorry I didn't help earlier. I read your post as I was about to leave work. I had a quick glance over your code but nothing jumped out at me. I was going to have a proper look when I had the chance, but it appears you've beaten me to it. Good job.

TCMOrangeJoe · 30 Mar 2017, 19:58

@mattrixk
Hey there, i'm trying to create a rick and morty based theme for a console that i'm building. I'm usually pretty goo at coding when it comes to following simple instructions like this, but i seem to be having some trouble.
I've followed the tut all the way to the part where it's time to start adding pictures and color, so right now it's at the point where everything is in plain font and white background. I've started the coding, but when i checked if it was working, nothing was loading. the theme name changed and i can switch back and forth from it to other themes, but it won't let me call any images. I'm doing this on the raspberry pi 3 b, so i changed the filepaths accordingly. nothing seems to work for me. Is there something really simple that I'm possibly missing?