この記事では4/25に開催された、traP主催のCPCTFという大会で使用されたビジュアライザについて紹介します。
製作者はFogrex,Renard,Uzakiの3人で行いました。
目次
- ビジュアライザとは？
- 完成品
- 開発日誌
- テーマ決め
- 開発開始
- 開発進行におけるトラブル
- 完成
- 各担当者による解説
- Fogrex
- Renard
- Uzaki
ビジュアライザとは？
tesso
traP主催の初学者向け競プロ・CTF大会、CPCTFにおいて、参加者の成績や回答状況を面白おかしく表示しようとする試みとして毎年ビジュアライザが作成されています。
CPCTFの運営開発にも負けないくらい頑張っていいものをつくっています。
昨年度の作品は以下の記事からご覧いただけます。
Fogrex
完成品
今年の完成品はこちらからご確認いただけます。ぜひ実際に動いているところを見てみてください！
当日の様子(YoutubeLive)は以下の通りです。
開発日誌
テーマ決め
まずはメンバーの顔合わせも兼ねてVisualizerのもととなるテーマ決めミーティングを行いました。
Visualizerには大きく決めるべき事項が２つあり、Visualizerをつくる意義である「全体の進捗度合を可視化する表現」、そしてVisualizer全体をまとめ上げる「デザインテーマ」を決める必要がありました。
数回にわたる議論の末、前者は「回路基板の発展」、後者は「ＶａｐｏｒＷａｖｅ」と決定し、開発へと動き出しました。
このイメージ画像は制作の方向性の共有に役立ち、わかりやすいと結構評判でした。
言葉よりグラフィカルな表現が力を持つことを強く実感しました。
開発開始
3Dでの表現は全員の共通認識であったので、UnityのWebGLビルドとThree.jsが開発環境候補として挙がりました。
ある一人の開発メンバーの苦い経験からの強い要望により、Three.jsを用いて開発を進行していくことに決定しました。
開発環境構築とVisualizer部分のベースが完成したところで、みなさんご存じウインドウシステムやブラウン管ライクなポスプロのアイデアが出たので、React-Pixiにも手を出すことになりました。（これが後にあるメンバーに依存する開発となってしまう原因になるとは…）
開発進行におけるトラブル
2月中旬から始まり公開日は4月末と予定されていたこの開発でしたが、春休みが終わり新学年が始まる4月からは開発に時間を割けないであろうことを想定し、3月中にVisualizerの根幹となる部分をほぼ完成させ、4月は通信関連や見た目や細部の洗練、その他の小さめの実装のみやっていくというスケジュールでした。
4月が始まる頃にはおおよそスケジュール通りの進捗でしたが、発生タスクの把握・想定不足、新歓イベントや新学年での想定以上の多忙、それに伴って連絡が減ってしまったことなどが起因して、4月下旬までの開発進捗はあまり芳しくありませんでした。
そして4月以降の開発スケジュール予定をよく詰めていなかったせいで必要なリハを開催できず、通信周りの実装も遅れてしまう原因となりました。
結果として公開一週間前のたのしい限界開発が発生し、動きゃええやろ実装、バグの嵐、未完成部分の諦め、ほぼノーデバッグ、デプロイでのごたごた、公開の延期などなどなかなかに愉快でした。
完成
限界開発を乗り越え、当日は14時頃に無事にVisualizerを公開することができました。（当初の予定から1時間ちょっと遅刻）
公開後も途中途中でバグや不具合の対応に努めました。
ありがたいことに多くの反響を戴き、大変喜ばしかったです。
目玉のウィンドウシステムやブラウン管ポスプロには特に大きな反応を戴きました。当日見ていただいた方にこの場を借りてお礼申し上げます。
各担当者による解説
Fogrex
こんにちは、Fogrexです
僕はウインドウシステム全般とビジュアライザの基礎部分を担当しました。ウインドウシステムは最初DOMで作ってたんですが、ポスプロ作れなくてうあああああああ！！！って叫びながらPixiJS(ReactPixi)で書き直しました。おかげでクソエモエフェクトをふんだんに使えてハッピーです。
一番苦労したのはDOMのcssにあたる部分です。DOMならウインドウのヘッダーの部分とコンテンツの部分、周りのボーダーの幅、各アイコンと文字の協調などcssなら脳死で配置できるものの座標や高さ、幅をいちいち考えて指定するのが非常に面倒でした。
マウスのアイコンが地味に面倒でした。DOMなら要素が重なっている場合上側にある要素からしかイベントは発行しませんが、Pixiはそんなのお構いなしに全要素からイベントが飛ぶので、どのウインドウが上にあるかというのを考慮しないとマウスのアイコンが決定できなかったんですよねぇ。その辺のロジックが爆発しています。
いやーReactPixiはいいですね、FiberなのでDOMみたいな書き心地してて最高です。
自分が担当した箇所のこだわりポイントについては以下の記事で解説します！
Fogrex
Renerd
ルナールと申します。
私は回路の生成とヴィジュアライザの画面構成(カメラの動きやオブジェクトの配置など)を担当しました。
TypeScriptを使ったことが無かったので最初混乱しましたが、開発を通じて慣れたので成長を感じました。
最も苦しかった部分はモデルを表示するThree.js部分の実装でした。普段Unityしか触っていない私からするとGUIで色々いじれない開発は勝手が違い、かなり手こずりました。
一番好きな部分は監視カメラが切り替わるような表現です
CPCTF開催中Twitterで感想をつぶやいて下さった方が多く、とてもうれしかったです。ありがとうございました。
Uzaki
鵜崎です。
Visualizer内部の回路部品のモデリングや、全体のデザイン、開発進行などを担当しました。
最初はばりばりコード書いていっぱい学んで圧倒的成長なんて夢見てましたが、実際はマジで１行もコード書いてないので不甲斐ないです。次こそは。
その分見た目をいっぱいつくることができて自分のやりたい世界観はけっこう実現できたのでうれしかったです。とは言え、まだまだやりたいことは無限にあったので無念でもあります。
今回のテーマが「ＶａｐｏｒＷａｖｅ」ということで、普段から結構すきなジャンルだったのでつくっててすごい楽しかったです。語彙力。
模倣とかオマージュにかなりコンテンツの根っこを持ったジャンルだったのでかなり好き勝手やっちゃいました。怒られそうな要素は大体僕の責任です。
