Messages

31

Themes / At-The-Arcade Flex (multi-resolution / multi-aspect, MAME + pinball) [Release]

« on: May 16, 2021, 05:33:22 PM »

For my arcade cabinet, the theme "At-The-Arcade Multi-Cab" was nearly perfect! But then I ruined everything by getting into pinball games -- a problem because I turned my monitor vertical, but also because I needed to display pinball tables as well. With that, I undertook a months long project of learning how to write Attract-Mode layouts and shaders, and modified At-The-Arcade Multi-Cab to become: At-The-Arcade Flex! A flexible version of the original, supporting (in theory) every resolution and aspect ratio, and also adding support for the display of pinball cabinets.

First, a note of thanks! This layout is definitely standing on the shoulders of giants as they say, and it would not exist without the excellent work of:

• Yaron2019's At-The-Arcade Multi-Cab http://forum.attractmode.org/index.php?topic=3874.0 (the starting point for this layout)
• Cabs edited by damonxxx and Yaron2019, and damonxxx's concept here http://forum.attractmode.org/index.php?topic=3778.0
• Cabinet art by Gavin Smith of The CoinOps Project
• Game bezels by The Bezel Project https://github.com/thebezelproject/bezelproject-MAME
• Attract-Mode of course!
• ...and likely others I'm forgetting, or unaware of

Features added with this layout:

• Render at "any" resolution or aspect ratio (tested at the most common aspect ratios 16:9, 16:10, 4:3, 1:1, 3:4, 10:16, 10:9)
• Hotkey to cycle through various resolutions (useful for testing or simulating other screen sizes)
• Change most everything to rely on formulas and a table of positioning rules, instead of hard-coded numbers/percentages
• Add support for displaying pinball cabinet/snapshot/marquee images (in addition to the existing MAME arcade cabinet support)
• Allow cabinet to be horizontally "squeezed" up to a point, to make things fit better
• Beyond that point, resize the cabinet smaller (resulting in a mix of some squeezing and some shrinking, for portrait resolutions)
• Synthesize a cabinet "top" for resolutions where the cabinet is not full-height (necessary because the cabinet images do not include a top)
• "Wheel" logic is formula-based, using shaders for the wheel background
• Color choice for wheel background
• Rework bezel rendering to show entire side bezels (with some compression)
• Don't show scanlines for vector-based titles, or over bezels
• For portrait screens, extend game information to two lines
• Box art location depends on screen aspect (portrait vs landscape)

Demo:
https://www.youtube.com/watch?v=8IdFfWR30RI

Download the theme (updated to v1.1 Dec-29-2021):
https://mega.nz/file/fkgHyAYZ#-6I4-cUdBert9jcnAStAwIbWHq1SM_oaSB3SMtFsp_I
For install instructions, please see the ReadMe.txt file in the download zip (thanks again to Yaron2019)

Download the updated cabs:
https://mega.nz/file/rA833QiL#dqhQFfdh608n1pAdJdNnngajGSFI1NktuBkc37bJzMw

If needed, download other art from Damonxxx's original post:
http://forum.attractmode.org/index.php?topic=3778.0

Download fanart (optional):
https://mega.nz/file/gQlkBKia#Hz87o3SeV2I8GmR52aFCF-etVmJO-kjPWEt1VzBbVk0

Download bezels (optional):
https://github.com/thebezelproject/bezelproject-MAME

