danoniplus 30.0.1 → 30.1.1

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2023/02/11
+ * Revised : 2023/02/14
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 30.0.1`;
-const g_revisedDate = `2023/02/11`;
+const g_version = `Ver 30.1.1`;
+const g_revisedDate = `2023/02/14`;
 const g_alphaVersion = ``;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
@@ -224,6 +224,19 @@ const setAttrs = (_baseObj, { ...rest } = {}) =>
  */
 const getNumAttr = (_baseObj, _attrkey) => parseFloat(_baseObj.getAttribute(_attrkey));
 
+/**
+ * 文字列に埋め込まれた変数を展開
+ * @param {string} _str 
+ */
+const convertStrToVal = _str => {
+	const strs = _str.split(`}`).join(`{`).split(`{`);
+	let convStrs = ``;
+	for (let j = 0; j < strs.length; j += 2) {
+		convStrs += escapeHtmlForEnabledTag(strs[j]);
+		convStrs += setVal(strs[j + 1], ``, C_TYP_CALC);
+	}
+	return convStrs;
+};
 
 /*-----------------------------------------------------------*/
 /* 値や配列のチェック・変換                                    */
@@ -1445,14 +1458,19 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 			const tmpObj = {
 				path: escapeHtml(tmpSpriteData[2] ?? ``, g_escapeStr.escapeCode),   // 画像パス or テキスト
 				class: escapeHtml(tmpSpriteData[3] ?? ``),                          // CSSクラス
-				left: setVal(tmpSpriteData[4], 0, C_TYP_CALC),                      // X座標
-				top: setVal(tmpSpriteData[5], 0, C_TYP_CALC),                       // Y座標
-				width: setIntVal(tmpSpriteData[6]),                                 // spanタグの場合は font-size
-				height: escapeHtml(tmpSpriteData[7] ?? ``),                         // spanタグの場合は color(文字列可)
+				left: setVal(tmpSpriteData[4], `0`).includes(`{`) ?
+					`${setVal(tmpSpriteData[4], 0)}` : `{${setVal(tmpSpriteData[4], 0)}}`, // X座標
+				top: setVal(tmpSpriteData[5], `0`).includes(`{`) ?
+					`${setVal(tmpSpriteData[5], 0)}` : `{${setVal(tmpSpriteData[5], 0)}}`, // Y座標
+				width: `${setIntVal(tmpSpriteData[6])}`,                            // spanタグの場合は font-size
+				height: `${escapeHtml(tmpSpriteData[7] ?? ``)}`,                    // spanタグの場合は color(文字列可)
 				opacity: setVal(tmpSpriteData[8], 1, C_TYP_FLOAT),
 				animationName: escapeHtml(setVal(tmpSpriteData[9], C_DIS_NONE)),
 				animationDuration: setIntVal(tmpSpriteData[10]) / g_fps,
 			};
+			if (setVal(tmpSpriteData[11], g_presetObj.animationFillMode) !== undefined) {
+				tmpObj.animationFillMode = setVal(tmpSpriteData[11], g_presetObj.animationFillMode);
+			}
 			if (g_headerObj.autoPreload) {
 				if (checkImage(tmpObj.path)) {
 					if (g_headerObj.syncBackPath) {
@@ -1468,15 +1486,38 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 				checkDuplicatedObjects(spriteData[tmpFrame]);
 
 			const emptyPatterns = [``, `[loop]`, `[jump]`];
+			const colorObjFlg = tmpSpriteData[2]?.startsWith(`[c]`) || false;
 			spriteData[tmpFrame][addFrame] = {
 				depth: tmpDepth,
-				command: tmpObj.path,
-				jumpFrame: tmpObj.class,
-				maxLoop: tmpObj.left,
-				animationName: tmpObj.animationName,
-				htmlText: emptyPatterns.includes(tmpObj.path) ?
-					`` : (checkImage(tmpObj.path) ? makeSpriteImage(tmpObj) : makeSpriteText(tmpObj)),
 			};
+
+			if (colorObjFlg) {
+				// [c]始まりの場合、カラーオブジェクト用の作成準備を行う
+				const data = tmpObj.path.slice(`[c]`.length).split(`/`);
+				spriteData[tmpFrame][addFrame].colorObjInfo = {
+					x: tmpObj.left, y: tmpObj.top, w: tmpObj.width, h: tmpObj.height,
+					rotate: setVal(data[0], `0`), opacity: tmpObj.opacity,
+					background: makeColorGradation(setVal(data[1], `#ffffff`), { _defaultColorgrd: false }),
+					animationName: tmpObj.animationName,
+					animationDuration: `${tmpObj.animationDuration}s`,
+				};
+				spriteData[tmpFrame][addFrame].colorObjId = `${tmpFrame}_${addFrame}`;
+				spriteData[tmpFrame][addFrame].colorObjClass = setVal(tmpObj.class, undefined);
+				if (tmpObj.animationFillMode !== undefined) {
+					spriteData[tmpFrame][addFrame].colorObjInfo.animationFillMode = tmpObj.animationFillMode;
+				}
+
+			} else if (emptyPatterns.includes(tmpObj.path)) {
+				// ループ、フレームジャンプ、空の場合の処理
+				spriteData[tmpFrame][addFrame].command = tmpObj.path;
+				spriteData[tmpFrame][addFrame].jumpFrame = tmpObj.class;
+				spriteData[tmpFrame][addFrame].maxLoop = tmpObj.left;
+				spriteData[tmpFrame][addFrame].htmlText = ``;
+			} else {
+				// それ以外の画像、テキストの場合
+				spriteData[tmpFrame][addFrame].animationName = tmpObj.animationName;
+				spriteData[tmpFrame][addFrame].htmlText = (checkImage(tmpObj.path) ? makeSpriteImage(tmpObj) : makeSpriteText(tmpObj));
+			}
 		}
 	});
 
