Oh! java script 夢の続きを語ろうよ?emscriptenの逆襲
4 likes2,832 views
オリジナルの厂滨翱狈2に手を加えずにハイレゾ化してウェブブラウザで游べるようにしたお话。
![Emscriptenまめ知識?その３
JavaScriptから呼び出せる関数を（確実に）作る
? リンク時に-s EXPORTED_FUNCTIONS="..."
? "..."にはmainを含めた関数のリストを渡す
例："['_main', '_myAPI1', '_myAPI2']"
? 関数名は"_"のプレフィクスが付くので注意
? 数値以外は直接渡せない点に注意
? C/C++側のメモリ空間はModule.HEAPU8等でアクセス
? Module.cwrap()やWebIDL-Binderなどの道具はある](https://image.slidesharecdn.com/ohjavascriptemscripten-161221150646/85/Oh-java-script-emscripten-13-320.jpg)
Oh! java script 夢の続きを語ろうよ?emscriptenの逆襲
- 3. 知ってますか？ ● なぜか 編集部が作ったゲーム ○ 創刊10周年記念 PRO-68K に収録 （雑誌付録ディスク） ○ 編集部制作の強力インフラ ■ MAGIC2 - 3D描画ライブラリ ■ Z-MUSIC - サウンドドライバ ○ ゲーム自体、普通に面白い
- 4. 実演 原作@エミュレータ
- 5. あれ？ショボい！ 256 x 256 ドット 16 色 ワイヤフレーム ? ? ? んじゃ、高解像度化しますか
- 7. 原作をウェブで Powered by Emscripten run68 (in C) sion2.x (Binary for X68k) 実行 JavaScript VM 実行 互換レイヤー (in JavaScript) DOS/IOCS MAGIC Z-MUSIC GVRAM I/O <iframe> zmusic.x (Binary for X68k) 非同期RPC化 ここで気合 ハイレゾ化するぞ！ X68Sound.dll (in C++) run68 (in C)
- 8. 高解像度＋16:9化 256 pixel 256 lines ピクセル アスペクト比 4:3 1080 lines 1440 pixel 4:3 1920 pixel 16:9 アスペクト比補正＋ベクトル拡大 ＋本来見えていなかった部分の表示 ワイヤーフレームは楽勝
- 9. ビットマップ文字のベクターフォント置き換え 一部の文字（4×6サイズ）が画像だった ● 仕方ないのでGVRAMのアクセスパタンから文字推定 { “111010101110101010100000”: 64, ... } 文字コード64 A
- 10. 内部で使ってる主な技術 ● HTML5 Canvas（2D） ○ WebGLは使わずにJavaScriptで座標変換計算 ● Web Audio API ○ FM音源と音響処理（リバーブ） ● Web App Manifest ○ モバイルでホームスクリーン追加 ● Gamepad API / TouchEvent ● WebFonts
- 11. Emscriptenまめ知識?その１ 描画ループにrequestAnimationFrameを使う ? emscripten_set_main_loop()を使いましょう void emscripten_set_main_loop(em_callback_func func, int fps, int simulate_infinite_loop) ? fpsに0を指定するとrequestAnimationFrameが使われる ? それ以外の値だとsetTimeoutを使うので注意 ? 失敗談：知らずにsetTimeoutを書き換えて中からrAF呼んでた ? simulate_infinite_loop=1でこの関数から戻らない
- 12. Emscriptenまめ知識?その２ 常駐するサービス?ライブラリを作る ? emscripten_exit_with_live_runtime()で常駐 void emscripten_exit_with_live_runtime(void) ? ひとまず実行終了 ? ただしatexit()系やリソース解放処理は走らない ? JavaScriptからC/C++の関数を継続して呼び出し可能 ? 空のmain()から呼べば共有ライブラリっぽい物が作れる
- 13. Emscriptenまめ知識?その３ JavaScriptから呼び出せる関数を（確実に）作る ? リンク時に-s EXPORTED_FUNCTIONS="..." ? "..."にはmainを含めた関数のリストを渡す 例："['_main', '_myAPI1', '_myAPI2']" ? 関数名は"_"のプレフィクスが付くので注意 ? 数値以外は直接渡せない点に注意 ? C/C++側のメモリ空間はModule.HEAPU8等でアクセス ? Module.cwrap()やWebIDL-Binderなどの道具はある
- 14. Emscriptenまめ知識?その４ JavaScriptのライブラリを呼び出す ? リンク時に--js-library myLibrary.jsで組み込む ? 渡すJavaScriptは特定の方法で記述されている必要がある mergeInto(LibraryManager.library, { myFunc: function(a, b) { // ここから外の世界は直接触れる（this==Window） console.info(‘hello my func’); return a + b; }, // 以下、同様に関数を定義 }); ? 登録なしでCから呼ぶとundefined symbolで実行時abort
- 15. Emscriptenまめ知識?その５ 実行開始を遅延させる ? preInit内でaddRunDependency()を呼ぶ ? 対応するremoveRunDependency()が呼ばれるまで待つ ? WebFonts読み込みを待つ例 preInit: function() { Module.addRunDependency("fonts"); document.fonts.ready.then(function() { Module.removeRunDependency("fonts"); }); },
- 16. 质问など