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

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

77a06ff77a87e8efe8b3dd617dd08c9d?s=47 fumi-sagawa
April 20, 2022
Programming
1
960

 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

See All in Programming
「混ぜるな危険」を推進する設計
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
8
2.5k
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
130
YATA: collaborative documents and how to make them fast
009174d68aa95ae39054afa749013f78?s=48 horusiath
1
150
「困りごと」から始める個人開発
4a0e3afe85259f2973dbc9386b6a4bb3?s=48 ikumatadokoro
4
250
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
6f425ca5b796b421dca359b95046184f?s=48 findyinc
7
2.6k
Regular expressions basics/正規表現の基本
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
6
260
それ全部エラーメッセージに書いてあるよ!〜独学でPHPプログラミングが上達するたった一つの方法〜
B793da271a45d149b52f507bca9f137c?s=48 77web
1
150
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
41c9dedd1b4c53ace82e040bb09334fe?s=48 tamago3keran
1
160
Introduction to Property-Based Testing @ COSCUP 2022
Fd9f21969cd8a0cbf0b2f48a9af0cc28?s=48 cybai
1
150
ちょっとつよい足トラ
6a661bb5871208cad64912223bb0c637?s=48 logilabo
0
370
2022年のモダンCSS改
Ffb0af5bf5cb5a0b728ed94418a096f5?s=48 tonkotsuboy_com
24
16k
Now in Android Overview
62384887995a0ce07ec4f86b89f5ec9e?s=48 aosa4054
0
390

Featured

See All Featured
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
19k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.7k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
14
3.8k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
The Web Native Designer (August 2011)
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
75
2k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
A Modern Web Designer's Workflow
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
689
180k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.7k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
239
11k

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に興味が湧いた⽅はぜひお気軽にご連絡ください！ メッセージ待ってまーす！！