danoniplus 39.0.0 → 39.2.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2025/02/01
+ * Revised : 2025/02/08
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 39.0.0`;
-const g_revisedDate = `2025/02/01`;
+const g_version = `Ver 39.2.0`;
+const g_revisedDate = `2025/02/08`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -1537,6 +1537,7 @@ const makeBgCanvas = (_ctx, { w = g_sWidth, h = g_sHeight } = {}) => {
  */
 const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 	resetKeyControl();
+	resetTransform();
 
 	// ボタン、オブジェクトをクリア (divRoot配下のもの)
 	deleteChildspriteAll(`divRoot`);
@@ -3916,6 +3917,7 @@ const keysConvert = (_dosObj, { keyExtraList = _dosObj.keyExtraList?.split(`,`)
 
 	const existParam = (_data, _paramName) => !hasVal(_data) && g_keyObj[_paramName] !== undefined;
 	const toString = _str => _str;
+	const toInt = _num => isNaN(parseInt(_num)) ? _num : parseInt(_num);
 	const toFloat = _num => isNaN(parseFloat(_num)) ? _num : parseFloat(_num);
 	const toKeyCtrlArray = _str =>
 		makeBaseArray(_str.split(`/`).map(n => getKeyCtrlVal(n)), g_keyObj.minKeyCtrlNum, 0);
@@ -4270,6 +4272,19 @@ const keysConvert = (_dosObj, { keyExtraList = _dosObj.keyExtraList?.split(`,`)
 		// |assist(newKey)=Onigiri::0,0,0,0,0,1/AA::0,0,0,1,1,1$...|
 		newKeyPairParam(newKey, `assist`, `assistPos`);
 
+		// レーンごとの割当レイヤーグループ (layerGroupX_Y)
+		newKeyMultiParam(newKey, `layerGroup`, toInt);
+
+		// レイヤーごとのアニメーション情報 (layerTransX_Y)
+		if (hasVal(_dosObj[`layerTrans${newKey}`])) {
+			_dosObj[`layerTrans${newKey}`] = _dosObj[`layerTrans${newKey}`]?.replaceAll(`,`, `___`);
+			newKeyMultiParam(newKey, `layerTrans`, toSplitArrayStr, {
+				loopFunc: (k, keyheader) => {
+					g_keyObj[`${keyheader}_${k + dfPtnNum}`][0] = g_keyObj[`${keyheader}_${k + dfPtnNum}`]?.[0]?.map(val => val.replaceAll(`___`, `,`));
+				},
+			});
+		}
+
 		// keyRetry, keyTitleBackのキー名をキーコードに変換
 		const keyTypePatterns = Object.keys(g_keyObj).filter(val => val.startsWith(`keyRetry${newKey}`) || val.startsWith(`keyTitleBack${newKey}`));
 		keyTypePatterns.forEach(name => g_keyObj[name] = getKeyCtrlVal(g_keyObj[name]));
@@ -6790,7 +6805,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		[tkObj.keyCtrlPtn, tkObj.keyNum, tkObj.posMax, tkObj.divideCnt];
 
 	g_keyCopyLists.simpleDef.forEach(header => updateKeyInfo(header, keyCtrlPtn));
-	keyconSprite.style.transform = `scale(${g_keyObj.scale})`;
+	addTransform(`keyconSprite`, `root`, `scale(${g_keyObj.scale})`)
 	keyconSprite.style.height = `${parseFloat(keyconSprite.style.height) / ((1 + g_keyObj.scale) / 2)}px`;
 	const kWidth = parseInt(keyconSprite.style.width);
 	changeSetColor();
@@ -8497,15 +8512,10 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 				const frame = calcFrame(tmpScrollchData[0]);
 				const arrowNum = parseFloat(tmpScrollchData[1]);
 				const scrollDir = parseFloat(tmpScrollchData[2] ?? `1`);
+				const layerGroup = parseFloat(tmpScrollchData[3] ?? `-1`);
 
-				scrollchData.push([frame, arrowNum, frame, scrollDir]);
+				scrollchData.push([frame, arrowNum, frame, scrollDir, layerGroup]);
 			});
-
-			// 個別のスクロール変化が存在する場合、StepAreaを自動リセット
-			if (scrollchData.length > 0) {
-				g_stateObj.stepArea = `Default`;
-				g_settings.stepAreaNum = 0;
-			}
 			return scrollchData.sort((_a, _b) => _a[0] - _b[0]).flat();
 		}
 		return [];
@@ -9289,7 +9299,7 @@ const pushArrows = (_dataObj, _speedOnFrame, _motionOnFrame, _firstArrivalFrame)
 	g_typeLists.arrow.forEach(header =>
 		calcDataTiming(`cssMotion`, header, pushCssMotions, { _calcFrameFlg: true }));
 
-	calcDataTiming(`scrollch`, ``, pushScrollchs, { _calcFrameFlg: true });
+	calcDataTiming(`scrollch`, ``, pushScrollchs, { _term: 5, _calcFrameFlg: true });
 
 	g_fadeinStockList.forEach(type =>
 		_dataObj[`${type}Data`] = calcAnimationData(type, _dataObj[`${type}Data`]));
@@ -9555,29 +9565,32 @@ const pushCssMotions = (_header, _frame, _val, _styleName, _styleNameRev) => {
  * @param {number} _frameStep 
  * @param {number} _scrollDir 
  */
-const pushScrollchs = (_header, _frameArrow, _val, _frameStep, _scrollDir) => {
+const pushScrollchs = (_header, _frameArrow, _val, _frameStep, _scrollDir, _layerGroup) => {
 	const tkObj = getKeyInfo();
+	g_stateObj.layerNum = Math.max(g_stateObj.layerNum, (_layerGroup + 1) * 2);
 
 	const frameArrow = Math.max(_frameArrow, g_scoreObj.frameNum);
 	const frameStep = Math.max(_frameStep, g_scoreObj.frameNum);
 	const pushData = (_pattern, _frame, _val) =>
 		g_workObj[`mkScrollch${_pattern}`][_frame]?.push(_val) || (g_workObj[`mkScrollch${_pattern}`][_frame] = [_val]);
+	const pushScrollData = _j => {
+		pushData(`Arrow`, frameArrow, _j);
+		pushData(`ArrowDir`, frameArrow, _scrollDir);
+		pushData(`ArrowLayer`, frameArrow, _layerGroup);
+		pushData(`Step`, frameStep, _j);
+		pushData(`StepDir`, frameStep, _scrollDir);
+		pushData(`StepLayer`, frameStep, _layerGroup);
+	};
 
 	if (_val < 20 || _val >= 1000) {
 		const realVal = g_workObj.replaceNums[_val % 1000];
-		pushData(`Arrow`, frameArrow, realVal);
-		pushData(`ArrowDir`, frameArrow, _scrollDir);
-		pushData(`Step`, frameStep, realVal);
-		pushData(`StepDir`, frameStep, _scrollDir);
+		pushScrollData(realVal);
 
 	} else {
 		const colorNum = _val - 20;
 		for (let j = 0; j < tkObj.keyNum; j++) {
 			if (g_keyObj[`color${tkObj.keyCtrlPtn}`][j] === colorNum) {
-				pushData(`Arrow`, frameArrow, j);
-				pushData(`ArrowDir`, frameArrow, _scrollDir);
-				pushData(`Step`, frameStep, j);
-				pushData(`StepDir`, frameStep, _scrollDir);
+				pushScrollData(j);
 			}
 		}
 	}
@@ -9657,7 +9670,8 @@ const getArrowSettings = () => {
 		const stdPos = posj - ((posj > divideCnt ? posMax : 0) + divideCnt) / 2;
 
 		g_workObj.stepX[j] = g_keyObj.blank * stdPos + (g_headerObj.playingWidth - C_ARW_WIDTH) / 2;
-		g_workObj.dividePos[j] = ((posj <= divideCnt ? 0 : 1) + (scrollDirOptions[j] === 1 ? 0 : 1) + (g_stateObj.reverse === C_FLG_OFF ? 0 : 1)) % 2;
+		const baseLayer = g_keyObj[`layerGroup${keyCtrlPtn}`]?.[j] || 0;
+		g_workObj.dividePos[j] = baseLayer * 2 + ((posj <= divideCnt ? 0 : 1) + (scrollDirOptions[j] === 1 ? 0 : 1) + (g_stateObj.reverse === C_FLG_OFF ? 0 : 1)) % 2;
 		if (g_stateObj.stepArea === `X-Flower`) {
 			g_workObj.dividePos[j] = (g_workObj.stepX[j] < (g_headerObj.playingWidth - C_ARW_WIDTH) / 2 ? 0 : 1) * 2 + g_workObj.dividePos[j] % 2;
 		}
@@ -9679,7 +9693,8 @@ const getArrowSettings = () => {
 		});
 	}
 	g_workObj.scrollDirDefault = g_workObj.scrollDir.concat();
-	g_stateObj.layerNum = Math.ceil((Math.max(...g_workObj.dividePos) + 1) / 2) * 2;
+	g_workObj.dividePosDefault = g_workObj.dividePos.concat();
+	g_stateObj.layerNum = Math.max(g_stateObj.layerNum, Math.ceil((Math.max(...g_workObj.dividePos) + 1) / 2) * 2);
 
 	Object.keys(g_resultObj).forEach(judgeCnt => g_resultObj[judgeCnt] = 0);
 	g_resultObj.spState = ``;
@@ -9799,6 +9814,9 @@ const getArrowSettings = () => {
 	g_workObj.drunkXFlg = false;
 	g_workObj.drunkYFlg = false;
 
+	// AppearanceFilterの可視範囲設定
+	g_workObj.aprFilterCnt = 0;
+
 	if (g_stateObj.dataSaveFlg) {
 		// ローカルストレージへAdjustment, HitPosition, Volume設定を保存
 		g_storeSettings.forEach(setting => g_localStorage[setting] = g_stateObj[setting]);
@@ -9920,8 +9938,8 @@ const mainInit = () => {
 	// ステップゾーン、矢印のメインスプライトを作成
 	const mainSprite = createEmptySprite(divRoot, `mainSprite`, {
 		x: g_workObj.playingX, y: g_posObj.stepY - C_STEP_Y + g_headerObj.playingY, w: g_headerObj.playingWidth, h: g_headerObj.playingHeight,
-		transform: `scale(${g_keyObj.scale})`,
 	});
+	addTransform(`mainSprite`, `root`, `scale(${g_keyObj.scale})`);
 
 	// 曲情報・判定カウント用スプライトを作成（メインスプライトより上位）
 	const infoSprite = createEmptySprite(divRoot, `infoSprite`, { x: g_workObj.playingX, y: g_headerObj.playingY, w: g_headerObj.playingWidth, h: g_headerObj.playingHeight });
@@ -9955,82 +9973,54 @@ const mainInit = () => {
 	let boostCnts = 0;
 	let keychCnts = 0;
 
-	const flatMode = g_stateObj.d_stepzone === `FlatBar` ||
+	g_workObj.flatMode = g_stateObj.d_stepzone === `FlatBar` ||
 		g_stateObj.scroll.endsWith(`Flat`) ||
 		g_keyObj[`flatMode${keyCtrlPtn}`] ||
 		(g_stateObj.stepArea === `Halfway` &&
 			g_keyObj[`div${keyCtrlPtn}`] < g_keyObj[`${g_keyObj.defaultProp}${keyCtrlPtn}`].length);
-	const stepZoneDisp = (g_stateObj.d_stepzone === C_FLG_OFF || flatMode) ? C_DIS_NONE : C_DIS_INHERIT;
-
-	// Hidden+, Sudden+用のライン、パーセント表示
-	const filterCss = g_stateObj.filterLock === C_FLG_OFF ? g_cssObj.life_Failed : g_cssObj.life_Cleared;
-	[`filterBar0`, `filterBar1`, `borderBar0`, `borderBar1`].forEach(obj =>
-		mainSprite.appendChild(createColorObject2(obj, g_lblPosObj.filterBar, filterCss)));
-	borderBar0.style.top = wUnit(g_posObj.stepDiffY + g_stateObj.hitPosition);
-	borderBar1.style.top = wUnit(g_posObj.stepDiffY + g_posObj.arrowHeight - g_stateObj.hitPosition);
-
-	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
-		mainSprite.appendChild(createDivCss2Label(`filterView`, ``, g_lblPosObj.filterView));
-		if (g_stateObj.d_filterline === C_FLG_ON) {
-			$id(`filterView`).opacity = g_stateObj.opacity / 100;
-			$id(`filterBar0`).opacity = g_stateObj.opacity / 100;
-			$id(`filterBar1`).opacity = g_stateObj.opacity / 100;
-		}
-	}
+	g_workObj.stepZoneDisp = (g_stateObj.d_stepzone === C_FLG_OFF || g_workObj.flatMode) ? C_DIS_NONE : C_DIS_INHERIT;
 
 	// mainSprite配下に層別のスプライトを作成し、ステップゾーン・矢印本体・フリーズアローヒット部分に分ける
 	const mainSpriteN = [], stepSprite = [], arrowSprite = [], frzHitSprite = [];
 	const mainCommonPos = { w: g_headerObj.playingWidth, h: g_posObj.arrowHeight };
+
+	// Hidden+, Sudden+用のライン、パーセント表示
+	const filterCss = g_stateObj.filterLock === C_FLG_OFF ? g_cssObj.life_Failed : g_cssObj.life_Cleared;
+	const doubleFilterFlg = ![`Default`, `Halfway`].includes(g_stateObj.stepArea);
+
 	for (let j = 0; j < g_stateObj.layerNum; j++) {
 		const mainSpriteJ = createEmptySprite(mainSprite, `mainSprite${j}`, mainCommonPos);
 		mainSpriteN.push(mainSpriteJ);
+		mainSpriteJ.appendChild(createColorObject2(`filterBar${j}`, g_lblPosObj.filterBar, filterCss));
+		if (doubleFilterFlg) {
+			mainSpriteJ.appendChild(createColorObject2(`filterBar${j % 2 == 0 ? j + 1 : j - 1}_HS`, g_lblPosObj.filterBar, filterCss));
+		}
+		addTransform(`mainSprite${j}`, `mainSprite${j}`,
+			g_keyObj[`layerTrans${keyCtrlPtn}`]?.[0]?.[Math.floor(j / 2) + (j + Number(g_stateObj.reverse === C_FLG_ON)) % 2]);
+
 		stepSprite.push(createEmptySprite(mainSpriteJ, `stepSprite${j}`, mainCommonPos));
 		arrowSprite.push(createEmptySprite(mainSpriteJ, `arrowSprite${j}`, Object.assign({ y: g_workObj.hitPosition * (j % 2 === 0 ? 1 : -1) }, mainCommonPos)));
 		frzHitSprite.push(createEmptySprite(mainSpriteJ, `frzHitSprite${j}`, mainCommonPos));
 	}
 
-	for (let j = 0; j < keyNum; j++) {
-		const colorPos = g_keyObj[`color${keyCtrlPtn}`][j];
-
-		// ステップゾーンルート
-		const stepRoot = createEmptySprite(stepSprite[g_workObj.dividePos[j]], `stepRoot${j}`, {
-			x: g_workObj.stepX[j], y: C_STEP_Y + g_posObj.reverseStepY * (g_workObj.dividePos[j] % 2),
-			w: C_ARW_WIDTH, h: C_ARW_WIDTH,
-		});
-
-		// 矢印の内側を塗りつぶすか否か
-		if (g_headerObj.setShadowColor[colorPos] !== ``) {
-			stepRoot.appendChild(
-				createColorObject2(`stepShadow${j}`, {
-					rotate: g_workObj.stepRtn[j], styleName: `ShadowStep`,
-					opacity: 0.7, display: stepZoneDisp,
-				}, g_cssObj.main_objStepShadow)
-			);
+	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
+		mainSprite.appendChild(createDivCss2Label(`filterView`, ``, g_lblPosObj.filterView));
+		if (g_stateObj.d_filterline === C_FLG_ON) {
+			$id(`filterView`).opacity = g_stateObj.opacity / 100;
+			for (let j = 0; j < g_stateObj.layerNum; j++) {
+				$id(`filterBar${j}`).opacity = g_stateObj.opacity / 100;
+				if (doubleFilterFlg) {
+					$id(`filterBar${j}_HS`).opacity = g_stateObj.opacity / 100;
+				}
+			}
 		}
+	}
 
-		appearStepZone(j, C_DIS_NONE);
-
-		// ステップゾーン
-		multiAppend(stepRoot,
-
-			// 本体
-			createColorObject2(`step${j}`, {
-				rotate: g_workObj.stepRtn[j], styleName: `Step`, display: stepZoneDisp,
-			}, g_cssObj.main_stepDefault),
-
-			// 空押し
-			createColorObject2(`stepDiv${j}`, {
-				rotate: g_workObj.stepRtn[j], styleName: `Step`, display: C_DIS_NONE,
-			}, g_cssObj.main_stepKeyDown),
-
-			// ヒット時モーション
-			createColorObject2(`stepHit${j}`, Object.assign(g_lblPosObj.stepHit, {
-				rotate: g_workObj.stepHitRtn[j], styleName: `StepHit`, opacity: 0,
-			}), g_cssObj.main_stepDefault),
-
-		);
+	// ステップゾーン、フリーズアローヒット部分の生成
+	for (let j = 0; j < keyNum; j++) {
+		makeStepZone(j, keyCtrlPtn);
 	}
-	if (flatMode && g_stateObj.d_stepzone !== C_FLG_OFF) {
+	if (g_workObj.flatMode && g_stateObj.d_stepzone !== C_FLG_OFF) {
 
 		// スクロール名に`R-`が含まれていればリバースと見做す
 		const reverseFlg = g_stateObj.reverse === C_FLG_ON || g_stateObj.scroll.startsWith(`R-`);
@@ -10054,37 +10044,12 @@ const mainInit = () => {
 		}
 	}
 
-	for (let j = 0; j < keyNum; j++) {
-
-		// フリーズアローヒット部分
-		const frzHit = createEmptySprite(frzHitSprite[g_workObj.dividePos[j]], `frzHit${j}`, {
-			x: g_workObj.stepX[j], y: C_STEP_Y + g_posObj.reverseStepY * (g_workObj.dividePos[j] % 2),
-			w: C_ARW_WIDTH, h: C_ARW_WIDTH, opacity: 0,
-		});
-		if (isNaN(parseFloat(g_workObj.arrowRtn[j]))) {
-			multiAppend(frzHit,
-				createColorObject2(`frzHitShadow${j}`, {
-					rotate: g_workObj.arrowRtn[j], styleName: `Shadow`,
-				}, g_cssObj.main_objShadow),
-				createColorObject2(`frzHitTop${j}`, {
-					background: g_workObj.frzHitColors[j], rotate: g_workObj.arrowRtn[j],
-				})
-			);
-		} else {
-			frzHit.appendChild(
-				createColorObject2(`frzHitTop${j}`, Object.assign(g_lblPosObj.frzHitTop, {
-					rotate: g_workObj.arrowRtn[j], styleName: `Shadow`,
-				}), g_cssObj.main_frzHitTop)
-			);
-		}
-	}
-
 	// StepArea処理
 	g_stepAreaFunc[g_stateObj.stepArea]();
 
 	// Appearanceのオプション適用時は一部描画を隠す
 	changeAppearanceFilter(g_appearanceRanges.includes(g_stateObj.appearance) ?
-		g_hidSudObj.filterPos : g_hidSudObj.filterPosDefault[g_stateObj.appearance]);
+		g_hidSudObj.filterPos : g_hidSudObj.filterPosDefault[g_stateObj.appearance], true);
 
 	// 現在の矢印・フリーズアローの速度、個別加算速度の初期化 (速度変化時に直す)
 	g_workObj.currentSpeed = 2;
@@ -10345,9 +10310,7 @@ const mainInit = () => {
 	g_customJsObj.main.forEach(func => func());
 
 	// mainSpriteのtransform追加処理
-	g_workObj.transform = mainSprite.style.transform || ``;
-	g_workObj.transform += g_playWindowFunc[g_stateObj.playWindow]();
-	mainSprite.style.transform = g_workObj.transform;
+	addTransform(`mainSprite`, `playWindow`, g_playWindowFunc[g_stateObj.playWindow]());
 
 	// EffectのArrowEffect追加処理
 	g_effectFunc[g_stateObj.effect]();
@@ -11291,11 +11254,84 @@ const mainInit = () => {
 	g_timeoutEvtId = setTimeout(flowTimeline, 1000 / g_fps);
 };
 
+/**
+ * ステップゾーン、フリーズアローヒット部分の生成
+ * @param {number} _j 
+ * @param {string} _keyCtrlPtn 
+ */
+const makeStepZone = (_j, _keyCtrlPtn) => {
+
+	const colorPos = g_keyObj[`color${_keyCtrlPtn}`][_j];
+	const stepSpriteJ = document.getElementById(`stepSprite${g_workObj.dividePos[_j]}`);
+	const frzHitSpriteJ = document.getElementById(`frzHitSprite${g_workObj.dividePos[_j]}`);
+
+	// ステップゾーンルート
+	const stepRoot = createEmptySprite(stepSpriteJ, `stepRoot${_j}`, {
+		x: g_workObj.stepX[_j], y: C_STEP_Y + g_posObj.reverseStepY * (g_workObj.dividePos[_j] % 2),
+		w: C_ARW_WIDTH, h: C_ARW_WIDTH,
+	});
+
+	// 矢印の内側を塗りつぶすか否か
+	if (g_headerObj.setShadowColor[colorPos] !== ``) {
+		stepRoot.appendChild(
+			createColorObject2(`stepShadow${_j}`, {
+				rotate: g_workObj.stepRtn[_j], styleName: `ShadowStep`,
+				opacity: 0.7, display: g_workObj.stepZoneDisp,
+			}, g_cssObj.main_objStepShadow)
+		);
+	}
+
+	appearStepZone(_j, C_DIS_NONE);
+
+	// ステップゾーン
+	multiAppend(stepRoot,
+
+		// 本体
+		createColorObject2(`step${_j}`, {
+			rotate: g_workObj.stepRtn[_j], styleName: `Step`, display: g_workObj.stepZoneDisp,
+		}, g_cssObj.main_stepDefault),
+
+		// 空押し
+		createColorObject2(`stepDiv${_j}`, {
+			rotate: g_workObj.stepRtn[_j], styleName: `Step`, display: C_DIS_NONE,
+		}, g_cssObj.main_stepKeyDown),
+
+		// ヒット時モーション
+		createColorObject2(`stepHit${_j}`, Object.assign(g_lblPosObj.stepHit, {
+			rotate: g_workObj.stepHitRtn[_j], styleName: `StepHit`, opacity: 0,
+		}), g_cssObj.main_stepDefault),
+
+	);
+
+	// フリーズアローヒット部分
+	const frzHit = createEmptySprite(frzHitSpriteJ, `frzHit${_j}`, {
+		x: g_workObj.stepX[_j], y: C_STEP_Y + g_posObj.reverseStepY * (g_workObj.dividePos[_j] % 2),
+		w: C_ARW_WIDTH, h: C_ARW_WIDTH, opacity: 0,
+	});
+	if (isNaN(parseFloat(g_workObj.arrowRtn[_j]))) {
+		multiAppend(frzHit,
+			createColorObject2(`frzHitShadow${_j}`, {
+				rotate: g_workObj.arrowRtn[_j], styleName: `Shadow`,
+			}, g_cssObj.main_objShadow),
+			createColorObject2(`frzHitTop${_j}`, {
+				background: g_workObj.frzHitColors[_j], rotate: g_workObj.arrowRtn[_j],
+			})
+		);
+	} else {
+		frzHit.appendChild(
+			createColorObject2(`frzHitTop${_j}`, Object.assign(g_lblPosObj.frzHitTop, {
+				rotate: g_workObj.arrowRtn[_j], styleName: `Shadow`,
+			}), g_cssObj.main_frzHitTop)
+		);
+	}
+};
+
 /**
  * アルファマスクの再描画 (Appearance: Hidden+, Sudden+ 用)
  * @param {number} _num 
+ * @param {boolean} _shiftFlg シフトキーを押したかどうかのフラグ
  */
-const changeAppearanceFilter = (_num = 10) => {
+const changeAppearanceFilter = (_num = 10, _shiftFlg = keyIsShift()) => {
 	const MAX_FILTER_POS = 100;
 	const topNum = g_hidSudObj[g_stateObj.appearance];
 	const bottomNum = (g_hidSudObj[g_stateObj.appearance] + 1) % 2;
@@ -11306,16 +11342,39 @@ const changeAppearanceFilter = (_num = 10) => {
 	const numPlus = (g_stateObj.appearance === `Hid&Sud+` ? _num : 0);
 	const topShape = `inset(${_num}% 0% ${numPlus}% 0%)`;
 	const bottomShape = `inset(${numPlus}% 0% ${_num}% 0%)`;
+	const appearPers = [_num, MAX_FILTER_POS - _num];
 
 	for (let j = 0; j < g_stateObj.layerNum; j += 2) {
 		$id(`arrowSprite${topNum + j}`).clipPath = topShape;
 		$id(`arrowSprite${bottomNum + j}`).clipPath = bottomShape;
+
+		$id(`filterBar${topNum + j}`).top = wUnit(parseFloat($id(`arrowSprite${j}`).top) + g_posObj.arrowHeight * appearPers[topNum] / MAX_FILTER_POS);
+		$id(`filterBar${bottomNum + j}`).top = wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + g_posObj.arrowHeight * appearPers[bottomNum] / MAX_FILTER_POS);
+
+		if (![`Default`, `Halfway`].includes(g_stateObj.stepArea)) {
+			$id(`filterBar${bottomNum + j}_HS`).top = wUnit(parseFloat($id(`arrowSprite${j}`).top) + g_posObj.arrowHeight * appearPers[bottomNum] / MAX_FILTER_POS);
+			$id(`filterBar${topNum + j}_HS`).top = wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + g_posObj.arrowHeight * appearPers[topNum] / MAX_FILTER_POS);
+		}
+
+		// 階層が多い場合はShift+pgUp/pgDownで表示する階層グループを切り替え
+		if (_shiftFlg && g_stateObj.d_filterline === C_FLG_ON) {
+			[`${topNum + j}`, `${bottomNum + j}`].forEach(type => {
+				$id(`filterBar${type}`).display = (j === g_workObj.aprFilterCnt ? C_DIS_INHERIT : C_DIS_NONE);
+
+				if (![`Default`, `Halfway`].includes(g_stateObj.stepArea)) {
+					$id(`filterBar${type}_HS`).display = (j === g_workObj.aprFilterCnt ? C_DIS_INHERIT : C_DIS_NONE);
+				}
+			});
+		}
 	}
-	$id(`filterBar0`).top = wUnit(parseFloat($id(`arrowSprite${topNum}`).top) + g_posObj.arrowHeight * _num / MAX_FILTER_POS);
-	$id(`filterBar1`).top = wUnit(parseFloat($id(`arrowSprite${bottomNum}`).top) + g_posObj.arrowHeight * (MAX_FILTER_POS - _num) / MAX_FILTER_POS);
+
+	if (_shiftFlg) {
+		g_workObj.aprFilterCnt = nextPos(g_workObj.aprFilterCnt, 2, g_stateObj.layerNum);
+	}
+
 	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
 		$id(`filterView`).top =
-			$id(`filterBar${g_hidSudObj.std[g_stateObj.appearance][g_stateObj.reverse]}`).top;
+			$id(`filterBar${(g_hidSudObj.std[g_stateObj.appearance][g_stateObj.reverse]) % 2}`).top;
 		filterView.textContent = `${_num}%`;
 
 		if (g_stateObj.appearance !== `Hid&Sud+` && g_workObj.dividePos.every(v => v === g_workObj.dividePos[0])) {
@@ -11376,17 +11435,17 @@ const appearKeyTypes = (_j, _targets, _alphas = fillArray(_targets.length, 1)) =
  */
 const changeReturn = (_rad, _axis) => {
 	g_workObj.frzReturnFlg = true;
-	let _transform = g_workObj.transform;
-	_transform += ` rotate${_axis[0]}(${_rad}deg)`;
+	let _transform = `rotate${_axis[0]}(${_rad}deg)`;
 	if (_axis[1] !== undefined) {
 		_transform += ` rotate${_axis[1]}(${_rad}deg)`;
 	}
 	if (document.getElementById(`mainSprite`) !== null) {
-		mainSprite.style.transform = _transform;
+		addTransform(`mainSprite`, `frzReturn`, _transform);
 
 		if (_rad < 360 && g_workObj.frzReturnFlg) {
 			setTimeout(() => changeReturn(_rad + 4, _axis), 20);
 		} else {
+			addTransform(`mainSprite`, `frzReturn`, ``);
 			g_workObj.frzReturnFlg = false;
 		}
 	}
@@ -11453,8 +11512,9 @@ const changeCssMotions = (_header, _name, _frameNum) => {
 const changeScrollArrowDirs = (_frameNum) =>
 	g_workObj.mkScrollchArrow[_frameNum]?.forEach((targetj, j) => {
 		g_workObj.scrollDir[targetj] = g_workObj.scrollDirDefault[targetj] * g_workObj.mkScrollchArrowDir[_frameNum][j];
-		const baseLayer = Math.floor(g_workObj.dividePos[targetj] / 2) * 2;
-		g_workObj.dividePos[targetj] = baseLayer + (g_workObj.scrollDir[targetj] === 1 ? 0 : 1);
+		const baseLayer = g_workObj.mkScrollchArrowLayer[_frameNum][j] === -1 ?
+			Math.floor(g_workObj.dividePosDefault[targetj] / 2) : g_workObj.mkScrollchArrowLayer[_frameNum][j];
+		g_workObj.dividePos[targetj] = baseLayer * 2 + (g_workObj.scrollDir[targetj] === 1 ? 0 : 1);
 	});
 
 /**
@@ -11464,9 +11524,21 @@ const changeScrollArrowDirs = (_frameNum) =>
 const changeStepY = (_frameNum) =>
 	g_workObj.mkScrollchStep[_frameNum]?.forEach((targetj, j) => {
 		const dividePos = (g_workObj.scrollDirDefault[targetj] * g_workObj.mkScrollchStepDir[_frameNum][j] === 1 ? 0 : 1);
-		const baseY = C_STEP_Y + g_posObj.reverseStepY * dividePos;
-		$id(`stepRoot${targetj}`).top = wUnit(baseY);
-		$id(`frzHit${targetj}`).top = wUnit(baseY);
+
+		// 移動元のステップゾーンの不透明度、表示・非表示を退避
+		const _stepOpacity = $id(`stepRoot${targetj}`).opacity;
+		const _stepDisplay = $id(`stepRoot${targetj}`).display;
+
+		// 移動元のステップゾーンを消去
+		document.getElementById(`stepRoot${targetj}`).remove();
+		document.getElementById(`frzHit${targetj}`).remove();
+
+		// レイヤーを変更しステップゾーンを再生成。移動元の不透明度、表示・非表示を反映
+		const baseLayer = g_workObj.mkScrollchStepLayer[_frameNum][j] === -1 ?
+			Math.floor(g_workObj.dividePosDefault[targetj] / 2) : g_workObj.mkScrollchStepLayer[_frameNum][j];
+		g_workObj.dividePos[targetj] = baseLayer * 2 + dividePos;
+		makeStepZone(targetj, `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`);
+		appearStepZone(targetj, _stepDisplay, _stepOpacity);
 	});
 
 /**

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2025/02/01 (v39.0.0)
+ * Revised : 2025/02/08 (v39.2.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -650,7 +650,8 @@ const g_typeLists = {
     frzColor: [`Normal`, `NormalBar`, `Hit`, `HitBar`, `NormalShadow`, `HitShadow`],
     dataList: [
         `Arrow`, `FrzArrow`, `FrzLength`,
-        `Color`, `ColorCd`, `ColorShadow`, `ColorShadowCd`, `ScrollchArrow`, `ScrollchStep`, `ScrollchArrowDir`, `ScrollchStepDir`,
+        `Color`, `ColorCd`, `ColorShadow`, `ColorShadowCd`,
+        `ScrollchArrow`, `ScrollchStep`, `ScrollchArrowDir`, `ScrollchStepDir`, `ScrollchArrowLayer`, `ScrollchStepLayer`,
         `FColorNormal`, `FColorNormalCd`, `FColorNormalBar`, `FColorNormalBarCd`,
         `FColorNormalShadow`, `FColorNormalShadowCd`,
         `FColorHit`, `FColorHitCd`, `FColorHitBar`, `FColorHitBarCd`,
@@ -1108,6 +1109,54 @@ const g_moveSettingWindow = (_changePageFlg = true, _direction = 1) => {
     g_settings.settingWindows[g_settings.settingWindowNum]();
 };
 
+/**
+ * transform管理
+ */
+const g_transforms = {};
+
+/**
+ * idごとのtransformを追加・変更
+ * - _transformIdごとに transform情報を管理
+ * @param {string} _id 
+ * @param {string} _transformId
+ * @param {string} _transform 
+ */
+const addTransform = (_id, _transformId, _transform) => {
+    if (g_transforms[_id] === undefined) {
+        g_transforms[_id] = {};
+    }
+    g_transforms[_id][_transformId] = _transform;
+    const _transforms = [];
+    Object.keys(g_transforms[_id]).forEach(transformId => _transforms.push(g_transforms[_id][transformId]));
+    $id(_id).transform = _transforms.join(` `);
+};
+
+/**
+ * idごとのtransformを追加（一時）
+ * @param {string} _id 
+ * @param {string} _transform 
+ */
+const addTempTransform = (_id, _transform) => {
+    $id(_id).transform = ($id(_id).transform || ``) + ` ` + _transform;
+};
+
+/**
+ * transformの初期化
+ */
+const resetTransform = () => {
+    Object.keys(g_transforms).forEach(_id => g_transforms[_id] = {});
+};
+
+/**
+ * id, transformIdに合致するtransform情報の取得
+ * @param {string} _id 
+ * @param {string} _transformId 
+ * @returns 
+ */
+const getTransform = (_id, _transformId) => {
+    return g_transforms[_id]?.[_transformId] || ``;
+};
+
 /**
  * シャッフル適用関数
  * @param {number} keyNum
@@ -1154,8 +1203,8 @@ const g_motionFunc = {
 /**
  * PlayWindow適用関数
  */
-const g_changeStairs = (_rad) => ` rotate(${_rad}deg)`;
-const g_changeSkew = (_rad) => ` Skew(${_rad}deg, ${_rad}deg) scaleY(0.9)`;
+const g_changeStairs = (_rad) => `rotate(${_rad}deg)`;
+const g_changeSkew = (_rad) => `Skew(${_rad}deg, ${_rad}deg) scaleY(0.9)`;
 
 const g_playWindowFunc = {
     'Default': () => ``,
@@ -1173,29 +1222,25 @@ const g_stepAreaFunc = {
     'Default': () => ``,
     'Halfway': () => {
         [`stepSprite`, `arrowSprite`, `frzHitSprite`].forEach(sprite => {
-            $id(`${sprite}0`).top = `${g_headerObj.playingHeight / 2 - g_posObj.stepY + (g_posObj.stepYR - C_ARW_WIDTH) / 2}px`;
-            $id(`${sprite}1`).top = `-${g_headerObj.playingHeight / 2 - g_posObj.stepY + (g_posObj.stepYR - C_ARW_WIDTH) / 2}px`;
+            for (let j = 0; j < g_stateObj.layerNum; j++) {
+                $id(`${sprite}${j}`).top = `${(j % 2 === 0 ? 1 : -1) * (g_headerObj.playingHeight / 2 - g_posObj.stepY + (g_posObj.stepYR - C_ARW_WIDTH) / 2)}px`;
+            }
         });
     },
     'Mismatched': () => {
-        [`stepSprite`, `arrowSprite`, `frzHitSprite`].forEach(sprite => {
-            $id(`${sprite}0`).transform = `rotate(-15deg)`;
-            $id(`${sprite}1`).transform = `rotate(15deg)`;
-        });
+        for (let j = 0; j < g_stateObj.layerNum; j++) {
+            addTransform(`mainSprite${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * -15}deg)`);
+        }
     },
     'R-Mismatched': () => {
-        [`stepSprite`, `arrowSprite`, `frzHitSprite`].forEach(sprite => {
-            $id(`${sprite}0`).transform = `rotate(15deg)`;
-            $id(`${sprite}1`).transform = `rotate(-15deg)`;
-        });
+        for (let j = 0; j < g_stateObj.layerNum; j++) {
+            addTransform(`mainSprite${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * 15}deg)`);
+        }
     },
     'X-Flower': () => {
-        [`stepSprite`, `arrowSprite`, `frzHitSprite`].forEach(sprite => {
-            $id(`${sprite}0`).transform = `rotate(-15deg)`;
-            $id(`${sprite}1`).transform = `rotate(15deg)`;
-            $id(`${sprite}2`).transform = `rotate(15deg)`;
-            $id(`${sprite}3`).transform = `rotate(-15deg)`;
-        });
+        for (let j = 0; j < Math.min(g_stateObj.layerNum, 4); j++) {
+            addTransform(`mainSprite${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * (j % 4 < 2 ? 1 : -1) * -15}deg)`);
+        }
     },
 };
 
@@ -2813,7 +2858,7 @@ g_keycons.groups.forEach(type => {
 const g_keyCopyLists = {
     simpleDef: [`blank`, `scale`],
     simple: [`div`, `divMax`, `blank`, `scale`, `keyRetry`, `keyTitleBack`, `transKey`, `scrollDir`, `assistPos`, `flatMode`],
-    multiple: [`chara`, `color`, `stepRtn`, `pos`, `shuffle`, `keyGroup`, `keyGroupOrder`],
+    multiple: [`chara`, `color`, `stepRtn`, `pos`, `shuffle`, `keyGroup`, `keyGroupOrder`, `layerGroup`, `layerTrans`],
 };
 
 // タイトル画面関連のリスト群

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "39.0.0",
+  "version": "39.2.0",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "index.js",
   "scripts": {