feature image

2022年5月4日 | 作品紹介

CPCTF22を支えたビジュアライザ

この記事では4/25に開催された、traP主催のCPCTFという大会で使用されたビジュアライザについて紹介します。

製作者はFogrex,Renard,Uzakiの3人で行いました。


目次


ビジュアライザとは?

CPCTF22 当日レポート
参加ありがとうございます本日はたくさんのご参加ありがとうございます。 本記事では、CPCTF22の開催中の様子や各種統計を紹介します! 参加者当日の12時ごろから参加者が増えていますね。今年は、問題登録が3日前になってしまったので、来年はもっと早めに公開したいです。 点数変動新入生のほうでは、激しい上位争いでした。 全体としては、keymoonさんの圧勝でした。 問題についてジャンルごとの問題数 Pwn の問題数が少なかったです。 ジャンルごとの問題数 +-----------+--------------+ | ジャンル | 問題数 | +-----------+-----…

traP主催の初学者向け競プロ・CTF大会、CPCTFにおいて、参加者の成績や回答状況を面白おかしく表示しようとする試みとして毎年ビジュアライザが作成されています。

CPCTFの運営開発にも負けないくらい頑張っていいものをつくっています。
昨年度の作品は以下の記事からご覧いただけます。

CPCTFを支えたビジュアライザ
おはようございます、19のFogrexです。 この記事では4/25に開催された、traP主催のCPCTFという大会で使用されたビジュアライザについて紹介します。今更ですが読んでいただければ嬉しいです。 制作者はFogrex, N, temmaの三人です。 CPCTFにおけるビジュアライザCPCTF当日レポート皆さん、本日は参加していただいてありがとうございます! 本記事では、開催中の様子や各種統計情報を紹介します。 参加者 今回の参加者は156人(内、点数を獲得したのは107名)でした。事前登録者数が少なくてドキドキしていましたが、直前に登録してくれる方が多くて安心しました。 ユーザー数の推移…

完成品

今年の完成品はこちらからご確認いただけます。ぜひ実際に動いているところを見てみてください!

CPCTF22 Visualizer
CPCTFは視覚化されます。ようこそ。

当日の様子(YoutubeLive)は以下の通りです。

開発日誌

テーマ決め

自由にキャンバス上に描けるFigmaの機能が便利だった

まずはメンバーの顔合わせも兼ねてVisualizerのもととなるテーマ決めミーティングを行いました。

Visualizerには大きく決めるべき事項が2つあり、Visualizerをつくる意義である「全体の進捗度合を可視化する表現」、そしてVisualizer全体をまとめ上げる「デザインテーマ」を決める必要がありました。

数回にわたる議論の末、前者は「回路基板の発展」、後者はVaporWaveと決定し、開発へと動き出しました。

カバーイメージ風クソコラ。権利が危ないのでぼかし多め。

このイメージ画像は制作の方向性の共有に役立ち、わかりやすいと結構評判でした。

言葉よりグラフィカルな表現が力を持つことを強く実感しました。

開発開始

3Dでの表現は全員の共通認識であったので、UnityのWebGLビルドとThree.jsが開発環境候補として挙がりました。

ある一人の開発メンバー苦い経験からの強い要望により、Three.jsを用いて開発を進行していくことに決定しました。

開発環境構築とVisualizer部分のベースが完成したところで、みなさんご存じウインドウシステムやブラウン管ライクなポスプロのアイデアが出たので、React-Pixiにも手を出すことになりました。(これが後にあるメンバーに依存する開発となってしまう原因になるとは…)

Visualizerの原型。

開発進行におけるトラブル

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みたいな書き心地してて最高です。

自分が担当した箇所のこだわりポイントについては以下の記事で解説します!

ビジュアライザ2022を支えた技術(Fogrex版)
どうもこんにちは、Fogrexです。これは5/1に開催された新歓イベント、CPCTFにて使用されたビジュアライザの制作秘話について語るブログです。 ついでに本来4/12に公開されるはずだった新歓ブログリレー35日目も兼ねてます。マジで出してなくてすまんかった... ビジュアライザ概要 ここで話すビジュアライザとは、先述のイベントCPCTFにて参加者のスコアを†いい感じ†に表示することを目的として作られたWebサイトです。traP部員のグラフィック系プログラミングが好きな部員によってつくられており、traPの技術力を新入生に見せつける意義もあります。今年のビジュアライザ解説記事は以下です。 C…

Renerd

ルナールと申します。

私は回路の生成とヴィジュアライザの画面構成(カメラの動きやオブジェクトの配置など)を担当しました。
TypeScriptを使ったことが無かったので最初混乱しましたが、開発を通じて慣れたので成長を感じました。

最も苦しかった部分はモデルを表示するThree.js部分の実装でした。普段Unityしか触っていない私からするとGUIで色々いじれない開発は勝手が違い、かなり手こずりました。

一番好きな部分は監視カメラが切り替わるような表現です

CPCTF開催中Twitterで感想をつぶやいて下さった方が多く、とてもうれしかったです。ありがとうございました。

Uzaki

鵜崎です。

Visualizer内部の回路部品のモデリングや、全体のデザイン、開発進行などを担当しました。

ローポリ+ピクセルテクスチャが性癖。
公開前カバー画像。厨ニ感満載に仕上げました。

最初はばりばりコード書いていっぱい学んで圧倒的成長なんて夢見てましたが、実際はマジで1行もコード書いてないので不甲斐ないです。次こそは。

その分見た目をいっぱいつくることができて自分のやりたい世界観はけっこう実現できたのでうれしかったです。とは言え、まだまだやりたいことは無限にあったので無念でもあります。

お気に入りスクショ。

今回のテーマが「VaporWave」ということで、普段から結構すきなジャンルだったのでつくっててすごい楽しかったです。語彙力。

模倣とかオマージュにかなりコンテンツの根っこを持ったジャンルだったのでかなり好き勝手やっちゃいました。怒られそうな要素は大体僕の責任です。

Uzaki icon
この記事を書いた人
Uzaki

たすけてください。

Fogrex icon
この記事を書いた人
Fogrex

シェーダーとVRやってます レイマーチ楽しい(゚∀。)

Renard icon
この記事を書いた人
Renard

20B 絵とゲームをたまに作ります

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2022年4月7日
traPグラフィック班の活動紹介
annin icon annin
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2021年3月19日
traPグラフィック班の活動紹介
NABE icon NABE
2021年7月8日
じゃぱりぱーく・おんらいん
suzushiro icon suzushiro
2021年5月16日
CPCTFを支えたインフラ
mazrean icon mazrean
記事一覧 タグ一覧 Google アナリティクスについて