クリスタで同明度色を取得できるツールを作った話
あいさつ
はいどうも。はととぽすです。
いや本当に違うんすよ…Vtuber作ったりゲーム作ったりの部分を今週ほとんどしてないのは事実なんですけどちょっと欲しくなっちゃったのでクリスタの同明度色カラーピッカーを作っていました。（実際Vtuberは地道にやってるしゲームの方も設定やシナリオについて考えたりはした）
同明度色（バリューが同じ色）って何ぞよ
いや私も正直よくわかってないんですけど（私の認識に則って）皆さんに共有したいと思います。（あわよくば正しい認識を教えてください）
デジタルの色の表現において明度というものがあります。（画像のLの値）
で、どうやらこの明度というのは色によって見え方、つまり実際の明るさが違うらしい。
上の画像の白以外の色は同じLの値だが紫は暗く見えるし水色は明るく見える
この色によって違う明るさを「色価」というらしい。（絵画だとヴァル―ルともいうらしい）
多分俗にXなどで見る色のバリューを整えるというのはこの要素を加味して色を使うことを指すと思われます。
で、この色のバリューを整えると何がいいかって言うと多分イラストに書き込むとき違和感なく違う色を入れたり出来ることなんだと思うわけですよ。
本当は自分の感覚でここにはこの色がいいよねって色が選べればいいわけですがこれがまぁ難しい。
実際にクリスタ等でこれを確認しようとするとグレー等のレイヤーを用意してカラーレイヤーとして上からレイヤー効果をかける必要があります。
これは先ほどの画像をグレーのカラーレイヤーで覆った物ですがこう見ると結構違うようですね。
で、この作業をいちいちやっていたら大変だよ～ということで大体同じくらいの色が取れるツールないかな～と思いましたがなさそうなので作れるか模索してみることにしました。（TourBox様の製品を使っていたらどうやらそういう機能があるようですが）
色について調べる
デジタルの色味はRGBという色の組み合わせによって表現されています。
それぞれ0~255までの数値を組み合わせて色を表現しているわけですね。（光の三原色的な話ですきっと）
で、どうやら世の中にはCIELAB（LAB色空間）と呼ばれる人間の視覚に近い色の表現方法が存在しているらしく、これの詳細に関しては私はWikiを見てなんとなく分かった気になってるだけなので詳しく解説できませんがL(明るさ)とa,bの色表現（なんか多分間違ってる）
で表されるらしい。
要するに私のざっくりとした理解ではLという明るさの数値があって3D空間に色の配置が存在している（断面で正しく全ての色が出るわけではない）ということぐらいまで理解しました。計算は頭が爆発したので理解をあきらめました。（参考wiki https://ja.wikipedia.org/wiki/Lab色空間）
設計
このCIELABを使えば同明度のパレットを作るのは可能だろうということが私にとっては大事でした。結局は色はデジタルのデータなのでRGBで色を取得→CIELABに変換→パレットとして表示という流れが作れれば同明度パレットを作成するという目標が実現出来そうでした。
（まぁ作ってみて思いましたが多分こういった作業自体は簡単？なので探せばすでにどこかにありそうですね…）
ただ、クリスタにどうやって反映させればいいのかが課題でした。クリスタの色設定を外部ソフトでいじったりするのは恐らく規約違反ですし、関係ありそうなAPIのようなものも見つかりませんでした。
しかしさすがはクリスタ、20%しか機能を使えていない実は欲しい機能はあるソフト。
編集タブの中になんと「画面の表示色を取得」という機能を発見しました。つまりファイル内にある色だけじゃなく、画面に表示されている色を選択する機能がデフォルトで付いているのです！誰か教えてよこれ！
というわけで変換して出力したパレットをオーバーレイウィンドウとして表示させれば後は画面の表示色を取得機能を呼び出せば実質的に同明度パレットを使用することができるだろうという設計でコーディングを進めました。
コーディング
まぁ実際設計やどういう挙動を作ってほしいという部分を詰めてさえしまえばあとはAIがコーディングをしてそれを見て何が起こっているかを教えてもらいながら勉強するくらいしかまだできない訳で、正直まだ理解しきれてませんがRGBのピクセル取得→CIELABの数値に変換→Lを抽出→パレットの作成→RGBに変換しなおすというコードになっていると思います。
最終的にできた物
実は同明度パレットより先に左手デバイスとしてコントローラーを使いたいけど設定できるソフト作れねぇかなが最初だったので最初に実装されたのはコントローラーの設定ができる内容でした。
非常にシンプルなつくりでボタンを選んでショートカットの欄にキーボード出力したいものを打ち込めばそれが入力されるようになる仕組みです。
一応他のコントローラーとかのことを考えて検出機能を使えばボタンの位置を確認できるようにしてあります。
これで私のHORIコンが左手デバイスになることができました。これからよろしくな。
同明度パレットの方はCIELAB形式と純粋に同明度のパレットが表示されるのを選択できる形式にしました。
まぁぶっちゃけ不要な機能なんですがこれがなぜ生まれたかというとCIELABで出た同明度色を使ってみてもちょっと違くない…？って場合があるんですよね。（特に彩度の高い部分）これがなぜかまだ理解できてないのでとりあえず試しにシンプルな同明度（CIELAB形式じゃない）のパレットも出せるようにしてみました。やっぱり要らないです。
私は基本コントローラ―で考えていましたが普通にキーボードで使いたい場合もあるかもな…と思ったのでキー設定で同明度パレットを呼び出せるキーを設定できるようにし、クリスタの設定（画面の色を取得）のキー設定と合わせるための領域を作成（実は忘れてて最後に足した）
使ってみるとマウス位置にパレットが出ると邪魔な気がしたのでマウス周辺の好きな位置に呼び出せるよう呼び出し位置の設定場所を用意しました。
他にも裏で働くのが嫌だったから設定アプリ起動時のみこの機能が動くようにだとかクリスタが最前面にないとアプリが反応しないようにだとかバグ防止で同明度パレットを15秒程度で消すようにしたりだとか細かい調整はありましたがまぁおおむねいい感じになりました。
実際に使ってみて
最後に実際にどんな感じになるのかを見せて終わりにしたいと思います。配布か販売かしようと思いますがちょっと使用してるライブラリの規約とか（元々ほぼ個人用に作成してる）を確認しなきゃいけないので需要がありそうだったら販売やら配布という感じにすると思います。コメントやらフォローやらして教えてください。
これが下地になっている色を取得したときに表示されるウィンドウで
これがそれらを先ほどと同じようにカラーレイヤーで覆った状態です。
実際のカラーサークルではないのでこの範囲内で色を選ぶことになるので失敗すると周りのグレー部分を取っちゃうという使いにくさはありますがまぁ全然許容範囲かなと思います。
こう見るとやっぱりこの確認方法だとちょっと色の差がある気がしますがまぁよしとします。私のやりたいことはこれじゃないので…
それではみなさん。よければフォローとかしていってね～次回はゲーム制作の前回書かなかった設定の続きを書いていきます。ちなみに何書いたか忘れました。
（なんかしら問題があったらこの記事は削除します。これダメじゃね？ってとこあったら優しく教えてください…）
フォロワー以上限定無料
無料プラン限定特典を受け取ることができます
無料