ぬりえもじを作った

ぬりえもじ を作りました。塗り絵＋絵文字でぬりえもじ。 シンプルな塗り絵教材はそれなりにあるので、 完成品を横に置いて色を見比べながら色を塗ってもらうアプリにしました。 つまり色の感性を鍛えるアプリになっています。

ぬりえもじ

色彩アプリと色覚異常

色に関するアプリは、色覚異常の人にとって割と鬼門のアプリです。 日本では男性の 5%、女性の 0.2% が色覚異常なので、色覚異常はかなり確率の高い症状です。 ちなみに北欧だとその確率は 2倍にもなるので、必ず考慮する必要があります。 とはいえ絵文字はユニバーサルデザインを考慮して作られているので、 適当な絵を使って作るより見分けやすくなっており、遥かに有用なゲームになっていると思います。

だいたい完成してから遊んでみると、色数が 8色以上になるとキツイと感じました。 8色以上になる頻度はそんなに多くないですが、私も色に強くないので…。 また、えもじパズルの時と同様に面積が小さすぎる部分がたまにあるので、 面積が全体の 5% 未満なら最初から色を塗っておくことにしました。 面積 5% 未満にあらかじめ色を塗っておくと、複雑な問題の均一化ができて、8色以上になる確率もかなり減って、なかなか良い感じです。

作り方

基本的な作り方は簡単で、すべての要素を fill=none にして、クリックで色を濡れるようにするだけです。 あとは細かなバグ潰しですが、一番困ったのは表示が他のノードで完全に隠されているケースです。 普通なら完全に隠されている場合は見えないので無視して良いのですが、radialGradient でグラデーションが掛かっていたり、 前面ノードが透過色であった場合には、裏にも色を塗る必要があります。 操作に一意性を持たせるには、グラデーションと透過色は除外して、 その背後にあるノードに色を塗るような処理を加える必要があります。

採点の時にも完全に隠されているノードは問題になります。 具体的には完全に合っているのに 100点が取れなくなります。 ノードごとに色を採点するのが簡単なので、比較すると冗長な処理になってしまいますが、 やはりピクセル単位で採点するのが一番安全と思います。 直感的な得点にはなるので、そこは良いところです。