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 game</title></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&0ROM_LOAD32_WORD_SWAP( "3-u41.bin", 0x000002, 0x080000, CRC(0d53196c) SHA1(454bb4695b13ce44ca5dac7c6d4142a8b9afa798) ) // 3&2ROM_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>

哦了，想要任何mame的游戏编译到h5上，
去找rom，然后简单改这几行代码就好了
enjoy吧，啦啦啦

wasm编译mame游戏到h5中相关推荐

小游戏与H5游戏对比与梳理
H5游戏是运用了h5技术的响应式网站布局的游戏,它完全实现了网页游戏在手机移动端的无缝衔接.众所周知,H5游戏已盛行了多年,而如今,随着诸多小游戏的推出,小游戏爆款频出,从"跳一跳" ...
解密｜小游戏与H5游戏的不同之处
从"跳一跳"到"羊了个羊"微信小游戏上线4年时间,除了涌现出不少火爆全网的小游戏之外,也有类似于"动物餐厅"."口袋奇兵" ...
小程序游戏 vs h5游戏，技术优势分别有哪些
从"跳一跳"到"羊了个羊"微信小游戏上线4年时间,除了涌现出不少火爆全网的小游戏之外,也有类似于"动物餐厅"."口袋奇兵" ...
浅显易懂的说清楚小游戏与H5游戏的区别
从"跳一跳"到"羊了个羊"微信小游戏上线4年时间,除了涌现出不少火爆全网的小游戏之外,也有类似于"动物餐厅"."口袋奇兵" ...
H5中的明星互动，变为另一种品牌推广营销方式
H5推广的形式中有一个方式是在其中加入明星互动,从刷屏朋友圈的"吴亦凡入伍",到如今许多的企业品牌都喜欢利用明星在H5中进行互动推广.比如曼妥思-潮清凉:与张艺兴连线视频,碧欧泉: ...
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
之前开发一个小游戏在手机和ipad上都可以正常使用,后期需要扩展h5业务,发现uni-app中touch事件失效了,使用jquery相关事件代替实现了. 原代码: <button type=&q ...
案例：React Native在字节跳动游戏营销场景中的实践
????????关注后回复 "进群" ,拉你进程序员交流群???????? 作者丨熊文源来源丨前端之巅(ID:frontshow) https://mp.weixin.qq.co ...
金山网盾监测：游戏玩家下载西西游戏外挂会中大量***
金山网盾监测:游戏玩家下载西西游戏外挂会中大量*** 据金山毒霸安全实验室监测,6月17日,金山网盾云端数据突然监测到西西游戏网的当日外挂下载均报危险.西西游戏网是深受外挂玩家欢迎的游戏外挂下载网站, ...
swift禁用webView对H5中数字，链接，日期，地址，电话号码做解析
showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析其UIDataDetectorTypes属性 ...

wasm编译mame游戏到h5中

wasm编译mame游戏到h5中相关推荐

最新文章

热门文章