Discord
Login
Community
DARK THEME

Getting microStudio Games to work on an arcade cabinet or similar device + making keyboard only games work with gamepads

Getting microStudio Games (or any other html game) to work on an arcade cabinet or similar device

In this article i'm going to explain how i got microstudio games to work on my arcade cabinet, how these arcade cabinets generally work as well as provide a way to make microStudio games that have only keyboard input work with gamepads.

To give you an idea what the end result would be here is a video where i show it

MicroStudio Games working on my arcade cabinet

What is an arcade cabinet

An arcade cabinet is a device that was mainly used around 70-2000's to play coin operated video games. It featured a specific shell where you would stand in front of, a screen, a joystick and buttons to control the games as well as circuit boards to make the game work.

Here you see an example of mortal kombat 2:

arcade cabinet

What are arcade cabinet's people use at home or create themselves ?

People have been (re)creating the experience of these arcade cabinets and games for a long time 20+ years, they would generally allow you to select (arcade) games to play in a software called the Frontend, start the games (called roms) in an emulator that would mimic a systems hardware in a software way, have a PC (or raspberry pi etc) inside it to host all this software, a screen and joystick and buttons connected to an usb encoder and then to the pc.

The Shell / cabinet

People either make these themselves in wood or buy a kit with pre cut panels or buy a 2nd hand old real arcade cabinet or arcade one 1 up to use as a shell to host the pc, screen and controls etc. I'm not good with woodworking so what i did many years ago was buy one of the very 1st arcade 1 up street fighter cabinets and a riser and i removed everything inside it so i kept the shell. Nowadays arcade-1up's are too expensive to use it only as a shell but you may find one second hand or so. there also exists sites selling complete arcade cabinets which contain the she shell + controls + screen already and in some cases also a pc. Depending on the site and supplier as well as what options you choose these can be very expensive.

Frontend

The Frontend as explained earlier would take control over setting up emulators, managing roms (games) and listing them so you can select them. Launching these emulators after selecting games (roms) for them. Generally they also allow for media related to the games to be shown while selecting them, these can be video's or screenshots. There exist quite a few of such frontends and each one require their own way to set them up. I personally use Attract Mode, but not many people use this as it may be a bit difficult to setup. Here are some examples:

For a bigger list check this wiki article

Screen

Most people wil use some CRT Monitor to mimic the arcade screens of old, but you can use any generic pc screen as long as you mount in the shell for the cabinet. I personally had used an arcade 1up cabinet but i left the screen inside it and bought an LCD Display controller from amazon that would work with these arcade 1 up screens. Basically lcd displayer controllers allow you to hook up a screen (from a laptop or another device) to some control board and allow for audio output as well as video input. They basically drive the screen. If you use a normal pc screen you obviously don't need this but i did not want to mount a completely new screen in arcade 1 up shell as i'm not good at such things

Controls + Usb Encoders

For the controls you need an arcade joystick as well as arcade buttons but these controls generally are not compatible with PC's so what you need is a small PCB where you hook up the arcade controls to and then hook up the pcb to one of USB ports of the pc inside your cabinet. These are called USB Encoders. You can get these encoders in a kit on amazon including a joystick and buttons for a fairly cheap price or you can go all in and buy well known usb encoders like i-pac's and expensive sanwa or so arcade controls that are much better quality. What you do with this is up to you.

Generally there exist 3 kind of usb encoders

USB Encoders that mimic a keyboard

The contollers will show up as a hid keyboard when used with these kind of usb encoders and when you press a button or move the joystick the pc will see the input as keyboard button presses. Some encoders allow you to reprogram the keys the encoder will send when a button is pressed some don't

USB Encoders that mimic a gamepad

The contollers will show up as a hid gamepad when used with these kind of usb encoders and when you press a button or move the joystick the pc will see the input as if a gamepad was conncted to the pc. Some of these encoders work in a direct input way, some can mimic xbox controllers and work with xinput

USB Encoders that can switch between keyboard and gamepad mode

These controllers can work in both ways and usually you can switch between them by the press of an extra button connector they supply.

With the cheap kits on ebay or amazon you can't really know what they are unless it is mentioned, in my case it was an usb encoder that mimic gamepads and did not have options to switch to keyboard layout. As you can probably tell this can introduce problems for games that only support keyboard and not gamepads, generally a game or emulator always support keyboard input so it may be safer to go for the ones that act as a keyboard. However there are ways to make keyboard only encoders mimic gamepad (xinput) controls as well as ways to make gamepads send keyboard input using extra programs. In case of keyboard encoders you can also create easy autohotkey scripts that remap the keys, but in case of gamepads this is not directly possible with autohotkey as it can not block the gamepad input so in games that accept both keyboard and gamepad input at the same time it could cause issues.

