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

I don’t know anything about this process, but would it be feasible for a person to use this to convert the basic MAME .lay files to Megabezel?

3 Likes

That’s not really what it for. It is for creating overlays with custom Bezels using the Mega Bezel to place the artwork and render the bezel.

Arcade layouts use a variety of screen aspects and positions. There is no easy way to do what you ask. It would , for now, have to be done one by one. I am unfamiliar with the overlay conversion tool suggested on the other thread but unless it creates a core config also, it would still be time consuming. MAME *.LAYs contain coordinates. Retroarch overlay *.CFGs do not.

In the future, HSM is going to try and introduce some “tokens” or “variables” we can use in the image path parameters so that you can have one shader that uses different backgrounds, depending on the rom name.

This combined with some creativity and the use of the Image Placement, Mega Bezel feature, should make it possible.

There are other changes that take precedence, it will probably not happen anytime soon.

I personally think there is no reason to not use standalone MAME with another front end, and use the standard MAME artwork.


If you really want to use the MAME core, since the MAME layouts use the same name as the roms, it should be possible to create game configs for each game using a search and replace tool that supports filename variables. (Such as PowerGREP.) Then use the RA layout feature.

2 Likes

Sorry, what I meant was to take the basic image (from the .lay packages) and use it as the background for a Megabezel shader and then you could position and resize it inside the shader parameters. I can see how, like you said, it would be time consuming, because there are so many… I have just kind of been thinking about getting those basic bezels into a shader file so they would be really configurable in RA. Obviously, my understanding of the whole thing isn’t very good, so I’m just thinking out loud. Thanks for humoring me, though. :smiley:

2 Likes

No worries. Some layouts use multiple layered images. Some with different blending modes. It can also generate primitives of various shapes and colors. It is not as easy as just using a background image.

Thus my reason for suggesting a front end and MAME standalone or generating game overrides.

3 Likes

Thanks again. I’ve used MAMEui for a long time, so that’s probably my best bet, to just keep using that… but I will see if I can figure out making a set of game cfg’s like you suggested.

2 Likes

If it helps, the override would be in the MAME config folder (e.g. Retroarch/config/MAME/puckman.cfg)

and contain these lines…

video_driver = "gl"
input_overlay_enable = "false"    
video_layout_directory = ":\layouts"
video_layout_enable = "true"
video_layout_path = ":\layouts\puckman.zip"

So if you create one and copy it to a hundred, use a mass renaming tool that supports manual lists (Like the one built into the Altap Salamander file manager.) to rename the hundred to a list of romnames with the cfg extension.

You could use the %FILENAMENOEXT% variable in PowerGREP to search and replace.

Search: puckman

Replacement: %FILENAMENOEXT%

3 Likes

@Drybonz

As much as I encourage a little blood and sweat, I realized what would take me less than a minute might not be as easy for some.

I created overrides for all the existing MAME artwork/layouts and added them to my Front-End-Assets repo.

https://github.com/Duimon/Front-End-Assets

They can be found in “Front-End-Assets\MAME RA Layout overrides”.

There is a ___Readme.txt with instructions.

BTW. It literally took me less than a minute. :innocent:

Also BTW… this is the exact method The Bezel Project uses for overlays.

2 Likes

I have started gathering screenshots for my GitHub Pages site.

To speed things up I am using my Mega Bezel test image as content.

I will need to create some custom images for some cores.

Nintendo_NDS

This will take me considerably more that a minute. :grin:

5 Likes

As when I did my overlays using this method, getting screenshots forces me to load each and every preset. It is a great way to find hidden bugs that have crept in, and I have found a few already.

I will do a subversion update when I am finished.

4 Likes

Here is an example to show the power of MAME layouts vs standard Retroarch overlays.

Here is a shot of my Turbo layout from my Arcade Originals project.

And here is the layout contents.

<!-- turbo.lay -->

