強火で進め このページをアンテナに追加 RSSフィード

整理された情報は こちら へどうぞ。

2017年02月22日

[][] 『Unity for Creative 第3回!!「Unity × WebGL 開発最前線!!〜実践ノウハウ&メリット〜」』に行って来ました

Unity for Creative 第3回!!「Unity × WebGL 開発最前線!!〜実践ノウハウ&メリット〜」 ※好評につきちょっとだけ増席しました。 : ATND

https://atnd.org/events/84444

検証環境
  • Unity 5.4.3
  • Chrome 56.0.2924.87(64bit)
問題点
  • データ保持
  • バトル処理の負荷
  • 動画再生
データ

・画像

・音声

・動画

・イベントページ

以上のものをAssetBundle化し、サーバへ

  • WWW.LoadFromCacheOrDownloadを使用してダウンロード
  • WebGL の場合には IndexedDB に保存される
IndexedDB保存場所

Mac

~/Library/Application Support/Google/Chrome/Default/IndexedDB

Windows

C:\Users\ユーザー名\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
  • ロード時や戦闘時に画面が止まる→メモリの圧迫が原因
  • 解決方法「DL方法をWWWに変更」
  • キャッシュはブラウザのキャッシュに任せる
  • 注意点:ブラウザのキャッシュによりダウンロードされない事が有る→URLの末尾にハッシュ値などを付ける
Indexed DBを使った時の起動速度
AssetBundle起動速度
0約11秒
100MB x 10約19秒
100MB x 100約23秒
1MB x 1000約26秒
動画再生
  • EasyMovieTextureを使用していた→WebGLは未対応
  • 「Simple MovieTextures for Unity WebGL」を使用

※ Unity 公式のアセット

Simple MovieTextures for Unity WebGL - アセットストア

https://www.assetstore.unity3d.com/jp/#!/content/38369

不都合な点
  • 「Simple MovieTextures for Unity WebGL」は URL 直叩きで指定されていた
修正
  • AssetBundleでダウンロードしてきた動画ファイルのbyte配列 → 内部でBlobデータを作成
  • vide.src = URL.createObjectURL(blob.data);
ロジック最適化
  • 劇的に変わるものは無かった。地道時に改善
  • メニューは問題無かったが戦闘時にカクついた
  • 開発当初の Unity では Profiler の接続に失敗した

※筆者注:アプリ起動時の Profiler の自動接続に失敗したという話の様でした。後からアタッチする場合だと大丈夫だった?

  • Profiler でボトルネックを探す → (Android版では問題無かった)メモリ確保部分が問題だった

[]「第2回html5jゲーム部勉強会」で WebGL の話を聴いて来ました

第2回html5jゲーム部勉強会 - ゲーム開発事例 - connpass

https://html5jgame.connpass.com/event/49555/

2/15 に開催された「第2回html5jゲーム部勉強会」のメモです。

※スクエニさんの「Unity WebGLを用いた乖離性ミリオンアーサーブラウザ版移植事例」の講演については写真と Twitter 禁止だったので書くとまずいと思うのでこの講演については書いていません。

Emscriptenの逆襲 HTML5

  • 講演者:sun6925 とよしま
  • 今回は SION II の話
  • Oh!X編集部が作ったゲーム
  • 10周年記念 PRO-68K に収録
  • 25年前のゲーム

f:id:nakamura001:20170222094633j:image

f:id:nakamura001:20170222094913j:image

  • I/O のアクセスから GVRAM の中身を追跡
  • ビットマップ文字データをスキャンし、 01 の文字列をキーと対応する文字の情報をテーブル(連想配列)に格納 (例) {"010101000111011" : "A"} ※01の並びはメモが間に合わなかったので適当です。
  • 仕方ないのでGVRAMのアクセスパターンから文字を推定(ビットマップのパターンと文字コードの対応を持つテーブルを持って置き換え
  • Gamepad API も使っているのでゲームパッドも利用可能
  • DeviceOrientationEvent API(Cardboard対応の為)
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")
DeviceOrientationEvent(Cardboard対応)
  • スマホ用VRケース。Amazonで今日現在998円
  • デバイスの傾きがEular角で通知される
Web Audio API

JavaScriptでリアルタイムで波形を合成

  • 現仕様ではノイズ耐性が低い(描画負荷やGCに気を付ける)
  • これから出る予定の AudioWorklet を使えば改善される

ソースコードhttps://github.com/toyoshim/sion2hd

PlayCanvas は、とまらない

PlayCanvasは、とまらない @html5jゲーム部 2017/2/15

https://www.slideshare.net/MasakazuOgawa/playcanvas-html5j-2017215

PlayCanvas | 3D HTML5 & WebGL Game Engine

https://playcanvas.com/

進化するEdge+α

進化するEdge+α

https://www.slideshare.net/sakkuru/edge-72208291

  • 講演者:さっくる @sakkuru
  • Azure:Cognitive Services(マシーンラーニングなどを活用したAPI)