[웹 어셈플리 WASM] emsdk MAME Web Application

MAME Web Application

 

MAME Documentation

GitHub Repository

Emscripten Javascript and HTML will help to run this emulator within a web application

Overview

To run mame as a web application, we need a few things..

  • ROMs to run
  • MAME Source Code
  • Clone & Install Emscripten
    • Compile MAME with Emscripten
  • Clone Emularity Loader
    • Copy required configurations to the root of our webserver
    • Modify the javascript within Emularity's provided .html examples to reflect the ROMs and emulators we want to run
  • Configure NGINX to point to our Emularity configs

MAME is the emulator

Emscripten is the compiler

Emularity is the loader ( We need this to serve the compiled .js files generated by Emscripten )

ROM Requirements

To run a specific ROM within this webserver, we need a few specific files

  • A MAME driver for the ROM we want to run
    • Compiled from .cpp to .js using Emscripten
  • .zip archive containing the ROM itself

End Result

Pressing TAB brings up an options menu, allowing for the user to modify this session's keybinds and other various settings. I have not found a way to make these persist either on the backend or frontend of Emularity.

Local MAME Installation

This step is intended to build and run mame on a local machine, and not technically required to host MAME within a webserver. It can be a nice way to verify ROMS by checking if you are able to run them locally, though. If not interested in this testing feature, you can skil to the section below on Emscripten.

 
 

If you have access to multiple cores, be sure to pass the -j5 flag in the command above to take advantage of the extra processing power. Generally, the rule of thumb is to pass the number of cores in your processor + 1 to the -j flag.

Depends

To compile MAME, you need a C++14 compiler and runtime library. We support building with GCC version 7.2 or later and clang version 5 or later. MAME should run with GNU libstdc++ version 5.1 or later. - MAME All Platform Docs

GCC 7.2 or later

 
 
 

Clang 5 or later

 
 

libstdc++ 5.1 or later

 
 

Emscripten

About EMscripten

Depends

Python, CMake, and Java are not provided by emsdk. The user is expected to install these beforehand with the system package manager - Emscripten Linux Install Docs

 
 

Installation

This is very well documentated at EMscripten.org

 
 
Errors

Had this issue as well at a few different points during installation, running Kubuntu 20.04 in a virtualbox VM. I was able to manually wget the files returning 104's with no problems, though. After reading the previous comment, I just kept rerunning the command to install and eventually each error resolved itself. Errors I encountered are below

First 104

 
 
 

So at this point, I try wget to grab the errored URL above. It errors once, retries and continues ¯_(ツ)_/¯

 
 
 

Ran it again, and it completes below..

 
 
 

Re-ran, Errno 104, ran again, and it completes below but npm has an integrity error?..

 
 
 

Ran one last time and it completes

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 
 

Compiling MAME Using Emscripten

As a test, from within the root directory of our mame installation, run the following command to compile the pacman.cpp driver

 
 

SUBTARGET can be any unique identifier you want to specify for this build.

Be sure to append REGENIE=1 for rebuilds of mame to allow the settings to be rebuilt.

SOURCES can be used to target a driver program for testing..?

If you have access to multiple cores, be sure to pass the -j5 flag in the command above to take advantage of the extra processing power. Generally, the rule of thumb is to pass the number of cores in your processor + 1 to the -j flag.

When the compilation reaches the emcc phase, you may see a number of "unresolved symbol" warnings. At the moment, this is expected for OpenGL-related functions such as glPointSize. Any others may indicate that an additional dependency file needs to be specified in the SOURCES list. Unfortunately this process is not automated and you will need to search the source tree to locate the files supplying the missing symbols. You may also be able to get away with ignoring the warnings if the code path referencing them is not used at run-time. - MAME Emscripten Javacript and HTML Docs

If all goes well, a .js file will be output to the current directory. This file cannot be run by itself, but requires an HTML loader to provide it with a canvas to output to and pass in command-line parameters. The Emularity project provides such a loader. - MAME Emscripten Javacript and HTML Docs

Errors

I faced the following error with LzmaEnc.c when compiling MAME using Emscripten

 
 
 

This can be resolved by opening the file referenced in the error above for editing within vim. Once open, run :1405 to jump to the block of code resulting in errors. You should see the code block below

 
 

Notice the commented out /* if (_maxMode) */ on line 1404, right above the indented block causing the error.

In the interest of using vim efficiently, this can be fixed in a few keystrokes from our current position after running :1405 within vim. Simply press v%<< to correct this block and save with :w. Now retry the compilation of pacmantest using the same command as before and everything should complete normally.

I'm not sure whos problem this would be, but there is no open issue on the emscripten GitHub

Configure Emularity

Emularity GitHub

See TECHNICAL.md file for more technical documentation

Clone this repo, either directly within the root of your webserver or in another location and manually copy over the following files / directories to the root of your web server.

  • emulators/
  • examples/
  • images/
  • logo/
  • es6-promise.js
  • browserfs.min.js
  • loader.js
  • example_arcade.html

First, take a look at the Emularity Example Arcade File as a good starting point. This file, example_arcade.html, contains the general directions below

 
 

By default, this file contains the following HTML

 
 

Before we continue, we will need to grab the relevant .js.gz for the game we are emulating from an Emularity archive. For me, this was mamebublbobl.js.gzDirect Download. Run sudo gzip -d mamebublbobl.js.gz to extract the .js file needed to emulate this ROM.

The .js file extracted needs to be placed within the relevant directory specified within example_arcade.html.

To adjust this to my system, I need to edit driveremulatorJSmountFile, and fetchFile. If needed, the file can be adjusted further to suit your preferences or ROMS. My working example_arcade.html is seen below

 
 

Found on Emularity's GitHub, loader.js around line 1228, we can see the Emulator object's source code below.

 
 
 

Configure NGINX

If not installed, sudo apt install nginx to install and enable the nginx service on your local machine. If things are working normally, we should be able to visit localhost within a web browser to view the default nginx HTML example page. Next, we'll change this landing page to point to a directory where we will later copy our compiled emscripten files along with the relative emularity configurations.

Edit /etc/nginx/sites-enabled/default to pass to your preferred directory on your server by changing the root directive within the server block to point to your directoy, as seen below.

 
 

From the directory where we ran emmake to compile mame using emscripten (the root directory of mame on our system), we will need to relocate the following files to the root NGINX directory

 
  • The compiled MAME .js file (Output by emscripten after running emmake make)
  • The compiled MAME .wasm file if using WebAssembly (In this case, we are not)
  • The .js files from the Emularity package (es6-promise.js, browserfs.min.js and loader.js are required)
  • A .zip file with the ROMs for the MAME driver you would like to run (if any)
  • An Emularity loader .html modified to point to all of the above

Additionally, if you have any other software files you would like to run with the MAME driver, be sure to move them to the root NGINX directory as well.

[출처] https://www.knoats.com/books/self-hosted-applications/page/mame-web-application

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED