z-index support for themes

alphatoanant

@jdrassa no apology needed and no worries. I have been meaning to get a build flow setup and your worked helped give me a kickstart =)

Your approach on the render stack order makes sense to me. I feel good about it as a path forward from my end and it seems like a nice baseline. The default z-index values you linked to are super helpful so thank you for that as well.

@duiz, jdrassa just uploaded a build here: https://github.com/jrassa/EmulationStation/releases/tag/2.1.6-152-win
If you have any questions on z-index setup from there in the theme I would be glad to help based on what I have seen

@mattrixk, I tried adding <zIndez> to the normal flow of the document just to see what it would do and it breaks rendering + throws an unknown property error in versions of ES where it's not supported yet.

jdrassa

@mattrixk unfortunately <zIndex> elements will break any older versions of ES, so you will need to use <feature> to maintain compatibility. Depending on what one is trying to do with the z-index values, backward compatibility may not make sense in which case you could use them in the normal flow.

The <feature> elements are kind of building up at this point. We may need to come up with a community recommendation on how what is a reasonable time-frame on how long use a particular feature value. On the maybe plus side, the theme variables feature I have been working on won't be able to support backwards compatibility so it could serve as a reset point for theme makers to integrate these newer features directly into the theme.

mattrixk

@jdrassa I'm really looking forward to your theme variables mod, that should really make things easier/cut down on the amount of needed code.

I have a theme I've been working on for ages, but the art is nearly done, so I'm focusing on that until it's done. After that I can get back into looking at the new ES builds (I still have to play with @Zigurana's kid-friendly Windows build that I haven't had a chance to look at yet. Sorry Zig).

SuperSirLink

@jdrassa This is very cool! Thanks for doing this! Looking forward to playing with this...

SuperSirLink

I have only updated ES from source using the retro-pie setup script, what is the best way to pull this version down on top of an install that was done using the retro-pie setup script?

duiz

@jdrassa I noticed that the Herdinger branch of ES has a hide game feature. Would it be possible to implement this into your z index branch release?

https://github.com/Herdinger/EmulationStation/commit/196d9175c38da86f778e6a1af4fc8abb09270eea

SuperSirLink

what path do I need to be in when pulling this down from GitHub to overwrite the build version on a RetroPie script install?

jdrassa

@SuperSirLink Sorry for the delayed response. I have been out of town and away from my computer. I am not sure the exact path, but you can add this script to RetroPie-Setup/scriptmodules/supplementary and then you will be able to install it using RetroPie-Setup. It should appear in the experimental section.

jdrassa

@duiz said in z-index support for themes:

@jdrassa I noticed that the Herdinger branch of ES has a hide game feature. Would it be possible to implement this into your z index branch release?

https://github.com/Herdinger/EmulationStation/commit/196d9175c38da86f778e6a1af4fc8abb09270eea

This branch is only intended for testing the z-index feature before it is merged into the RetroPie repository. I believe @Zigurana is planning on implementing hidden games here.

Syhles

@jdrassa
Saw your PR on the Retropie GitHub when I woke up, looking forward to it going through. I have been following this thread since it started.

Quick question slightly unrelated to this, after this PR goes through are you going back to working on variable support or something else?

SuperSirLink

@jdrassa said in z-index support for themes:

@SuperSirLink Sorry for the delayed response. I have been out of town and away from my computer. I am not sure the exact path, but you can add this script to RetroPie-Setup/scriptmodules/supplementary and then you will be able to install it using RetroPie-Setup. It should appear in the experimental section.

No worries... Life had pulled me a way too onto other things... Cool, thanks for that! It is installing now, thanks again!

ruckage

@jdrassa
Only just discovered this thread and first of all I have to say this is a great addition, zdepth is something that I've wanted in ES since I first began using it - it opens up so many new possibilities. Thank you for all you work.

Now I do have a problem and haven't seen it mentioned here so thought I would ask. Currently I'm only experimenting with this on Windows but I'm getting a bug where if you fast scroll through the gamelist in detailed view then dark boxes appear on the screen - one covers the description text entirely (though the text can still be seen) and also some random smaller boxes in the gamelist itself. In debug mode a reload fixes it but it then happens again if you fast-scroll.

Not sure if it's a known issue or something specific to the windows build but thought I should mention it.

Syhles

@ruckage
This has been fixed in a update a few days to a week ago on the source build.

Not sure if it made it to the windows build yet, they've been rapid firing updates for about a week.

Here's the GitHub
https://github.com/RetroPie/EmulationStation/pulls

ruckage

@Syhles
Thanks, that's good to hear. I just downloaded the Windows build today so I guess it's not up to date but as long as I know it's fixed on retropie then it's not a problem.

alphatoanant

Hi @jdrassa I found time to work on the other use case I mentioned above and have run into a snag.

It may not be z-index related. That said it does seem to be related to layering so I was wondering if you could take a look and help point me in the right direction.

Some background:

I am working on a theme for small screens (320x240 res) and had an idea to build a theme that looks like this:
alt text

See the image on the right of the view?
The idea there is to allow a user to scrape screenshots for each game normally without any additional cropping

In order to achieve that look the md_image essentially hangs off the right side of the view like this:
alt text
(green is what is visible in the view / red is what is positioned to be hidden outside)

The snag:

In testing, I have found cases where the image from one view will kind of "pop" into place on the view next to it. And when that happens the image sits on top of the gamelist itself.

It's much easier to see in video form so I recorded this to walk through it:

I have tried a few different things (reordering my elements, working with different z-index values) but unfortunately haven't be able to find something that works consistently.

Of note is I haven't found this behavior when showing video in place of the image.

I uploaded a version of the theme here if it helps to see the structure:
https://github.com/anthonycaccese/es-theme-crt-tft

Any help or guidance you have would be awesome. I also completely understand if this is out of scope and better asked somewhere else. Please let me know either way and thank you for your help.

ruckage

@alphatoanant
Hi,

Do you specifically want the left side of the screenshot displayed? If not you could use the new z indexing to draw the scraped image filling the entire screen and then draw everything else on top of that- no overhang needed.

jdrassa

@alphatoanant I will look into it. I have a few ideas on how to fix it.

alphatoanant

Thank you @jdrassa, if there is any other info I can help provide don't hesitate to let me know.

@ruckage, thank you for the suggestion! I may take a crack at that (possibly shift the image display to the left side of the view and the gamelist to the right as an alternative). Anecdotally from the set of images I checked most of them just look better shown from the left side of the screenshot =). That said checking some of the resolutions there is, unfortunately, still some chance for overhang into the next view. I am aiming to fill the height of the screen and some systems screenshots sized up to a 240 height extend a bit past 320 width (genesis and gba specifically). More to try - possibly making the image a strict 1x1 size and see if the distortion looks weird. My ideal state would be to see if there is a fix for the above though (it could give us more options for theming)

jdrassa

@alphatoanant This should be fixed if you update EmulationStation.

alphatoanant

@jdrassa thank you! It's working perfectly. Very awesome and much appreciated. Will try to finish up work on the next iteration of the theme by end of weekend. Cheers.