テスト駆動ゲーム開発をjava scriptで実践 in jscafe20
TRANSCRIPT
![Page 1: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/1.jpg)
テスト駆動ゲーム開発をJavaScriptで実践
in JsCafe20
!
竹内 佑介
![Page 2: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/2.jpg)
自己紹介
竹内 佑介
仕事でソフト開発やってます
趣味で通信対戦ゲームを作ってます
![Page 3: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/3.jpg)
さっそくですが
こんなゲーム作ってます
![Page 4: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/4.jpg)
機動倶楽部Gブレイバー
![Page 5: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/5.jpg)
ジャンルは対戦型PRGです
詳細はこちらですhttp://www.slideshare.net/yuusuketakeuchi96/g-33989023
![Page 6: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/6.jpg)
テスト駆動とは?
テスト失敗
テスト成功リファクタリング
![Page 7: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/7.jpg)
Gブレイバーのテスト状況について説明します
![Page 8: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/8.jpg)
サーバ クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
Gブレイバーシステム構成
ゲームロジック
![Page 9: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/9.jpg)
サーバ クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
Gブレイバーシステム構成
ゲームロジック ユニットテストスタブと!半自動テスト
ユニットテスト
![Page 10: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/10.jpg)
今日はゲーム画面テストの話をします
![Page 11: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/11.jpg)
テストコードの構成
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
![Page 12: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/12.jpg)
テストコードの構成
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
JSONでダミーを作る
![Page 13: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/13.jpg)
テストコードの構成
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
送信オブジェクトにアサーションをかける
![Page 14: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/14.jpg)
テストコードの構成
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
ボタン押下コールバックを直接呼ぶ
![Page 15: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/15.jpg)
テストコードの構成
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
ここは目視で確認
![Page 16: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/16.jpg)
テストコードの構成
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
フレーム制御はtimeLineを活用
![Page 17: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/17.jpg)
実際のテストコードはここ
https://github.com/kaidouji85/gbraver/blob/master/publicForTest/javascripts/playerAtackTest.js
![Page 21: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/21.jpg)
timeLineについて
![Page 22: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/22.jpg)
ご清聴ありがとう
ございました
![Page 23: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/23.jpg)
おまけ
スタブについて
![Page 24: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/24.jpg)
Gブレイバーのスタブ
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
![Page 25: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/25.jpg)
Gブレイバーのスタブ
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
テストコードを同じものを作る
![Page 26: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/26.jpg)
Gブレイバーのスタブ
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
テストコードを同じものを作る
一般的なテストコードと書き方は同じ
ー>ここを作るのは楽
![Page 27: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/27.jpg)
Gブレイバーのスタブ
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
手動で実施
![Page 28: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/28.jpg)
Gブレイバーのスタブ
クライアント
コマンド入力コマンド送信
ゲーム結果送信 ゲーム結果表示
手動で実施
![Page 29: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/29.jpg)
テストコードを作る前にスタブを作ってます
![Page 30: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/30.jpg)
ぶっちゃけ、スタブをテストコードに流用してます
![Page 31: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/31.jpg)
スタブ
![Page 32: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/32.jpg)
スタブ コマンド入力自動
追加
![Page 33: テスト駆動ゲーム開発をJava scriptで実践 in jscafe20](https://reader031.vdocuments.mx/reader031/viewer/2022013121/556a774dd8b42a7c758b4839/html5/thumbnails/33.jpg)
テストコード
スタブ コマンド入力自動