2016/2/20 (土)、Japan ComCamp 2016 powered by MVPs という Microsoft MVP が中心となったイベントが全国一斉に開催されました。僕は例年通り北陸エリア (金沢開催) を担当していて、毎年恒例で超大好評の C# MVP によるドキドキ・ライブコーディング対決で登壇しました。メンバーはいつもの 3 人 (@AILight, @Fujiwo, @xin9le)。
昨年は LINQ の問題を解くのと七並べのアルゴリズム対決をしましたが、今回は 30 分タイムアタックでのテトリス作成がお題でした。
もちろん毎年大変なのですが、今回は特に大変でしたね！コードを書いたことがある方にはご理解頂けると思いますが、プログラムを組むときは思考時間が 90% くらいを占めているのではないかと思います。「こうやって作ろう！」って思って書き始めても何度も手が止まるものだし、瞬発力が必要なシーンなんて滅多にありません。それなのに今年で早 4 回目。僕たち結構マゾいね...！w
これまでと違うライブコーディングをお見せしたのですが、反応はかなり良くて大変嬉しい限りでした！
あいかわらずライブコーディング楽しい #hokunet #jccmvp
— masayan (@masayan_kazu) 2016年2月20日
ライブコーディング、面白いっす。
— 山田高稔@身体の半分はお菓子です (@84taka0310) 2016年2月20日
打つの、早い・・・#hokunet #jccmvp
LINQ使いこなしてる。星人だ #hokunet #JCCMVP
— かっとし (@kattoshi) 2016年2月20日
だいぶ喜ばれているので、我々 3 人がプログラミングエンターテイメント (謎) という新しいジャンルを切り開いた感すらありますw ということでまた来年もやろうかな！
成果物
僕が作ったものはすでにすべて公開されています。ソースコードは GitHub で、アプリケーションも ClickOnce で配布されています。ぜひ遊んでみてください。
脱フレームベース描画
通常、ゲームプログラミングと言ったら 1 秒間に 60 フレーム描画するといったフレームベースのアプローチが取られます。今巷で流行りの Unity もそうだし、Direct X などもそうです。つまりものすごい勢いで CPU や GPU をぶん回して高速なコマ送り描画をすることで、滑らかで美しいアニメーションやエフェクト表示を可能にします。
でも今回のテトリスに限って言えばアニメーションを入れないという制約を入れることでフレームベースのアプローチをとる必要がなくなります。そうすると以下の 2 点だけになるのでイベントベースの記述で済むようになります。
- タイマーを使った一定時間での落下 (= イベント)
- ユーザー操作による移動/回転 (= イベント)
つまり、ゲームエンジンを使う必要もなければタイマー間隔を 20ms などに設定して高速な演算を行う必要もなくなるわけです。よくある普通のクライアントアプリの延長技術で作ることができます。ということで僕は WPF + MVVM + ReactiveProperty というアプローチで作成しました。その他のテトリス自体をどう設計しているかは以下をご覧いただければと思います。
機能
今回作った WpfTetris には以下の機能が付いています。
- 一定時間での自動落下
- ユーザー操作による移動/回転/落下
- 即時確定
- 次のテトリミノの表示
- 消した行数の表示
- 消した行数に応じて徐々にスピードアップ
- 簡易なスーパーローテーション
ちなみにですが、これら全部を 30 分で作るのはさすがにムリだったので、実際のライブコーディングで作ったものはコレの機能削減版です。キー操作は以下の通り。
| キー | 動作 |
|---|---|
| ↑ | 右回転 |
| ↓ | 落下 |
| ← | 左移動 |
| → | 右移動 |
| X | 右回転 |
| Z | 左回転 |
| Space | 即時確定 |
| Esc | 最初からプレイ |
まとめ
準備期間にメンバー内で決まっていたことは以下くらいで、配布方法以外の制約はありませんでした。
- あとで ClickOnce で配布できるようにクライアントアプリとして作る
- 作り方は自由
- どこまで実装するかも自由
やはり対決なので、お互いの手の内は当日まで本当に全く知らないまま。当日その場で「え、そんなことしてるの！？」みたいなのもありつつ、自分たちもドキドキしつつ楽しんでました。
また来年もネタを見つけてやろうと思っていますので、みなさん楽しみに待っていてくださいね :)
