Porting Retropie/Retroarch Artwork in 16:9 (John Merrit) to official MAME

Short Update October 2019: Mr. Do provides a very nice simple MAME .lay file generator here:

http://mrdo.mameworld.info/mame_lay.php


There is incredibly realistic MAME Artwork for Retropie/Retroarch systems out, and I started re-writing them to run for the official MAME build. Work is mainly based on John Merrit's great work and Mr. Do's Layout Files, and the effect is amazing. This also shows the power of the yet simple MAME artwork system. Creativity is your only limit.

Update: I modified the layout file in a way that you can now switch on/off the scratches and reflections on the screen. 
Update 2: I started a Github repository (see below link).

Within the Video Mode options, you can now choose between:

• Clear Screen - the screen is shown without any reflections and scratches

Clear Screen - Click to Enlarge

• Scratch Screen - the screen shows all the reflections and scratches. On top, you can manipulate the Screen Alpha Channel separately from the cabinet. - thereby you manipulate the intensity of the scratches on screen only!

Scratch Screen - Click to Enlarge

Update: I started a Github Repository called 'MAME Realistic Bezel Artwork', where you can download the entire repository into a zip file. On GitHub, selective downloads are a bit difficult.

What this artwork adds in comparison to most of the official MAME artwork:

• Designed for 1080p -> ready for 16:9: very suitable for most modern PC monitors in Fullscreen Mode; other than with traditional 4:3 bezels, a Cropped Mode is no longer required (see screenshot: View - Full); games with a vertical screen benefit most since these bezels fill the gap with very nice bezels
• Monitor scratches: yes, what you see on the photos are scratches of the Bezel object applied over the game screen (!); intensity of scratches is configured effectively via the Alpha Channel of the Bezel (enabling transparency by an Alpha value below 1.0, in this case 0.7)
• Backlights and reflections: backlight and reflection effects also come from the Bezel object; the Alpha Channel configured below 1.0 helps to adjust lights that are directly on your screen; by creating an own screen bezel object, you can now adjust the Alpha value of the screen without any negative effect for the background
• Artwork even shows neighboring cabinets -> super-realistic, adds depth

Don't forget to also look out for Widescreen Artwork already being available at Progettosnaps in the column 'Widescreen'.

This is the information I am using for creating own MAME overlays:

• Overlays and shader for MAME on the Pi (this post by Floob gave me the inspiration to try it for the official MAME version)
• From there I grabbed John Merrits Bezel Overlays -> these are the actual, extremely impressive overlays - described and discussed for Retroarch here: https://forums.libretro.com/t/arcade-overlays/4084 ; John Merrit did such an amazing job;
• For a conversion to MAME Artwork standards, this documentation is available - the rest was a bit of trial and error: 
• http://wiki.mamedev.org/index.php/Layouts_and_Rendering_for_MAME_Artwork_System
• http://wiki.mamedev.org/index.php/LAY_File_Basics_-_Part_I 

Here are WIP instructions for your own DIY MAME Bezel Layout:

The template (easy example - Juno First) - edit the default.lay file with your favorite text editor - I put in blank lines to visualize the layout structure - you could actually use this text and pack it into a new default.lay file:

<!-- junofrst.lay -->

<mamelayout version="2">

<element name="bezel">
<image file="juno_first_bezel.png" />
</element>

<view name="Clear Screen">

<bezel element="bezel">
<bounds x="0" y="0" width="4000" height="2250" />
</bezel>

<screen index="0">
<bounds x="1260" y="130" width="1480" height="1973" />
</screen>

</view>

</mamelayout>

<!--
- Artwork type: Bezel
- Scanned bezel provided Mikonos
- Cleaned for MAME by Mikonos
- Lay file by Mr. Do
-->

How to create your own layout:

1. Create a directory of the rom you want to create Artwork for (in this case junofrst). Call this file default.lay and put it into this directory.