Change log (changes now maintained at https://github.com/toddsay/AtTheArcadeFlex):
1.0 Initial release
1.1 Fix potential crashes, auto-rotate horizontal snap videos for non-FX3 pinball tables

Examples shown below for:

• Landscape/widescreen MAME
• Portrait MAME
• Landscape/widescreen Pinball
• Portrait Pinball

32

Themes / Re: At-The-Arcade Multi-Cab [Release] - Updated 20 February 2021

« on: May 08, 2021, 02:04:25 PM »

I've updated the enhanced "multi-resolution" version, mainly to fix some issues with the shaders, but also to rework how the cabinet top image is built when the cabinet is not full-height (that logic is now shader-based as well). New download is attached.

* Edit * Updated this file again with a few minor fixes.

33

Themes / Re: At-The-Arcade Multi-Cab [Release] - Updated 20 February 2021

« on: April 28, 2021, 06:10:06 PM »

Thanks Yaron2019 and jedione! I had no idea about the discord channel (I suppose I saw a reference to it somewhere but never checked it out to see what was there).

I'm attaching a file which should include everything I changed in the "At-The-Arcade Multi-Cab" folder, so it can just be dropped there (overwriting the layout file). Of course most of the work is in the layout.nut file, but there are also two new shaders, a pinball cabinet image, and the little "top" image that is placed above the cabinet when it isn't full-height. I'm open to suggestions. I feel like things are all holding together pretty well now, but it's never been tested outside of my PC, and I've probably missed an option or two somewhere.

As for pinball, the layout switches to those alternate cabinet settings whenever the name of the Display includes the word "pinball" (not case-sensitive). Let me know if you can think of a better way to know that. For pinball it will use the included pincabs.png instead of cabinets.png, adding the snap/marquee images to the appropriate regions of that cabinet. Snaps are assumed to be vertical; I've noticed a lot of pinball snaps are horizontal so we may need a way to detect and rotate somehow (I tried this once but didn't have much luck so far). It will also look for a "pincabs" setting in the display's .cfg file, in case you have specific cabinets for each game (as I have for the Pinball FX3 tables). This mirrors the "cabinets" setting that is used for arcade cabinets.

Let me know how it goes, and I can make corrections as needed.

34

Themes / Re: At-The-Arcade Multi-Cab [Release] - Updated 20 February 2021

« on: April 24, 2021, 04:46:24 PM »

Hi @Yaron2019,

Many thanks to you and all the others who had a part in this theme... I've adopted your amazing theme but I had a few special requirements, stemming from the fact that I decided to add pinball games to my cab. As part of that project, I added things like solenoids, flippers, and a plunger. More importantly I also ended up changing my monitor and its orientation, ending up with a vertical 1200x1920 screen (after some other more physical challenges with cutting and mounting). Amazingly this theme did work at that resolution, but it wasn't as perfect as I desired so I embarked on a long project of making improvements. I've learned a lot about using Attract Mode, squirrel, shaders, and finally I have the results I wanted, and good enough to present publicly.

My initial goals:

• Support any resolution but retain all features of the original theme
• Allow an alternate type of cabinet presentation (for pinball, but in theory for other uses as well)

I ran into some challenges, and ended up changing far more lines of code than I expected, but I wanted to present this version back to you, if desired. Sort of a massive "pull request", if you will. I hope you don't mind. Basically there are a few approaches we can take now, and I'm fine with any of them:

• I provide my updated files to you and you include them in your official version
• I treat my version as separate, releasing this "any resolution" version myself
• I keep my version to myself, as my own modified version (in case you prefer not to have a modified version of your work released)

Now on to the details of all the changes I made:

