第2回html5jゲーム部勉強会 - ゲーム開発事例 - connpass
https://html5jgame.connpass.com/event/49555/
2/15 に開催された「第2回html5jゲーム部勉強会」のメモです。
※スクエニさんの「Unity WebGLを用いた乖離性ミリオンアーサーブラウザ版移植事例」の講演については写真と Twitter 禁止だったので書くとまずいと思うのでこの講演については書いていません。
Emscriptenの逆襲 HTML5編
- 講演者：sun6925 とよしま
- 今回は SION II の話
- Oh!X編集部が作ったゲーム
- 低解像度で色数も少ない→高解像度化
- 移植版の公開場所 http://sion2.herokuapp.com(http://sion2.herokuapp.com)
- エミュレータ＋黒魔術な実装
- I/O のアクセスから GVRAM の中身を追跡
- ビットマップ文字データをスキャンし、 01 の文字列をキーと対応する文字の情報をテーブル(連想配列)に格納 (例) {"010101000111011" : "A"} ※01の並びはメモが間に合わなかったので適当です。
- 仕方ないのでGVRAMのアクセスパターンから文字を推定(ビットマップのパターンと文字コードの対応を持つテーブルを持って置き換え
requestAnimationFrame
void emscripten_set_main_loop(em_callback_func func, int fps, int simulate_infinite_loop)
の引数 fps には0を使わないと requestAnimationFrame の値が反映されない
- Canvas 2面を使ってダブルバッファを実現(display [none/block] を交互に切り替え)
- 加えて、X68 の環境を再現する為に複数のフレームを持っている
WebFontについて
- WebFont は実際に必要になるまで読まれない
以下の手順が必要
1. document.fonts(FontFaceSet)にフォントを登録
2. フォントの読み込みを開始する
3. フォントの読み込み完了を待つ
- FontFaceで作成した場合、 document.fonts.add(fontFace)
- CSSで指定したフォントの場合には自動的に登録されるので考慮不要
ロードの処理
- FontFaceを使った場合：FontFace.load()
- 登録済みの場合：document.fonts.load("50px myfont")
Web Audio API
JavaScriptでリアルタイムで波形を合成
- 現仕様ではノイズ耐性が低い(描画負荷やGCに気を付ける)
- これから出る予定の AudioWorklet を使えば改善される
- Web Audio/Web MIDIの情報 → Web Music Developers JP や WebAudio.tokyo( https://webaudiotokyo.connpass.com/ )
PlayCanvas は、とまらない
PlayCanvasは、とまらない @html5jゲーム部 2017/2/15
https://www.slideshare.net/MasakazuOgawa/playcanvas-html5j-2017215
PlayCanvas | 3D HTML5 & WebGL Game Engine
https://playcanvas.com/
進化するEdge+α
- 講演者：さっくる @sakkuru
- HTML5の対応状況を確認可能 http://html5test.com/
- Azure：Cognitive Services(マシーンラーニングなどを活用したAPI)
