wasm编译mame游戏到h5中

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即可
wasm编译mame游戏到h5中_第1张图片
wasm编译mame游戏到h5中_第2张图片
游戏中的原图,应该不会被封吧

同理:
如果想编译变身忍者
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>

wasm编译mame游戏到h5中_第3张图片
哦了,想要任何mame的游戏编译到h5上,
去找rom,然后简单改这几行代码就好了
enjoy吧,啦啦啦

你可能感兴趣的:(wasm,javascript,wasm)