Duimon - HSM Mega Bezel Graphics and Presets - Feedback and Updates

Duimon · 16 April 2021 23:14

Hey everybody!

I have my first PVM for the Advanced presets to show you.

Looky here…

This is the default settings. Notice the red does not quite match the Famicom’s.

With a little bit of Bezel Image Layer HSV.

Scaled.

Night Mode!

Purple for the SNES.

A thin frame. (I may make this the default frame width and bezel color.)

Unsaturated and darker, with no curvature on the sides to make it more legit.

I started with the SONY PVM 20M4E. I added my own touch with the stereo speakers to bring the width in line with the default generated bezel. (Which my graphics are designed around.)

The main body uses the Bezel Image Layer.

The switches, text, switch plate, handles, etc. use the Decal Layer.

Of course the LEDs use the LED Layer.

The faint drop shadow uses the Top Extra Layer so it’s opacity and scale can be adjusted. It is solid black behind so scale adjustment is pretty much reserved for shrinking. (I may mess with this a bit more to see if I can add some more freedom.)

This is the very first graphic I have done where the design intent had advanced features in mind. Up to this point I have just been doing surgery on existing graphics. The source reflects the change in intent.

This is also the first graphic I have done after a bit of R&D on the Bezel Image Layer HSV parameters. I am using as the base color…

HUE = 0%
SAT = 75%
VALUE = 50%

This makes dialing in a color a bit more natural. By selecting the target color in an image editor and changing just the layer’s Hue to match, it get’s you in the ballpark. This works because we are starting from 0 and have 360 steps of offset. (Just like image editors.)

I hope you like it as much as I do. I look forward to doing a couple more after I get some other stuff done.

WaffeSS · 17 April 2021 00:29

Duimon do you know if possible use Animated PNG (APNG) for Background? I tried add a Glowing Power LED but dont work =/

Another doubt is possibility to aggregate this type of resource to the reshade for example? In case for old PC games working with “Windows” DirectX API.

Duimon · 17 April 2021 00:42

I believe the answer is no on both counts.(Retroarch does not support animated GIFs or PNGs.) I have had some luck using reshade to do overlays and it is pretty clumsy even doing that simple part.

Duimon · 17 April 2021 03:53

Here’s a pretty raw WIP.

There is a TON of work left to do but I wanted to show a bit of good faith progress.

Duimon · 17 April 2021 04:07

@WaffeSS

I just wanted to clarify, since your questions are leaning towards the technical.

While it is not necessarily bad form to ask those questions here, since I probably dig deeper into these shaders more than the average user, I am only responsible for the graphics this thread is about.

@HyperspaceMadness is the creative genius behind the shader. Many, many questions can be answered by a thorough read of his thread. It is a pretty long thread but I re-read it myself fairly regularly, along with this one.

Unparallell · 17 April 2021 08:30

Outstanding!

Any chance these graphics coming for other preset tiers?

AcidCrash · 17 April 2021 09:34

This is really Nice!

one question though, have you used the original picture of the console to develop position the screens and the gap?

P.S. Not sure if my previous example had the correct gap, did that in a rush)))

Duimon · 17 April 2021 13:52

Yes, although it’s a work in progress.

Actually I’m not convinced that the gap distance is as important as you may think. If you look at the Mario & Luigi shot, you can count five stars each on the left and right. Starting at the top, for the distance between the second and the third star to be equal to the distance between the third and fourth, the screen edges would have to be almost flush with the hinge. (Which they are not on the physical device.)

This is compounded by the fact that the way the physical device is designed, as you fold the top half over the bottom half, the screen gap is reduced. The game developers would have no way of knowing what angle you would have the top screen at.

The human mind does a wonderful job of filling in gaps or erasing imperfections when looking at the big picture. (I use this to my advantage in my graphics. They don’t have to be perfect, they just need to be enough to trick the brain.)

This is using the Standard preset. What did you have in mind?

Looking at this graphic, I could probably work some magic with a bunch of layers to give independent scaling to the top bezel, and the bottom bevel and bezel. This would give the user fine control over the distance between the screens and maintain the integrity of the graphic.

