1. テスト駆動ゲーム開発を
JavaScriptで実践
竹内 佑介

2. 自己紹介
竹内佑介です
仕事はバックエンド系ソ
フトの開発
趣味でnode.js+enchant.js
で通信対戦ゲーム
つくってます

3. テスト駆動開発とは
プログラム開発手法の一種で、プログラムに必要な各機能につい
て、最初にテストを書き（これをテストファーストと言う）、そ
のテストが動作する必要最低限な実装をとりあえず行った後、コー
ドを洗練させる、という短い工程を繰り返すスタイルである。
wikipediaより引用
http://ja.wikipedia.org/wiki/
%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%
E9%96%8B%E7%99%BA

4. 要するに
1. テストコードを書く
2. テストコードが動くプログラムを作る
3. プログラムのリファクタリング
を繰り返してプログラムを作る方法

5. ゲームのテストコードなんて書けるの
結論から言うと書きやすいところ、難しいと
ころに分かれる
ざっくり言うと、フレーム処理、画面描画、
コマンド入力がテストコード書きづらいです
上記処理のテストコードが書きづらい理由は
次で簡単に説明します

6. フレーム処理が書きづらい理由
ゲームの基本は無限ループ構造で、ループ毎の
処理をフレームと呼ぶ
テストコードでは、XXフレーム後にテスト
コードへコールバック関数などで処理を返すと
いう仕組みが必要
無限ループを外部から操作・参照したりするこ
とを考えられるゲームライブラリは少ない

7. 画面描画が書きづらい理由
単純に画面描画結果に対して、アサーション
を書くことが難しい
画像比較という方法もあるが、アニメーショ
ンが絡むとアホみたいな工数がかかる
ゲームの画面描画は頻繁に調整するところな
ので、上記方法はナンセンスすぎる

8. コマンド入力が書きづらい理由
テストコードでどうやってジョイパッド入力、
画面タッチを再現するのでしょうか
やってやれないこともないけど、
相当骨が折れそう

9. テストコード困難箇所まとめ
フレーム処理
➡テストコードからどうやってフレーム操作するの
画面描画
➡どうやってアサーションかけるの
コマンド入力
➡どうやってコマンド入力を再現するの

10. 何とかならないでしょうか

11. 苦肉の策でこうしました
ゲーム画面には最低限の機能を実装
→大部分をテストコードが書きやすい作りにする
フレーム処理はenchant.jsのtimeLineオブジェクト
を利用
コマンド入力はコマンド入力時のコールバック関
数をテストコードで直接呼び出すことで解決
画面描画は……、やっぱり目で確認するしかない
です

12. ゲームの作り
ゲーム画面は結果表示、コマンド入力だけを
やっています
その他は全てサーバサイドに機能を持ってい
ます

13. システム構成
サーバ クライ
アント
ゲームロジック実行
コマンド入力コマンド送信
ゲーム結果送信
ゲーム結果表示
ゲームブラウザ

14. timeLineでフレーム処理
元々timeLinemはアニメーション管理用機能
XXフレーム後にコールバックを実行という
形式で利用する
timeLineを応用して、指定フレーム後に
ボタン押下コールバック関数を呼び出す処理
を書く

15. timeLineコード例
//60フレーム後にGame.plusBattery()を呼び出す
Game.battleScene.tl.delay(60).then(function() {
Game.plusBattery();
})
//さらに20フレーム後にGame.selectBattery()を呼び出す
.delay(20).then(function() {
Game.selectBattery();
});
※上記コードではボタン押下時コールバック関数
Game.plusBattery()、Game.selectBattery()
を直接呼び出している

16. timeLineは素晴らしいです
フレームをまたぐ処理がスマートに書けてす
ごく便利です
DXライブラリではこういう書き方をしようと
思ったら、自作するしかないですね
これでイベント発火が出来れば最高なんだけ
どなあ

17. timeLineの詳細
timeLineについてのenchant.js公式ページ
http://wise9.github.io/enchant.js/doc/
core/ja/symbols/enchant.Timeline.html
timeLine解説ページ
http://wise9.jp/archives/7418

18. ゲーム画面はどこまでテストコードでカバーできたのか
サーバ クライ
アント
コマンド入力コマンド送信
ゲーム結果送信
ゲーム結果表示
テストコード書けた
テストコード書
けなかった

19. テストコード書けない箇所のテスト実施方法
スタブを作成し、手動テストをやっています
ただ、スタブと自動テストのコードはほぼ同じ
です
timeLineを使ってボタン押下コールバックを呼
び出している箇所をコメントアウトしてるだけ
です

20. ぶっちゃけ
ゲーム画面はテストコードよりも先に、スタ
ブを作成しています
スタブが完成したら、それをテストコードに
流用している流れです
スタブを手動テストと考えれば、一応テスト
駆動と言えるはず……

21. 他にも問題が・・・・・・
アサーション内容がテストフレームワーク(mocha)上で表
示できません
mochaはテスト結果表示にhtmlを自動生成しまが、それが
enchant.jsのゲーム画面描画と競合します
しょうがないので、開発者コンソールにアサーションを
表示しています
これは他のテストフレームワーク使えば解決できるかも…

22. 画面テストのデモ
https://www.youtube.com/watch?v=NmaJuNIGKw4

23. ゲーム画面以外のテスト方法
Webサーバ
selenium.jsでブラウザ自動テストを書く
ゲームロジック
普通にユニットテストを書く
socket.io
テストコード内でサーバ、クライアントを生成して、クライアントは
localhostに接続するようなユニットテストを書く
参考文献 http://dev.classmethod.jp/server-side/socket-io-client/
httpセッションとsocket.ioセッションの引き継ぎ
selenium.jsでブラウザ自動テストを書く

24. テスト駆動ゲーム開発をやってみて①
最初は開発速度が下がると感じましたが
しかし、コードが複雑になってくると、テス
ト駆動でやった方が断然早いと思いました

25. テスト駆動ゲーム開発をやってみて②
プロダクトコードはテストコードを書いてな
い頃よりも綺麗になりました
将来性を考えて汎用的に使える複雑なコード
を書こう……、という考え方が減ったのが大
きいです

26. テスト駆動ゲーム開発をやってみて③
モジュール分けも綺麗にできるようになりま
した
テストコードを書かなかった頃は動いている
コードを書き直すことに抵抗があり、モジュー
ル分けも積極的に出来ませんでした

27. テスト駆動ゲーム開発をやってみて④
プロダクトの挙動が一目瞭然なので、新しい
部分を作る時に参考になりました
テストコードを書かない頃は、ソースコード
を全部読んでから新規コードを作成していま
した

28. テスト駆動で作ったゲームについて
ゲームのソースコードはここに公開
https://github.com/kaidouji85/gbraver
ゲームの説明はここ
http://www.slideshare.net/yuusuketakeuchi96/
g-33989023

29. 中の人のブログ
毎日プログラム
http://blog.livedoor.jp/kaidouji85/

30. まとめ
javaScirptでテスト駆動ゲーム開発を実践した
timeLineを使えばフレーム処理がクールに書
ける
テスト開発駆動でもゲーム開発速度は落ちな
い

31. ご清聴ありがとうございました