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

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

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

ある⽇…

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

🤔 サガワ診断コンテンツ的なやつか？

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

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

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

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

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

企画デザイン実装本⽇の内容

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

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

いただいた仕様ブラウザで動作するプレイ判定API連携がある SNSシェアがあるオートセーブ機能がある BGMを常時再⽣するストーリー分岐があるギミックがある(パスワードなど) SE(効果⾳)がなる

UI(3種類) 基本画⾯

結論

SPA Local Storage で⾏こう！！技術選定

で解決できる仕様 SPA ブラウザで動作するプレイ判定API連携がある SNSシェアがあるオートセーブ機能がある BGMを常時再⽣するストーリー分岐があるギミックがある(パスワードなど) SE(効果⾳)がなる

で解決できる仕様 Local Storage ブラウザで動作するプレイ判定API連携がある SNSシェアがあるオートセーブ機能がある BGMを常時再⽣するストーリー分岐があるギミックがある(パスワードなど)
SE(効果⾳)がなる

BGMを常時再⽣する SE(効果⾳)がなる WEB上におけるメディア取り扱いは難しい…

で解決 SPA ブラウザで動作するプレイ判定API連携がある SNSシェアがあるオートセーブ機能がある BGMを常時再⽣するストーリー分岐があるギミックがある(パスワードなど) SE(効果⾳)がなる

主要ライブラリ Vue 3 Pinia VueUse

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

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

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

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

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

呼び出したらただのState

ユーティリティ関数のパッケージ VueUse 今回はlocalstorage連携で使いました

refの代わりに呼ぶだけ

呼び出したらただのState

で解決 SPA ブラウザで動作するプレイ判定API連携がある SNSシェアがあるオートセーブ機能がある BGMを常時再⽣するストーリー分岐があるギミックがある(パスワードなど) SE(効果⾳)がなる

Room302 Room301 App

Room302 Room301 App Navigation いつものアプリのように UIを載せる

Room302 Room301 App Navigation 再描画されない部分にaudioタグを追加 Audio

SPAは⾳声コンテンツとの相性が良いグローバルなStateと Hooks(Composable)で再⽣/停⽌が可能副作⽤(useEﬀect/watchEﬀect)を利⽤してメディアの操作が可能「許可した⾳声エレメント」を保持可能 Room301 App Navigation
Audio SPAは⾳声コンテンツとの相性が良い

Room301 App Navigation プレイ開始API Audio プレイAPIと繋いでゲーム完成チケットを買ったらtoken付きURLを発⾏初期描画時にプレイ可能かを判定

振り返り無数に現れるバグゲームづくりってたいへん！

振り返り無数に現れるバグ無数に現れるバグゲームづくりってたいへん！

振り返り無数に現れるバグ無数に現れるバグゲームづくりってたいへん！ E2Eテストが書きにくいうおォン俺はまるで⼈間バグ⽣成所だ

Web表現を考え直すきっかけをもらった

コスト納期品質

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

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

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

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

More Decks by fumi-sagawa

Other Decks in Programming

Featured

Transcript