More Related Content
What's hot (20)
Similar to Web ヘ?ースのカシ?ュアルケ?ーム「block pong」の実装とヒ?シ?ネス (20)
![[クリエイティブハント2018]LT 道場破りしたらできちゃった/// #ゴーハント](https://cdn.slidesharecdn.com/ss_thumbnails/chy2018-lt-coderdojo-community-181031162644-thumbnail.jpg?width=560&fit=bounds)
Web ヘ?ースのカシ?ュアルケ?ーム「block pong」の実装とヒ?シ?ネス
- 1. Web ベースのカジュアルゲーム 「Block Pong」の実装とビジネス Takuo Kihira 2021/11/27
- 2. 本日のハッシュタグ→ #jsconfjp_a 自己紹介 紀平 拓男（きひら たくお） スマートニュース株式会社 ● 20 年くらい JavaScript の世界で働いています ● サンフランシスコでの起業を含め 3 社の起業を 経験しています ● 最近はネイティブアプリ内に組み込む Web の開 発に興味を持っています Twitter: @tkihira 質問等お気軽にメンションしてください
- 5. 本日のハッシュタグ→ #jsconfjp_a Block Pong https://bp.game5.app/ iOS / Android app 配布中
- 6. 本日のハッシュタグ→ #jsconfjp_a Block Pong のデザイン設計思想 ● ゲームのリプレイを他人とシェアする ● リプレイを見た人が自分もすぐにその場で遊べる Webベースで開発し、URLにリプレイ情報を入れる
- 8. 本日のハッシュタグ→ #jsconfjp_a リプレイの実装方法 1. 動画でリプレイを出力する（動画形式） ● メリット: 比較的簡単に実装可能 ● デメリット: ファイルサイズが大きい、細かい機能をつけられない 1. 初期状態と入力情報を記録してトレースする（プレイバック形式） ● メリット: 情報量が少なく、様々なカスタマイズが必要 ● デメリット: 他の環境での同じ動作の保証が大変なことが多い Block Pong ではプレイバック形式を選択
- 9. 本日のハッシュタグ→ #jsconfjp_a プレイバックの動作保証 自分自身の環境でプレイバックの同じ動作を保証するのは比較的簡単 ● ランダムと時間に依存した挙動を制御するくらいで良い ● スレッドがあるときは死ぬ 別の環境に持っていった時に動作保証するのは、想像以上に難しい ● 仕様通りに動かない環境があったりする ● 仕様が明確に決まっていなかったりする ○ 特に浮動小数点数まわりは地雷だらけ
- 10. 本日のハッシュタグ→ #jsconfjp_a なぜ浮動小数点数が難しいか 浮動小数点数まわりの仕様は明確に決まっておらず、基本的には実装依存 ● そもそもの演算が完全にCPU任せであり、言語仕様で規定されることは滅多 にない ○ IEEE 754 と同じような扱いにしましょう、という感じで書かれることが多い ○ NaN の扱いなどもそれ。「NaN クイズ」で是非検索を ● Math 系のライブラリも実装依存であり、明確な計算方法は仕様にない
- 11. 本日のハッシュタグ→ #jsconfjp_a JavaScript の浮動小数点数の演算関連 ● IEEE 754 準拠でないプラットフォーム可能性 ○ https://www.ecma-international.org/ecma-262/11.0/index.html#sec-numeric-types-number-add ○ “the sum is computed and rounded to the nearest representable value” ● Math.sin 等のビルトイン関数の差 ○ https://www.ecma-international.org/ecma-262/11.0/index.html#sec-math.sin ○ “Returns an implementation-dependent approximation to the sine of x.” Java では strictfp というキーワードで IEEE 754 準拠を強制出来る SSE2 で浮動小数点の計算は IEEE 754 準拠をほぼ前提にしてよくなった それでも IEEE 754 周りによる差は起こりうる。今の所、そのバグ報告はない
- 12. 本日のハッシュタグ→ #jsconfjp_a Math Lib の実装の違いによる挙動の差 https://math.game5.app/
- 13. 本日のハッシュタグ→ #jsconfjp_a WebAssembly を使って Math ライブラリを自前実 装 ● Chromium のソースコードの Math ライブラリ実装を確認 ○ https://chromium.googlesource.com/v8/v8/+/3.28.71.4/third_party/fdlibm/fdlibm.cc ● fdlibm を利用 ○ Free Distribution libm http://www.netlib.org/fdlibm/ ○ github にクローン: https://github.com/tkihira/fdlibm ○ 実装は C 言語 ● wasm に移植 ○ wasm版: https://github.com/tkihira/fdlibm-wasm 純粋な計算ロジックであるため、コード量は極めて小さい
- 16. 本日のハッシュタグ→ #jsconfjp_a WebAssembly と JavaScript の速度差 画像処理などの処理で JavaScript と wasm の速度を比較している https://takahirox.github.io/WebAssembly-benchmark/ ※ SIMD の導入で結果は大きく変わる JavaScript はそもそも、ものすごく速い https://benchmarksgame-team.pages.debian.net/benchmarksgame/box-plot- summary-charts.html
- 17. 本日のハッシュタグ→ #jsconfjp_a WebAssembly のメリット ● JavaScript と同等の速度を、何も考えずに出せる ● メモリ消費量が圧倒的に少ない ● ガベージコレクションを自前でコントロール出来る ● 過去の資産を流用出来る ○ Microsoft のオンライン動画編集ツール「Clipchamp」は ffmpeg を利用 ○ 私が来年頭に公開する Web 版画像合成ツールも LibRaw を利用してブラウザ内部で処理 ● 今後速くなっていくかもしれない
- 18. 本日のハッシュタグ→ #jsconfjp_a どうして WebAssembly が速くないのか キラーアプリが無いから （※個人の意見です）
- 19. 本日のハッシュタグ→ #jsconfjp_a WebAssembly / Web ゲームの課題 ● エコサイクルが全く成立していない ○ お金を産むシステムがない ○ お金を産まないので、参入者が少ない ○ 参入者が少ないので、開発ツールも育たない ○ 開発ツールがないので、ゲームも作られない ○ ゲームが作られないので、ユーザーも少ない ○ ユーザーがいないので、お金を産まない
- 20. 本日のハッシュタグ→ #jsconfjp_a Web ゲームの希望 ● アプリゲームは参加料の高い博打の世界になりつつある ● Web は爆発的に普及する可能性を秘めている ● 岩田氏「もし、小規模なチームで短い期間で作ったものが世の中にものすごく広がる可能性があれば、それは一番夢が感じら れ、多くの開発者の方がいろんなアイデアを競う場になるわけで、プラットフォームとしては一番健全な状況である」 ○ https://www.nintendo.co.jp/ir/stock/meeting/130627qa/03.html ○ ちょうどここ数日だと「ぷよりんご」 ● エコシステムの拡充が今後の課題 ○ Next2D https://next2d.app/ など、プロダクションに耐えうるツールも登場しつつある ● KPI などはまた別の機会に話します