SNES mini theme

[greekmanx]

i really like the design and colors of this theme I thought Nes-Mini was awesome and you one uped yourself man good job now I just wanna see the us version preview and I will be happy no rush just excited

[lilbud]

@ruckage

<text name = "md_lbl_players">
      <path>./../assets/player_1.png</path
</text>

[ruckage]

@lilbud
No, wouldn't work - try again ;). Firstly that's for a label - it wouldn't change based on the metadata. Secondly you can only use text for labels as far as i'm aware (hence the text tag).

[lilbud]

@ruckage said in SNES mini theme:

No, wouldn't work - try again

nO, wOuLdN't WoRk - TrY aGaIn

[ruckage]

@greekmanx said in SNES mini theme:

i really like the design and colors of this theme I thought Nes-Mini was awesome and you one uped yourself man good job now I just wanna see the us version preview and I will be happy no rush just excited

Thanks. The US version will be coming soon, i've already drawn the borders. It will actually all be the same theme, there will an option file so it can be switched between the different versions, colours, etc.

[greekmanx]

sweet thanks ruckage and I am excited to install this on my pi your nes mini is one of the few new themes that is super smooth with no lag on the pi and I hope this is the same. Also are you working on collections for this theme to at least my collections not individual ones so much a my collections menu like some themes I mean

[mattrixk]

@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.

[jdrassa]

@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.

[adu]

Trully gorgeous, can't wait to use it !!!
Do you plan to do others systems, like Atari ST/Amiga please ? :)

[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.