CocosCreatorでスワイプした位置にテクスチャを表示する方法

定数{
	ccクラス、
	財産
} = cc._デコレータ;


@ccクラス

デフォルトクラス Follow_spot をエクスポートし、cc.Component を拡張します {

	@property(cc.Node)

	bg: cc.Node = null;

	マテリアル: cc.Material = null;

	中心: 数値[] = [0.5, 0.5];

	testArr: 数値[] = [];


	オンロード() {

		this.material = this.bg.getComponent(cc.Sprite).getMaterial(0);

		this.material.setProperty('wh_ratio', this.bg.width / this.bg.height);

		this.material.setProperty('center', this.center);


		// js で最も重要な文はこれです。パラメーターは配列の長さ * 配列内のベクトルの次元です。this.material.setProperty('colorArr', new Float32Array(400));

		//ここで設定する場合、配列内のベクトル成分を1次元配列に展開する必要があります this.material.setProperty('colorArr', []);


		this.bg.on(cc.Node.EventType.TOUCH_MOVE、this.touchMoveEvent、this);

	}


	タッチ移動イベント(evt: cc.Event.EventTouch) {

		this.center[0] = evt.getLocation().x / this.bg.width;

		this.center[1] = 1 - evt.getLocation().y / this.bg.height;

		コンソールにログ出力します。

		this.material.setProperty('center', this.center);

		(this.testArr.length >= 400) の場合 {

			this.testArr.shift();

			this.testArr.shift();

		}

		this.testArr.push(this.center[0]);

		this.testArr.push(this.center[1]);



		// js で最も重要な文はこれです。パラメーターは配列の長さ * 配列内のベクトルの次元です。this.material.setProperty('colorArr', new Float32Array(this.testArr));

		//ここで設定する場合、配列内のベクトル成分を 1 次元配列に拡張する必要があります this.material.setProperty('colorArr', this.testArr);

	}

}



スライダーポイントライト効果


CCE効果 % {

		テクニック:

			-パス:

			-vert: 対

		フラグ: fs

		ブレンド状態:

			ターゲット:

			-ブレンド: 真

		ラスタライザー状態:

			カリングモード: なし

		プロパティ:

			テクスチャ:
				値: 白
			}

		比率:

			値: 1.78、

			エディタ：

				ツールヒント: 「アスペクト比」

			}

		}

		ぼかし:

			値: 0.35、

			エディタ：

				ツールヒント: 「絞りぼかしレベル」

			}

		}

		半径：

			値: 0.5、

			エディタ：

				ツールチップ: 「開口半径」

			}

		}

		中心：

			値: [0.5, 0.5],

			エディタ：

				ツールヒント: 「絞り開始点」

			}

		}

		カラー配列: {
			値: [0.5, 0.5, 0.5, 0.5]
		}

	} %



	CCプログラム vs %

		高精度の高浮動小数点数。


		#include <cc-global>

		#include <cc-local>


		vec3 の a_position;

		vec4 では a_color;

		vec4 v_color を出力します。


		#USE_TEXTUREの場合

		vec2 では a_uv0 です。

		出力vec2 v_uv0;

		#終了


		void main() {

			vec4 pos = vec4(a_position, 1);


			#CC_USE_MODELの場合

			pos = cc_matViewProj * cc_matWorld * pos;

			＃それ以外

			pos = cc_matViewProj * pos;

			#終了


			#USE_TEXTUREの場合

			uv0 は uv1 より小さい。

			#終了


			色は、v_color と a_color のどちらにも適用されます。


			gl_Position = pos;

		}

	} %


	CCプログラム fs % {


		高精度の高浮動小数点数。


		#include <アルファテスト>


		vec4 v_color の場合;


		#USE_TEXTUREの場合

		vec2 v_uv0 内;

		均一なサンプラー2Dテクスチャ。

		#終了


		均一なARGS

			フロート半径;

			フロートぼかし;

			vec2 中心;

			浮動小数点比率;

		};


		//エフェクト定義uniform Metaball {

			vec4カラーArr[100];

		};


		void main() {

			vec4 o = vec4(1, 1, 1, 0);

			o *= テクスチャ(テクスチャ、v_uv0);

			o * = v_color;

			float 円 = 半径 * 半径;

			(int i = 0; i < 100; i++) の場合 {

				浮動小数点数型カラーX = colorArr[i].x;

				浮動小数点数型カラーY = colorArr[i].y;

				フロートrx = colorX * wh_ratio;

				フロートry = colorY;

				浮動小数点数 = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);


				oa = スムーズステップ(円、円 - ぼかし、dis) + oa;

			}


			gl_FragColor = o;

		}

	}%