ブラキオカップ

PicoloR

http://picolor-backet.s3-website-us-west-2.amazonaws.com/
https://kotarowakuwaku.github.io/PicoloR-frontend-farm/

Go

TypeScript

React

Docker

PostgreSQL

テーマカラーに合わせて写真を撮るタイムアタックゲームです！

yu:ka

Shoma

3pgfapqg2to

小林虎太郎

推しアイデア

楽しくみんなでスマホで参加できる、楽しいゲーム！！！

作った背景

色をテーマにみんなで楽しめるリアルタイム関係のゲームを作ってみたかった！

推し技術

動物関係の技術で統一！バックエンドはたくさんAPI生えてます！

プロジェクト詳細

はじめに

どんなチーム？

watnowというサークルで知り合った4人で、関西から参戦いたしました！

今回の開発では全員に初めて使う技術があり、なかなか苦戦した開発となりました。

そんな中でも形になった私たちのアプリをぜひ触ってみてもらいたいです！

なぜこのアプリ開発に決めたのか

今回のハッカソンのテーマがみどりということもあり、　まず色に関連したサービスを作ろうと方針を定めました。

みどりに関連したものを全員で出し合うことでアイデアだしを行ったり、技術に関してどこまで遊べるかを話し合った結果、技術構成が異質な今回のゲームが完成いたしました！

サービスについて

サービスの概要

誰よりも早く指定された色をカメラで納めるタイムアタックゲームです。

ゲームを開始しよう

image

STARTボタンを押してゲーム開始！

QRコードで参加

image

提示されているQRコードをスマートフォンのカメラで読み取ってもらうことでゲームに参加することができます！ image

スマートフォンの画面からはアイコンと名前を決めて参加することができます。

指定された色をクリックしてカメラ起動

image

スマホ画面では、色をクリックするとカメラが起動するので、その色に合った色を探してください！

image ホストとなるpc側は結果をリアルタイムで確認できます。 観戦するだけでも面白い。

誰よりも早く色を見つけろ！

image

最終的に色が全部埋まると上位入賞者全員の結果が見れます。

サービスの推しポイント

意外と白熱したバトル ↳色を探すだけと思いきやカメラで撮影しないといけないので大忙しです。あなたの観察眼が磨かれます！

技術構成

image

なぜこんな技術構成???
  • メンバーの一人がPandaCSSを使いたい！
  • 他の動物何があるんだろう？
  • 技術の動物園作りたくない！？笑

という悪ノリでできた技術動物園です。

そう！テーマは動物園！！！！

技術のアイコン、名前、マスコットキャラクター、オライリーを見てとにかく動物を詰め込みました。

いろんな動物を取り入れることができましたが、全然知らない技術もありなかなか飼いならすのに一苦労しました。

バージョンの関係などで脱走した動物もいましたがなかなか充実した動物園を作れたのではないでしょうか。

その他個人的推しポイント‼️

デザインは可愛くシンプルに！
  • UIの統一感！テーマはみどり！
  • Loadingにはてくてく可愛い足跡が！
  • テーマカラーの登場画面にはフェードイン等アニメーションとカウントダウンでわくわく感を🙆‍♀️
  • 画像処理中は選択した色のレーダーが画像をスキャン(しているように見えるアニメーション付き！)
  • コントローラーの「撮影ボタン」は、使えなくなるリアルタイムで検知して非活性に！
  • アニメーションとともに押せなくなることをUIで認知させる工夫あり👊

テーマカラーが使われているかを判断する画像処理！
  • 初めてのバックエンド・(Python)で画像処理しました！
  • API・処理が重すぎたので、画像は圧縮してから送信してます
  • テーマカラーが使われている写真=色相が近い、と判断し、写真をHSV色空間に変換して処理を行っています
  • 画像処理にはよりイメージ通り(勘)の判定を行うために、次のような条件を通るかどうかで処理を行いました。
    • 条件１：色味がしっかり分かる画像のみ判定OKにしたかったので、彩度30以上、明度30以上でフィルターをかけ、それが全体の30%を占めていること
    • 条件２：条件１を通った色味の強い画素のうち、テーマカラーとの色相の差が(360度のうち)前後60度の画素が30%を占めていること

テーマカラーの生成
  • テーマカラーはゲーム性を考慮して、2人なら1色を取り合うように、3人なら2色、4人以上は3色用意するようにしました。 - カラーコードをランダム生成してしまうと白や茶色などの無彩色も採用されてしまいます。よって、色相のみにフォーカスしてランダムな値を彩度と明度は固定値で生成しました。
  • 単にランダムに生成したかったのですが、かぶってしまっては嫌ですよね。
  • よってランダムな色を一つ用意し、そこから+40%ずれている色、-30%ずれている色と生成することで、バラバラの色相の生成を実現しました

選択した動物で叩くAPIがかわる！？！？
  • ユーザーアイコンを最初に登録しますが、それによってユーザー登録の処理を叩くAPIが実は変化しています🤫
  • 蛇ならPyhonなどなど、、、、、？👀
  • 繋ぎ込みが全てできたわけではないですが、今後動物を増やせたら楽しいなと思います☺️

最後に
  • ゲームとても楽しいです！！！！！！
  • ぜひやってみてください！！！！
  • あらゆる紹介に対応する動画は、下記YouTubeリンクから探してください💦

動画参考リンク

yu:ka

@yuuka1120