ブラウザで遊ぶ 自作シューティングゲームの紹介

Transcript

1. ブラウザで遊ぶ ⾃作シューティングゲームの紹介 2023.12.20 TAKAHASHI MASAYA
2. a. ブラウザゲームの紹介 b. ステージ編集ツールを紹介 テーマ
3. ⾃⼰紹介 • 名前：⾼橋雅也 @ma_taka https://github.com/TakahashiMasaya/ • 業務：Web開発 ⾃社開発設計・制作 • 開発：Nuxt3, React • 趣味：ピアノ, サイクリング
4. a. ブラウザゲームの紹介 DEMO
5. 動作確認 # Device Release CPU OS Version 1 iPhone 14Pro Max 2022 A16 Bionic 17.1 2 iPhone 14 Plus 2022 A15 Bionic 17.1 3 iPad Pro(2022) 2022 Apple M2 17.1 4 iPad Air 4 2020 A14 Bionic 17.1 5 iPad mini 6 2021 A15 Bionic 17.1 Reference • iPhone：https://ja.wikipedia.org/wiki/IPhone • iPad：https://ja.wikipedia.org/wiki/IPad
6. 動作確認 iPhone + RAZER KISHI V2 FOR IPHONE iPad + Xbox Elite ワイ ヤレス コントローラー シリーズ 2 Windows PC + 8Bitdo Bluetooth アーケード スティック
7. →JavaScriptとCanvasで実装する⼿段があった 実装経緯 ⾃分が⼤好きだったシューティングゲームを PC・スマホで（それもブラウザで）楽しみたい フロントエンドのスキルアップ →実務や⾃作ツールを利⽤し、実際に⼿を動かして経験を増やす • フレームワーク • テストツール • ソースコード整形ツール
8. 開発ヒストリー 2017 2018 2019 2020 2021 2022 2023 4 12 ゲームを 作りたい React TypeScriptを 学習したい 1 ?
9. 開発環境 # パッケージ バージョン 1 Vite 5.0.4 webpackからの移⾏ 2 Vitest 0.34.6 単体テスト 3 TypeScript 5.3.2 4 Biome 1.4.1 lintチェック、コードフィックス（.ts） 5 stylelint 15.11.0 lintチェック、コードフィックス（.scss） ※2023/12/1時点
10. 作成ツール # アプリ 1 MediBang Paint iPad Proでイラスト作成 2 GarageBand MacBookで曲、効果⾳作成
11. 実装概要 • 描画 • Canvas API • サウンド • WebAudio API • ゲームパッド • Gamepad API
12. 実装の流れ (1) 敵を倒す (2) 障害物を作成 (3) ステージ構成を確⽴（空中戦→メイン→ボス） 1. ステージ作成
13. 実装の流れ 2. ウェポン作成 (1) パターン選択 (2) 個別選択
14. 実装の流れ 3. シーン作成 スタート画面 ステージ選択 ウェポン選択 ゲーム準備 ゲームオーバー ゲーム ステージクリア成功時 ステージクリア失敗時
15. テスト(ランタイム) http://localhost:8081/?debug=true&stage=0&ignoreplayercollision=true&stag estartposition=2000&stagescrollspeed=1&loop=2&ignoreboss=false&playerlife =0 →パラメータを使ってランタイムデバッグ debug=trueで有効
16. テスト(ランタイム) http://localhost:8081/?debug=true&stage=0&ignoreplayercollision=true&stag estartposition=2000&stagescrollspeed=1&loop=2&ignoreboss=false&playerlife =0 # キー 機能 1 stage ステージを選択 2 ignoreplayercollision ⾃機衝突判定の無効化 3 stagestartposition ステージの開始位置 4 loop 周回（難易度確認）
17. b.ステージ編集ツールの紹介
18. →キャラクター配置をjsonで更新するのは⾯倒・・・。 →UIでステージを編集したい 実装経緯 [{ "recoveryPositionX": [1600, 4100, 6250], .... "map": [ "00B00000000A00000000B00000000A……00000B00", "000000000000000000000000000000……00000000", "000000m00G000000000L00m00G0000……0j0L0000", "000000000000000000000000000000……00000000", "000000000000000000000000000000……00000000", "000000000000000000000000000000……00000000", "000000000000000c0000000000c000……00000000", …… "000000000000000000000000000000……00000000" ], .... }], ステージにあるキャラクターを 文字列ビットとして配置
19. 開発環境 # パッケージ バージョン 1 Nuxt 3.8.2 2 Vitest 0.34.6 コンポーネント、storeテスト確認 3 eslint 8.55.0 lintチェック、コードフィックス（.ts, .vue） 4 prettier 3.1.0 コードフォーマット、コードフィックス （.scss, .json, .yml, md） 5 stylelint 15.11.0 lintチェック、コードフィックス（.vue .scss） ※2023/12/1時点
20. 作成ツール # アプリ 1 Adobe XD 画⾯デザイン作成
21. 開発ヒストリー 2017 2018 2019 2020 2021 2022 2023 ステージ編集 ツール 9 8 start ? ステージ編集が 欲しい Vueを 学習したい Nuxtを 学習したい 12 ブラウザ ゲーム 4 12 start ゲームを 作りたい React TypeScriptを 学習したい 1 ? ? ?
22. GAME EDIT update score ranking 概要 update stage(s) authentication fetch stages stages score ranking stages score ranking stages score ranking
23. まとめ・課題 1) シーティングゲームの実装・ステージ編集ツールを紹介しました 2) 今後 • フロントエンドの動向をみて何かしら着⼿ • シューティングゲーム • 新しいフレームワークの実験など • ステージ編集ツール • AWSへのデプロイしたい・・・