Scanlines on the menu (Emulationstation)

Deniss_K

Re: Shaders on the menu (Emulationstation)?

I found the way how to add the scanlines to carousel and menu:
Find or create scanlines.png with scanlines you like (transparent background).
Place scanlines.png image in jour theme _art folder
Modify theme.xml in theme folder (some themes use additional file, for example comic_book.xml):
In carousel section (just after </carousel>)add text

<image name="scanlines" extra="trye"> 
<path>./_art/scanlines.png</path>
<origin>0 0</origin>
<pos>0 0</pos>
<zIndex>200</zIndex>
</image>

at the very bottom (just before </view> </feature> </theme>) add text

<image name="scanlines_2" extra="trye"> 
<path>./_art/scanlines.png</path>
<origin>0 0</origin>
<pos>0 0</pos>
<zIndex>200</zIndex>
</image>

Restart emulationstation.

In MAIN MENU -> UI SETTINGS ->TRANSITION STYLE I reccomend to choose INSTANT mode, otherwise when switching theme screens, scanlines effect can be applied with micro delay.

If your theme support video previews, in MAIN MENU -> OTHER SETTINGS -> USE OMX PLAYER (HW ACCELERATED) -> OFF

Please note that this scanlines may significantly affect the brightness, I would recommend to change transparency for most scanline pictures available online in Photoshop to 25-50%.

Follow the link to download scanlines 1600x1200 https://github.com/ArcadeAtHomeUK/ArcadeAtHomeUK.github.io

Clyde

Thanks, that's exaxtly what I'm missing in RetroPie for years. I even considered to buy a hardware scanline generator, but I don't want to lose the curved picture in the emulators with @ghogan42's curved zfast shader.

Your solution only fakes a curved screen, but would let me keep the curved shaders in the games. I'll try it out as soon as I have the time.

Deniss_K

Happy to help )
Let me know if you need scanlines.png in specific resolution.
I also can upload more different scanlines with and without screen bezels in 25, 50,75 and 100% transparency if needed.

janderclander14

@Deniss_K Thanks a lot!
I've also wanted to achieve something like this for a long time. I've tried it and it works but the resolution doesn't fit with my screen. May you recreate the overlay for a 1024x768 resolution?
Thanks!

WeirdH

Very cool addition, this! Could it also be used to overlay a smaller version of the scanlines image on the video snaps portion of the screen only?

Deniss_K

@janderclander14 said in Scanlines on the menu (Emulationstation):

@Deniss_K Thanks a lot!
I've also wanted to achieve something like this for a long time. I've tried it and it works but the resolution doesn't fit with my screen. May you recreate the overlay for a 1024x768 resolution?
Thanks!

You wellcome )

crt border NO scanlines 1024x768.png
crt border scanlines 25% 1024x768.png
crt border scanlines 50% 1024x768.png

Deniss_K

@WeirdH said in Scanlines on the menu (Emulationstation):

cool addition, this! Could it also be used to overlay a smaller version of the scanlines image on the video snaps portion of the screen only?

Yes, sure it can.
There is no universal solution, and for every theme image position and size needs to be set up individually (copied from <video name="md_video">).
If you want to add scanlines to video previews only, you can even use the same scanline.png, the row <maxSize>0 0</maxSize> allows to fit it in to video field.

For example, from original theme.xml highlighted rows needs to be copied just at the bottom of <image name="scanlines" extra="trye">

<video name="md_video">
<pos>0.75 0.395</pos>
<origin>0.5 0.5</origin>
<maxSize>0.44 0.42</maxSize>
<delay></delay>
<default></default>
<showSnapshotNoVideo>true</showSnapshotNoVideo>
<showSnapshotDelay>false</showSnapshotDelay>

WeirdH

@Deniss_K Hey, I've been messing around with it and I found that the scanlines png-file only covers the video if I disable OMXplayer. With it enabled, the video covers the png.

janderclander14

@Deniss_K Thanks a lot! Do you know if it is possible to apply the scanlines also to the screensaver of Emulationstation (either screenshots or videos)

Deniss_K

@WeirdH Thank you a lot.
I added It to the first post. I have not even noticed this issue cause was thinking that I am using OMX PLAYER by default..
There was a misunderstanding: my previous post was about adding scanlines to video preview only.

Deniss_K

@janderclander14
This is what I'm looking now. I tried to learn from the great guides provided on this site, but I still have almost zero knowledge in .xml and linux .. Theoretically, somewhere (unfortunately, not in theme.xml) should be a rows of code describing subtitle position and font of subtitle (game name and platform), and all what we need is just add couple of rows there.
It already was discussed In 2017 https://retropie.org.uk/forum/topic/12912/idea-for-video-screensaver-in-emulation-station-overlay-art with no result.
I will be very grateful if someone can help. I just one step away from my dream arcade..

Clyde

@Deniss_K said in Scanlines on the menu (Emulationstation):

Happy to help )
Let me know if you need scanlines.png in specific resolution.

Actually, you incidentally used 1600x1200 for your initial png, which is the native resolution of my arcade cabinet. Additionally, you used Comic Book like I do. 😉

That said, could you make two more versions in 1600x1200, one without the monitor frame and one without the inner (grey) frame? In Comic Book 4:3, the full frame covers too much of the theme in the corners in my opinion.

One curious thing I noticed is that only the Retropie menu has no scanlines. Can you confirm this?

Finally, I second @janderclander14's request for screensaver scanlines. 😇

Thank you again for your work!

Deniss_K

@Clyde Thank you for your feedback!
1600x1200 is the native resolution of my arcade cabinet as well. 😉
Menu, loading screens and video screensavers have no scanlines.
My apologies for quality of scanlines without the inner (grey) frame : this gray shadow is the part of original image I used, and I can not find any image source without this shadow. So I deleted the shadow manually but not pleased with the result.

scanlines 50% 1600x1200.png
scanlines 50% no gray frame.png

Deniss_K

@Clyde To improve the crt effect, and avoid that the frame covers too much of the theme in the corners, theme can be reworked using Distortion Correction filter in Photoshop. The results can be very impresive:

Clyde

@Deniss_K Wow, the reworked theme really looks very impressive!

Thank you for the two new versions. You may think about making a githup repo easy management of multiple versions and also easy download via git clone https://github/username/reponame. 💡

Deniss_K

@Clyde Thank you for the advice. Link to repo added to the first post as well.
https://github.com/ArcadeAtHomeUK/ArcadeAtHomeUK.github.io

Deniss_K

@Clyde I have fully reworked ComicBook_4-3 theme: imitation of CRT curvature and scanlines added (distortion added to all backgrounds; scanlines (on menu and carousel) enabled); optimized for 1600x1200.
I will try to upload it on repo later.

WeirdH

@Deniss_K Hey, little off-topic question, but how do you get the game logo above the video snap? Or is that baked into the comic book theme?

alt text

Clyde

@WeirdH It's part of the theme and is displayed when there's marquee artwork present. See https://retropie.org.uk/docs/Creating-Your-Own-EmulationStation-Theme/#about-emulationstation-views (video view -> md_marquee) for details.

Clyde

@WeirdH For example, look at the file /etc/emulationstation/themes/ComicBook_4-3/arcade/theme.xml. In there, this part places the image from the scraped marquee:

		<image name="md_marquee">
			<pos>0.7 0.086</pos>
			<origin>0.5 0.5</origin>
			<maxSize>0.2 0.1</maxSize>
		</image>

As I understand it, the images' file paths are taken from the <marquee> entries in the system's gamelist.xml.