Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

a. ブラウザゲームの紹介 b. ステージ編集ツールを紹介 テーマ

Slide 3

Slide 3 text

⾃⼰紹介 • 名前：⾼橋雅也 @ma_taka https://github.com/TakahashiMasaya/ • 業務：Web開発 ⾃社開発設計・制作 • 開発：Nuxt3, React • 趣味：ピアノ, サイクリング

Slide 4

Slide 4 text

a. ブラウザゲームの紹介 DEMO

Slide 5

Slide 5 text

動作確認 # 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

Slide 6

Slide 6 text

動作確認 iPhone + RAZER KISHI V2 FOR IPHONE iPad + Xbox Elite ワイ ヤレス コントローラー シリーズ 2 Windows PC + 8Bitdo Bluetooth アーケード スティック

Slide 7

Slide 7 text

→JavaScriptとCanvasで実装する⼿段があった 実装経緯 ⾃分が⼤好きだったシューティングゲームを PC・スマホで（それもブラウザで）楽しみたい フロントエンドのスキルアップ →実務や⾃作ツールを利⽤し、実際に⼿を動かして経験を増やす • フレームワーク • テストツール • ソースコード整形ツール

Slide 8

Slide 8 text

開発ヒストリー 2017 2018 2019 2020 2021 2022 2023 4 12 ゲームを 作りたい React TypeScriptを 学習したい 1 ?

Slide 9

Slide 9 text

開発環境 # パッケージ バージョン 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時点

Slide 10

Slide 10 text

作成ツール # アプリ 1 MediBang Paint iPad Proでイラスト作成 2 GarageBand MacBookで曲、効果⾳作成

Slide 11

Slide 11 text

実装概要 • 描画 • Canvas API • サウンド • WebAudio API • ゲームパッド • Gamepad API

Slide 12

Slide 12 text

実装の流れ (1) 敵を倒す (2) 障害物を作成 (3) ステージ構成を確⽴（空中戦→メイン→ボス） 1. ステージ作成

Slide 13

Slide 13 text

実装の流れ 2. ウェポン作成 (1) パターン選択 (2) 個別選択

Slide 14

Slide 14 text

実装の流れ 3. シーン作成 スタート画面 ステージ選択 ウェポン選択 ゲーム準備 ゲームオーバー ゲーム ステージクリア成功時 ステージクリア失敗時

Slide 15

Slide 15 text

テスト(ランタイム) http://localhost:8081/?debug=true&stage=0&ignoreplayercollision=true&stag estartposition=2000&stagescrollspeed=1&loop=2&ignoreboss=false&playerlife =0 →パラメータを使ってランタイムデバッグ debug=trueで有効

Slide 16

Slide 16 text

テスト(ランタイム) 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 周回（難易度確認）

Slide 17

Slide 17 text

b.ステージ編集ツールの紹介

Slide 18

Slide 18 text

→キャラクター配置をjsonで更新するのは⾯倒・・・。 →UIでステージを編集したい 実装経緯 [{ "recoveryPositionX": [1600, 4100, 6250], .... "map": [ "00B00000000A00000000B00000000A……00000B00", "000000000000000000000000000000……00000000", "000000m00G000000000L00m00G0000……0j0L0000", "000000000000000000000000000000……00000000", "000000000000000000000000000000……00000000", "000000000000000000000000000000……00000000", "000000000000000c0000000000c000……00000000", …… "000000000000000000000000000000……00000000" ], .... }], ステージにあるキャラクターを 文字列ビットとして配置

Slide 19

Slide 19 text

開発環境 # パッケージ バージョン 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時点

Slide 20

Slide 20 text

作成ツール # アプリ 1 Adobe XD 画⾯デザイン作成

Slide 21

Slide 21 text

開発ヒストリー 2017 2018 2019 2020 2021 2022 2023 ステージ編集 ツール 9 8 start ? ステージ編集が 欲しい Vueを 学習したい Nuxtを 学習したい 12 ブラウザ ゲーム 4 12 start ゲームを 作りたい React TypeScriptを 学習したい 1 ? ? ?

Slide 22

Slide 22 text

GAME EDIT update score ranking 概要 update stage(s) authentication fetch stages stages score ranking stages score ranking stages score ranking

Slide 23

Slide 23 text

まとめ・課題 1) シーティングゲームの実装・ステージ編集ツールを紹介しました 2) 今後 • フロントエンドの動向をみて何かしら着⼿ • シューティングゲーム • 新しいフレームワークの実験など • ステージ編集ツール • AWSへのデプロイしたい・・・