XCade - Custom Theme

masteryoer

Hello guys!

I am working on my custom console, and thanks to some feedback from @lilbud I have started theming the system. Below is a screenshot of the current look, as well as the github link to it. Right now, only the snes theme is styled, and it still has some work that needs to be done, but I would like your feedback on how it looks so far:

And the git repository:

https://github.com/Ex0r/es-theme-xcade

I am still learning themeing. One thing I can't figure out, is how to tell the system view to use the system logo, but not use it on the games view. I want the games view to look like the screenshot, but the systems view to show the actual game system logo. I also can't get the 'xcade' logo to appear on the front-page, either.

With the addition of the carousel being able to be modified now in the new ES version, that will be implemented after I am finished with the base them.

Feedback is appreciated and thanked!

A Former User

Ooh, this looks pretty good! The metadata text is kinda hard to read, so I would maybe turn up the brightness on that.
Also, a suggestion; instead of putting just the name of the system, you could put the logo as well? Just a thought.
Other than that, it's amazing.

masteryoer

@itsnitro

Since the purpose of the theme is to be used in my custom console, I omitted using the system logo outside of the front system view.

A Former User

Alright.
But is the custom console gonna be a pi inside an xbox?

masteryoer

@itsnitro

Yes sir. Also, I am not sure why the text is so dark. It's white on the theme itself. might be from the screen capture software I used.

I'm also doing custom styling to the ES UI to match as well, but haven't snapped a screenshot of that yet.

A Former User

Huh.

masteryoer

I will attempt to get a better screenshot. You can't see the background of the window, either.

masteryoer

alt text

I uploaded to imgurl, let's see if this helps.

For some reason, random black bars keep showing up on the theme. I think it's related to me being in a virtualbox, as it doesn't do it all the time, and after I reload the theme it goes away for a minute then comes back.

Still working on getting the systems to show up on the front-page, but not the individual game pages, but will take a bit to figure that out.

mattrixk

@masteryoer: To make the System Logo appear, within the System theme.xml files (eg: xcade/snes/theme.xml) put:

<view name="system, basic, detailed">
  <image name="logo">
    <path>./logo.png</path>
  </image>
</view>

This will make the logo appear on all Views. Instead, try:

<view name="system">
  <image name="logo">
    <path>./logo.png</path>
  </image>
</view>
<view name="basic, detailed">
  <image name="logo">
    <path></path>
  </image>
</view>

That should hopefully make the Logo image only show up on the System View, but display the Text Name on the other Views.

To get the "Xcade" logo to appear on the System View, you can add it as an "extra" image in the base xcade.xml like this:

<view name="system">
  <image name="xcade" extra="true">
    <path>./xcade.png</path>
    <pos>? ?</pos>
    <maxSize>? ?</maxSize>
    <origin>? ?</origin>
  </image>
</view>

(and fill in the ? values with your own sizes). This will add the image to the background. If you want the Xcade logo in the carousel, I think you will have to add it to the es_systems.cfg, but that's sort of outside of my knowledge.

masteryoer

@mattrixk

Thank you for the feedback. I will incorporate those changes and see how it looks.

How does the rest of the theme look?

mattrixk

@masteryoer: I like it. The original Xbox was the first console I bought for myself (my last one before it was a MegaDrive, which was a present from my parents), so it has a special place in my nostalgia-pit. I still have it, and it still works. It was actually my first emulator, after I had it modded.

I have a couple of nitpicks though, if you don't mind (and nitpicks are all they are).

