KLWPの背景画像から色を抽出しアイテムに反映させる方法

背景画像から色を抽出し、アイテムに反映させようと考えたことがあると思います。しかし、KLWPには音楽用カバーアートから色を抽出する関数があっても、背景画像から抽出する関数が無いため、出来ないと思い諦めてしまった人は多いのではないでしょうか。

背景画像を変更するだけで、アイテム色もそれに合わせて自動更新してくれる、実はそうした理想の仕組みにすることは出来なくはありません。
興味があれば一度試してみるといいでしょう。

背景画像から色を抽出するには？

通常、背景画像は「背景」タブにセッティングしますが、そうではなく【 グローバル変数 】タブにセッティングする仕組みをつくります。
そうすることで色を抽出する関数が使えるようになるので、それ以降は背景画像をグローバル側にセッティングすることで、アイテムに抽出色を反映させることができます。

仕組みを構築する

グローバル側に背景画像をセッティングすることから、アイテムに色を反映させるまでの手順を説明します。

1.「グローバル変数」タブに画像をセット

「グローバル変数」タブへ移動し、右上のaddからモジュールを作成します。
タイトルを仮に【 bg-img 】とし、タイプに「ビットマップ」を選択して決定。

画像を選択できるモジュールが追加されるので（画像右）、ここに背景画像をセッティングします。この後の作業がわかりやすくなるように、何か画像をセッティングしておくといいでしょう。
（ここではまだ画像は反映されません）

2.「背景」タブでの設定

タイプを「画像」にし、ビットマップにチェックを入れます。上部のpublicをタップすると、グローバルにセッティングした画像が背景画像として反映されます。

反映されない場合は、ビットマップをタップし、先ほど決めたタイトル「bg-img（仮）」を選択してください。

3. 抽出色モジュールの作成

1.と同じようにaddからモジュールを作成します。
タイトルを仮に【 bg-color 】とし、タイプを「色」にして決定。

追加されたモジュールにチェックを入れ、右上のmore_vertから【 演算子 】を選択。数式エディタを有効にします。

4. 抽出色モジュールに数式を記述

エディタに次の数式を記述します。数式はカバーアートから色を抽出する【 Bitmap Palette 】にあるものと同じで、抽出先をグローバルに変えたものです。

$bp(vibrant,gv(bg-img))$

例にある【 vibrant 】の部分で抽出したい色を変えることができます。

muted：落ち着いた色
lmuted：落ち着いた明るい色
dmuted：落ち着いた暗めの色
vibrant：あざやかな色
lvibrant：あざやかな明るい色
dvibrant：あざやかな暗めの色
dominant：主調色

5. アイテムに色を反映させる

抽出色を反映させたいアイテムの「塗り」タブで「色」にチェック。publicをタップするとグローバルで作成した抽出色が反映します。

グローバルで抽出色のモジュールを数種類作成しておくと、ここで反映させたい色を選択できるようになります。どの数式がどの抽出色なのかわかりにくいので、全コード分のモジュールを作成しておくのがいいかもしれません。

背景画像はグローバルに

この仕組みを構築してしまえば、あとはグローバル側で背景にする画像を変更するだけでアイテム色も自動で変わります。
また、別の抽出色に変えることもできるので、視覚的なバランスが良くなるように配色を整えることができます。