My Realistic Arcade Bezels

RetroArch Additions Overlays
#525

@Thatman84 & @Tarrasque:
The tilted screen is feasible with shaders. E.g. crt-geom has the option to tilt the screen vertical and horizontal.

@Tarrasque:
The current mame core supports artworks. Put the artwork and ini folder in your retroarch system folder (i think they must be renamed to all lower case in unix systems)

retroarch
    └──  system
            └── artwork
            └── ini

Unfortunately, if used as mame artwork instead as overlay, the shader is applied after the artwork, so it affects the artwork too. :frowning:

#526

@ImnoTapLumber

That’s what I suspected.

Could a shader be set in order to apply only to a portion of the screen? In this case I probably woudln’t be able to use the tilted screen cool feature, but at least I couls use any of the other great vertical bezels here AND a crt scanline shader over the game screen.

Am I correct?

#527

@Tarrasque
You can use the bezel image as overlay, so you can use every shader you like.
Needless to say, that you have to use the custom aspect ratio settings in the video options and adjust the settings, so that the game fits into the bezel.
And you need to create a *.cfg file with the same name as the bezel.
[EDIT] the *.cfg file is also found in the *.zip.
You find more info about overlays here: https://docs.libretro.com/guides/libretro-overlays/

1 Like
#528

Here is a realistic Arcade bezel for the game Kick for use on Mame.

You can download it here - https://bit.ly/2mHk9jw

kick
kick.jpg1299×731 378 KB

2 Likes
#529

Here is a realistic Arcade bezel for the game Circus for use on Mame.

You can download it here - https://bit.ly/2mIOv5b

circus
circus.jpg1300×731 432 KB

3 Likes
#530

@Orionsangel:
Is there a specific reason to use a *.cfg file with the mame hoffset, hstretch, voffset, vstretch settings instead of adjusting the x, y, width, height settings in the *.lay file?

I mean you could do it without a second *.cfg file :slight_smile:

Currently i try to write a bash script to convert mame *.lay files to mame2003-plus *.art files and rotate/crop/extend the images accordingly.
To convert the offst and stretch values too will require additional calculations, so without those it would be much more easier.
You can see the result in this thread: MAME artworks for MAME 2003-Plus (atm i am using a spreadsheet and make the conversion manually)

Also i try to write a script to convert them to regular RetroArch overlays inclusive the corresponding game overwrite *.cfg for the custom aspect ratio.
Unfortunately i am not so skilled in scripting :wink: and it takes some time.
(spreadsheet and manual work is done)

1 Like
#531

Because the cfg file maintains the size of the screen so it fits in the bezel. When you remove the cfg file from mame the screen reverts back to it’s large size and you’d have to resize the screen again which is a hassle. When it comes to the whole process I taught myself and it became routine. I welcome the help.

#532

I understand.
With the right values in the *.lay file you can skip the hassle of using a separate config file. I will look into it and post my findings later.

Meanwhile thanks for your work :slight_smile:

@Orionsangel [UPDATE]
I figured out how to translate the hoffset, hstretch, voffset and vstretch values, so that they can be used in the *.lay file.

new_width  = old_width*vstretch
new_height = old_height*hstretch
new_x      = ((old_width-new_width)/2)-(old_width*voffset)+old_x
new_y      = ((old_height-new_height)/2)+(old_height*hoffset)

…hope i haven’t forgotten something…

This has also the benefit of a better image (at least on my display the hstretch and vstretch gives worse results -> see screenshots)

4 Likes
#533

Great finding :slight_smile:

Can that translation be scripted? Or a way to automate the process of rebuilding the lay files with this new information?

#534

Sure, the mame game.cfg is a xml file and the game.lay file has also some kind of xml syntax.

Unfortunately atm it is beyond my scripting skills :frowning:
I dont know how to adress the individual xml elements/attributes.
I can do this with a mix of bash arithmetic, sed, cat, grep and a lot of other unnecessary stuff but this will certainty not be the right way.

#535

Understood. I’ll check on my end as well and see if it can be done.

#536

Thank you. Can you do a curved screen? This sounds interesting. Send me the lay file [email protected]

#537

I am a professional programmer. If you could share with me some samples, say, an “input” file and an “output” maybe I can help in some way.

2 Likes
#538

In the default.lay the x,y,width,height values have to be modified with the hoffset, hstretch, voffset and vstretch values of the digdug.cfg

Only the values in the <view></view> element between
<screen></screen>
<overlay></overlay>
<backdrop></backdrop>

The values between <bezel></bezel> must remain untouched

digdug.cfg:

<?xml version="1.0"?>
<!-- This file is autogenerated; comments and unknown tags will be stripped -->
<mameconfig version="10">
    <system name="digdug">
        <video>
            <screen index="0" hoffset="0.004000" hstretch="0.580000" voffset="0.008000" vstretch="0.678000" />
        </video>
        <counters>
            <coins index="0" number="49" />
        </counters>
        <input>
            <port tag=":DSWA" type="DIPSWITCH" mask="192" defvalue="128" value="192" />
        </input>
    </system>