<mamelayout version="2">
	<element name="digit" defstate="10">
		<led7seg>
			<color red="1.0" green="0.3" blue="0.0" />
		</led7seg>
	</element>
	<element name="turbo_tach">
		<image file="turbo_tach.png" />
	</element>
	<element name="turbo_tach_mask">
		<image file="turbo_tach_mask.png" />
	</element>
	<element name="bezel">
		<image file="bezel.png" />
	</element>
	<element name="tach" defstate="0">
		<image file="tach_01.png" state="1" />
		<image file="tach_01.png" state="2" />
		<image file="tach_01.png" state="3" />
		<image file="tach_02.png" state="4" />
		<image file="tach_02.png" state="5" />
		<image file="tach_02.png" state="6" />
		<image file="tach_03.png" state="7" />
		<image file="tach_03.png" state="8" />
		<image file="tach_03.png" state="9" />
		<image file="tach_04.png" state="10" />
		<image file="tach_04.png" state="11" />
		<image file="tach_04.png" state="12" />
		<image file="tach_05.png" state="13" />
		<image file="tach_05.png" state="14" />
		<image file="tach_05.png" state="15" />
		<image file="tach_06.png" state="16" />
		<image file="tach_06.png" state="17" />
		<image file="tach_06.png" state="18" />
		<image file="tach_07.png" state="19" />
		<image file="tach_07.png" state="20" />
		<image file="tach_07.png" state="21" />
		<image file="tach_08.png" state="22" />
		<image file="tach_08.png" state="23" />
		<image file="tach_08.png" state="24" />
		<image file="tach_09.png" state="25" />
		<image file="tach_09.png" state="26" />
		<image file="tach_09.png" state="27" />
		<image file="tach_10.png" state="28" />
		<image file="tach_10.png" state="29" />
		<image file="tach_10.png" state="30" />
		<image file="tach_11.png" state="31" />
		<image file="tach_11.png" state="32" />
		<image file="tach_11.png" state="33" />
		<image file="tach_12.png" state="34" />
		<image file="tach_12.png" state="35" />
		<image file="tach_12.png" state="36" />
		<image file="tach_13.png" state="37" />
		<image file="tach_13.png" state="38" />
		<image file="tach_13.png" state="39" />
		<image file="tach_14.png" state="40" />
		<image file="tach_14.png" state="41" />
		<image file="tach_14.png" state="42" />
		<image file="tach_15.png" state="43" />
		<image file="tach_15.png" state="44" />
		<image file="tach_15.png" state="45" />
		<image file="tach_16.png" state="46" />
		<image file="tach_16.png" state="47" />
		<image file="tach_16.png" state="48" />
		<image file="tach_17.png" state="49" />
		<image file="tach_17.png" state="50" />
		<image file="tach_17.png" state="51" />
		<image file="tach_18.png" state="52" />
		<image file="tach_18.png" state="53" />
		<image file="tach_18.png" state="54" />
		<image file="tach_19.png" state="55" />
		<image file="tach_19.png" state="56" />
		<image file="tach_19.png" state="57" />
		<image file="tach_20.png" state="58" />
		<image file="tach_20.png" state="59" />
		<image file="tach_20.png" state="60" />
	</element>
	<element name="speed" defstate="0">
		<rect state="1">
			<bounds x="0" y="0" width="17" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="2">
			<bounds x="0" y="0" width="34" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="3">
			<bounds x="0" y="0" width="51" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="4">
			<bounds x="0" y="0" width="68" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="5">
			<bounds x="0" y="0" width="85" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="6">
			<bounds x="0" y="0" width="102" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="7">
			<bounds x="0" y="0" width="119" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="8">
			<bounds x="0" y="0" width="136" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="9">
			<bounds x="0" y="0" width="153" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
		<rect state="10">
			<bounds x="0" y="0" width="170" height="7" />
			<color red="1.0" green="0.0" blue="0.0" />
		</rect>
	</element>
	<element name="shifter" defstate="0">
		<image file="Shift_Low.png" state="0"/>
		<image file="Shift_High.png" state="1"/>
	</element>
	<view name="Upright_Artwork">
		<screen index="0">
			<bounds x="731" y="248" width="630" height="687" />
		</screen>		
		<bezel element="bezel">
			<bounds x="0" y="0" width="1920" height="1080" />
		</bezel>
		<bezel name="digit27" element="digit">
			<bounds x="591" y="756" width="27" height="35" />
		</bezel>
		<bezel name="digit28" element="digit">
			<bounds x="561" y="756" width="27" height="35" />
		</bezel>
		<bezel name="digit29" element="digit">
			<bounds x="530" y="756" width="27" height="35" />
		</bezel>
		<bezel name="digit30" element="digit">
			<bounds x="500" y="756" width="27" height="35" />
		</bezel>
		<bezel name="digit31" element="digit">
			<bounds x="465" y="756" width="27" height="35" />
		</bezel>
		<bezel name="digit2" element="digit">
			<bounds x="606" y="608" width="19" height="23" />
		</bezel>
		<bezel name="digit3" element="digit">
			<bounds x="585" y="608" width="19" height="23" />
		</bezel>
		<bezel name="digit4" element="digit">
			<bounds x="563" y="608" width="19" height="23" />
		</bezel>
		<bezel name="digit5" element="digit">
			<bounds x="541" y="608" width="19" height="23" />
		</bezel>
		<bezel name="digit6" element="digit">
			<bounds x="519" y="608" width="19" height="23" />
		</bezel>
		<bezel name="digit7" element="digit">
			<bounds x="606" y="572" width="19" height="23" />
		</bezel>
		<bezel name="digit8" element="digit">
			<bounds x="585" y="572" width="19" height="23" />
		</bezel>
		<bezel name="digit9" element="digit">
			<bounds x="563" y="572" width="19" height="23" />
		</bezel>
		<bezel name="digit10" element="digit">
			<bounds x="541" y="572" width="19" height="23" />
		</bezel>
		<bezel name="digit11" element="digit">
			<bounds x="519" y="572" width="19" height="23" />
		</bezel>
		<bezel name="digit12" element="digit">
			<bounds x="606" y="535" width="19" height="23" />
		</bezel>
		<bezel name="digit13" element="digit">
			<bounds x="585" y="535" width="19" height="23" />
		</bezel>
		<bezel name="digit14" element="digit">
			<bounds x="563" y="535" width="19" height="23" />
		</bezel>
		<bezel name="digit15" element="digit">
			<bounds x="541" y="535" width="19" height="23" />
		</bezel>
		<bezel name="digit16" element="digit">
			<bounds x="519" y="535" width="19" height="23" />
		</bezel>
		<bezel name="digit17" element="digit">
			<bounds x="606" y="501" width="19" height="23" />
		</bezel>
		<bezel name="digit18" element="digit">
			<bounds x="585" y="501" width="19" height="23" />
		</bezel>
		<bezel name="digit19" element="digit">
			<bounds x="563" y="501" width="19" height="23" />
		</bezel>
		<bezel name="digit20" element="digit">
			<bounds x="541" y="501" width="19" height="23" />
		</bezel>
		<bezel name="digit21" element="digit">
			<bounds x="519" y="501" width="19" height="23" />
		</bezel>
		<bezel name="digit22" element="digit">
			<bounds x="606" y="465" width="19" height="23" />
		</bezel>
		<bezel name="digit23" element="digit">
			<bounds x="585" y="465" width="19" height="23" />
		</bezel>
		<bezel name="digit24" element="digit">
			<bounds x="563" y="465" width="19" height="23" />
		</bezel>
		<bezel name="digit25" element="digit">
			<bounds x="541" y="465" width="19" height="23" />
		</bezel>
		<bezel name="digit26" element="digit">
			<bounds x="519" y="465" width="19" height="23" />
		</bezel>
		<bezel element="shifter" inputtag="INPUT" inputmask="0x04">
			<bounds x="0" y="0" width="1920" height="1080" />
		</bezel>
		<bezel element="turbo_tach">
			<bounds x="436" y="845" width="216" height="125" />
		</bezel>
		<bezel name="tachometer" element="tach">
			<bounds x="436" y="845" width="216" height="125" />
		</bezel>
		<bezel name="speed" element="speed">
			<bounds x="458" y="939" width="171" height="7" />
		</bezel>
		<bezel element="turbo_tach_mask">
			<bounds x="436" y="845" width="216" height="125" />
		</bezel>
	</view>
