feature image

2021年10月5日 | ブログ記事

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

おはようございます、19のFogrexです。
この記事では4/25に開催された、traP主催のCPCTFという大会で使用されたビジュアライザについて紹介します。今更ですが読んでいただければ嬉しいです。
制作者はFogrex, N, temmaの三人です。

CPCTFにおけるビジュアライザ

CPCTF当日レポート
皆さん、本日は参加していただいてありがとうございます! 本記事では、開催中の様子や各種統計情報を紹介します。 参加者 今回の参加者は156人(内、点数を獲得したのは107名)でした。事前登録者数が少なくてドキドキしていましたが、直前に登録してくれる方が多くて安心しました。 ユーザー数の推移盛り上がり 全体・新入生のどちらでも競り合いが激しく、白熱したイベントになりました。皆さん、お疲れさまです! 全体ランキングの推移新入生ランキングの推移HTTPリクエスト数PPCの提出数問題情報 ジャンルごとの問題数 +-----------+----------+ | genre | 問題数…

traPで開かれるCPCTFにおいて、毎年作られているビジュアライザですが、これはCPCTFに参加する皆さんの得点を視覚的に表示し、楽しんでもらうことを目的としています。ランキング表は別にあるので、ランキングの表示というよりは現在の大会の全容を視覚的に見てもらおうというものです。

今回のテーマ

毎年決まったテーマの下でビジュアライザが作られています。
2019年度は以下のスレッドでまとめられています(2020年はコロナウイルスの流行のため中止)

https://twitter.com/i/events/1103656306479513600

2018, 2019年の大会では近未来的な雰囲気のビジュアライザが作られてきました。(2020年はコロナウイルスの流行のため中止)
ですが2021年は心機一転、牧歌的な雰囲気を持ったビジュアライザを作ることにしました。

具体的には、デフォルメされた惑星を舞台に、参加者の得点に応じて木を成長させることで、惑星が発展していく様子を楽しんでもらおうということになりました。

全体像としてはスーパーマリオギャラクシーっぽいものですが、テイストは以下のGIF作品を目指して作っていくことにしました。

作り方

いろいろな環境で参加してくる人全員が手軽に手元で閲覧できる方が嬉しいという気持ちがあったので、ブラウザがあればほぼ同様に動作する(と信じて)WebGLを前提としました。

最終的にはUnityのWebGLビルドする方針に決めました。と言うか制作者がUnity/Three.jsユーザー、Unityユーザー、そもそも3Dエンジン未経験みたいな状況だった上に、上記のようなテーマで作ろうと思ったらThree.jsぐらいのレイヤーだと地獄見そうだと思ったためです。

結果的にUnityの方が地獄見ました。UnityのWebGLビルドはかなりつらいという知見は貯まりましたね。来年以降はThree.jsとかWebGLのライブラリを使ってください。
あとかなり重くなってしまい、満足に動かせるPCの要件が高くなってしまいました。最初の「いろんな人に見てもらう」という目的からずれてしまいましたね。もっと軽くできるように最適化したかったです。

制作の方針

Fogrexが主に惑星周りのオブジェクト、N君がランキング周りの処理、temma君がネットワーク周りの処理を書きました。後ほど各担当者に担当した機能について語ってもらおうと思います。

完成品

YouTubeの配信が残っているのでそれを載せます。

最初のほうはかなりバグが頻発しているので、3時間ぐらい経った後まで時間を進めたほうがバグなく見れると思います。

平時は惑星が表示されており、その横に上位10位までのランキングが表示されています。
誰かが得点するとその人の木の近くに飛んでいき、木が成長します。

本番の流れ

大会の一週間前ぐらいに接続テストがあったのですが、WebSocket接続に問題がありテストできず、大会の数日前の最終確認テストの時点でやっと接続でき、十分にテストできないまま本番を迎えてしまいました。

開始直後、そもそも動かないバグが発生し、いったんデグレしたんですが、temma君が絶起したため対処できませんでした。何とか彼が起きてきてネットワーク周りのバグは改善されました。

開始数十分後、一位の人の得点が表示されないバグが発生しました。原因は得点の文字の横幅よりテキストボックスが指定されていたためでした。

それぐらいはすぐ治せたんですが、定期的にウェブサイトごと落ちるエラーが発生していました。エラーログを見るとメモリリークを起こしている感じだったんですが、正直UnityWebGLビルドのエラーは高確率でメモリリークとして表示されるので、どこが原因なのか全くわかりません。WebSocketをJS側で受けていたため、エディタ上ではそもそも実行すらできず、デバッグが困難でした。

終了数十分前になり、そのメモリリークの原因が実はサーバーから本来流れてこないはずの、関係者アカウント(制作に参加し、ランキングに反映しないアカウント)の得点が流れてくることが原因でした。エラーハンドリングしていなかったので発見がかなり遅れてしまいました。

このように突貫工事によってエラーハンドリングもせず、十分なテストもしないまま本番に凸するのはほんとによろしくないです。来年以降は頑張ってください。

各担当者による解説

以降は各担当者による解説パートになります。
興味ある方はどうぞ。

Fogrex(惑星、木、ポストエフェクト、ほか小オブジェクト制作)

思ったより量が多くなったので別記事を生やします

ビジュアライザを支えた技術
こんにちは、これは夏のブログリレーでも何でもない記事です。今回は4/25に開催された、traP主催のCPCTFという大会で使用されたビジュアライザの技術解説記事(?)です。主にFogrexの担当部分について書いています。

N (ランキングパネルとか雨とか)

パネルはサイドにまとめて表示するor上位10名のみ星に沿って表示するの二案が出て後者が採用されました。ランキングが切り替わるアニメーションをどうしようか考えてましたが、加点時の木のアニメーション時に画面外に隠すことで対応しました。最初プレハブ使わずに全部配置みたいなことをやっててフォント変えたりサイズ変えたりするのとかが最悪みたいな感じになってました。プレハブはきちんと使いましょう。雨はパーティクルシステムで作りました。テキトーなテクスチャを描いたくらいしかやってません。ちゃんと動いててよかったです。

temma(ビジュアル面以外)

WebSocketでサーバーからメッセージを受け取って、アニメーションを発火させています。WebGLビルドから直接WebSocketを利用することができなかったので、WebSocketのメッセージをqueuingしてpopできるような関数をプラグイン(.jslib)として書き、Update時に監視するようにしました。

あとは、デザインに偉そうに口出ししたりランキングの更新を書いたり細かいことをやっていました。

コードはC#っぽい感じになってないので見ないでね♡

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

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

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

物体が接触している他の物体や地面等の固体の面を押しているとき、その力の面に垂直な成分に対し、同じ大きさで反対向きの、固体の面が物体を押し返す力たそ(◞‸◟っ)

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

19 生命理工学院

この記事をシェア

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

関連する記事

2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2019年4月22日
アセンブリを読んでみよう【新歓ブログリレー2019 45日目】
eiya icon eiya
2021年5月16日
CPCTFを支えたインフラ
mazrean icon mazrean
2021年4月26日
CPCTF2021 作問者writeup by zassou
zassou icon zassou
2021年4月26日
CPCTF2021 作問者writeup by hukuda222
hukuda222 icon hukuda222
記事一覧 タグ一覧 Google アナリティクスについて