@@ -1517,7 +1558,16 @@ const drawBaseSpriteData = (_spriteData, _name, _condition = true) => {
 		}
 	} else {
 		if (_condition) {
-			baseSprite.innerHTML = _spriteData.htmlText;
+			if (_spriteData.colorObjInfo !== undefined) {
+				const colorObjClass = _spriteData.colorObjClass?.split(`/`) ?? [];
+				const id = `${_name}${_spriteData.depth}${_spriteData.colorObjId}`;
+				[`x`, `y`, `w`, `h`].forEach(val => _spriteData.colorObjInfo[val] = convertStrToVal(_spriteData.colorObjInfo[val]));
+				baseSprite.appendChild(
+					createColorObject2(id, _spriteData.colorObjInfo, ...colorObjClass)
+				);
+			} else {
+				baseSprite.innerHTML = convertStrToVal(_spriteData.htmlText);
+			}
 		}
 	}
 };
@@ -3871,13 +3921,7 @@ const titleInit = _ => {
 	if (g_headerObj.commentVal !== ``) {
 
 		// コメント文の加工
-		const comments = g_headerObj.commentVal.split(`}`).join(`{`).split(`{`);
-		let convCommentVal = ``;
-		for (let j = 0; j < comments.length; j += 2) {
-			convCommentVal += escapeHtmlForEnabledTag(comments[j]);
-			convCommentVal += setVal(comments[j + 1], ``, C_TYP_CALC);
-		}
-
+		const convCommentVal = convertStrToVal(g_headerObj.commentVal);
 		if (g_headerObj.commentExternal) {
 			if (document.querySelector(`#commentArea`) !== null) {
 				commentArea.innerHTML = convCommentVal;

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2023/02/11 (v30.0.1)
+ * Revised : 2023/02/14 (v30.1.1)
  *
  * https://github.com/cwtickle/danoniplus
  */

package/js/template/danoni_setting.js

@@ -1,7 +1,7 @@
 'use strict';
 /**
  * Dancing☆Onigiri 設定用jsファイル
- * Template Update: 2022/03/25 (v27.1.0)
+ * Template Update: 2023/02/14 (v30.1.1)
  * 
  * このファイルでは、作品全体に対しての初期設定を行うことができます。
  * 譜面データ側で個別に同様の項目が設定されている場合は、譜面データ側の設定が優先されます。
@@ -187,6 +187,14 @@ g_presetObj.customDesignUse = {
 */
 //g_presetObj.customImageList = [`ball`, `square`];
 
+/**
+ * 背景・マスクモーションで利用する「animationFillMode」のデフォルト値
+ * - none      : 初期画像へ戻す
+ * - forwards  : アニメーション100%の状態を維持（デフォルト）
+ * - backwards : アニメーション  0%の状態に戻す
+ */
+//g_presetObj.animationFillMode = `none`;
+
 
 /*
 ------------------------------------------------------------------------

package/package.json

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