feature image

2021年12月28日 | 作品紹介

2021 冬ハッカソン 2班「Nascalay」

本記事は2021年12月4日~12日に行われた部内ハッカソンの報告記事です。

今回のハッカソンはあのpixivでおなじみのピクシブ株式会社様の協賛のもと行われました。結果、我々2班はお絵かきリレーゲーム「Nascalay」を制作し、テーマ賞をいただくことができました。

他の班の制作物については以下の記事をご覧ください。
2021冬ハッカソンが開催されました! | 東京工業大学デジタル創作同好会traP

Nascalayは以下のリンクから遊ぶことができます。
https://nascalay.trap.games/

お絵かきリレー Nascalay
Nascalayでみんなの力をあわせて絵を完成させよう!仲間とわいわい!

目次

チームメンバー

チーム名: 横断歩道を渡れない猫(cat-crosswalk)

使用技術

Nascalay(ナスカレー)とは?

タイトルの由来は🍆🍛ではなく,ナスカ(の地上絵)+リレーです。結果的に遊び心ある感じの名前になりました。

あそびかた

1. 一人一つお題を決める

デフォルトのお題も用意されています。

2.絵の一部を繰り返し書いていく

他の人が決めたお題を表す絵を描いていきます。キャンバスは正方形で分割されており、1ターンにつきその1つを描きます。
自分が描く部分の上下左右のみを見ることができるので、それをヒントにしましょう。
全てのお題が完成するまで複数回絵を描いていきます。

3.できた絵のお題を予想する

完成させた絵を見て、それがどんなお題だったのか回答しましょう。

4.答え合わせ

予想されたお題が当たっているか答え合わせです。出来上がった絵が予想外のものになっていることが多く、楽しいです。

↓奇跡的にうまくいった例

↓ぐちゃぐちゃ

このゲームはマルチプレイゲームです。
4人以上でプレイすると楽しいので、通話しながらぜひ遊んでみてください!
https://nascalay.trap.games/

お絵かきリレー Nascalay
Nascalayでみんなの力をあわせて絵を完成させよう!仲間とわいわい!

開発の流れ

開始前~1日目

今回のテーマ「draw」に沿った制作物を作るため、アイデア出しを行いました。結果、50個以上のアイデアの中から「お題があって、 分割されたキャンバスにみんなで1マスずつ埋めてお絵描きする」という案が採用されました。
Figmaの共同編集を用いて軽いテストプレイをした後、各自の作業を開始しました。

2日目

具体的なゲームルールや仕様などを固めつつ、バックエンドとフロントエンドでそれぞれ使う技術や言語、フレームワークなどを決めました。

バックエンド班

エンドポイントやWebSocket仕様の洗い出しを行いました。

フロントエンド班

開発体験を上げるためにレポジトリの整備や Linter の導入などを行いました。

デザイン班

キャンバスに絵を描く画面のワイヤーフレームを作りつつ、ゲームのイメージを探っていました。

3日目

バックエンド班

WebSocket以外のエンドポイントの実装が終わり、@Ras@trastaがWebSocketの理解に勤しみます。この日は@trastagorilla/websocketのexamplesやtraP内製OSSなどを参考にし、送受信のひな型を作りました。

デザイン班

うまく仕事を分担できず、ばらばらのものを作ってしまっていたので、今回のゲームに適したトンマナの決定からやり直そうとしていました。

フロントエンド班

@toshi00traQ-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の並列処理など学ぶこともたくさんあり、とても充実した1週間になりました。あと個人的にはdeepmap/oapi-codegenを用いたスキーマ駆動開発をやってみたかったので導入出来て満足でした。楽しかった!!!!!

@trasta

前回のハッカソンではフロントやったので今回は久しぶりにGoを書きました.正直作るものの大枠が決まった段階では一週間で終わる気は全くしていなかったのですがなんとか終わらせることができてよかったです.

@Kamijo

デザインを担当しました。普段しない表現を色々試すことができたので、制作中ずっと楽しかったです。@tarariraとバチバチしながらいいものが作れたと思います。ゲーム自体も面白いものになったので、ぼくは感動しました

@tararira

前回や前々回、前々々回のハッカソンと違い、制作するものが一般的なwebサービスではなくゲームとなりました。ゲーム体験を高めるためにゲームの世界観を組み込みながらも使いやすさを損なわないようなデザインを作るのにとても苦労しました。また、Reactのお気持ちがちょっっっっとだけ知れました。めちゃおもろいゲームできた!

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

20B。アライグマです。

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

かみじ

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

20B traPortal とか

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

SysAd班とGraphic班で活動しています。デザインが好き

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

20B SysAd班 作りたいものをなんでも作る

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

いろいろやってます。

この記事をシェア

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

関連する記事

2022年4月7日
traPグラフィック班の活動紹介
annin icon annin
2021年3月19日
traPグラフィック班の活動紹介
NABE icon NABE
2021年4月2日
DXライブラリで重力パズルゲームを作る
Macky1_2 icon Macky1_2
2021年7月8日
じゃぱりぱーく・おんらいん
suzushiro icon suzushiro
2020年5月15日
【新歓ゲーム制作特集 第2弾】Inverse製作秘話
Saltn icon Saltn
2019年5月16日
Party Kingdom
Double_oxygeN icon Double_oxygeN
記事一覧 タグ一覧 Google アナリティクスについて