Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

77a06ff77a87e8efe8b3dd617dd08c9d?s=128

fumi-sagawa

April 20, 2022
Tweet

Other Decks in Programming

Transcript

  1. SPA で作る とこれからのWEB体験の話 2021/04/20 Wed. @TAMTO ゲーム制作と技術選定 サガワフミヤ

  2. サガワフミヤ/佐川史弥 @fumi_sagawa フロントエンドエンジニア Occupation Company 🏢TAM東京 ゲーム好きです🎮 最近エルデンリングをクリアしました ⼀⽅で積もるBacklogのToDoチケット 僕にゴールデンウィークは訪れるのか

    アトリエシリーズはいいぞ。
  3. ある⽇…

  4. 👨 TAM⾓⾕さん なんかノベルゲーム作るらしい! ミーティング参加してみて! すごい頼れる

  5. 🤔 サガワ 診断コンテンツ的なやつか?

  6. TAM村松さん 99部屋 ⾃由に⾃由に⾏き来する ノベルゲームをやります! ⾳声付き を すごい良いデザインする

  7. None
  8. 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4 ⽬次

  9. ⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4

  10. 『HOTELブルーローズ99の部屋』とは ブラウザでプレイできる サスペンスノベルゲーム

  11. 『HOTELブルーローズ99の部屋』とは ブラウザでプレイできる サスペンスノベルゲーム リアル脱出ゲームで有名な SCRAPさん作

  12. None
  13. 企画 デザイン 実装 本⽇の内容

  14. 企画 デザイン 実装 尺がないので 今⽇はこちらだけ 本⽇の内容

  15. None
  16. None
  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

  29. None
  30. script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の紹介

  31. None
  32. script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ シンプル…

  33. script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ 責務の分離、 再利⽤性の向上

  34. script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ Web系コーダーとの 分担がしやすい

  35. None
  36. ただのグローバルなState Piniaの紹介 Reactだと Recoilが近い

  37. None
  38. 呼び出したら ただのState

  39. None
  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表現を考え直すきっかけをもらった

  54. None
  55. コスト 納期 品質

  56. アクセシビリティ・より良い体験のために SPA(SSR含む)はもっと活⽤できるのではないか? PWAと合わせて 低コストに⾼クオリティ なプロダクトを!

  57. TAMに興味が湧いた⽅はぜひお気軽にご連絡ください! メッセージ待ってまーす!!