Fix carousel logo overlap by ensuring center logo renders last

[Renetrox]

This patch fixes a long-standing visual issue in the system carousel where the side logos could overlap the center logo when using large logoScale values or wide system logos (common in modern themes).

The update introduces a draw-order correction:

• Collects all logos before rendering
• Sorts by abs(distance from center)
• Draws farthest logos first and the center logo last

This guarantees that the center logo always appears visually on top of the side logos without modifying their size, spacing, alignment, or theme behavior.

The change is fully backward compatible:

• Does NOT alter theme XML attributes
• Does NOT change default carousel layout
• Does NOT modify spacing, scaling, or logo alignment
• Only fixes z-order (render order) in all horizontal and vertical modes

This aligns EmulationStation’s behavior with Batocera/ES-DE visual standards and corrects a noticeable rendering bug without affecting any existing theme.

[joolswills]

Thank you.

The commit looks to have some unrelated cosmetic changes. These would be best done in a separate commit if they are consistent with the rest of the code base.

[cmitu]

This patch fixes a long-standing visual issue in the system carousel where the side logos could overlap the center logo when using large logoScale values or wide system logos (common in modern themes).

Can you give an example of how this bug can be triggered/reproduced ? Also, as @joolswills said, leave aside any cosmetic changes to the code so the modifications can be better seen/reviewed.

[Renetrox]

error:
fix:

[cmitu]

Hm, this looks like a theme error, where the selected logo is assumed to be drawn on-top, thus obscuring everything behind. Which theme is this ?

[Renetrox]

I don't think so. I reported this a long time ago on the RetroPie forum asking for help to fix it. I'll continue working on whatever I find necessary. I want RetroPie to have its own PlayStation X version, the Batocera theme. https://github.com/Renetrox/Pi-Station-X

[cmitu]

I'm trying to test the issue, but setting the theme (https://github.com/Renetrox/Pi-Station-X) in ES's current version doesn't shown any images displayed - neither in the gamelist, nor in the system list. The gamelist shows the entries in the folder, but there are no images shown - neither from the artwork nor from the theme itself. ES version is shown as EmulationStation - v2.12.0rp-dev.
Are there any additional steps to install the theme, other than cloning it in the ES's themes folder ?

[Renetrox]

One more detail that may help:

The reason you don’t see the overlap issue right now is because my theme is temporarily using this carousel configuration:

10

By limiting the carousel to only 10 visible logos, the side logos stay far enough away from the center, so the problem never appears.
However, the real PlayStation-X style layout (as in Batocera) needs 12–15 visible logos and a larger logoScale.
When I increase maxLogoCount or remove it, the bug becomes immediately visible:
the side logos get close to the middle and render on top of the center logo.

The fix in PR #901 specifically solves that by rendering the center logo last.

Also, one important note for testing the theme:
Pi-Station-X uses many high-resolution assets, so EmulationStation must have the VRAM / Image Cache setting increased to 300 MB or more, otherwise the theme fails to load images (system logos, backgrounds, gamelist art, etc.), and everything appears blank.

With the correct folder name and VRAM set to 300 MB, the theme loads normally and the carousel overlap can be reproduced when maxLogoCount is raised.

Thanks again for looking into this!

[Renetrox]

One last thing that may help clarify the context:

With the author’s permission, I am creating a new theme from scratch inspired by Batocera’s PlayStation-X theme.
Here is an example of how it looks so far — this is the visual style I am trying to achieve on RetroPie:

To reach this layout, the theme needs:

large logoScale values,

tight carousel spacing,

and 12–15 visible logos in the system carousel (just like PlayStation-X).

Because of that, the draw-order issue becomes very noticeable:
when I increase the number of visible logos, the side logos move close to the center and start overlapping the central logo, covering it.
This is exactly what PR #901 fixes by drawing the center logo last.

Right now, the only reason the bug does not appear in my current theme setup is because I temporarily use:

10

This artificially prevents the side logos from getting close enough to the center to cause the overlap.
But once I raise that limit (which is required for the correct PlayStation-X layout), the issue becomes immediately visible.

Also, for testing the theme properly:
Pi-Station-X uses many HD assets, so EmulationStation must have the VRAM / Image Cache increased to 300 MB or more, otherwise images fail to load and the UI appears blank.

With VRAM set to 300 MB and maxLogoCount increased, the overlap becomes fully reproducible.

Thanks again for taking the time to look at this.

[cmitu]

I increased the maximum VRAM allocated and now the systems logos are showing ok, but the theme I get is not matching the theme in your screenshots (original size is 1080p - 1920x1080):

...
Right now, the only reason the bug does not appear in my current theme setup is because I temporarily use:

10

I'm not sure what how this parameter is set - is it some source modification you added thus triggering the bug ? I'm confused when you say

the bug does not appear in my current theme setup

but at the same time you said the bug occurs just in your theme ?

[Renetrox]

You are using the ps3 template, you must switch to dynamic in pistration-menu or manually from the folder

[cmitu]

