Gerard's Blagoblag Projects/Articles Shaders Github Shadertoy OpenProcessing Resume

Arcade Interface

On RIT's Computer Science House there is an arcade machine built by some bros that currently is a multi-game cabinet. The prior interface to select a game was rather lackluster, so I decided to have a go at redesigning it. Previously games were merely an alphabetized list of names that the user scrolled through. While effective, it didn't frame the games in the cabinet in any sort of enticing light. Put simply, it wasn't very graphical.

My interface sets out to change that.

The new UI is centered around a tile-based selection mechanic. Each tile has four neighbor slots, which can point to any other tile in the tile grid (or no tile, for that matter). Beyond that, the interface can store multiple grids of tiles that can be easily switched between.

The tiles each store three screenshots, one to display on the tile when it is not currently highlighted, one to display when it is, and one to display in the background of the UI when the tile is highlighted.

Arcade UI Gunstar Heroes highlighted Arcade UI Streets of Rage 2 highlighted
Notice the different images displayed in the background and on the tiles in these two screenshots.

The UI works by making system() calls to the OS; each tile has a command that is executed when it is selected. This allows for maximum versatility. Any program can be assigned to a tile--games running in Kega Fusion to others that are running natively on the machine can be represented in the UI. They merely have to be able to be exited with the cabinet's controls.

Each tile is highly configurable. Besides their neighbor relationships, their positions, images, and sizes can be configured. Besides that, the fact that they can have frames is also user-defined. Tiles can also be specified to not be selectable.

The interface itself has many properties that can be tailored as well. The BGM track, sound effects, and their volumes are all adjustable, as are the frame sreenshot, the time taken between frames, the shutdown time, and many other parameters. You can even specify your own shaders if necessary.

UI Config Tile Config
Screens showing the properties of the tiles and editor that are user-defined.

Tile editor
An editor is available to create tile configurations.

Action Video

A short video captured in Fraps that shows the general operation of the UI. Note that grids are switched between, but as a lazy oversight, they all contain the same games.