SNES mini theme

[ruckage]

@jdrassa said in SNES mini theme:

@ruckage Is it a a custom font that is black that is overlaying/hiding portions of an underlying image? For some reason the 1p image isn't loading for me so I can't really compare them.

You're so close with your guess :) .

So it's kind of the reverse of what you said.
The reason for having the font at the back is that when you scroll through the gamelist quickly metadata isn't drawn to the screen. If I did it with a font on top obscuring an image below then the icon image would be completely revealed when fast scrolling ruining the effect.
With the font behind, the icons just disappear when fast scrolling.

The downside of having the font behind is that you can't have full colour icons, just different shades of the same colour.

@jdrassa On a related note I've noticed some inconsistencies between the windows version of ES and the Pi version. Obviously placement with this technique is critical but for some reason the font is drawn in a slightly different Y position on each platform - the Pi draws the font around 8 pixel lower than the Windows version despite the coordinates being identical.

My guess is that it's probably caused by the font I've made as I haven't noticed it when using standard fonts but I can't think why it would behave differently on each platform as the code is the same isn't it?

[ruckage]

@mattrixk said in SNES mini theme:

@ruckage This looks really cool. I have to be honest, I'm most intrigued by how you've created the console artwork in the backgrounds. Did you take existing photos of the consoles and then run them through some filters (in photoshop or whatever)? Or did you actually draw each console individually?

I tried doing it the first way for my Indent theme, but couldn't get it to look how I wanted, so I ended up doing it the second way. It took a long time and I wasn't fully satisfied with the outcome.

Your console images look great - must have taken ages. I hadn't seen that theme before otherwise I would have been very tempted to steal you images ;) - you did a great job. What software did you use to draw them?

Mine are made using filters in photoshop with some editing to get the effect right - it took a lot of trial and error. I did consider drawing them myself but thought I'd see what I could achieve using filters and I was happy with the result.

The main filter I used was the 'glowing edges' filter, you need high resolution images without heavy shadows for best effect and any shadows under the consoles need to be edited out before using the filter. The results can be a bit noisy so I then used surface blur and levels adjustments to clean up some of the unwanted detail.

The results aren't perfect and it works better on some images than others but I think they work perfectly for the tron effect I was after. The final images have a glow effect added and are downscaled to make them pixelated for this theme.
I have high res versions of all the backgrounds though as it occurred to me that an actual Tron theme would be rather cool to make in the future.

Here's a before and after picture of the wonderswan - I like how you can still tell that the console shell was transparent in this one - almost looks like an xray.

For your theme I think you made the best choice to draw the consoles by hand - I don't think the results from my technique are clean enough for the results you were after.

[jdrassa]

@ruckage I am away from my main computer, but I will take a look at the font placement under windows when I get back. While the code is the same, its possible there is platform specific logic in the font library that ES uses.

[felleg]

My man @ruckage crushing it as always

[mattrixk]

@ruckage said in SNES mini theme:

Your console images look great - must have taken ages.

Aww shucks, you're going to make me blush. I could get 2 or 3 done a day, during my lunch break at work. I think I ended up making 50 or so? I can't really remember. It took me months from start to finish.

What software did you use to draw them?

Photoshop. I loaded the console image, then traced all the main lines with the pen tool, creating paths. I then stroked the paths with a black 10-15px hard brush to get the outlines. Lastly was making a letterpress style that worked well at different sizes, and applying that to the outlines.

The main filter I used was the 'glowing edges' filter, you need high resolution images without heavy shadows for best effect and any shadows under the consoles need to be edited out before using the filter. The results can be a bit noisy so I then used surface blur and levels adjustments to clean up some of the unwanted detail.

I can see the 'glowing edges' filter on that wonderswan image (which looks amazing by the way). Maybe one reason the filters never worked for me was not removing any shadows. I tried using levels and posterisation to get just flat colours and solid outlines, but I could never get it to work. It just became kind of messy.

I don't think the results from my technique are clean enough for the results you were after.

I think you're right. The glow looks great on yours, but I needed a much more solid outline for it to work properly on mine.

[Hex]

@ruckage The resolution for composite displays is fixed. The display IC scales it to whatever is necessary for the display.

---

@cyperghost said in SNES mini theme:

But @hex argues that your mini NES/SNES/Famicom aren't suitable for 3,5" screens so I suggest it's 320x240 or 640x480.
I have really no clue why.... so let our developer write a comment about ;)

The Framebuffer resolutions are for console not GUI. To verify this you can try --resolution W H parameters to ES executable manually and you will get the UI resolution. That should be your theme resolution.

