SPAで作るゲーム制作と技術選定(とこれからのWEB体験の話)

PWA Night vol.38 ～ブラウザゲームの世界〜の発表資料です
https://pwanight.connpass.com/event/242560/

Transcript

1. SPA で作る とこれからのWEB体験の話 2021/04/20 Wed. @TAMTO ゲーム制作と技術選定 サガワフミヤ
2. サガワフミヤ/佐川史弥 @fumi_sagawa フロントエンドエンジニア Occupation Company 🏢TAM東京 ゲーム好きです🎮 最近エルデンリングをクリアしました ⼀⽅で積もるBacklogのToDoチケット 僕にゴールデンウィークは訪れるのか アトリエシリーズはいいぞ。
3. ある⽇…
4. 👨 TAM⾓⾕さん なんかノベルゲーム作るらしい！ ミーティング参加してみて！ すごい頼れる
5. 🤔 サガワ 診断コンテンツ的なやつか？
6. TAM村松さん 99部屋 ⾃由に⾃由に⾏き来する ノベルゲームをやります！ ⾳声付き を すごい良いデザインする
8. 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4 ⽬次
9. ⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4
10. 『HOTELブルーローズ99の部屋』とは ブラウザでプレイできる サスペンスノベルゲーム
11. 『HOTELブルーローズ99の部屋』とは ブラウザでプレイできる サスペンスノベルゲーム リアル脱出ゲームで有名な SCRAPさん作
13. 企画 デザイン 実装 本⽇の内容
14. 企画 デザイン 実装 尺がないので 今⽇はこちらだけ 本⽇の内容
17. ⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4
18. TAM村松さん 99部屋 ⾃由に⾃由に⾏き来する ノベルゲームをやります！ ⾳声付き を すごい良いデザインする
19. いただいた仕様 ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
20. UI(3種類) 基本画⾯
21. 結論
22. SPA Local Storage で⾏こう！！ 技術選定
23. で解決できる仕様 SPA ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
24. で解決できる仕様 Local Storage ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
25. BGMを常時再⽣する SE(効果⾳)がなる WEB上における メディア取り扱いは難しい…
26. で解決 SPA ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
27. ⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4
28. 主要ライブラリ Vue 3 Pinia VueUse
30. script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の紹介
32. script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ シンプル…
33. script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ 責務の分離、 再利⽤性の向上
34. script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ Web系コーダーとの 分担がしやすい
36. ただのグローバルなState Piniaの紹介 Reactだと Recoilが近い
38. 呼び出したら ただのState
40. ユーティリティ関数のパッケージ VueUse 今回はlocalstorage連携 で使いました
41. refの代わりに 呼ぶだけ
42. 呼び出したら ただのState
43. で解決 SPA ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
44. Room302 Room301 App
45. Room302 Room301 App Navigation いつものアプリのように UIを載せる
46. Room302 Room301 App Navigation 再描画されない 部分にaudioタグを追加 Audio
47. SPAは⾳声コンテンツとの 相性が良い グローバルなStateと Hooks(Composable)で再⽣/停⽌が可能 副作⽤(useEffect/watchEffect)を利⽤して メディアの操作が可能 「許可した⾳声エレメント」を保持可能 Room301 App Navigation Audio SPAは⾳声コンテンツとの 相性が良い
48. Room301 App Navigation プレイ開始API Audio プレイAPIと繋いで ゲーム完成 チケットを買ったらtoken付きURLを発⾏ 初期描画時にプレイ可能かを判定
49. ⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4
50. 振り返り 無数に現れるバグ ゲームづくりってたいへん！
51. 振り返り 無数に現れるバグ 無数に現れるバグ ゲームづくりってたいへん！
52. 振り返り 無数に現れるバグ 無数に現れるバグ ゲームづくりってたいへん！ E2Eテストが 書きにくい うおォン 俺はまるで⼈間バグ⽣成所だ
53. Web表現を考え直すきっかけをもらった
55. コスト 納期 品質
56. アクセシビリティ・より良い体験のために SPA(SSR含む)はもっと活⽤できるのではないか？ PWAと合わせて 低コストに⾼クオリティ なプロダクトを！
57. TAMに興味が湧いた⽅はぜひお気軽にご連絡ください！ メッセージ待ってまーす！！