XCade - Custom Theme

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

mattrixk

@masteryoer I'm using a windows build and I saw the boxes too (I downloaded your theme from git and installed it). It might be an artifact from one of the other systems that hasn't been styled yet.

Cool UI. Did you have to dig into the guts and recompile ES to do that? (Imagine if we could style the UI from the theme, how cool would that be?)

masteryoer

@mattrixk Yes, I had to dig into the source. Somebody was working on getting the UI pulled out and able to be themed. There is actually some code already in the source to do that, but Aloshi compiled the resources into the source, so I am not sure how to tell the system to use a path, and not the compiled source.

(There's a check to see if the resources are compiled into the system to use them, and if not look in (path:) for them). I am not completely familiar with the source code though to be able to modify it enough to enable that functionality.

You can actually find the source for it here:

https://github.com/Ex0r/EmulationStation/tree/UI_modes_xcade If you want to check it out.