PAL 720x576
NTSC 720x480

[SystemLogoffSA]

I may be yelled at for this, but in my opinion the backgrounds are a little too busy. They draw the eye away from the foreground.

I love your work, but I had to bring this up for you to think about.

Thank you.

[ruckage]

@systemlogoffsa said in SNES mini theme:

I may be yelled at for this, but in my opinion the backgrounds are a little too busy. They draw the eye away from the foreground.

I love your work, but I had to bring this up for you to think about.

Thank you.

There will be an alternate set of these backgrounds which are blurred which may suit you more and also the option of just solid colour backgrounds. There will also be lots of colour combinations so even the non blurred versions can have less contrast.

[ruckage]

@hex said in SNES mini theme:

@ruckage The resolution for composite displays is fixed. The display IC scales it to whatever is necessary for the display.

The Framebuffer resolutions are for console not GUI. To verify this you can try --resolution W H parameters to ES executable manually and you will get the UI resolution. That should be your theme resolution.

PAL 720x576
NTSC 720x480

Thanks, that explains it. I didn't realise @cyperghost display was composite (I should have paid closer attention to the link he provided). In that case @cyperghost try the ntsc option in the layout - if that doesn't work then you'll need to wait until I add a pal option.

[cyperghost]

@ruckage Thx .... I will try asap - EDIT: ntsc.xml works!
@hex Thx for your comment about resolution that clarifies a lot!

[SystemLogoffSA]

@ruckage said in SNES mini theme:

@systemlogoffsa said in SNES mini theme:

I may be yelled at for this, but in my opinion the backgrounds are a little too busy. They draw the eye away from the foreground.

I love your work, but I had to bring this up for you to think about.

Thank you.

There will be an alternate set of these backgrounds which are blurred which may suit you more and also the option of just solid colour backgrounds. There will also be lots of colour combinations so even the non blurred versions can have less contrast.

Oh, that's great. Thank you.

[Hex]

@cyperghost If you try PAL does the display quality increase on LCD? I have noted a significant improvement. Can you confirm?

[cyperghost]

@hex I already use PAL mode... my settings are listed here
I can try to alter sdtv settings and will report, okay?

EDIT:
I tested with NTSC (setted sdtv_mode=0) ... yes the Background in Streets of Rage if you select Player 1, Player 2, Options, Battle is indeed a little bit better with sdtv_mode=2

I think those small screens are sensitive to electrical disturbance, as PAL got the lower frequency the system seems to bit a more stabile/reliable ;)

[Omnija]

This post is deleted!

[ruckage]

@hex
The quality in pal would probably look better as it's slightly higher resolution - the downside is obviously the lower framerate of pal. There is a pal60 variant as well but i'm not sure if raspberry pi supports that.

[ruckage]

@jdrassa said in SNES mini theme:

@ruckage I am away from my main computer, but I will take a look at the font placement under windows when I get back. While the code is the same, its possible there is platform specific logic in the font library that ES uses.

Hi @jdrassa , did you have a chance to look into this for me? I can work around it and just make sure it works correctly on the pi but it would be nice to understand why there is a difference. Thanks.

[Hex]

Well those who have grown using PAL in their childhood are used to that speed. Better quality on the small screen improves the experience a lot

[ruckage]

@hex
I guess it's personal choice, I also grew up with pal and I wouldn't want to go back to it - everything just feels slow as most games weren't programmed to account for the difference in framerates. I was really happy once TVs and games began to support 60hz.

I mention PAL60 as that has the best of both worlds - the higher resolution of pal combined with 60fps.

Edit: Thinking about I'm pretty sure pal60 wouldn't work with composite connection anyway.

[jdrassa]

@ruckage said in SNES mini theme:

Hi @jdrassa , did you have a chance to look into this for me? I can work around it and just make sure it works correctly on the pi but it would be nice to understand why there is a difference. Thanks.

I haven't had a chance, but hopefully I should find some time soon. Anyway you can share the theme or at least just the font and overlay image? My email is in my profile if you don't want to post a public link.

[ruckage]

@jdrassa
Thanks, I made a simple test theme that shows the difference clearly, I've uploaded it to mega: Download

The test theme has 2 red boxes with the font displayed in each box. On Windows the left box and font line up exactly and on RPI the right box and font lines up exactly. It looks to be an 8 pixel difference in y position for a 1920x1080 display.

Thanks for having a look at this for me, it's not particularly urgent as I can just compensate for it but it would be nice to figure out what causes the difference.