1.准备代码:
https://github.com/mamedev/mame
下载 name的源码
https://github.com/db48x/emularity
下载 emularity 为h5端的内容
把mame的代码 ln -s 到
emularity/emulators/mame下
2.准备游戏的rom:
网上搜到变身忍者 的rom 为shadfrce.zip
战国之刃2的rom为 tengai.zip
放到emularity/emulators/roms里
3.安装emscripten:
验证emcc可用,需要用到emmake
4.编译
进入mame目录:
战国之刃是彩京到作品,
编译
emmake make SUBTARGET=psikyo SOURCES=src/mame/drivers/psikyo.cpp
编译之后得到
mamepsikyo.js
mamepsikyo.wasm
psikyo.bc
三个文件
5.使用wasm
基础支持参考《Learn Webassembly》那本书的第八章,
原理就是wasm能把sdl和h5结合起来:
只通过1行代码
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
利用canvas解决sdl的对应问题
具体参考https://github.com/timhutton/sdl-canvas-wasm
mame有sdl的实现方式,所以mame就能放到h5上了
在h5模拟器emularity下
修改example_arcade.html ,这个是mame模拟器的h5版本
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>example arcade gametitle>
head>
<body>
<canvas id="canvas" style="width: 50%; height: 50%; display: block; margin: 0 auto;">canvas>
<script type="text/javascript" src="es6-promise.js">script>
<script type="text/javascript" src="browserfs.min.js">script>
<script type="text/javascript" src="loader.js">script>
<script type="text/javascript">
console.log("-tengai---->");
var emulator = new Emulator(document.querySelector("#canvas"),
null,
new JSMAMELoader(JSMAMELoader.driver("tengai"),
JSMAMELoader.nativeResolution(256, 256),
JSMAMELoader.scale(3),
JSMAMELoader.emulatorJS("emulators/mame/mamepsikyo.js"),
JSMAMELoader.mountFile("tengai.zip",
JSMAMELoader.fetchFile("Game File",
"emulators/roms/tengai.zip"))))
emulator.start({ waitAfterDownloading: true });
script>
body>
html>
注意指定rom的位置和刚才mame中编译的彩京的js:
mamepsikyo.js
js会引用 mamepsikyo.wasm
JSMAMELoader.driver指定的是
mame/src/mame/drivers/psikyo.cpp
中的tengai部分
ROM_START( tengai )
ROM_REGION( 0x100000, "maincpu", 0 ) /* Main CPU Code */
ROM_LOAD32_WORD_SWAP( "2-u40.bin", 0x000000, 0x080000, CRC(90088195) SHA1(8ec48d581ecd14b3dad36edc65d5a273324cf3c1) ) // 1&0
ROM_LOAD32_WORD_SWAP( "3-u41.bin", 0x000002, 0x080000, CRC(0d53196c) SHA1(454bb4695b13ce44ca5dac7c6d4142a8b9afa798) ) // 3&2
ROM_REGION( 0x020000, "audiocpu", 0 ) /* Sound CPU Code */
ROM_LOAD( "1-u63.bin", 0x00000, 0x20000, CRC(2025e387) SHA1(334b0eb3b416d46ccaadff3eee6f1abba63285fb) )
ROM_REGION( 0x001000, "mcu", 0 ) /* MCU */
ROM_LOAD( "4-u59.bin", 0x00000, 0x01000, NO_DUMP )
ROM_REGION( 0x600000, "gfx1", 0 ) /* Sprites */
ROM_LOAD( "u20.bin", 0x000000, 0x200000, CRC(ed42ef73) SHA1(74693fcc83a2654ddb18fd513d528033863d6116) )
ROM_LOAD( "u22.bin", 0x200000, 0x200000, CRC(8d21caee) SHA1(2a68af8b2be2158dcb152c434e91a75871478d41) )
ROM_LOAD( "u21.bin", 0x400000, 0x200000, CRC(efe34eed) SHA1(7891495b443a5acc7b2f17fe694584f6cb0afacc) )
ROM_REGION( 0x400000, "gfx2", 0 ) /* Layer 0 + 1 */
ROM_LOAD( "u34.bin", 0x000000, 0x400000, CRC(2a2e2eeb) SHA1(f1d99353c0affc5c908985e6f2a5724e5223cccc) ) /* four banks of 0x100000 */
ROM_REGION( 0x400000, "ymf", 0 ) /* Samples */
ROM_LOAD( "u61.bin", 0x000000, 0x200000, CRC(a63633c5) SHA1(89e75a40518926ebcc7d88dea86c01ba0bb496e5) ) // 8 bit signed pcm (16KHz)
ROM_LOAD( "u62.bin", 0x200000, 0x200000, CRC(3ad0c357) SHA1(35f78cfa2eafa93ab96b24e336f569ee84af06b6) )
ROM_REGION( 0x040000, "spritelut", 0 ) /* Sprites LUT */
ROM_LOAD( "u1.bin", 0x000000, 0x040000, CRC(681d7d55) SHA1(b0b28471440d747adbc4d22d1918f89f6ede1615) )
ROM_END
解压tengai.zip会发现,里面的文件对应到这个驱动里面
如果文件名有小的差异,修改这个psikyo.cpp的内容重新emmake即可
游戏中的原图,应该不会被封吧
同理:
如果想编译变身忍者
mame中
emmake make SUBTARGET=shadfrce SOURCES=src/mame/drivers/shadfrce.cpp
修改
emularity/example_arcade.html
<script type="text/javascript">
var emulator = new Emulator(document.querySelector("#canvas"),
null,
new JSMAMELoader(JSMAMELoader.driver("shadfrce"),
JSMAMELoader.nativeResolution(256, 256),
JSMAMELoader.scale(3),
JSMAMELoader.emulatorJS("emulators/mame/mameshadfrce.js"),
JSMAMELoader.mountFile("shadfrce.zip",
JSMAMELoader.fetchFile("Game File",
"emulators/roms/shadfrce.zip"))))
emulator.start({ waitAfterDownloading: true });
script>