本記事は2021年12月4日~12日に行われた部内ハッカソンの報告記事です。
今回のハッカソンはあのpixivでおなじみのピクシブ株式会社様の協賛のもと行われました。結果、我々2班はお絵かきリレーゲーム「Nascalay」を制作し、テーマ賞をいただくことができました。
他の班の制作物については以下の記事をご覧ください。
2021冬ハッカソンが開催されました！ | 東京工業大学デジタル創作同好会traP
Nascalayは以下のリンクから遊ぶことができます。
https://nascalay.trap.games/
目次
チームメンバー
チーム名: 横断歩道を渡れない猫(cat-crosswalk)
使用技術
- Githubリポジトリ
- Go
- Docker
- Websocket
- React
- TypeScript
- CSS in JS (Emotion)
Nascalay(ナスカレー)とは？
タイトルの由来は🍆🍛ではなく，ナスカ(の地上絵)+リレーです。結果的に遊び心ある感じの名前になりました。
あそびかた
1. 一人一つお題を決める
デフォルトのお題も用意されています。
2.絵の一部を繰り返し書いていく
他の人が決めたお題を表す絵を描いていきます。キャンバスは正方形で分割されており、1ターンにつきその1つを描きます。
自分が描く部分の上下左右のみを見ることができるので、それをヒントにしましょう。
全てのお題が完成するまで複数回絵を描いていきます。
3.できた絵のお題を予想する
完成させた絵を見て、それがどんなお題だったのか回答しましょう。
4.答え合わせ
予想されたお題が当たっているか答え合わせです。出来上がった絵が予想外のものになっていることが多く、楽しいです。
↓奇跡的にうまくいった例
↓ぐちゃぐちゃ
このゲームはマルチプレイゲームです。
4人以上でプレイすると楽しいので、通話しながらぜひ遊んでみてください！
https://nascalay.trap.games/
開発の流れ
開始前~1日目
今回のテーマ「draw」に沿った制作物を作るため、アイデア出しを行いました。結果、50個以上のアイデアの中から「お題があって、 分割されたキャンバスにみんなで1マスずつ埋めてお絵描きする」という案が採用されました。
Figmaの共同編集を用いて軽いテストプレイをした後、各自の作業を開始しました。
2日目
具体的なゲームルールや仕様などを固めつつ、バックエンドとフロントエンドでそれぞれ使う技術や言語、フレームワークなどを決めました。
バックエンド班
エンドポイントやWebSocket仕様の洗い出しを行いました。
フロントエンド班
開発体験を上げるためにレポジトリの整備や Linter の導入などを行いました。
デザイン班
キャンバスに絵を描く画面のワイヤーフレームを作りつつ、ゲームのイメージを探っていました。
3日目
バックエンド班
WebSocket以外のエンドポイントの実装が終わり、@Rasと@trastaがWebSocketの理解に勤しみます。この日は@trastaがgorilla/websocketのexamplesやtraP内製OSSなどを参考にし、送受信のひな型を作りました。
デザイン班
うまく仕事を分担できず、ばらばらのものを作ってしまっていたので、今回のゲームに適したトンマナの決定からやり直そうとしていました。
フロントエンド班
@toshi00がtraQ-UIを参考にしつつWebSocket接続のひな形を作りました。
4日目
バックエンド班
@Rasが細かいバグの修正やリファクタリングを、@trastaがWebsocketを完全理解し送受信をほとんど完成させました。
デザイン班
未だに画面のイメージを共有できていなかったので、衝突していました。@Kamijoと@tarariraの二人でやりたいことを吐き出して、とりあえず@Kamijoがゲームの背景画像を作成しました。
フロントエンド班
ResetCSSとしてemotion-resetを導入したり、React Routerを設定したりしました。WebSocketを受信したら画面遷移する処理なども作りました。
当初はデザインが全て完成してから本格的な制作に取り掛かろうと思ってたのですが、当初の予定よりもデザインに時間がかかりそうだったので、既に確定しているコンポーネントの作成に取り掛かり始めました。この日は @SSlime が Canvas 上で線がかけるようなコンポーネントを作りました。
5日目(中間発表日)
バックエンド班
@RasがWebsocketをようやく完全理解し、受信イベントの実装を進めました。@trastaはゲームに用いるお題を生成するアルゴリズムを実装しましたが、再帰ゴリゴリでコードが煩雑になってしまい@Rasもあまり理解しないままPRを通します(7日目に革命が起こります)。
デザイン班
@Kamijoが爆睡している間に、@tarariraが昨日の背景画像を用いていい感じの見た目を作ってました。中間発表日にしてようやく、一つの画面が8割ほど完成しました。
フロントエンド班
@SSlime が Canvas 上での消しゴムや塗りつぶしを実装しました。塗りつぶしにはシードフィルアルゴリズムを用いており、かなり高速に動作します。
6日目
バックエンド班
この日もひたすら送受信イベントの実装を行いました。このあたりからコピペが増えてきてほとんど作業になります。
デザイン班
できていない画面がたくさんあったので、(@SSlimeに圧をかけられながら) 急いで残りの見た目を作っていました。
フロントエンド班
ほとんど何もしていません……この日のコミット数2でした() デザイン待ちの時間が続きます。これ、完成するの？？？
7日目
バックエンド班
@trastaがスマートなお題生成アルゴリズムをシャワー中に思いつき、すぐに実装しました。@Rasはいつものように送受信イベントを実装します。この日は@toshi00もバックエンドの開発に協力してくれました。
デザイン班
引き続き足りていない画面を作成していました。フロントエンドとコミュニケーションを取りながら、細部の決定を行いました。
フロントエンド班
Slider 実装の調査や、フォントの設定をしました。また、@SSlime の力によって実装の重たいカラーピッカーなど必要なコンポーネントも仕上がってきました。デザインが決まってきたので画面の実装を始めます。
8日目
バックエンド班
ほとんどイベントの実装が終わり、全体テストを手元で行いますが人数が反映されない、ゲームが進まない等のバグが多発しました。この日は夜が明けるまでひたすらテストとバグ修正を繰り返します。また、今回のハッカソン中最もコミット数を重ねたのもこの日でした。
デザイン班
アニメーションや画面推移の確認などを終え、OGPの画像・アバター画像の作成などを行いました。@Kamijoが作ったアバターがとても可愛いのでぜひプレイしてみてください。
フロントエンド班
画面の実装を進めていきます。@SSlimeがボタンやタイマーのアニメーション、絵を書く部分の画面を実装します。@toshi00も結果表示や、参加者表示の通信周りなど残っている部分の実装を進めます。また、@trastaがバグの発見・修正をしてくれました。@tarariraもカーソルの実装やデザインの修正をしてくれました。ありがとうございます！！！！
9日目(最終発表日)
バックエンド班
@Rasは早朝からコンビニに向かいリフレッシュしたのち、残っているバグを解消します。@trastaもバグの修正に必死です。
デザイン班
@tarariraと@Kamijoは発表の準備などをしました。
フロントエンド班
Canvas の情報が送信されないバグに苦しんでいました。@toshi00が対応し、発表直前になんとかゲームとして動くようになります。また、@trastaがIconの読み込みやOGPの設定を、@tarariraがデザインの修正やfaviconの読み込みを対応してくれました。ぎりぎり間に合った……？
メンバーコメント
@SSlime
絵を書く部分やちょっとしたコンポーネント・ちょっとしたアニメーションを作りました。以前から React には興味があったのですが、React を使った開発は初めてだったのではじめは少し不安だったのですが面白かったです。バケツでの塗りつぶしを高速化するのにだいぶ苦労したのでぜひ使ってみてください！
@toshi00
WebSocketを使った状態の同期やCanvasの扱いなど、考えることがたくさんありました。初めてReactを使いましたが無事に動いて良かったです。ゲーム特有のUIやアニメーションにも触れられて楽しい一週間でした。†React完全に理解した†！！！
@Ras
前回、前々回に引き続きバックエンドを担当しました。今回は新しいことを学ぶことよりもこれまで学んだことを発揮することに重きを置こうと思っていたのですが、結果的にWebsocketやGoの並列処理など学ぶこともたくさんあり、とても充実した１週間になりました。あと個人的にはdeepmap/oapi-codegenを用いたスキーマ駆動開発をやってみたかったので導入出来て満足でした。楽しかった！！！！！
@trasta
前回のハッカソンではフロントやったので今回は久しぶりにGoを書きました．正直作るものの大枠が決まった段階では一週間で終わる気は全くしていなかったのですがなんとか終わらせることができてよかったです．
@Kamijo
デザインを担当しました。普段しない表現を色々試すことができたので、制作中ずっと楽しかったです。@tarariraとバチバチしながらいいものが作れたと思います。ゲーム自体も面白いものになったので、ぼくは感動しました
@tararira
前回や前々回、前々々回のハッカソンと違い、制作するものが一般的なwebサービスではなくゲームとなりました。ゲーム体験を高めるためにゲームの世界観を組み込みながらも使いやすさを損なわないようなデザインを作るのにとても苦労しました。また、Reactのお気持ちがちょっっっっとだけ知れました。めちゃおもろいゲームできた！
