danoniplus 45.0.0 → 45.1.1

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/02/26
+ * Revised : 2026/02/27
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 45.0.0`;
-const g_revisedDate = `2026/02/26`;
+const g_version = `Ver 45.1.1`;
+const g_revisedDate = `2026/02/27`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -1692,7 +1692,7 @@ const createMultipleSprite = (_baseName, _num, { x = 0, priority = g_transPriori
 	for (let j = 0; j <= _num; j++) {
 		createEmptySprite(sprite, `${_baseName}${j}`);
 	}
-	addX(_baseName, `root`, x, { priority });
+	addTransform(_baseName, `root`, `translateX(${x}px)`, priority);
 	return sprite;
 };
 
@@ -12085,15 +12085,15 @@ const mainInit = () => {
 	}
 
 	addTransform(`mainSprite`, `root`, `scale(${g_workObj.scale})`, g_transPriority.scale);
-	addXY(`mainSprite`, `root`, g_workObj.playingX, g_posObj.stepY - C_STEP_Y + g_headerObj.playingY, { priority: g_transPriority.base });
+	addTransform(`mainSprite`, `main`, `translateX(${g_workObj.playingX}px) translateY(${g_posObj.stepY - C_STEP_Y + g_headerObj.playingY}px)`, g_transPriority.base);
 
 	// 曲情報・判定カウント用スプライトを作成（メインスプライトより上位）
 	const infoSprite = createEmptySprite(divRoot, `infoSprite`, mainCommonPos);
-	addXY(`infoSprite`, `root`, g_workObj.playingX, g_headerObj.playingY, { priority: g_transPriority.base });
+	addTransform(`infoSprite`, `main`, `translateX(${g_workObj.playingX}px) translateY(${g_headerObj.playingY}px)`, g_transPriority.base);
 
 	// 判定系スプライトを作成（メインスプライトより上位）
 	const judgeSprite = createEmptySprite(divRoot, `judgeSprite`, mainCommonPos);
-	addXY(`judgeSprite`, `root`, g_workObj.playingX, g_headerObj.playingY, { priority: g_transPriority.base });
+	addTransform(`judgeSprite`, `main`, `translateX(${g_workObj.playingX}px) translateY(${g_headerObj.playingY}px)`, g_transPriority.base);
 	const tkObj = getKeyInfo();
 	const [keyCtrlPtn, keyNum] = [tkObj.keyCtrlPtn, tkObj.keyNum];
 
@@ -12208,11 +12208,6 @@ const mainInit = () => {
 	changeAppearanceBar(g_appearanceRanges.includes(g_stateObj.appearance)
 		? g_hidSudObj.filterPos : g_hidSudObj.filterPosDefault[g_stateObj.appearance], 0);
 
-	// Shaking初期化
-	if (g_stateObj.shaking !== C_FLG_OFF) {
-		addXY(`mainSprite`, `shaking`, 0, 0, { priority: g_transPriority.shaking });
-	}
-
 	// 現在の矢印・フリーズアローの速度、個別加算速度の初期化 (速度変化時に直す)
 	g_workObj.currentSpeed = 2;
 	g_workObj.boostSpd = 1;
@@ -12671,6 +12666,7 @@ const mainInit = () => {
 	const judgeObjDelete = {};
 	g_typeLists.arrow.forEach(type =>
 		judgeObjDelete[type] = (_j, _deleteName) => {
+			delTransform(_deleteName, `root`);
 			g_workObj[`judg${toCapitalize(type)}Cnt`][_j]++;
 			document.getElementById(_deleteName).remove();
 			delete g_attrObj[_deleteName];
@@ -12889,8 +12885,8 @@ const mainInit = () => {
 			(_attrs.initY * g_workObj.boostSpd +
 				_attrs.initBoostY * g_workObj.boostDir) * g_workObj.scrollDir[_j];
 
-		const stepRoot = createEmptySprite(arrowSprite[g_workObj.dividePos[_j]], arrowName, {
-			x: g_workObj.stepX[_j], y: firstPosY, w: C_ARW_WIDTH, h: C_ARW_WIDTH,
+		const arrowRoot = createEmptySprite(arrowSprite[g_workObj.dividePos[_j]], arrowName, {
+			x: g_workObj.stepX[_j], y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH,
 		});
 		/**
 		 * 矢印毎の属性情報
@@ -12913,15 +12909,17 @@ const mainInit = () => {
 			// 現フレーム時の位置
 			y: firstPosY,
 		};
+		addTransform(arrowName, `root`, `translateY(${wUnit(firstPosY)})`);
 
 		// 矢印色の設定
 		// - 枠/塗りつぶし色: g_attrObj[arrowName].Arrow / ArrowShadow
 		g_typeLists.arrowColor.forEach(val => g_attrObj[arrowName][`Arrow${val}`] = g_workObj[`${_name}${val}Colors`][_j]);
-		arrowSprite[g_workObj.dividePos[_j]].appendChild(stepRoot);
+		arrowSprite[g_workObj.dividePos[_j]].appendChild(arrowRoot);
+		const arrowSubRoot = createEmptySprite(arrowRoot, `sub${arrowName}`, { x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
 
 		if (g_workObj[`${_name}CssMotions`][_j] !== ``) {
-			stepRoot.classList.add(g_workObj[`${_name}CssMotions`][_j]);
-			stepRoot.style.animationDuration = `${_attrs.arrivalFrame / g_fps}s`;
+			arrowSubRoot.classList.add(g_workObj[`${_name}CssMotions`][_j]);
+			arrowSubRoot.style.animationDuration = `${_attrs.arrivalFrame / g_fps}s`;
 		}
 
 		/**
@@ -12938,11 +12936,11 @@ const mainInit = () => {
 			if (_shadowColor === `Default`) {
 				arrShadow.style.opacity = 0.5;
 			}
-			stepRoot.appendChild(arrShadow);
+			arrowSubRoot.appendChild(arrShadow);
 		}
 
 		// 矢印 (枠)
-		stepRoot.appendChild(createColorObject2(`${_name}Top${_j}_${_arrowCnt}`, {
+		arrowSubRoot.appendChild(createColorObject2(`${_name}Top${_j}_${_arrowCnt}`, {
 			background: _color, rotate: g_workObj.arrowRtn[_j],
 		}));
 		g_customJsObj.makeArrow.forEach(func => func(_attrs, arrowName, _name, _arrowCnt));
@@ -12967,7 +12965,7 @@ const mainInit = () => {
 			currentArrow.prevY = currentArrow.y;
 			currentArrow.y -= (g_workObj.currentSpeed * currentArrow.boostSpd +
 				(g_workObj.motionOnFrames[boostCnt] || 0) * currentArrow.boostDir) * currentArrow.dir;
-			$id(arrowName).top = wUnit(currentArrow.y);
+			addTransform(arrowName, `root`, `translateY(${wUnit(currentArrow.y)})`);
 			g_motionAlphaFunc.get(g_stateObj.motion)(arrowName, currentArrow);
 			currentArrow.boostCnt--;
 		}
@@ -12997,7 +12995,7 @@ const mainInit = () => {
 		const firstBarLength = g_workObj[`mk${toCapitalize(_name)}Length`][_j][(_arrowCnt - 1) * 2] * g_workObj.boostSpd;
 
 		const frzRoot = createEmptySprite(arrowSprite[g_workObj.dividePos[_j]], frzName, {
-			x: g_workObj.stepX[_j], y: firstPosY, w: C_ARW_WIDTH, h: C_ARW_WIDTH + firstBarLength,
+			x: g_workObj.stepX[_j], y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH + firstBarLength,
 		});
 		/**
 		 * フリーズアロー毎の属性情報
@@ -13030,6 +13028,8 @@ const mainInit = () => {
 			// フリーズアロー(対矢印)の相対位置
 			btmY: firstBarLength * g_workObj.scrollDir[_j],
 		};
+		addTransform(frzName, `root`, `translateY(${wUnit(firstPosY)})`);
+
 		// フリーズアロー色の設定
 		// - 通常時 (矢印枠/矢印塗りつぶし/帯): g_attrObj[frzName].Normal / NormalShadow / NormalBar
 		// - ヒット時 (矢印枠/矢印塗りつぶし/帯): g_attrObj[frzName].Hit / HitShadow / HitBar
@@ -13042,12 +13042,13 @@ const mainInit = () => {
 		});
 		arrowSprite[g_workObj.dividePos[_j]].appendChild(frzRoot);
 		let shadowColor = _shadowColor === `Default` ? _normalColor : _shadowColor;
+		const frzSubRoot = createEmptySprite(frzRoot, `sub${frzName}`, { x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH + firstBarLength });
 
 		/**
 		 * フリーズアローオブジェクトの生成
 		 * - 後で生成されたものが手前に表示されるため、以下の順で作成
 		 */
-		multiAppend(frzRoot,
+		multiAppend(frzSubRoot,
 
 			// フリーズアロー帯(frzBar)
 			createColorObject2(`${_name}Bar${frzNo}`, {
@@ -13055,9 +13056,9 @@ const mainInit = () => {
 				opacity: 0.75,
 			}),
 		);
-		const frzTopRoot = createEmptySprite(frzRoot, `${_name}TopRoot${frzNo}`,
+		const frzTopRoot = createEmptySprite(frzSubRoot, `${_name}TopRoot${frzNo}`,
 			{ x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
-		const frzBtmRoot = createEmptySprite(frzRoot, `${_name}BtmRoot${frzNo}`,
+		const frzBtmRoot = createEmptySprite(frzSubRoot, `${_name}BtmRoot${frzNo}`,
 			{ x: 0, y: g_attrObj[frzName].btmY, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
 
 		multiAppend(frzTopRoot,
@@ -13087,8 +13088,8 @@ const mainInit = () => {
 
 		);
 		if (g_workObj[`${_name}CssMotions`][_j] !== ``) {
-			frzRoot.classList.add(g_workObj[`${_name}CssMotions`][_j]);
-			frzRoot.style.animationDuration = `${_attrs.arrivalFrame / g_fps}s`;
+			frzSubRoot.classList.add(g_workObj[`${_name}CssMotions`][_j]);
+			frzSubRoot.style.animationDuration = `${_attrs.arrivalFrame / g_fps}s`;
 		}
 		if (g_workObj[`${_name}ArrowCssMotions`][_j] !== ``) {
 			[frzTopRoot, frzBtmRoot].forEach(obj => {
@@ -13121,7 +13122,7 @@ const mainInit = () => {
 				if (g_workObj.currentSpeed !== 0) {
 					currentFrz.prevY = currentFrz.y;
 					currentFrz.y -= movY + (g_workObj.motionOnFrames[currentFrz.boostCnt] || 0) * currentFrz.dir * currentFrz.boostDir;
-					$id(frzName).top = wUnit(currentFrz.y);
+					addTransform(frzName, `root`, `translateY(${wUnit(currentFrz.y)})`);
 					g_motionAlphaFunc.get(g_stateObj.motion)(frzName, currentFrz);
 					currentFrz.boostCnt--;
 				}
@@ -13161,7 +13162,7 @@ const mainInit = () => {
 			currentFrz.frzBarLength -= movY * currentFrz.dir;
 			if (currentFrz.frzBarLength > 0) {
 				currentFrz.y -= movY;
-				$id(frzName).top = wUnit(currentFrz.y);
+				addTransform(frzName, `root`, `translateY(${wUnit(currentFrz.y)})`);
 			} else {
 				judgeObjDelete[_name](_j, frzName);
 			}
@@ -13574,20 +13575,20 @@ const changeAppearanceFilter = (_num = 10) => {
 		$id(`arrowSprite${topNum + j}`).clipPath = topShape;
 		$id(`arrowSprite${bottomNum + j}`).clipPath = bottomShape;
 
-		addY(`filterBar${topNum + j}`, `appearance`, parseFloat($id(`arrowSprite${j}`).top) + topDist, { priority: g_transPriority.layer });
-		addY(`filterBar${bottomNum + j}`, `appearance`, parseFloat($id(`arrowSprite${j + 1}`).top) + bottomDist, { priority: g_transPriority.layer });
+		addTransform(`filterBar${topNum + j}`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${j}`).top) + topDist}px)`, g_transPriority.layer);
+		addTransform(`filterBar${bottomNum + j}`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${j + 1}`).top) + bottomDist}px)`, g_transPriority.layer);
 
 		if (![`Default`, `Halfway`].includes(g_stateObj.stepArea)) {
-			addY(`filterBar${bottomNum + j}_HS`, `appearance`, parseFloat($id(`arrowSprite${j}`).top) + bottomDist, { priority: g_transPriority.layer });
-			addY(`filterBar${topNum + j}_HS`, `appearance`, parseFloat($id(`arrowSprite${j + 1}`).top) + topDist, { priority: g_transPriority.layer });
+			addTransform(`filterBar${bottomNum + j}_HS`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${j}`).top) + bottomDist}px)`, g_transPriority.layer);
+			addTransform(`filterBar${topNum + j}_HS`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${j + 1}`).top) + topDist}px)`, g_transPriority.layer);
 		}
 	}
 
 	// フィルターバーのパーセント表示（フィルターバーが複数表示されるなど複雑なため、最初の階層グループの位置に追従）
 	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
 		const currentBarNum = g_hidSudObj.std[g_stateObj.appearance][g_stateObj.reverse];
-		addY(`filterView`, `appearance`, parseFloat($id(`arrowSprite${currentBarNum % 2}`).top) +
-			(currentBarNum % 2 === 0 ? bottomDist : topDist), { priority: g_transPriority.layer });
+		addTransform(`filterView`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${currentBarNum % 2}`).top) +
+			(currentBarNum % 2 === 0 ? bottomDist : topDist)}px)`, g_transPriority.layer);
 		filterView.textContent = `${_num}%`;
 		g_hidSudObj.filterPos = _num;
 	}
@@ -13830,7 +13831,6 @@ const changeHitFrz = (_j, _k, _name, _difFrame = 0) => {
 
 	// フリーズアロー位置の修正（ステップゾーン上に来るように）
 	const delFrzLength = parseFloat($id(`stepRoot${_j}`).top) - currentFrz.y;
-	$id(frzName).top = $id(`stepRoot${_j}`).top;
 
 	// 早押ししたboostCnt分のフリーズアロー終端位置の修正
 	const delFrzMotionLength = sumData(g_workObj.motionOnFrames.slice(0, currentFrz.boostCnt + 1));
@@ -13843,6 +13843,7 @@ const changeHitFrz = (_j, _k, _name, _difFrame = 0) => {
 	currentFrz.btmY -= delFrzLength + delFrzMotionLength + hitPos;
 	currentFrz.y += delFrzLength;
 	currentFrz.isMoving = false;
+	addTransform(frzName, `root`, `translateY(${wUnit(currentFrz.y)})`);
 
 	/**
 	 * フリーズアロー(ヒット時)の色変更

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/02/26 (v45.0.0)
+ * Revised : 2026/02/27 (v45.1.1)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -1425,6 +1425,11 @@ const addTransform = (_id, _transformId, _transform, _priority = 1000) => {
 const delTransform = (_id, _transformId) => {
     if (g_transforms[_id]) {
         g_transforms[_id].delete(_transformId);
+        if (g_transforms[_id].size === 0) {
+            delete g_transforms[_id];
+            $id(_id).transform = ``;
+            return;
+        }
         $id(_id).transform = Array.from(g_transforms[_id].values())
             .sort((a, b) => b.priority - a.priority)
             .map(v => v.transform)
@@ -1722,7 +1727,7 @@ const g_stepAreaFunc = new Map([
     ['Halfway', () => {
         g_arrowGroupSprite.forEach(sprite => {
             for (let j = 0; j < g_stateObj.layerNum; j++) {
-                addY(`${sprite}${j}`, `stepArea`, halfwayOffset(j));
+                addTransform(`${sprite}${j}`, `stepArea`, `translateY(${halfwayOffset(j)}px)`, g_transPriority.stepArea);
             }
         });
     }],
@@ -1733,7 +1738,7 @@ const g_stepAreaFunc = new Map([
         if (g_workObj.orgFlatFlg) {
             g_arrowGroupSprite.forEach(sprite => {
                 for (let j = g_stateObj.layerNumDf; j < g_stateObj.layerNum; j++) {
-                    addY(`${sprite}${j}`, `stepArea`, halfwayOffset(j));
+                    addTransform(`${sprite}${j}`, `stepArea`, `translateY(${halfwayOffset(j)}px)`, g_transPriority.stepArea);
                 }
             });
         }
@@ -1745,7 +1750,7 @@ const g_stepAreaFunc = new Map([
         if (g_workObj.orgFlatFlg) {
             g_arrowGroupSprite.forEach(sprite => {
                 for (let j = 0; j < g_stateObj.layerNumDf; j++) {
-                    addY(`${sprite}${j}`, `stepArea`, halfwayOffset(j));
+                    addTransform(`${sprite}${j}`, `stepArea`, `translateY(${halfwayOffset(j)}px)`, g_transPriority.stepArea);
                 }
             });
         }
@@ -1753,7 +1758,7 @@ const g_stepAreaFunc = new Map([
     ['2Step', () => {
         g_arrowGroupSprite.forEach(sprite => {
             for (let j = g_stateObj.layerNumDf; j < g_stateObj.layerNum; j++) {
-                addY(`${sprite}${j}`, `stepArea`, halfwayOffset(j));
+                addTransform(`${sprite}${j}`, `stepArea`, `translateY(${halfwayOffset(j)}px)`, g_transPriority.stepArea);
             }
         });
     }],
@@ -1776,36 +1781,37 @@ const g_stepAreaFunc = new Map([
 const getShakingDist = () => (Math.abs((g_scoreObj.baseFrame / 2) % 100 - 50) - 25);
 const g_shakingFunc = new Map([
     ['OFF', () => true],
-    ['Horizontal', () => addX(`mainSprite`, `shaking`, getShakingDist())],
-    ['Vertical', () => addY(`mainSprite`, `shaking`, getShakingDist() / 2)],
+    ['Horizontal', () => addTransform(`mainSprite`, `shakingX`, `translateX(${getShakingDist()}px)`, g_transPriority.shaking)],
+    ['Vertical', () => addTransform(`mainSprite`, `shakingY`, `translateY(${getShakingDist() / 2}px)`, g_transPriority.shaking)],
     ['X-Horizontal', () => {
         for (let j = 0; j < g_stateObj.layerNum; j++) {
-            addX(`mainSprite${j}`, `shaking`, getDirFromLayer(j) * (4 / 3) * getShakingDist());
+            addTransform(`mainSprite${j}`, `shakingX`, `translateX(${getDirFromLayer(j) * (4 / 3) * getShakingDist()}px)`, g_transPriority.shaking);
         }
     }],
     ['X-Vertical', () => {
         for (let j = 0; j < g_stateObj.layerNum; j++) {
-            addY(`mainSprite${j}`, `shaking`, getDirFromLayer(j) * getShakingDist());
+            addTransform(`mainSprite${j}`, `shakingY`, `translateY(${getDirFromLayer(j) * getShakingDist()}px)`, g_transPriority.shaking);
         }
     }],
     ['Drunk', () => {
-        const shakeX = g_posXs.mainSprite?.get(`shaking`) ?? 0;
-        const shakeY = g_posYs.mainSprite?.get(`shaking`) ?? 0;
+        // Drunkは揺れの軸が途中で変わるため、基準位置取得のためにmainSpriteのみaddX, addYを使用
+        const shakeX = g_posXs.mainSprite?.get(`shakingX`) ?? 0;
+        const shakeY = g_posYs.mainSprite?.get(`shakingY`) ?? 0;
         if (shakeX === 0 && shakeY === 0) {
             g_workObj.drunkXFlg = Math.random() < 0.5;
             g_workObj.drunkYFlg = Math.random() < 0.5;
         }
         if (g_workObj.drunkXFlg) {
             const deltaX = getShakingDist();
-            addX(`mainSprite`, `shaking`, deltaX);
-            addX(`infoSprite`, `shaking`, deltaX);
-            addX(`judgeSprite`, `shaking`, deltaX);
+            addX(`mainSprite`, `shakingX`, deltaX, { priority: g_transPriority.shaking });
+            addTransform(`infoSprite`, `shakingX`, `translateX(${deltaX}px)`, g_transPriority.shaking);
+            addTransform(`judgeSprite`, `shakingX`, `translateX(${deltaX}px)`, g_transPriority.shaking);
         }
         if (g_workObj.drunkYFlg) {
             const deltaY = getShakingDist() / 2;
-            addY(`mainSprite`, `shaking`, deltaY);
-            addY(`infoSprite`, `shaking`, deltaY);
-            addY(`judgeSprite`, `shaking`, deltaY);
+            addY(`mainSprite`, `shakingY`, deltaY, { priority: g_transPriority.shaking });
+            addTransform(`infoSprite`, `shakingY`, `translateY(${deltaY}px)`, g_transPriority.shaking);
+            addTransform(`judgeSprite`, `shakingY`, `translateY(${deltaY}px)`, g_transPriority.shaking);
         }
     }],
     ['S-Drunk', () => {

package/package.json

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