.. you must switch to dynamic in pistration-menu or manually from the folder

Ok, what do I need to modify and which modifications I need to make in order to get the same image as yours ?

[Renetrox]

“The theme already includes a script to change the appearance without editing EmulationStation manually.
Inside the theme folder you will find a layout directory, and inside it are the different templates.
If you open layout/dinamic/ you will see two files: theme.xml and swatch.xml.
What the script does is simply copy these two files to the main theme directory, replacing the currently active template.
This is how you switch between layouts (dynamic, ps3, gow, etc.) without editing anything by hand.”

[Renetrox]

“If you install it correctly using the instructions with
git clone https://github.com/Renetrox/ps4-inspired-themes-by-renetrox.git
the script is automatically copied into the RetroPie menu inside EmulationStation.
So you don’t need to move anything manually — the script will appear in the RetroPie menu and you can change the layouts from there.”

[cmitu]

Please let me know how I can do that manually ? I'm not fluent in Spanish and the scripts are all in Spanish.

[Renetrox]

The layout you need is inside the layout/dinamic folder.
Just copy theme.xml and Swatch.xml from layout/dinamic/ into the main Pi-Station-X folder, and EmulationStation will use that layout.

[Renetrox]

Anyway, I have just updated my repository with the version that includes the issue.
So even if you were unable to locate the folder before, the current version of the repo already contains the exact bug I’m referring to.

[Renetrox]

There isn’t any other theme with the same level of customization as mine, because I specifically replicated view-options and avatar-selection features using dialog-based scripts.
It’s designed to recreate something very close to Batocera’s user experience inside RetroPie, while still respecting RetroPie’s limitations and differences.

[cmitu]

Anyway, I have just updated my repository with the version that includes the issue.

Thanks, I'll re-clone the theme then and see how it looks.

[cmitu]

OK, so after cloning the re-configured theme I'm able to see the issue. The PR proposed does indeed solve the z-index fighting issue.

However, the PR it's still just a hack that relies on the drawing order to fix logos overlap.
The proper fix IMO would be to either:

• give the current selected system logo, in the carousel, the ability to have a different zIndex, just like logoScale scales it. This would involve coding, but would help the theme authors to make it explicit in their theme that the current system logo should be overlayed over the neighbouring logos.
• modify the theme's carousel view to include an extra image with ${system.name}.svg and overlay it ontop of the carousel_deco decoration that highights the current system. This shouldn't need any code changes, just modifying the theme.

We could apply the PR's changes if - indeed - it's just a drawing change, but it's a bit difficult to review it with all the unrelated changes that are included.

[Renetrox]

Thanks for taking the time to clone the re-configured theme and confirm both the issue and that the proposed change does fix the z-index fighting.

I understand your concern about the current PR being a hack that relies on drawing order. From a theme author’s perspective, the core limitation is exactly what you mentioned: the selected system logo in the carousel cannot have its own render priority (zIndex) that is different from the neighbouring logos. Because of that, themes that try to reproduce PlayStation-X / Batocera-style carousels end up with unwanted overlap unless something changes in the engine.

Regarding your suggestions:

1. Giving the currently selected system logo its own zIndex (similar to how logoScale works) would indeed be the ideal, clean solution. If this type of API change is acceptable for EmulationStation, I would be happy to rework the patch in that direction (for example by introducing a separate selected-logo zIndex or a similar property in the carousel config).

2. Adding an extra image with ${system.name}.svg on top of the carousel decoration can help in simpler layouts, but in this particular PlayStation-X-inspired theme the system logos are tightly integrated into the carousel itself. Duplicating each logo as an overlay asset would make the theme harder to maintain and still wouldn’t address the fact that the engine doesn’t let the central logo have its own layering/priority.

You are also right about the PR containing unrelated changes from my local experiments – that makes it harder to review. I can clean this up so that the PR only contains the minimal drawing-order change, or alternatively close this PR and open a new one focused on the “proper” fix (giving the selected carousel logo an explicit zIndex as you suggested).

Please let me know which direction would better match the project’s goals and review expectations, and I’ll adjust the patch accordingly.

[pjft]

@cmitu tell me more about option 1.

Something like logoScale, say:

* `logozIndex` - type: INTEGER.
  	- Selected logo's z-index is incremented by this amount vs the default
  	- Default is 0

?

[cmitu]

Something like logoScale, say:
...