</mamelayout>

It uses 25 images, some layout generated 7 segment LEDs, The speedometer LEDs are generated and animated, and the shifter is animated. It’s also possible to animate the steering wheel but I chose not to.

Full disclosure… I only modified a very good layout to fit my graphic. I’m not quite that fluent. :innocent:

The shifter graphic is mine though. :wink: (I also modified the original bezel a lot.)

The full collection for 122 games can be found in my Arcade-Originals repo.

Only the 92 MAME layouts can be used without the help of Rocketlauncher and other standalone emulators.

3 Likes

Awesome! Does that mean these could be combined with Mega Bezel similar to how Orionsangel creates his?

Nope… it means the opposite. There are 25 images, many of which have states and are animated. Not even the Mega Bezel can do that.

Turns out the Retroarch layout feature can’t either. It is limited to simple layouts like overlays.

1 Like

Thanks, Duimon… I was gonna do it, I promise :smiley:

It would have taken me longer and I probably would have procrastinated a bit, but I had good intentions. I appreciate it though. I’m going to set these up and test it out. Thanks again.

edit Will it only work with the GL driver? If I set it to vulkan it doesn’t show the overlay.

1 Like

Yeah, it only runs in GL :frowning:

1 Like

Hm… if I change the driver to GL the game won’t start… just the overlay with a black screen for the game.

Duimon, any chance to share your hlsl settings for Arcade Originals ?

I am using bgfx, with the vulkan backend, and crt-geom. (Standard slot-mask)

1 Like

thank you !

another quick question … if the backdrop is on the gamescreen is hidden … is my config wrong ?

1 Like

It sure has been a long time since I did those. :grin: The indicator lights on top are all backdrops, so yes… “Backdrops Off” would be wrong.

1 Like

I should once again clarify that I am only responsible for the creation of the cabinet, the assembly of the glass/layout is the product of someone else’s hard work.

1 Like