🎨

【個人開発】カラーコードから色を当てるゲームを作りました

2021/06/17に公開

指定されたカラーコードを画像から当てる「アルティメットいろおに」というゲームをリリースしました。(1ヶ月ほど前に)

せっかくなので、Zennデビューで記事を書きました。

ゲームについて

「いろいろなーにいろ?」
「#eef9fd」

そんな感じのゲームです。

https://ultimate-colortag.vercel.app

image

指定された色を画像から見つけるだけ、単純明快です。

クリアした後は、実際の色と選択した色の比較によるフィードバックもあります。
image

使用技術

  • TypeScript
  • React
  • Vercel
  • Material UI
  • Canvas

はじめてのたいぷすくりぷとでした。みんながいいぞいいぞと言う理由は少しわかりました。コードを信用しやすいのと、VSCodeとの相性がとてもいいですね……。
Reactは今回で2回目でした。VueよりJSライクに書けるのでやりやすいですが、ちゃんとしたお作法がわかっていないのでhooksなどは雰囲気で使っています。Reactに慣れていればNextの方が色々できそうなので、次はNextで作りたいです。

UIフレームワークは、途中でRebassに乗り換えたりしながらも、結局Boxでのレイアウトの組みやすさでMaterial UIに戻ってきました。ただ、Material UIはボタンなどの色に制限があってちょっと不満がありました。
ちゃんと設定すればできると思いますが、中途半端にカスタマイズしていたのでそこの使いづらさです。

主なライブラリとロジック

rgbaster.js

画像を渡すと、画像内で使われているカラーコードを取得できます。

chroma.js

二色の色差を出すのに使いました。これを探す中で、色差について「CIEDE2000」というものを知りました。
ちなみに、これ以外にも色に関することなら色々できます(色だけにね!)

ゲームでやっていること

  1. 画像から使用している色を抽出(rgbaster.js)
  2. その中からお題の色をランダムに選択
  3. クリックした色を取得(Canvas)
  4. お題の色との色差を取得(chroma.js)
  5. 一定以上の一致度になったらゲームクリア判定
  6. 一定条件でゲームオーバー

作成のきっかけ

ネタのきっかけは、プロを目指す人のためのRuby入門にHEXとRGBを変換するメソッドを作るというのを見て「理論的にはカラーコードがあれば色を当てられるはずなのかーなるほどー」と思ったことです。

で、
「いろいろなーにいろ?」
幼女 「#eef9fd」
って言われたら萌えるなと思いました。なので、このゲームは実質幼女です。私はそのつもりです。

作るきっかけは、私が通っていたRUNTEQというスクール内で「GWにアプリを作って発表しよう」というイベントがあったことです。

https://twitter.com/aiandrox/status/1387577003293888520

最初はこのような感じにしようとしたのですが、同じようなゲームが既にあったので方向転換しました。

画像選定

私は写真を撮るのが好きなので、「私の写真を見ろ!」という気持ちでいろいろ選びました。
が、テーマの関係上、色に富んだ画像でないといけないことに気づきました。その基準で選ぶと、中々いい画像がなくて地味に苦労しました。
写真も楽しんでいただけると嬉しいです。全5種です。

その他の機能について

ゲームオーバー

びっくりさせたかったので、ゲーム内では特にゲームオーバーに関する説明はありません。
ぜひ一度はゲームオーバーしてください。でもたまにうまく動作しません。

共有用URL

せっかくのゲームなので共有機能は付けたいと思いましたが、カラーコードだけで色を想像できる人は中々いません。なので、共有URLのクエリで結果ページに遷移して色を見れるようにしました。
こんな感じです。
https://ultimate-colortag.vercel.app/result?question=%23eef9fd&clear=%23ecf5fa&count=49&mode=ultimate
image
本当はOGPまでやりたかったのですが、私の力量ではできませんでした。SSRだと実現できるようなので、Nextに移行したいです。いつか。いつか。

エクストラモード

普通はある程度以上の一致度でクリアなのですが、一致度100%モードをやりたいと言った猛者がいたので、エクストラモードを実装しました。
通常をクリアした方のみ挑戦できます。我こそはという方は是非挑戦していただきたいです。
image

おわりに

イベントを企画してくれた@ikaika300さん、ありがとうございます。
こういう企画があるとネタを放出するモチベーションになります。お陰でちょっとReactと仲良くなれた気がします。

せっかくなので遊んでみて、そして結果をシェアしていただけると嬉しいです。

Discussion