Yes, something like that, though the default - for carousel - is 40 (see https://github.com/RetroPie/EmulationStation/blob/master/THEMES.md#element-rendering-order-with-z-index).

[cmitu]

@Renetrox I'd feel more confortable if you wouldn't generate your replies with an LLM/AI tool. While your English may not be great or you may not be confident enough to use it, I'd appreciate if you'd make the effort to use your own words and not make us feel like we're talking with an AI directly.

Thank you.

[pjft]

Something like logoScale, say:
...

Yes, something like that, though the default - for carousel - is 40 (see https://github.com/RetroPie/EmulationStation/blob/master/THEMES.md#element-rendering-order-with-z-index).

Correct. My proposal was an addition (or subtraction) to the default 40. I think some zIndex values are set in code, and I'm not sure having to expose that complexity of knowing what zIndex each element has by default to the theme developer would be the best, though I'm open to either as an option.

In my example, the logo formula would be defaultzIndex + logozIndex (40 + 0, in this case, or 40 + value).

[cmitu]

In my example, the logo formula would be defaultzIndex + logozIndex (40 + 0, in this case, or 40 + ).

I think that would work too, yes.

[Renetrox]

Hi, I understand your concern.
My English is limited and sometimes it’s hard for me to express technical things clearly, so I try to be as accurate as possible.
I’ll make the effort to write more with my own words.

Also, I accidentally closed the conversation earlier — I was reading on my phone and I’m a bit clumsy with it.
Thanks for your patience and for letting me know.

[Renetrox]

Also, I’ve decided to continue with my own personal fork, because I’d like to experiment with new theme features and localization options. I know it may not match the main goals of the official project, so I’ll follow my own path for those ideas.

Thanks again!

[pjft]

Thanks for the detail @Renetrox .

Are you up to implementing the change proposed by @cmitu ?

We're happy to take on contributions, and the goals of the project are very accommodating if one wants to contribute and put in the effort.

There is a lot of code architecture constraints that make it work this way, but if a solution can be created that improves things in a sound manner, we're happy to review it and consider it.

Let us know, and whatever you choose, good luck with your developments!

[Renetrox]

Thanks for the detail @Renetrox .

Are you up to implementing the change proposed by @cmitu ?

We're happy to take on contributions, and the goals of the project are very accommodating if one wants to contribute and put in the effort.

There is a lot of code architecture constraints that make it work this way, but if a solution can be created that improves things in a sound manner, we're happy to review it and consider it.

Let us know, and whatever you choose, good luck with your developments!

I explored a possible solution by introducing new theme properties (centerLogoPos, centerLogoOffsetY, scrollSound, etc.) handled directly in SystemView and ThemeData. It works well for my goals, but I’m not sure if this approach aligns with the architectural vision of the main project.

I’d be happy to show the concept, but it's more experimental and theme-oriented than what might be ideal for the core codebase

[Renetrox]

[Renetrox]

I’m not a developer or computer scientist — I actually know very little about programming. Everything I’ve learned has been slowly, by trying, reading, and experimenting over the years.
I really enjoy RetroPie, and lately it has been a big source of motivation and distraction for me (I lost my father three months ago).

What I’ve been able to achieve is thanks to a mix of persistence, help from @pajarorrojo (original author of the theme I’m adapting), and more recently, AI tools that help me polish and improve ideas.

My fork is more experimental and focused on expanding theme capabilities (sounds, carousel options, localization, etc.), which may not fully align with the main goals of the project — but it's something I truly enjoy working on.

I appreciate your openness to contributions. If at some point my work becomes stable, clean, and useful for the main project, I’d be happy to share it back.

Thank you again.

[Renetrox]

Hello again, everyone.

I’ve been experimenting with this PR and wanted to share some progress.
I finally managed to compile a working build in RetroPie with partial support for some Batocera carousel behaviors — without breaking the original RetroPie structure.

Specifically, I confirmed that the following theme options are working correctly in my fork:

✔️ (top / bottom / left / right / center)
✔️ minLogoOpacity and scaledLogoSpacing
✔️ Proper maxLogoCount handling without stretching the center logo
✔️ Side logos keep their proportions — only the center logo scales

Here is the result running directly in RetroPie:

I think this might help improve this PR or at least confirm that some of these features are viable for RetroPie without introducing Batocera’s full CarouselComponent.

If it’s useful, I can share the specific changes or help adapt them to this PR.

Thanks, and great work so far!

[cmitu]

It seems you keep refactoring and adding features, but this wouldn't be accepted all at once in the same PR - you already have merge conflicts due to the changes involved. As specified in the beginning, don't re-format/refactor existing code, just add the needed changes.

Since this PR is about improving the system carousel's logo alignment, you can either:

• leave in this PR just the changes needed for it - would that be Proper maxLogoCount handling without stretching the center logo
• close this PR and create a branch separately with just the changes needed for the alignment, then do a PR from that branch.

EDIT: to make it easier to add features, it's usually best to have separate git branches for the feature you want to add and keep the master separate and sync-ed with upstream. Adding changes to the master branch will make it diverge from upstream and make it difficult to incorporate the changes added there.

[Renetrox]

I'm happy if my contribution can be useful.
It's my first time participating like this, so I will try to follow your recommendations to improve the publication.
Thank you for your patience and guidance

[pjft]

By all means. Thank you for your perseverance, and for wanting to improve EmulationStation!

Thanks @cmitu as well for all the guidance here.

[Renetrox]

Thanks for the support, I am having problems with the computer which has not allowed me to move forward, I will try to fix it or feel free to integrate and evaluate what I shared if I take too long!

[pjft]

No worries. Take your time.