how i made Microstudio Games work with (my) arcade cabinet

So we need to figure out how to start the games and have games be selectable in the frontend. Basically we need to mimic an emulator that would accept roms to identify the games and then launch them. There are many ways you can accomplish this but this is the (quick & easy) route i took

Launching microstudio games using chrome

Since the games are webbased the easiest way would be to run them in a browser, luckily chrome has many command line parameters that allow you to setup kiosk mode, disable security things, make audio directly work, keep its data directory seperate from your normal browsing etc.

So basically the way i launch a game is in the following way (adapt paths to your install) to launch my blockdude game

"C:\Program Files\Google\Chrome\Application\chrome.exe" --autoplay-policy=no-user-gesture-required --disable-web-security --user-data-dir=N:/Hyperpie_V2_PC/emulator_programs/microstudio/wwwdata --kiosk https://microstudio.io/joyrider3774/blockdude/
  • 1st part is specifying where chrome.exe is, in my case it is C:\Program Files\Google\Chrome\Application\chrome.exe, we put this between double quotes because there is a space in "Program Files"
  • --autoplay-policy=no-user-gesture-required makes it so that we do not have to click or interact with the website to make audio start, basically music and sound will immediatly start
  • --disable-web-security i'm not certain it is needed, but i added it anway it basically disables all web security inside the browser, i did this as sometimes i encounter issues with other html pages (for example WASM web emulators running from a html file on my c drive) i think for microStudio games it can probably be left out but i did not test it
  • --user-data-dir=N:/Hyperpie_V2_PC/emulator_programs/microstudio/wwwdata make it so that chrome saves all the user data in a seperate directory being in my case N:/Hyperpie_V2_PC/emulator_programs/microstudio/wwwdata so it does not interfere with your normal browser setup. You have to make sure the location (directory) exits before passing in this parameter
  • --kiosk makes it so that the browser will run in kiosk mode, basically this a mode where only 1 page is usually loaded, there is no adress bar, and it runs full screen. Exactly what we need
  • https://microstudio.io/joyrider3774/blockdude/ the url to load

Simulating roms / game selection

in the previous section i explained how you can start a microStudio game in the browser in kiosk mode but now we need to have an emulator we can configure in our frontend have the games be launched as a rom. You see frontends basically require you to setup an emulator (path to a batch file or exe of program) and a directory of roms with certain extension that the filenames have. The frontend usually list the filenames with the specified extension in a list or so and when you select a rom in the frontend it basically launches the emulator and passes the filename of the selected game as a parameter to it.

it's simpler than it sounds but we basically need a way for chrome to be the emulator and to make the games be seperate files so that we can let our frontend list these "game files" (roms) and launch them through our "emulator" (chrome).

The way todo is rather simple first create a batch file named launchurlmicrostudio.bat and put this inside it

"C:\Program Files\Google\Chrome\Application\chrome.exe" --autoplay-policy=no-user-gesture-required --disable-web-security --user-data-dir=N:/Hyperpie_V2_PC/emulator_programs/microstudio/wwwdata --kiosk %1

as you can see we only replaced the url with %1 in batch files this referers to the 1st parameter given when launching the batch file. so now we can just do this in a cmd prompt and it will still launch the browser and games, basically we made the url a parameter

launchurlmicrostudio.bat https://microstudio.io/joyrider3774/blockdude/

now we need a batch file per game that would call Launchurlmicrostudio.bat with as parameter the game url (rom). For example Create BlockDude.bat and put this inside it

call N:\Hyperpie_V2_PC\emulator_programs\microstudio\launchurlmicrostudio.bat https://microstudio.io/joyrider3774/blockdude/

Adjust the path to where you saved the earlier created launchurlmicrostudio.bat

In the Last Step we need another batch file that will basically just run anything it gets passed as parameter. This is our "emulator" bat file the reason i do it this way is so we can add other things to launch before launching the games and have it seperate from each game batch (more on that in a later section)

so create a file launchmicrostudio.bat and put this inside it

rem start "" "..\..\scripts\quitactivewindow.exe"
call %1

Basically this batch files will just launch any file that gets passed as the 1st parameter and before that call we can set other things. I'll explain the quitactivewindow.exe later.

So we now have a file Blockdude.bat that will call launchurlmicrostudio.bat and pass as parameter to it the game url https://microstudio.io/joyrider3774/blockdude/. It may not be clear what the File launchmicrostudio.bat does but basically you can now do the following

launchmicrostudio.bat  N:\Hyperpie_V2_PC\roms\microstudio\Blockdude.bat

