【個人開発】カラーコードから色を当てるゲームを作りました
指定されたカラーコードを画像から当てる「アルティメットいろおに」というゲームをリリースしました。（1ヶ月ほど前に）
せっかくなので、Zennデビューで記事を書きました。
ゲームについて
「いろいろなーにいろ？」
「#eef9fd」
そんな感じのゲームです。
https://ultimate-colortag.vercel.app
指定された色を画像から見つけるだけ、単純明快です。
クリアした後は、実際の色と選択した色の比較によるフィードバックもあります。
使用技術
- 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」というものを知りました。
ちなみに、これ以外にも色に関することなら色々できます（色だけにね！）
ゲームでやっていること
- 画像から使用している色を抽出（rgbaster.js）
- その中からお題の色をランダムに選択
- クリックした色を取得（Canvas）
- お題の色との色差を取得（chroma.js）
- 一定以上の一致度になったらゲームクリア判定
- 一定条件でゲームオーバー
作成のきっかけ
ネタのきっかけは、プロを目指す人のためのRuby入門にHEXとRGBを変換するメソッドを作るというのを見て「理論的にはカラーコードがあれば色を当てられるはずなのかーなるほどー」と思ったことです。
で、
「いろいろなーにいろ？」
幼女 「#eef9fd」
って言われたら萌えるなと思いました。なので、このゲームは実質幼女です。私はそのつもりです。
作るきっかけは、私が通っていたRUNTEQというスクール内で「GWにアプリを作って発表しよう」というイベントがあったことです。
最初はこのような感じにしようとしたのですが、同じようなゲームが既にあったので方向転換しました。
画像選定
私は写真を撮るのが好きなので、「私の写真を見ろ！」という気持ちでいろいろ選びました。
が、テーマの関係上、色に富んだ画像でないといけないことに気づきました。その基準で選ぶと、中々いい画像がなくて地味に苦労しました。
写真も楽しんでいただけると嬉しいです。全5種です。
その他の機能について
ゲームオーバー
びっくりさせたかったので、ゲーム内では特にゲームオーバーに関する説明はありません。
ぜひ一度はゲームオーバーしてください。でもたまにうまく動作しません。
共有用URL
せっかくのゲームなので共有機能は付けたいと思いましたが、カラーコードだけで色を想像できる人は中々いません。なので、共有URLのクエリで結果ページに遷移して色を見れるようにしました。
こんな感じです。
https://ultimate-colortag.vercel.app/result?question=%23eef9fd&clear=%23ecf5fa&count=49&mode=ultimate
本当はOGPまでやりたかったのですが、私の力量ではできませんでした。SSRだと実現できるようなので、Nextに移行したいです。いつか。いつか。
エクストラモード
普通はある程度以上の一致度でクリアなのですが、一致度100％モードをやりたいと言った猛者がいたので、エクストラモードを実装しました。
通常をクリアした方のみ挑戦できます。我こそはという方は是非挑戦していただきたいです。
おわりに
イベントを企画してくれた@ikaika300さん、ありがとうございます。
こういう企画があるとネタを放出するモチベーションになります。お陰でちょっとReactと仲良くなれた気がします。
せっかくなので遊んでみて、そして結果をシェアしていただけると嬉しいです。
Discussion