🌸

花びら的なものが落ちてくる(仮公開)

2023/01/23に公開

雪的なものが落ちてくる」の変形版です。
unitypackageとスクリプトそのものをバンと貼ってあるだけって感じで解説はまだありません。。。

今回はただ下に落ちてくるだけでなくちょっとランダムに横に落ちてきますし、花びらが回転します
あと、一番下にいったとき上に戻る際に一瞬非表示にすることで、同期に問題があったとき「下から上にワープするところが見えた!」になりづらくします。

unitypackage

cluster公式さんの「テンプレートワールド」など、クラフトアイテムをアップロードできる状態のUnityのプロジェクトに読み込んでください。
モデル・テクスチャ・マテリアル・スクリプトなどなど、改変はお好きにどうぞ~

https://vins-jp.sakura.ne.jp/pack/wc_hana.unitypackage

基本に自信がない人は

クラフトアイテムアップロードの基本はこの記事を。
スクリプトの基本はこの記事を。

前回との違い

snowA~snowDではなく、hana0~hana3という子の名前になっていますので注意。

スクリプト全文

バグがあったらスミマセン。

const petalAr = [];
const petalNum = 4;
for (let petalNo = 0; petalNo < petalNum; petalNo++) {
	petalAr.push($.subNode("hana" + petalNo));
}

//落ちるスピードと横に動くスピード(XとZ)
const petalYSpeed = 1;
const petalXSpeedRange = 0.3;
const petalZSpeedRange = 0.3;

//たくさん出すと重いかもしれない。その場合は回転をオフに
const rotatePetals = true;
const petalRotateSpeedRange = 30;

//「地面」と「上に戻る」ときの高さ
const groundY = 0;
const skyY = 8;

//下まで行ったとき非表示にして上に戻る。その後再表示するまでのカウント
const petalWaitLength = 0.3;

const initProc = (no) => {
	if (rotatePetals) {
		$.state["petalEuler"] = petalAr[no].getRotation().createEulerAngles();
		//ほとんど回転しないものと速く回転するものを極端にしてみるため3乗に
		$.state["petalRotSpeed" + no] = Math.pow(Math.random(), 3) * petalRotateSpeedRange;
	}

	$.state["petalDefPos" + no] = petalAr[no].getPosition();
	$.state["petalSpeed" + no] = new Vector3(
		Math.random() * petalXSpeedRange * 2 - petalXSpeedRange,
		-Math.random() * petalYSpeed / 2 - petalYSpeed / 2,
		Math.random() * petalZSpeedRange * 2 - petalZSpeedRange
	);
	$.state["petalWait" + no] = 0;
};

const moveProc = (no, deltaTime) => {
	if ($.state["petalWait" + no] > 0) {
		$.state["petalWait" + no] -= deltaTime;
		if ($.state["petalWait" + no] <= 0) {
			petalAr[no].setEnabled(true);
		} else {
			return;
		}
	}
	let pos = petalAr[no].getPosition();
	if (pos.y < groundY) {
		petalAr[no].setEnabled(false);
		const defPos = $.state["petalDefPos" + no];
		petalAr[no].setPosition(new Vector3(defPos.x, skyY, defPos.z));
		$.state["petalWait" + no] = 0.3;
	} else {
		petalAr[no].setPosition(pos.add($.state["petalSpeed" + no].clone().multiplyScalar(deltaTime)));
		if (rotatePetals) {
			$.state["petalEuler"] = $.state["petalEuler"].add(new Vector3(deltaTime * $.state["petalRotSpeed" + no], deltaTime * $.state["petalRotSpeed" + no]/4, deltaTime * $.state["petalRotSpeed" + no]/2));
			petalAr[no].setRotation(new Quaternion().setFromEulerAngles($.state["petalEuler"]));
		}
	}
};

$.onUpdate(deltaTime => {
	if (!$.state.initialized) {
		for (let i = 0; i < petalNum; i++) {
			initProc(i);
		}
		$.state.initialized = true;
	}
	for (let i = 0; i < petalNum; i++) {
		moveProc(i, deltaTime);
	}
});

雪玉のとき使わなかった配列や関数を使っているので、今回はだいぶフクザツな処理にすることができました。花びらの数を4個から変えるのもpetalNumを変えるだけでOKですね。

Discussion