• First, add the ability to display the theme at any aspect ratio - this was critical to my goal of supporting all resolutions, letting me test everything at 16:9, 16:10, 4:3, 1:1, 3:4, 10:16, 10:9 (which is hopefully all typical resolutions)
• Add a hotkey option to reload at the "next" resolution, allowing me to quickly cycle through examples of all the different aspect ratios
• Change most everything to rely on formulas instead of hard-coded numbers/percentages
• Render all components of the cabinet/snap/marquee/etc at a standard size internally, and then resize the entire surface afterwards
• Use a configurations table to drive the positioning and rules of the various components (important for supporting another type of cabinet, for pinball)
• New images for a pinball cabinet, with different positioning of cabinet/snap/marquee and sizing
• Allow cabinet to be horizontally "squeezed" up to a point, to make things fit better
• Beyond that point, resize the cabinet smaller (so a mix of some squeezing and some shrinking) -- this means for vertical screens the cabinet is no longer full height, which presents some challenges...
• Added "topper" image to place above the cabinet when it isn't full height -- definitely an imperfect workaround, needed because the cabinet images don't go all the way to the top (it looks good for typical cabinets but for odd-shaped cabinets this isn't going to look right, so this solution might need further adjustments)
• Rework the "wheel" to be formula based too (finally a reason to use my high school trigonometry) -- BUT this introduces a problem, as it's nearly impossible to match the exact curve and position when using the shaded background image, so...
• Solution: Learn all about GLSL shaders, and write a shader that draws the shaded background curve for the wheel (and another shader for the rectangular version)
• Bonus: Now we can choose the color of that shaded region too, so I added an option for color
• Reduce wheel height for vertical screens, so we see the entire height of the curve in that case
• Rework bezel rendering, now processing the left/right sides separately and using horizontal compression to show the entire bezel (for vertical games). Note: I did also work out a simple change to support the original logic, cropping the outer edges of the bezel rather than compressing, but I like this result better
• Fix to not show the scanlines effect over the bezel sections
• Disable scanlines for vector-based games
• Show the game information on two lines when the screen is vertical
• Position box art at the top for vertical screens (as the cabinet is not full height in that case)
• Rework the screen glow effect to work for any screen size (this one had me confused for a long time)

Here are some examples (this only includes one horizontal and one vertical example of each cabinet type, but I can provide other resolutions/configurations/etc.). I'm sure I've missed some things, but it should now be easier to make any needed changes in a resolution-independent way. 

35

Scripting / Re: Trying to understand position within a shader

« on: April 05, 2021, 10:08:52 PM »

I was able to track down my issues with this, and I'm beginning to understand it better. gl_FragCoord is indeed usable but I learned two important points, which I'll document here in case they are useful to others in the future:

• The coordinate system is opposite to the normal AM screen coordinates. Within a shader (0,0) is bottom left instead of top left.
• The coordinates are relative to the entire screen size. Normally this should not be an issue but in my case I am setting fe.layout.width and fe.layout.height to make the dimensions smaller because I'm testing different layout resolutions. This leaves some unused space on the screen edges, and those pixels still count.

For point 1, we can change the behavior by placing this line at the top of the shader code, switching to the AM style layout coordinates:

layout(origin_upper_left) in vec4 gl_FragCoord;

For point 2, I'm now passing a set of offset coordinates to the shader, and using them to shift the position and accommodate the extra screen edges. In my case this was like:

shader.set_param("fragmentOffset", -(ScreenWidth - flw) / 2, -(ScreenHeight - flh) / 2);

And then used in the shader like so:
vec2 position = gl_FragCoord.xy + fragmentOffset;
(then I use position instead of gl_FragCoord)

36

Scripting / Trying to understand position within a shader

« on: April 02, 2021, 10:39:45 AM »

I'm experimenting with writing my first shader, but I'm having a hard time using gl_FragCoord to determine the position within the image. Does anyone here have experience with this? I can set gl_FragColor and see results, but what I can't seem to do is pass values into the shader (say a position and a size), and then use those values relative to the current coordinate in gl_FragCoord. Basically I'm trying to color a specified set of pixels within the image, where those locations are provided by an AM layout. Is there a secret I'm missing? I can get the desired results in an online tool such as thebookofshaders.com, but using the same code (I think) in a shader called by AM does not give the same results. I suspect the difference lies in how the coordinates are used, but I don't know of any direct way to "debug" the shader and show those internal values at run time.

I can put together a test example if needed, but I was hoping someone here knows something about conversion between a "standard" GLSL fragment shader and an AM compatible shader. In case it matters, the object I'm assigning the shader to is a surface.

37

Themes / Re: At-The-Arcade Multi-Cab [Release] - Updated 14 February 2021

« on: February 14, 2021, 10:38:54 PM »

Thanks Yaron for your work and even taking requests! For me the delay would only need to be on initial startup, not when switching layouts, but I'm not sure if the layout code would even know the difference. Probably it should just be an AttractMode feature rather than a layout feature. But anyway it is all working well.

38

Themes / Re: At-The-Arcade Multi-Cab [Released]

« on: February 09, 2021, 08:37:31 AM »

The new music settings are really great! Feature request: I'd like if there were a setting for the music location, so that we could point to some other common directory. And maybe a startup delay setting for the music (as I already play some audio when starting up AttractMode, so the two are overlapped currently).

39

Themes / Re: DynamicArcade layout beta-v9 released 26 Jan 2021

« on: February 03, 2021, 10:17:49 AM »

That sounds like an excellent module! Thanks mahuti!

40

Themes / Re: DynamicArcade layout beta-v9 released 26 Jan 2021

« on: February 02, 2021, 08:45:54 AM »

That's great, I didn't realize the snap size was still the same. Nice effect! It's tempting to do for every game regardless of orientation, but a complete solution would require a lot more logic, and knowledge of the bezel dimensions as well.

But yeah, just from looking around briefly it does seem like these efforts tend to be a bit ... fragmented. Each one for a specific purpose.

41

Themes / Re: DynamicArcade layout beta-v9 released 26 Jan 2021

« on: February 01, 2021, 04:53:55 PM »

Well that looks very nice! Definitely loses some available space for the video (unavoidably), but it's a really great option. But is there any good library out there of full-sized bezels (or at least as large as the side-bezel library that Yaron found)? If needed I'd be ok with doing some image editing for the games I use, but I only play a few dozen games so it's a very small subset of what others would want for a proper MAME library.

Seems like the ultimate group project would be a full set of cabinet images (control panel, marquee, bezel, snap, side art,...), with standard sizing but available as separate parts or combinable. But I doubt that anything like that exists.

42

Themes / Re: At-The-Arcade Multi-Cab [Relased]

« on: February 01, 2021, 10:11:37 AM »

Showing bezels for horizontal games seems possible (and those bezels are usually fairly thin), but I think it would also require checking the resolution of the 'snap' image, and reducing its size a bit if it is already full width.

43

Themes / Re: DynamicArcade layout beta-v9 released 26 Jan 2021

« on: January 31, 2021, 12:05:08 PM »

That looks very nice! Personally I prefer a bit of separation but the shader accomplishes that. And it's definitely an advantage to use the same image files. How were you able to find room for the entire bezel? [edit - actually I see you didn't fit the entire image, but most of it]