and launchmicrostudio will launch the batch files. Essentially we just created a rom (blockdude.bat) that gets passed to the emulator (launchmicrostudio.bat) which just runs the passed in batch file and potentially first run some other programs. Now you can create per game a gamename.bat file that just passes in their own game urls and our frontend will see the *.bat files as roms and show its filenames as the selectable games and launch them through launchmicrostudio.bat that would essentially just run the passed in game's (rom's) batch file.

so in your frontend you set launchmicrostudio.bat to be the emulator and the directory containing your game *.bat files as the roms directory and as rom extension you set (*.)Bat

Quiting Games

By default there is no way to quit the launched chrome instance but using autohotkey i created a script that would close the active window on a joystick button combination. This script is easily adapted to do the same on keyboard press (in case you got keyboard encoders)

saves this as quitactivewindow.ahk

#SingleInstance ignore

while (true)
{
    if ((getKeyState("joy2") && getKeyState("Joy8")) || (getKeyState("2joy2") && getKeyState("2joy8")))
    {
        WinClose A
        sleep 900
    }
    sleep 100
}

you can then compilve above script to an exe by right clicking it and choosing compile (if your got autohotkey installed) and then if you change now the launchmicrostudio.bat to the following:

start "" "..\..\scripts\quitactivewindow.exe"
call %1

(adjust paths)

it will always make sure the quitactivewindow.exe program gets run before launching a game and you can quit the game using the game pad button combo you had choosen (button 2 + button 8 in my case on joystick 1 or 2)

Making Games that are keyboard only work with gamepads (usb gamepad encoders)

I noticed a lot of games on microstudio don't have gamepad support implemented so that is an issue for my arcade cabinet as it uses gamepad encoders so essentially normally i could only play games that had gamepad support implemented. I don't want that and Luckily there are ways to make gamepad's simulate keyboard input on the press of a button one such simple tool is joy2key. You set it up so that for your (usb) gamepad (encoder) when you press a button it would send a keypress instead. You probably want to put the joystick to arrow keys or awsd, at least have a button send Escape, Enter and space and a whole lot of games will already work. I also noticed some games used S for start game or R for retry or restart in certain levels so may want to use those as well

I had set mine up like so as a microstudio profile

joy2key config

you also want to create a 2nd "None" profile where no keys are being simulated, then you could assigin the microstudio profile to chrome.exe so it is only active when chrome.exe is running and otherwise use the none (no controls) simulated

joy2key chrome config

Making programs not see your (usb) gamepad (encoders)

So basically with above section keyboard only games will work with your (usb) gamepad (encoder) as well but there is an issue if a certain game supports both joypad input as well as keyboard input the simulated keyboard controls and the gamepad buttons being pressed could interfere with each other because joy2key can not block the games from gamepad input being detected as well so we need a way to make chrome not see the gamepad buttons being pressed but only the (simulated) keyboard presses. Luckily there exists a program for that as well and it's called HidHide. The program allows you to select gamepads and a list of processes that will either whitelist or blacklist them from seeing your gamepad.

Todo this i've set it up like so

first add the chrome application to the list of application and make sure to select invert list so that the supplied application are blocked from seeing your gamepad's and all other programs not

block list

secondly select your (usb) gamepad (encoders) in the devices tab and once selected enable the hide checkbox

devices

and the only thing you need todo now is reattach your (usb) gamepad (encoders) to your pc and it will work. Now if you launch chrome and you use joy2tokey only the simulated keyboard presses from joy2tokey will be seen by games / chrome and nothing else. You only need to set up all this once and you don't need to reattach your (usb) gamepad (encoders) when start your pc (arcade cabinet)

What a great article 🍻

Thanks for taking the time to explain it step by step with all the details.

Great job, gives me many tinker ideas 😁

No problem, it's only the tip of the iceberg though, as such cabinets are a complete hobby in their own, like building it, getting it to work, making the software work, finding the roms for emulators, making all kind of systems work, scourging artwork for the games (thats called scraping), etc

It's also done in the same way for virtual pinball cabinets with its own frontends and software to replay old pinball tables. I own such virtual pinball cabinet as well :)

You could also create a bartop like these instead of a full blown cabinet it works the same way but is much smaller, premade kits also cost less.

I once started with a pimoroni picade and a raspberry pi but you could basically put a small form factor pc inside it (think old intel nuc or so) instead of raspberry pi's what people usually use (to save on costs) and you can buy it without the raspberry pi as well as a kit to assemble but it's a bit expensive. here's a picture of it

picade

for Microstudio games i doubt a raspberry pi will be fast enough to handle 60 fps + browser + javascript so may want to go intel nuc or so and then either windows or linux on it

You can probably also find premade wooden shells on amazon or ebay or etsy if you search for bartop on the store. Or you can make just a control box (with pc or rapsberry pi inside) and hook it up to a tv

Post a reply

Progress

Status

Preview
Cancel
Post
Validate your e-mail address to participate in the community