2. First step is to create the Bezel element (from <element name="...."> until </element>, call it bezel and assign the right file name. Put a bezel with that file name (here juno_first_bezel.png) into that directory.

3. Second step is to create a View. The view name is your own choice will appear within MAME. Here the view is called Clear Screen (because scratches come in an own separate view). Within this View, two things have to be defined correctly:

• The bezel element -> has to follow the name definition of above, in this case just bezel. In this case, I am heading for a 16:9 widescreen bezel from John Merrit, which I upscaled with GIMP from 1080p to 4000 x 2250. Since they shall fill the full screen, the bezel starts at coordinates 0/0 (i.e. the x/y bezel bounds).
• The screen -> this is where the game is displayed, surrounded by the bezel. First screen is always indexed with 0. The x/y coordinates of the screen bounds define the upper left side where the screen starts. The width and the height are the size of the screen surrounded by the bezel. Use GIMP or a similar tool in order to easily find out these x/y coordinates as well as the actual screen size (width/height). Take the calculator to always head for a 4:3 (horizontal game) or 3:4 (vertical game) aspect ratio of the screen size, so that the screen is displayed exactly.
• If you want to head for precise screen emulation, look for the exact screen resolution of the game. Juno First, for example, has 224 x 256 pixels - which is actually not 4:3 at all! So if you use a multiple of these pixles for your screen, you would end up with a decent screen emulation (in the above example, there is apparently a mismatch).

4. Believe it or not -> that's it. Put this folder into the artwork directory of MAME and start the game. You don't have to zip it, so you can head on further with finetuning your default.lay file. As soon as you are ready, zip the directory with the identical file name.

This is basically all you need to know, with some practice, these Artworks arrive easily and effectively. In another more complex example, I will show the real power of this artwork system by combining multiple artwork parts to one file, with several display options.

5. Scratch Screen Overlay: In GIMP, I just exatracted the screen from John's PNG containing all the scratches and reflections. For ease of use, I retain an identical picture size, thus no placement is required. This PNG becomes a second bezel element in a second view called "Scratch Screen". No application of transparency required, this will be done in the lay file. This PNG looks like this:

Enlarging does not really work

6. Dual view Layout: Now the default.lay file needs to be adjusted in order to enable a switch between a Clear Screen and a Scratch Screen. This adds the new bezel element and another view with quite self-explanatory parameters:

<!-- junofrst.lay -->
<mamelayout version="2">

<element name="bezel">
<image file="juno_first_bezel.png" />
</element>
<element name="screen">
<image file="juno_first_screen.png" />
</element>

<view name="Clear Screen">
<bezel element="bezel">
<bounds x="0" y="0" width="4000" height="2250" />
</bezel>
<screen index="0">
<bounds x="1240" y="230" width="1568" height="1792" /></screen>
</view>

<view name="Scratch Screen">
<bezel element="bezel">
<bounds x="0" y="0" width="4000" height="2250" />
</bezel>
<bezel element="screen">
<bounds x="0" y="0" width="4000" height="2250" />
<color red="1.0" green="1.0" blue="1.0" alpha="0.6" />
</bezel>
<screen index="0">
<bounds x="1240" y="230" width="1568" height="1792" />
</screen>
</view>


</mamelayout>

Special Notes:

In this second example, I defined multiples of the games original screen resolution. This means that the bezel used for this layout does not really fit to the screen (black borders above and below the screen, but the screen is not distorted and definitely shows a better view of the game screen.

Look at this line in the screen bezel:
<color red="1.0" green="1.0" blue="1.0" alpha="0.6" />
The alpha value determines the transparency of the screen overlay. This is extremely handy to determine the amout of scratches and blending on the game screen. In this case 0.6 looks just fine for me - which is 60% transparency.

The result is nice (Scratch Screen enabled, correct screen aspect ratio):

Click to enlarge

You can download the entire junofrst directory from my repository:
https://github.com/estefan3112/MAME-Realistic-Bezel-Artwork

7. Further finetuning - Screen Bezel (Backdrop) and Screen Mask (Overlay): Here I am still learning, because with these add-ons, they become perfect.

(...)