</mameconfig>

This is the calculation:

new_width = old_width*vstretch
new_height = old_height*hstretch
new_x = ((old_width-new_width)/2)-(old_width*voffset)+old_x
new_y = ((old_height-new_height)/2)+(old_height*hoffset)

default.lay:

<!-- digdug.lay -->

<mamelayout version="2">

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

<element name="bezel_alt1">
    <image file="digdug_bezel_alt1.png" />
</element>

<element name="bezel_alt2">
    <image file="digdug_bezel_alt2.png" />
</element>

<element name="screen_bezel">
    <image file="vert_screen_bezel.png" />
</element>

<element name="screen_mask">
    <image file="vert_screen_mask.png" />
</element>

<view name="Cab Artwork">
    <screen index="0">
    <bounds x="555" y="0" width="810" height="1080" />
    </screen>

    <overlay element="screen_mask">
    <bounds x="554" y="0" width="812" height="1080" />
    </overlay>

    <backdrop element="screen_bezel">
    <bounds x="518" y="0" width="884" height="1080" />
    </backdrop>

    <bezel element="bezel">
    <bounds x="0" y="0" width="1920" height="1080" />
    </bezel>
</view>

<view name="No Monitor Screen (alt1)">
    <screen index="0">
    <bounds x="555" y="0" width="810" height="1080" />
    </screen>

    <overlay element="screen_mask">
    <bounds x="554" y="0" width="812" height="1080" />
    </overlay>

    <backdrop element="screen_bezel">
    <bounds x="518" y="0" width="884" height="1080" />
    </backdrop>

    <bezel element="bezel_alt1">
    <bounds x="0" y="0" width="1920" height="1080" />
    </bezel>
</view>

<view name="Unused (alt2)">
    <screen index="0">
    <bounds x="555" y="0" width="810" height="1080" />
    </screen>

    <overlay element="screen_mask">
    <bounds x="554" y="0" width="812" height="1080" />
    </overlay>

    <backdrop element="screen_bezel">
    <bounds x="518" y="0" width="884" height="1080" />
    </backdrop>

    <bezel element="bezel_alt2">
    <bounds x="0" y="0" width="1920" height="1080" />
    </bezel>
</view>

</mamelayout>

The result should look like this:

<view name=“Cab Artwork”>
<screen index=“0”>
<bounds x=“679” y=“231” width=“549” height=“626” />
</screen>

<overlay element=“screen_mask”>
<bounds x=“678” y=“231” width=“551” height=“626” />
</overlay>

<backdrop element=“screen_bezel”>
<bounds x=“653” y=“231” width=“599” height=“626” />
</backdrop>

<bezel element=“bezel”>
<bounds x=“0” y=“0” width=“1920” height=“1080” />
</bezel> </view>

1 Like
#539

Can you send me a completed digdug.zip file to inspect it.

#540

Is there maybe a recent link where you can download a pack of these?

Also, can these be used as RetroArch overlays instead of MAME artwork?

#541

Yeah, but I gotta update it.

2 Likes
#542

@GemaH: not so easily. Mame artworks supports blend modes, which overlays doesn’t.

blend modes 
                                                ____
    1. layer:   bezel (blend mode: normal)      \____\  ══╗
    ------------------------------------------  ____      ║
    2. layer:   backdrop (blend mode: screen)   \____\  ══╣
    ------------------------------------------  ____      ║
    3. layer:   overlay (blend mode: multiply)  \____\  ══╣
    ------------------------------------------  ____      ║
    4. layer:   game screen                     \____\  ══╝

Also it involves a bit of image manipulation. Mame artworks can have parts of the image that go over the monitor screen or are smaller, but overlays stretch the image to either completly fit your monitor screen (if overlay0_full_screen = true) or the hole game screen (if overlay0_full_screen = false)
To maintain the aspect ratio you have to resize the images (cropping or adding borders)

In the case of Orionangels artworks, i think they are all in 16:9 ar, so no clipping is needed, but if your monitor is 4:3 or 16:10, than you have to do some work…

For the overlay, mask, backdrop elements you have to tinkering a lot, to make them look like in the artworks.

2 Likes
#543

Ok, got it.

The issue is i can’t use these with the MAME core in retroarch because the crt shaders apply to the whole image, including the artwork.

#544

You can use the bezel image as overlay and set a custom aspect ratio in the video options.
e.g. x,y,width,height.

The biggest problem is, that while the image can be made to fit the usual aspect ratios (16:9, 16:10, 4:3…)
the game override config for the custom aspect ratio must be calculated for every screen resolution:

1024x768
1360x768
1366x768
1280x720
1280x800
...etc