Because of the aforementioned reasons, I will probably just add Bezel Image Layer HSV to the advanced, so we can color the console.

HyperspaceMadness · 17 April 2021 13:53

Yeah I think something approximate works about very well, the number I’ve seen thrown around for how much space between the screens is about 90 game pixels.

Legend of Kage 2 is one where you can actually measure the distance between screens by taking snapshots of when you are in the trees and when you are falling through and when you are on the ground, then lining the images up. I actually did this a while ago, I’ll see if I can dig it up…

But again I think something approximate is actually fine because the gap is large enough that your eye can’t see it it’s actually off.

Duimon · 17 April 2021 13:56

Yeah, I edited the top post while you were typing.

The screen gap changes as the device is folded, so it is largely irrelevant.

I will just make it pretty. I am making some big changes to the graphic today. I will post a WIP.

HyperspaceMadness · 17 April 2021 14:08

Yup makes sense, I found my experiment for Legend of Kage 2 and for that game it was 64px

Unparallell · 17 April 2021 15:05

This one tricked me in particular

Duimon · 17 April 2021 15:45

The PVM by itself uses 4 image layers, a background makes 5. Using it with a background that has an LED would require 6. (Not counting the always preset Night layer. )

They are an Advanced preset only feature intended to give graphics that aren’t taking advantage of the Advanced presets, a reason to be there.

@HyperspaceMadness has been making changes to facilitate some more features in the Standard presets. I will take advantage of these as they appear, but there will always be things the Standard isn’t capable of. That’s why we have an Advanced preset.

Duimon · 17 April 2021 21:45

Here’s the promised WIP on the NDS Vertical.

I am pretty sure about the gap distance being accurate. (Although this also changed from the “Fat” to the “Lite”. )

If you were to hold this thing in your hand and fold the top half to about 45 degrees, (Probably the intended posture.) the gap distance would be decreased by almost half the hinge width.

For this project, I started with my NDS 4K Vertical graphic. I thought it would save me some time. (I was wrong.) This was pretty much a complete overhaul, the source is completely different now, and quite complex. I am beyond question a far different and more capable artist than I was when I began this journey.

Because of this complexity I may run into some roadblocks changing the color of the graphic to enable HSV in the Advanced shader. (But of course I will make the attempt. )

AcidCrash · 17 April 2021 21:46

Yes this totally makes sense.

Not sure why, but for Mario and Luigi seems like the distances between starts should be somewhat the same to make a perfect circle (after all we look at the image straight). I did the similar thing with the counting))

But as said, I do understand that maybe it is just my personal taste /nitpick)) All in all I really like how it turns out

Duimon · 17 April 2021 23:02

Yep. I am quite nitpicky myself. I assure you this is an accurate representation of the real device layout. The developers never intended this thing to lie flat.

You’ll notice that they decreased the gap on the 2DS although the device is backward compatible with 3DS games.

Fortunately, If we want to correct this kind of design shortcoming, using Mega Bezel shader, we can!

Although no longer physically accurate, (And there is no reflection. ) the gap distance is improved.

@HyperspaceMadness

The LCD Grid doesn’t like this layout very much. (Notice the banding?) Is there anything to be done about this, (Pixel size etc.) It is at the lowest resolution and I couldn’t find any parameters that helped.

Edit: Scanline direction multiplier did the trick! Although there are some that may not like the end result.

WaffeSS · 18 April 2021 01:15

@Duimon Thanks for good work, you managed to explain the main doubt I had, and helped me a lot with regard to the problem of aspect ratio that I had in the beginning, even being technical issues your tips were very helpful and I thank you for the help

at the moment I am having some problems related to MAME (Arcade Bezels) and I am trying to find the solution (some games work perfectly, others do not), to position the Shader in the Overlay (Background)

akuma22 · 18 April 2021 01:13

With the DS when I think about the separation distance the game Arkanoid DS comes to mind, I hope I can play that game well when I have the vertical version since with the horizontal now it is impossible.