Now that bezels are in play, in hindsight, it probably would have been better if the cabinet images didn't contain a black bezel/border. More space to work with.

44

Themes / Re: DynamicArcade layout beta-v9 released 26 Jan 2021

« on: January 31, 2021, 10:09:11 AM »

I did some test mods in the layout.nut, but I used Yaron's theme for that since it had the side bezel support already (so I don't even know which post is more relevant for this discussion). I "squished" the bezels at run time so they are displayed narrower, and placed the left/right sides of that separately. I actually think it looks pretty nice, as it keeps the full screen snapshot while also showing the full bezel (albeit squished). The main issue I ran into is that the snaps have varying aspect ratios, and similarly the visible bezel widths differ from game to game. Nothing about the bezel files tell us the inner width, so I had to take a guess on a percentage that looks good on most games.

Then as an experiment I tried enabling it for horizontal games as well, and it actually didn't look too bad. Mainly because the bezels for those games are already much thinner than the vertical game bezels. Could be enabled as a separate option perhaps. But to handle it better, we'd probably need to compute the aspect ratio for those horizontal snaps, and if it is too wide (basically consuming the entire available area, as some of them do, we could shrink the snap size a little).

Here's an example of a vertical game (1943) and a horizontal game (Defender), with the bezels squished to 65% of their full size. I can share the code I used, but it was based on the "At-The-Arcade Multi-Cab" layout so not directly applicable for this layout.

45

Themes / Re: DynamicArcade layout beta-v9 released 26 Jan 2021

« on: January 30, 2021, 09:34:04 AM »

Thanks jclampy69! I really like seeing those bezels but agree that it hurts to narrow the snap image, and makes the bezels seem comparatively too large. I looked at what the original cabinet looked like (https://www.tripletsandus.com/80s/80s_games/1943.jpg). I found it interesting that there was no black border around the screen, but I tried a photoshop mockup that way and it just doesn't look right. Your black border seems necessary.

I tried a mockup keeping the original snap image, adding the black border, and then squishing the width of the bezel sections. I like the result but admit it would be more effort, as I think the squished left/right sides of the bezel would need to be rendered separately. Not sure how much effort you want to put into it, but here's my mockup just to see what it could look like.