- 전체
- 게임 일반 (make game basics)
- 모바일 기획 및 디자인
- GameMaker Studio
- Unity3D
- Cocos2D
- 3D Engine OGRE
- 3D Engine irrlicht
- copperCube
- corona SDK
- Windows Basic Game
- BaaS (Mobile Backend)
- phnegap & cordova
- ionic & anguler
- parse (backend)
- firebase (backend)
- Game Backend Server / Opt
- web assembly
- Smart Makers
- pyGame
- 머드(MUD) 게임 만들기
- Xamarin(자마린)
- flutter (플루터 앱 개발)
- construct 2 / 3
web assembly [웹 어셈플리 WASM] emsdk MAME Web Application
2021.01.24 14:27
[웹 어셈플리 WASM] emsdk MAME Web Application
MAME Web Application
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
- Compiled from
- A
.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
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
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
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.gz
. Direct 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 driver
, emulatorJS
, mountFile
, 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
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
104 | (CGP) 15장. 탱크 맵툴 만들기 | 졸리운_곰 | 2021.06.28 | 223 |
103 | (CGP) 14장 Sogo 게임 | 졸리운_곰 | 2021.06.28 | 21 |
102 | (CGP)13장. 패턴 뷰어 | 졸리운_곰 | 2021.06.28 | 19 |
101 | (CGP) 12장 Snake 게임 | 졸리운_곰 | 2021.06.28 | 23 |
100 | (CGP) 11장 Snake 게임 툴 만들기 | 졸리운_곰 | 2021.06.28 | 50 |
99 | (CGP) 10장. 하트담기 게임 | 졸리운_곰 | 2021.06.28 | 25 |
98 | (CGP) 9장. 하트 툴 만들기 | 졸리운_곰 | 2021.06.28 | 22 |
97 | (CGP) 8장. 벽돌깨기 게임 | 졸리운_곰 | 2021.06.28 | 48 |
96 | (CGP)7장. 짝 맞추기 게임 | 졸리운_곰 | 2021.06.28 | 129 |
95 | (CGP) 6장. 두더지 잡기 게임 | 졸리운_곰 | 2021.06.28 | 113 |
94 | (CGP) 5장. 슛골인 게임 | 졸리운_곰 | 2021.06.27 | 151 |
93 | (CGP) 4장. 사운드 | 졸리운_곰 | 2021.06.27 | 77 |
92 | (CGP) 3장. 게임의 기본 구조 | 졸리운_곰 | 2021.06.27 | 126 |
91 | (CGP) 2장. 함수 | 졸리운_곰 | 2021.06.27 | 36 |
90 | (CGP) 1장. C언어 | 졸리운_곰 | 2021.06.27 | 59 |
89 | (CGP) 0장. C를 이용한 게임프로그래밍 강좌를 시작하기 전에 | 졸리운_곰 | 2021.06.27 | 172 |
88 | [pyGame] python 게임(game)만들기 - 파이썬으로 게임 만들기 튜토리얼 | 졸리운_곰 | 2021.05.12 | 606 |
» | [웹 어셈플리 WASM] emsdk MAME Web Application | 졸리운_곰 | 2021.01.24 | 49 |
86 | [특집] 쇼기(將棋)두는 법 (일본 장기) | 졸리운_곰 | 2021.01.17 | 58 |
85 | 체스, 장기(한국), 중국 장기 게임 게임 제작 이미지 (chess game image data) | 졸리운_곰 | 2021.01.17 | 94 |