Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Oh! java script 夢の続きを語ろうよ〜emscriptenの逆襲

2,378 views

Published on

オリジナルのSION2に手を加えずにハイレゾ化してウェブブラウザで遊べるようにしたお話。

Published in: Technology
  • Be the first to comment

Oh! java script 夢の続きを語ろうよ〜emscriptenの逆襲

  1. 1. 夢の続きを語ろうよ Emscriptenの逆襲
  2. 2. sun6925 とよしま ウェブ大好きっ子 低レイヤー大好きっ子 レトロPC大好きっ子 X68000大好きっ子 大丈夫、ウェブ業界の人です。仲良くしてください。
  3. 3. 知ってますか? ● なぜか 編集部が作ったゲーム ○ 創刊10周年記念 PRO-68K に収録 (雑誌付録ディスク) ○ 編集部制作の強力インフラ ■ MAGIC2 - 3D描画ライブラリ ■ Z-MUSIC - サウンドドライバ ○ ゲーム自体、普通に面白い
  4. 4. 実演 原作@エミュレータ
  5. 5. あれ?ショボい! 256 x 256 ドット 16 色 ワイヤフレーム ・ ・ ・ んじゃ、高解像度化しますか
  6. 6. 実演 ハイレゾ@ウェブ bit.ly/sion2
  7. 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. 8. 高解像度+16:9化 256 pixel 256 lines ピクセル アスペクト比 4:3 1080 lines 1440 pixel 4:3 1920 pixel 16:9 アスペクト比補正+ベクトル拡大 +本来見えていなかった部分の表示 ワイヤーフレームは楽勝
  9. 9. ビットマップ文字のベクターフォント置き換え 一部の文字(4×6サイズ)が画像だった ● 仕方ないのでGVRAMのアクセスパタンから文字推定 { “111010101110101010100000”: 64, ... } 文字コード64 A
  10. 10. 内部で使ってる主な技術 ● HTML5 Canvas(2D) ○ WebGLは使わずにJavaScriptで座標変換計算 ● Web Audio API ○ FM音源と音響処理(リバーブ) ● Web App Manifest ○ モバイルでホームスクリーン追加 ● Gamepad API / TouchEvent ● WebFonts
  11. 11. Emscriptenまめ知識〜その1 描画ループに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. 12. Emscriptenまめ知識〜その2 常駐するサービス・ライブラリを作る ❏ emscripten_exit_with_live_runtime()で常駐 void emscripten_exit_with_live_runtime(void) ❏ ひとまず実行終了 ❏ ただしatexit()系やリソース解放処理は走らない ❏ JavaScriptからC/C++の関数を継続して呼び出し可能 ❏ 空のmain()から呼べば共有ライブラリっぽい物が作れる
  13. 13. Emscriptenまめ知識〜その3 JavaScriptから呼び出せる関数を(確実に)作る ❏ リンク時に-s EXPORTED_FUNCTIONS="..." ❏ "..."にはmainを含めた関数のリストを渡す 例:"['_main', '_myAPI1', '_myAPI2']" ❏ 関数名は"_"のプレフィクスが付くので注意 ❏ 数値以外は直接渡せない点に注意 ❏ C/C++側のメモリ空間はModule.HEAPU8等でアクセス ❏ Module.cwrap()やWebIDL-Binderなどの道具はある
  14. 14. Emscriptenまめ知識〜その4 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. 15. Emscriptenまめ知識〜その5 実行開始を遅延させる ❏ preInit内でaddRunDependency()を呼ぶ ❏ 対応するremoveRunDependency()が呼ばれるまで待つ ❏ WebFonts読み込みを待つ例 preInit: function() { Module.addRunDependency("fonts"); document.fonts.ready.then(function() { Module.removeRunDependency("fonts"); }); },
  16. 16. 質問など

×