![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_018.png)
今回は、93さんの4色グラデーション(円)を紹介したいと思います。
導入は93さんのtwitterプロフィール欄のurlから、old_script_etc.zipをダウンロードしてください。4色グラデーションはeffect-Bに含まれています。
93さんのtwitter
4色グラデーション
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_025.png)
こちらは、白背景に4色グラデーションをかけたものです。
4色の円にぼかしをかけた感じですね。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_002.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_003.png)
[Info]にチェックを入れると、番号や色、合成モードなどの情報が表示されます。
4色グラデーションの設定
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_004.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_005.png)
4色グラデーションには、アンカーが付いています。アンカーを移動させることでそれぞれの円の配置を変えることができます。
強度は色の濃さです。
色数は最大で4色。
幅で円の大きさを変えられます。
合成モードは、加算やスクリーンなど全部で13種類あります。
パラメータ設定
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_006.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_007.png)
パラメータ設定を見ていきます。
色1から色4まで各色を変更できます。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_008.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_009.png)
強度個別%では、各色の強度を個別に設定できます。
ここでは色4の強度が50%という意味です。
数値は0~100の間で設定します。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_010.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_011.png)
幅個別%は各色の円の幅を個別に設定できます。
ここでは、色4の幅が150%になっています。
強度や幅は4色グラデーションの設定で全体を、パラメータ設定で個別の調整をするようになっています。
切り抜きに4色グラデーション
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_012.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_013.png)
切り抜き画像に4色グラデーションをかけました。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_014.png)
切り抜き画像に直接4色グラデーションをかけると、オブジェクトの座標を動かしてもグラデーションの位置が変わらないという特徴があります。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_016.png)
一方、オブジェクトの座標によってグラデーションを変えたいということもありますよね。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_015.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_017.png)
そんなときは、黒背景に4色グラデーションをかけます。
合成モードを加算やスクリーンなど、適当なモードにしてください。
そうすれば、切り抜きオブジェクトの座標によってグラデーションが変わっていくように見えます。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_018.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_019.png)
写真に4色グラデーションをかけると、いい感じの光を作り出すことができますね。
アンカーを動かす
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_001.gif)
今まで見てきたのは、アンカーの位置が固定されていました。
4色グラデーションのアンカーは、座標のリンクをすると図形などを使って動かすことができます。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_021.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_022.png)
まず、円(図形)を出しスクリプト制御をかけます。
スクリプト制御の中身は、ax=obj.x ay=obj.yと記述します。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_020.png)
4色グラデーションのパラメータ設定の位置を見てみます。
{色1のx座標、y座標、色2のx座標、y座標・・・}となっています。
動かしたい色の座標にax,ayを代入してあげることで、円(図形)とアンカーの座標がリンクして、円(図形)を動かせばアンカーも動くようになります。
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_023.png)
![](https://seguimiii.com/wp-content/uploads/2019/08/quattrograd201908_024.png)
4色全部動かす場合の参考。
ただ、全部動かすなら最初から円にぼかしをかけて、それぞれ動かした方がわかりやすいかなとも思います。
いかがだったでしょうか。
4色グラデーションは光の演出をするときに活躍します。
ちょっと難しいですが、スクリプト制御で座標をリンクして動かせるようになるとlight leaksのような使い方もできると思います。
機会があれば、是非試してみてください。
93さんのtwitter