スピノカップ

BONNET GRILLS BBQ

https://github.com/syota-kawaguchi/SpinoCup202409_d
https://bonnet-grills-bbq.vercel.app/solidjs/title

TypeScript

React

Docker

Vue

Svelte

車のボンネットの上でBBQをして、いい感じに焼いて、点数を稼げ!

yu:ka

金城翔太郎

川口祥多

kk0101010

推しアイデア

あつあつな車のボンネットでお肉を焼くというバカゲーを、CG+フロントエンドのスペシャリストが全力実装！

作った背景

「あつい」から車のボンネットを連想🚙アプリの構想を練る会議中に一人がBBQ中だったところから着想を得た

推し技術

5つのフロントエンドフレームワークの共存を果たした、全画面Three.js対応のマイクロフロントエンド！

プロジェクト詳細

はじめに

チームの生い立ち

友達・ハックツで知り合った元他人・内定者バイトを共にした将来の同期による異色の「友達の友達」チームです。

Webフロントで集めたにも関わらず、・CGに特化してしまったため、CGに特化したWebサービスを開発しました。

開発未経験のデザイナーもおり、みんなにとってとても刺激のある新鮮なハッカソンになりました。

ボンネットバーベキューを作るに至った背景

テーマ「あつすぎる」から、「車のボンネットが熱くなる」という、メンバーに車好きがいるからこその発想に繋がり、ちょうどその会議中一人がBBQ中だったので、じゃあもう車のボンネットでBBQするゲームでいいんじゃね？ というおふざけから全てが始まりました。

  • 車の種類を変えて難易度を調整したらおもろいんじゃないか？
  • CGに長けた人が多いから車とかも3Dオブジェクトを使ってwebで表示したら強みを活かせるんじゃないか？

など、想像はとどまることを知らず、みんなで全身全霊でふざけた結果、このサービスが出来上がりました。

サービスについて

サービスの概要

image

車のボンネットでBBQをして、スコア競うゲームです。

お気に入りの車を選ぼう

image

車は全部で3種類。車種によって焼ける面積や火力が異なります。

  • メーターにアニメーションの工夫を！：https://youtu.be/188RYDUll4I
    • 矢印を押した瞬間に次のメーターが表示されて直感的でなかったのでチカチカで選択中であることをユーザに示す
    • ボタンも選択中は押せないようハンドリング

より多くの食材を焼こう🍖焦げ具合に注意！

image 朝 image 昼 image 夜 image

昼に一番火力が強くなるぞ。 朝は目玉焼きを焼き、昼には肉を焼き・・・ など、攻略を工夫しよう！

  • 自作サーモグラフィー

    • ボンネットの温度を確認できるように実装した機能
    • おそらくゲーム中そこまで見ない機能に4hほどかけた
    • カラーマップのjetをライブラリを使わず、一から計算式を書いて実装 →ライブラリの使い方がいまいちわからなかったから image

  • こだわったスコアのカウントアップ：https://youtu.be/8Uiv1uSw-4g

    • 食材・こげに合わせて、赤・青・緑・黒でふわっとフェードアウト

  • 自動で画面遷移するとラグによる戸惑いがあったので、モーダルを挟んでタイムアウトになったことを明記するよう工夫

時間内に最高得点を目指せ！

image

とったスコアはSNSでみんなに自慢しよう！

  • スコア画面の多数のバリエーション
  • ゲームで使った車種
  • スコアによって三つの車のモーションを関数で自作！
  • モンハンのクエストクリア画面から発想を得たスタンプ
    • イラストは自作！ハッカソン中に描きました
  • スコアまではカウントアップして発表ドキドキ！
  • それぞれの結果のテーマカラーに合わせて、文字色・縁取り色を変更
  • 共有ボタンはスコアが出て落ち着いてからフェードインでよくある感じに表示

ここがおもしろい！サービスの推しポイント
  • 違う世界に住むほぼ初対面の精鋭たちのチーム
  • あつい！！！を活かした新感覚おもしろゲーム

技術構成

image

推し技術〜技術的な挑戦〜

特に推したい！技術の無駄遣いポイント

  • React, Vue, Svelte, Vanilla JS, SolidJsのWebフロントフレームワークの共存

    • 一個しか使わないだろ、というフレームワークをあえて画面ごとに用意
    • マイクロフロントエンドの垂直分割(ページごとでフレームワークを分割)- localhostではそれぞれportが振り分けられるので、nginxを使って、リバースプロキシでport番号を80などに統一して、localで開発がしてました！
      • それをしないとどうなるのか？
      • 各画面ごとに3001や3003などにアクセスして、確認しないといけない & 画面遷移がlocalhostのポート番号に依存して、画面フローが繋がっているかを確認するのが困難になります
    • 普通だったらUnityで作ればいいと思うんです。でも、それじゃ面白くない。CGのスペシャリストはいるし、フロントのスペシャリストもいる。じゃあせっかくだからWebで、何か面白いことをしよう。そうして複数フレームワークのきもきもサービスが出来上がりました。

  • hosting先は最初s3で静的でdeployしていたが、s3にずっと置いておくと、いつかコストがかかってしまった時が怖いので、それぞれのフレームワークのbuildファイルを一箇所に集めて、VercelにHosting先を移行しました！

  • それぞれのフレームワークに合わせたライブラリの使用

    • フレームワーク特有のThree.jsが存在、それを利用
    • SvelteのThrelteの fbxの表示がうまくいかず、 .fbx と .gltf の 二つのオブジェクトを用意

  • 自作オブジェクトの使用

  • 早い段階でプロトタイプも出来上がり、デプロイも最終日にはなんとか終えたので、時間を取ってみんなでじっくりドッグフーディングの時間を取れたので、こまかなバグも回収でき、とても完成度の高いものが出来上がりました。

最後に、いいのがしたこと
  • どのページがどのフレームワークなのかを URLで見れたら面白いと思い、URLにはパスには /react などを入れました
  • 3Dオブジェクトは自前で用意しているので、一つあたり25KBしか使っていません

yu:ka

@yuuka1120