I count 4 or 5 different greens on the screen. It could be streamlined down to 2 (or 3 if you really needed to).
There seems to be a lot of empty space around the top, right and bottom of the gamelist (I'm assuming the gamelist will stop as far from the bottom as it starts from the top). I can see this might be to display the cool background (I always loved the Xbox background), but it just seems to make the whole theme a little left-heavy. Obviously, there is only have the one game in there to see, so it will look different with a full list.
It may be the screenshot, but the background looks very dark, and I didn't see the pattern at first. You could pull back the black gradient a little to show more of the pattern.
You could adjust the <pos> of the System Name (in the top right) so there was the same spacing above and below.
I don't remember the Xbox green being quite so bright lime, but again, that could just be the screenshot (and my memory).

Like I said, these I'm just nitpicking here.

masteryoer

@mattrixk

Thanks for the feedback. The green, I would like to move to a more standard color, just haven't gotten around to it yet. I'm not a fan of the dark green, so I was trying to use a brighter, line green color so that it would stand out more. I will change the lime to be a bit darker and see how it looks. As far as the game list, it actually fills most of that right side, just with one game it looks funny. The Retropie page actually looks better as there is more on it, I just didn't include that in a screenshot.

The background is actually pretty bright. It's losing some of its brightness when it's converted to a screenshot. Mostly I think because I am taking a snapshot of the virtual console with ES open on it.

Although it's in the original Xbox case, and I use the original Xbox bootup screen, I wasnt trying to match the original Xbox exactly as I still want it to have the custom feel to it. I'll make the suggested changes and post another screenshot for your feedback.

mattrixk

@masteryoer That's the great thing about making your own theme, is you can make it look how you want it to look.

If you're having troubles with VirtualBox, have you tried using a Windows build of ES to work on your theme? Then you could just print-screen to get screenshots.

masteryoer

@mattrixk

I made some of the proposed changes, but I still cannot get the logo to appear on the front-page.

I used:

<image name="xcade" extra="true">
  <path>./art/xcade-logo.png</path>
  <pos>0.025 0.0775</pos>
  <maxSize>0.55 0.1</maxSize>
  <origin>0 0.5</origin>
</image>

on my xcade.xml file, and in my snes/theme.xml file I have this:

<view name="system">
   <image name="logo">
   <path>./snes.svg</path>
</view>
<view name="basic, detailed">
  <image name="logo">
    <path>./../art/xcade-logo.png</path>
    <pos>0.025 0.0775</pos>
    <maxSize>0.55 0.1</maxSize>
    <origin>0 0.5</origin>
  </image>

This is the code I am using that causes the 'snes' theme to not work. (The main system view background turns white when I select snes, and when I go into snes no theme is applied.

I also noticed there's a delay between systems in which the background disappears and its just all black. Is there a way the image background I have selected always show up?

Edit: I made my original theme in the windows build, but it didn't carry over to the retropie 4.1 version cleanly. I also can't take screenshots using that, either. I use an app for work called lightshot, and I can't capture a full-screen window with it.

mattrixk

@masteryoer The first thing I see is, in the second block you are missing the closing </image> tag in the System View. This could be what's making the theme white-screen.

Are you trying to use the xcade logo instead of the snes logo on the Basic and Details pages? If you manage to do this, then you won't have the System Name text in the top right, as it only displays that text if there is nothing in the <image name="logo"> element.

You should have the xcade logo as a separate element on the Basic and Details pages.

I just remembered you have it up on github. I'll have a look and get back to you (I'm at work, so it may be a little while).

Edited because I hit submit too early

masteryoer

@mattrixk

Yes, that fixed the snes/theme.xml file from not loading up, however the logo still doesn't appear on the systems page like it should.

Yes, on the main front-page (system) page, I only want the xcade logo to appear in the top left, like the screenshot shows for the detailed game view.

On the individual system pages (snes for example), I want it to look exactly like it does now.

The ONLY place I want the system logo to show up (snes, nes, etc), is in the carousel on the main page. The rest of the theme should use the xcade logo like in the screenshot.

Edit: Because I submitted too early, too.

masteryoer

@mattrixk

I appreciate it. I pushed up the last batch of changes I made for the night, so no rush getting to looking at it. I'll continue work on it tomorrow.

I moved all systems that currently haven't had any changes made to them into a 'not-done-yet' sub directory, so you can easily find what i've done.

mattrixk

@masteryoer Okay, so you just need to move your <image name="xcade" extra="true"> down below the <image name="header" extra="true">. The XML renders the "extra" elements from the top down, so it's currently rendering your Xcade logo first, then rendering the fullscreen background over it, then the header over that. You don't need to make any changes to your theme.xmls, just your xcade.xml.

(I didn't realise you were just using basic text to create the System Names in the top-right, so they are fine as they are).

Hopefully that sorts most of your problems out. I'll have a look at the black boxes over the gamelist when I get a chance, but I think it may be part of the background image you are using.

masteryoer

Yeah, I am not sure about the black boxes. they look like sensor bars and sometimes they come in at a solid black, sometimes they are almost transparent. It only seemed to do it on my virtualbox install though, so I am not sure if it's an actual issue or not (If I reloaded the theme, they would go away).

They aren't in the background image.

masteryoer

That fixed it. I appreciate the help!

Here's a sample of the UI changes I am making:

alt text