Update to Cubism 4 SDK for Web R7

CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 
+## [4-r.7] - 2023-05-25
+
+### Added
+
+* Add compiler options `noImplicitAny` and `useUnknownInCatchVariables` to `tsconfig.json`.
+* Add some function for checking consistency of MOC3.
+  * Add the function of checking consistency on reviving a MOC3. (`CubismMoc::Create`)
+* Add a function to parse the opacity from `.motion3.json`.
+* Add some functions to change Multiply and Screen colors on a per part basis.
+
+### Changed
+
+* Change access specifier for `CubismExpressionMotion`.
+
+### Fixed
+
+* Fix to support added compiler options `noImplicitAny` and `useUnknownInCatchVariables`.
+
+
 ## [4-r.6.2] - 2023-03-16
 
 ### Fixed
@@ -163,6 +182,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 * Reformat code using Prettier and ESLint.
 
 
+[4-r.7]: https://github.com/Live2D/CubismWebFramework/compare/4-r.6.2...4-r.7
 [4-r.6.2]: https://github.com/Live2D/CubismWebFramework/compare/4-r.6.1...4-r.6.2
 [4-r.6.1]: https://github.com/Live2D/CubismWebFramework/compare/4-r.6...4-r.6.1
 [4-r.6]: https://github.com/Live2D/CubismWebFramework/compare/4-r.5...4-r.6

README.ja.md

@@ -21,15 +21,14 @@ Live2D Cubism 4 Editor で出力したモデルをアプリケーションで利
 
 ### Node.js
 
-* 19.6.0
+* 20.1.0
-* 18.14.0
+* 18.16.0
-* 16.19.0
+* 16.20.0
-* 14.21.2
 
 
 ### TypeScript
 
-4.9.5
+5.0.4
 
 
 ## 開発環境構築

README.md

@@ -21,15 +21,13 @@ Please check the [license](LICENSE.md) before using this SDK.
 
 ### Node.js
 
-* 19.6.0
+* 20.1.0
-* 18.14.0
+* 18.16.0
-* 16.19.0
+* 16.20.0
-* 14.21.2
-
 
 ### TypeScript
 
-4.9.5
+5.0.4
 
 
 ## Development environment construction

package.json

@@ -8,13 +8,13 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@typescript-eslint/parser": "^5.59.5",
-    "eslint": "^8.34.0",
+    "eslint": "^8.40.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
-    "rimraf": "^4.1.2",
+    "rimraf": "^5.0.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.4"
   }
 }

src/model/cubismmoc.ts

@@ -5,7 +5,7 @@
  * that can be found at https://www.live2d.com/eula/live2d-open-software-license-agreement_en.html.
  */
 
-import { CSM_ASSERT } from '../utils/cubismdebug';
+import { CSM_ASSERT, CubismLogError } from '../utils/cubismdebug';
 import { CubismModel } from './cubismmodel';
 
 /**
@@ -17,8 +17,23 @@ export class CubismMoc {
   /**
    * Mocデータの作成
    */
-  public static create(mocBytes: ArrayBuffer): CubismMoc {
+  public static create(
+    mocBytes: ArrayBuffer,
+    shouldCheckMocConsistency: boolean
+  ): CubismMoc {
     let cubismMoc: CubismMoc = null;
+
+    if (shouldCheckMocConsistency) {
+      // .moc3の整合性を確認
+      const consistency = this.hasMocConsistency(mocBytes);
+
+      if (!consistency) {
+        // 整合性が確認できなければ処理しない
+        CubismLogError(`Inconsistent MOC3.`);
+        return cubismMoc;
+      }
+    }
+
     const moc: Live2DCubismCore.Moc =
       Live2DCubismCore.Moc.fromArrayBuffer(mocBytes);
 
@@ -114,9 +129,9 @@ export class CubismMoc {
    * .moc3 の整合性を検証する
    */
   public static hasMocConsistency(mocBytes: ArrayBuffer): boolean {
-    const hasMocConsistency =
+    const isConsistent =
       Live2DCubismCore.Moc.prototype.hasMocConsistency(mocBytes);
-    return hasMocConsistency === 1 ? true : false;
+    return isConsistent === 1 ? true : false;
   }
 
   _moc: Live2DCubismCore.Moc; // Mocデータ

src/model/cubismmodel.ts

@@ -20,8 +20,31 @@ import { CSM_ASSERT } from '../utils/cubismdebug';
  * その色を保持する構造体
  */
 export class DrawableColorData {
-  isOverwritten = false;
+  constructor(
-  Color: CubismTextureColor = new CubismTextureColor();
+    isOverwritten = false,
+    color: CubismTextureColor = new CubismTextureColor()
+  ) {
+    this.isOverwritten = isOverwritten;
+    this.Color = color;
+  }
+
+  public isOverwritten: boolean;
+  public Color: CubismTextureColor;
+}
+/**
+ * @brief テクスチャの色をRGBAで扱うための構造体
+ */
+export class PartColorData {
+  constructor(
+    isOverwritten = false,
+    color: CubismTextureColor = new CubismTextureColor()
+  ) {
+    this.isOverwritten = isOverwritten;
+    this.Color = color;
+  }
+
+  public isOverwritten: boolean;
+  public Color: CubismTextureColor;
 }
 
 /**
@@ -35,8 +58,8 @@ export class DrawableCullingData {
    * @param isCulling
    */
   public constructor(isOverwritten = false, isCulling = false) {
-    isOverwritten = this.isOverwritten;
+    this.isOverwritten = isOverwritten;
-    isCulling = this.isCulling;
+    this.isCulling = isCulling;
   }
 
   public isOverwritten: boolean;
@@ -214,6 +237,150 @@ export class CubismModel {
     this._userScreenColors.at(index).Color.B = b;
     this._userScreenColors.at(index).Color.A = a;
   }
+  /**
+   * partの乗算色を取得する
+   * @param partIndex partのインデックス
+   * @returns 指定したpartの乗算色
+   */
+  public getPartMultiplyColor(partIndex: number): CubismTextureColor {
+    return this._userPartMultiplyColors.at(partIndex).Color;
+  }
+
+  /**
+   * partのスクリーン色を取得する
+   * @param partIndex partのインデックス
+   * @returns 指定したpartのスクリーン色
+   */
+  public getPartScreenColor(partIndex: number): CubismTextureColor {
+    return this._userPartScreenColors.at(partIndex).Color;
+  }
+
+  /**
+   * partのOverwriteColor setter関数
+   * @param partIndex partのインデックス
+   * @param r 設定する色のR値
+   * @param g 設定する色のG値
+   * @param b 設定する色のB値
+   * @param a 設定する色のA値
+   * @param partColors 設定するpartのカラーデータ配列
+   * @param drawableColors partに関連するDrawableのカラーデータ配列
+   */
+  public setPartColor(
+    partIndex: number,
+    r: number,
+    g: number,
+    b: number,
+    a: number,
+    partColors: csmVector<PartColorData>,
+    drawableColors: csmVector<DrawableColorData>
+  ) {
+    partColors.at(partIndex).Color.R = r;
+    partColors.at(partIndex).Color.G = g;
+    partColors.at(partIndex).Color.B = b;
+    partColors.at(partIndex).Color.A = a;
+
+    if (partColors.at(partIndex).isOverwritten) {
+      for (
+        let i = 0;
+        i < this._partChildDrawables.at(partIndex).getSize();
+        ++i
+      ) {
+        const drawableIndex = this._partChildDrawables.at(partIndex).at(i);
+        drawableColors.at(drawableIndex).Color.R = r;
+        drawableColors.at(drawableIndex).Color.G = g;
+        drawableColors.at(drawableIndex).Color.B = b;
+        drawableColors.at(drawableIndex).Color.A = a;
+      }
+    }
+  }
+
+  /**
+   * 乗算色をセットする
+   * @param partIndex partのインデックス
+   * @param color 設定する乗算色(CubismTextureColor)
+   */
+  public setPartMultiplyColorByTextureColor(
+    partIndex: number,
+    color: CubismTextureColor
+  ) {
+    this.setPartMultiplyColorByRGBA(
+      partIndex,
+      color.R,
+      color.G,
+      color.B,
+      color.A
+    );
+  }
+
+  /**
+   * 乗算色をセットする
+   * @param partIndex partのインデックス
+   * @param r 設定する乗算色のR値
+   * @param g 設定する乗算色のG値
+   * @param b 設定する乗算色のB値
+   * @param a 設定する乗算色のA値
+   */
+  public setPartMultiplyColorByRGBA(
+    partIndex: number,
+    r: number,
+    g: number,
+    b: number,
+    a: number
+  ) {
+    this.setPartColor(
+      partIndex,
+      r,
+      g,
+      b,
+      a,
+      this._userPartMultiplyColors,
+      this._userMultiplyColors
+    );
+  }
+
+  /**
+   * スクリーン色をセットする
+   * @param partIndex partのインデックス
+   * @param color 設定するスクリーン色(CubismTextureColor)
+   */
+  public setPartScreenColorByTextureColor(
+    partIndex: number,
+    color: CubismTextureColor
+  ) {
+    this.setPartScreenColorByRGBA(
+      partIndex,
+      color.R,
+      color.G,
+      color.B,
+      color.A
+    );
+  }
+
+  /**
+   * スクリーン色をセットする
+   * @param partIndex partのインデックス
+   * @param r 設定するスクリーン色のR値
+   * @param g 設定するスクリーン色のG値
+   * @param b 設定するスクリーン色のB値
+   * @param a 設定するスクリーン色のA値
+   */
+  public setPartScreenColorByRGBA(
+    partIndex: number,
+    r: number,
+    g: number,
+    b: number,
+    a: number
+  ) {
+    this.setPartColor(
+      partIndex,
+      r,
+      g,
+      b,
+      a,
+      this._userPartScreenColors,
+      this._userScreenColors
+    );
+  }
 
   /**
    * SDKから指定したモデルの乗算色を上書きするか
@@ -270,7 +437,7 @@ export class CubismModel {
   public getOverwriteFlagForDrawableScreenColors(
     drawableindex: number
   ): boolean {
-    return this._userMultiplyColors.at(drawableindex).isOverwritten;
+    return this._userScreenColors.at(drawableindex).isOverwritten;
   }
 
   /**
@@ -297,6 +464,97 @@ export class CubismModel {
     this._userScreenColors.at(drawableindex).isOverwritten = value;
   }
 
+  /**
+   * SDKからpartの乗算色を上書きするか
+   * @param partIndex partのインデックス
+   * @returns true    ->  SDKからの情報を優先する
+   *          false   ->  モデルに設定されている色情報を使用
+   */
+  public getOverwriteColorForPartMultiplyColors(partIndex: number) {
+    return this._userPartMultiplyColors.at(partIndex).isOverwritten;
+  }
+
+  /**
+   * SDKからpartのスクリーン色を上書きするか
+   * @param partIndex partのインデックス
+   * @returns true    ->  SDKからの情報を優先する
+   *          false   ->  モデルに設定されている色情報を使用
+   */
+  public getOverwriteColorForPartScreenColors(partIndex: number) {
+    return this._userPartScreenColors.at(partIndex).isOverwritten;
+  }
+
+  /**
+   * partのOverwriteFlag setter関数
+   * @param partIndex partのインデックス
+   * @param value true -> SDKからの情報を優先する
+   *              false -> モデルに設定されている色情報を使用
+   * @param partColors 設定するpartのカラーデータ配列
+   * @param drawableColors partに関連するDrawableのカラーデータ配列
+   */
+  public setOverwriteColorForPartColors(
+    partIndex: number,
+    value: boolean,
+    partColors: csmVector<PartColorData>,
+    drawableColors: csmVector<DrawableColorData>
+  ) {
+    partColors.at(partIndex).isOverwritten = value;
+
+    for (let i = 0; i < this._partChildDrawables.at(partIndex).getSize(); ++i) {
+      const drawableIndex = this._partChildDrawables.at(partIndex).at(i);
+      drawableColors.at(drawableIndex).isOverwritten = value;
+
+      if (value) {
+        drawableColors.at(drawableIndex).Color.R =
+          partColors.at(partIndex).Color.R;
+        drawableColors.at(drawableIndex).Color.G =
+          partColors.at(partIndex).Color.G;
+        drawableColors.at(drawableIndex).Color.B =
+          partColors.at(partIndex).Color.B;
+        drawableColors.at(drawableIndex).Color.A =
+          partColors.at(partIndex).Color.A;
+      }
+    }
+  }
+
+  /**
+   * SDKからpartのスクリーン色を上書きするかをセットする
+   * @param partIndex partのインデックス
+   * @param value true -> SDKからの情報を優先する
+   *              false -> モデルに設定されている色情報を使用
+   */
+  public setOverwriteColorForPartMultiplyColors(
+    partIndex: number,
+    value: boolean
+  ) {
+    this._userPartMultiplyColors.at(partIndex).isOverwritten = value;
+    this.setOverwriteColorForPartColors(
+      partIndex,
+      value,
+      this._userPartMultiplyColors,
+      this._userMultiplyColors
+    );
+  }
+
+  /**
+   * SDKからpartのスクリーン色を上書きするかをセットする
+   * @param partIndex partのインデックス
+   * @param value true -> SDKからの情報を優先する
+   *              false -> モデルに設定されている色情報を使用
+   */
+  public setOverwriteColorForPartScreenColors(
+    partIndex: number,
+    value: boolean
+  ) {
+    this._userPartScreenColors.at(partIndex).isOverwritten = value;
+    this.setOverwriteColorForPartColors(
+      partIndex,
+      value,
+      this._userPartScreenColors,
+      this._userScreenColors
+    );
+  }
+
   /**
    * Drawableのカリング情報を取得する。
    *
@@ -370,6 +628,24 @@ export class CubismModel {
     this._userCullings.at(drawableIndex).isOverwritten = isOverwrittenCullings;
   }
 
+  /**
+   * モデルの不透明度を取得する
+   *
+   * @returns 不透明度の値
+   */
+  public getModelOapcity(): number {
+    return this._modelOpacity;
+  }
+
+  /**
+   * モデルの不透明度を設定する
+   *
+   * @param value 不透明度の値
+   */
+  public setModelOapcity(value: number) {
+    this._modelOpacity = value;
+  }
+
   /**
    * モデルを取得
    */
@@ -405,6 +681,17 @@ export class CubismModel {
     return partIndex;
   }
 
+  /**
+   * パーツのIDを取得する。
+   *
+   * @param partIndex 取得するパーツのインデックス
+   * @return パーツのID
+   */
+  public getPartId(partIndex: number): CubismIdHandle {
+    const partId = this._model.parts.ids[partIndex];
+    return CubismFramework.getIdManager().getId(partId);
+  }
+
   /**
    * パーツの個数の取得
    * @return パーツの個数
@@ -832,7 +1119,7 @@ export class CubismModel {
 
   /**
    * Drawableの頂点インデックスリストの取得
-   * @param drarableIndex Drawableのインデックス
+   * @param drawableIndex Drawableのインデックス
    * @return drawableの頂点インデックスリスト
    */
   public getDrawableVertexIndices(drawableIndex: number): Uint16Array {
@@ -1106,9 +1393,9 @@ export class CubismModel {
       }
     }
 
+    const partCount: number = this._model.parts.count;
     {
       const partIds: string[] = this._model.parts.ids;
-      const partCount: number = this._model.parts.count;
 
       this._partIds.prepareCapacity(partCount);
       for (let i = 0; i < partCount; ++i) {
@@ -1116,41 +1403,98 @@ export class CubismModel {
           CubismFramework.getIdManager().getId(partIds[i])
         );
       }
+
+      this._userPartMultiplyColors.prepareCapacity(partCount);
+      this._userPartScreenColors.prepareCapacity(partCount);
+
+      this._partChildDrawables.prepareCapacity(partCount);
     }
 
     {
       const drawableIds: string[] = this._model.drawables.ids;
       const drawableCount: number = this._model.drawables.count;
 
-      this._userMultiplyColors = new csmVector<DrawableColorData>();
+      this._userMultiplyColors.prepareCapacity(drawableCount);
-      this._userMultiplyColors.updateSize(
+      this._userScreenColors.prepareCapacity(drawableCount);
-        drawableCount,
-        DrawableColorData,
-        true
-      );
-
-      this._userScreenColors = new csmVector<DrawableColorData>();
-      this._userScreenColors.updateSize(drawableCount, DrawableColorData, true);
 
       // カリング設定
-      this._userCullings = new csmVector<DrawableCullingData>();
+      this._userCullings.prepareCapacity(drawableCount);
-      this._userCullings.updateSize(drawableCount, DrawableCullingData, true);
       const userCulling: DrawableCullingData = new DrawableCullingData(
         false,
         false
       );
 
-      this._drawableIds.prepareCapacity(drawableCount);
+      // Part
-      for (let i = 0; i < drawableCount; ++i) {
+      {
-        this._drawableIds.pushBack(
+        for (let i = 0; i < partCount; ++i) {
-          CubismFramework.getIdManager().getId(drawableIds[i])
+          const multiplyColor: CubismTextureColor = new CubismTextureColor(
-        );
+            1.0,
+            1.0,
+            1.0,
+            1.0
+          );
+          const screenColor: CubismTextureColor = new CubismTextureColor(
+            0.0,
+            0.0,
+            0.0,
+            1.0
+          );
 
-        // shaderに影響しない色で初期化
+          const userMultiplyColor: PartColorData = new PartColorData(
-        this.setMultiplyColorByRGBA(i, 1.0, 1.0, 1.0, 1.0);
+            false,
-        this.setScreenColorByRGBA(i, 0.0, 0.0, 0.0, 1.0);
+            multiplyColor
+          );
+          const userScreenColor: PartColorData = new PartColorData(
+            false,
+            screenColor
+          );
 
-        this._userCullings.pushBack(userCulling);
+          this._userPartMultiplyColors.pushBack(userMultiplyColor);
+          this._userPartScreenColors.pushBack(userScreenColor);
+          this._partChildDrawables.pushBack(new csmVector<number>());
+          this._partChildDrawables.at(i).prepareCapacity(drawableCount);
+        }
+      }
+
+      // Drawables
+      {
+        for (let i = 0; i < drawableCount; ++i) {
+          const multiplyColor: CubismTextureColor = new CubismTextureColor(
+            1.0,
+            1.0,
+            1.0,
+            1.0
+          );
+          const screenColor: CubismTextureColor = new CubismTextureColor(
+            0.0,
+            0.0,
+            0.0,
+            1.0
+          );
+
+          const userMultiplyColor: DrawableColorData = new DrawableColorData(
+            false,
+            multiplyColor
+          );
+          const userScreenColor: DrawableColorData = new DrawableColorData(
+            false,
+            screenColor
+          );
+
+          this._drawableIds.pushBack(
+            CubismFramework.getIdManager().getId(drawableIds[i])
+          );
+
+          this._userMultiplyColors.pushBack(userMultiplyColor);
+          this._userScreenColors.pushBack(userScreenColor);
+
+          this._userCullings.pushBack(userCulling);
+
+          const parentIndex = this.getDrawableParentPartIndex(i);
+          if (parentIndex >= 0) {
+            this._partChildDrawables.at(parentIndex).pushBack(i);
+          }
+        }
       }
     }
   }
@@ -1172,8 +1516,14 @@ export class CubismModel {
     this._isOverwrittenModelMultiplyColors = false;
     this._isOverwrittenModelScreenColors = false;
     this._isOverwrittenCullings = false;
-    this._userMultiplyColors = null;
+    this._modelOpacity = 1.0;
-    this._userScreenColors = null;
+
+    this._userMultiplyColors = new csmVector<DrawableColorData>();
+    this._userScreenColors = new csmVector<DrawableColorData>();
+    this._userCullings = new csmVector<DrawableCullingData>();
+    this._userPartMultiplyColors = new csmVector<PartColorData>();
+    this._userPartScreenColors = new csmVector<PartColorData>();
+    this._partChildDrawables = new csmVector<csmVector<number>>();
 
     this._notExistPartId = new csmMap<CubismIdHandle, number>();
     this._notExistParameterId = new csmMap<CubismIdHandle, number>();
@@ -1201,6 +1551,9 @@ export class CubismModel {
   private _isOverwrittenModelScreenColors: boolean; // SDK上でモデル全体のスクリーン色を上書きするか判定するフラグ
   private _userMultiplyColors: csmVector<DrawableColorData>; // Drawableごとに設定する乗算色と上書きフラグを管理するリスト
   private _userScreenColors: csmVector<DrawableColorData>; // Drawableごとに設定するスクリーン色と上書きフラグを管理するリスト
+  private _userPartScreenColors: csmVector<PartColorData>; // Part 乗算色の配列
+  private _userPartMultiplyColors: csmVector<PartColorData>; // Part スクリーン色の配列
+  private _partChildDrawables: csmVector<csmVector<number>>; // Partの子DrawableIndexの配列
 
   private _model: Live2DCubismCore.Model; // モデル
 
@@ -1210,6 +1563,8 @@ export class CubismModel {
 
   private _partOpacities: Float32Array; // パーツの不透明度のリスト
 
+  private _modelOpacity: number; // モデルの不透明度
+
   private _parameterIds: csmVector<CubismIdHandle>;
   private _partIds: csmVector<CubismIdHandle>;
   private _drawableIds: csmVector<CubismIdHandle>;

src/model/cubismusermodel.ts

@@ -127,8 +127,8 @@ export class CubismUserModel {
    *
    * @param buffer    moc3ファイルが読み込まれているバッファ
    */
-  public loadModel(buffer: ArrayBuffer) {
+  public loadModel(buffer: ArrayBuffer, shouldCheckMocConsistency = false) {
-    this._moc = CubismMoc.create(buffer);
+    this._moc = CubismMoc.create(buffer, shouldCheckMocConsistency);
 
     if (this._moc == null) {
       CubismLogError('Failed to CubismMoc.create().');
@@ -359,6 +359,7 @@ export class CubismUserModel {
     this._accelerationX = 0.0;
     this._accelerationY = 0.0;
     this._accelerationZ = 0.0;
+    this._mocConsistency = false;
     this._debugMode = false;
     this._renderer = null;
 
@@ -433,6 +434,7 @@ export class CubismUserModel {
   protected _accelerationX: number; // X軸方向の加速度
   protected _accelerationY: number; // Y軸方向の加速度
   protected _accelerationZ: number; // Z軸方向の加速度
+  protected _mocConsistency: boolean; // MOC3一貫性検証するかどうか
   protected _debugMode: boolean; // デバッグモードかどうか
 
   private _renderer: CubismRenderer_WebGL; // レンダラ

src/motion/acubismmotion.ts

@@ -258,6 +258,46 @@ export abstract class ACubismMotion {
    */
   public getFinishedMotionHandler = () => this._onFinishedMotion;
 
+  /**
+   * 透明度のカーブが存在するかどうかを確認する
+   *
+   * @returns true  -> キーが存在する
+   *          false -> キーが存在しない
+   */
+  public isExistModelOpacity(): boolean {
+    return false;
+  }
+
+  /**
+   * 透明度のカーブのインデックスを返す
+   *
+   * @returns success:透明度のカーブのインデックス
+   */
+  public getModelOpacityIndex(): number {
+    return -1;
+  }
+
+  /**
+   * 透明度のIdを返す
+   *
+   * @param index モーションカーブのインデックス
+   * @returns success:透明度のId
+   */
+  public getModelOpacityId(index: number): CubismIdHandle {
+    return null;
+  }
+
+  /**
+   * 指定時間の透明度の値を返す
+   *
+   * @returns success:モーションの現在時間におけるOpacityの値
+   *
+   * @note  更新後の値を取るにはUpdateParameters() の後に呼び出す。
+   */
+  protected getModelOpacityValue(): number {
+    return 1.0;
+  }
+
   public _fadeInSeconds: number; // フェードインにかかる時間[秒]
   public _fadeOutSeconds: number; // フェードアウトにかかる時間[秒]
   public _weight: number; // モーションの重み
@@ -271,6 +311,7 @@ export abstract class ACubismMotion {
 
 // Namespace definition for compatibility.
 import * as $ from './acubismmotion';
+import { CubismIdHandle } from '../id/cubismid';
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Live2DCubismFramework {
   export const ACubismMotion = $.ACubismMotion;

src/motion/cubismexpressionmotion.ts

@@ -42,69 +42,7 @@ export class CubismExpressionMotion extends ACubismMotion {
     size: number
   ): CubismExpressionMotion {
     const expression: CubismExpressionMotion = new CubismExpressionMotion();
-
+    expression.parse(buffer, size);
-    const json: CubismJson = CubismJson.create(buffer, size);
-    const root: Value = json.getRoot();
-
-    expression.setFadeInTime(
-      root.getValueByString(ExpressionKeyFadeIn).toFloat(DefaultFadeTime)
-    ); // フェードイン
-    expression.setFadeOutTime(
-      root.getValueByString(ExpressionKeyFadeOut).toFloat(DefaultFadeTime)
-    ); // フェードアウト
-
-    // 各パラメータについて
-    const parameterCount = root
-      .getValueByString(ExpressionKeyParameters)
-      .getSize();
-    expression._parameters.prepareCapacity(parameterCount);
-
-    for (let i = 0; i < parameterCount; ++i) {
-      const param: Value = root
-        .getValueByString(ExpressionKeyParameters)
-        .getValueByIndex(i);
-      const parameterId: CubismIdHandle = CubismFramework.getIdManager().getId(
-        param.getValueByString(ExpressionKeyId).getRawString()
-      ); // パラメータID
-
-      const value: number = param
-        .getValueByString(ExpressionKeyValue)
-        .toFloat(); // 値
-
-      // 計算方法の設定
-      let blendType: ExpressionBlendType;
-
-      if (
-        param.getValueByString(ExpressionKeyBlend).isNull() ||
-        param.getValueByString(ExpressionKeyBlend).getString() == BlendValueAdd
-      ) {
-        blendType = ExpressionBlendType.ExpressionBlendType_Add;
-      } else if (
-        param.getValueByString(ExpressionKeyBlend).getString() ==
-        BlendValueMultiply
-      ) {
-        blendType = ExpressionBlendType.ExpressionBlendType_Multiply;
-      } else if (
-        param.getValueByString(ExpressionKeyBlend).getString() ==
-        BlendValueOverwrite
-      ) {
-        blendType = ExpressionBlendType.ExpressionBlendType_Overwrite;
-      } else {
-        // その他 仕様にない値を設定した時は加算モードにすることで復旧
-        blendType = ExpressionBlendType.ExpressionBlendType_Add;
-      }
-
-      // 設定オブジェクトを作成してリストに追加する
-      const item: ExpressionParameter = new ExpressionParameter();
-
-      item.parameterId = parameterId;
-      item.blendType = blendType;
-      item.value = value;
-
-      expression._parameters.pushBack(item);
-    }
-
-    CubismJson.delete(json); // JSONデータは不要になったら削除する
     return expression;
   }
 
@@ -156,10 +94,75 @@ export class CubismExpressionMotion extends ACubismMotion {
     }
   }
 
+  protected parse(buffer: ArrayBuffer, size: number) {
+    const json: CubismJson = CubismJson.create(buffer, size);
+    const root: Value = json.getRoot();
+
+    this.setFadeInTime(
+      root.getValueByString(ExpressionKeyFadeIn).toFloat(DefaultFadeTime)
+    ); // フェードイン
+    this.setFadeOutTime(
+      root.getValueByString(ExpressionKeyFadeOut).toFloat(DefaultFadeTime)
+    ); // フェードアウト
+
+    // 各パラメータについて
+    const parameterCount = root
+      .getValueByString(ExpressionKeyParameters)
+      .getSize();
+    this._parameters.prepareCapacity(parameterCount);
+
+    for (let i = 0; i < parameterCount; ++i) {
+      const param: Value = root
+        .getValueByString(ExpressionKeyParameters)
+        .getValueByIndex(i);
+      const parameterId: CubismIdHandle = CubismFramework.getIdManager().getId(
+        param.getValueByString(ExpressionKeyId).getRawString()
+      ); // パラメータID
+
+      const value: number = param
+        .getValueByString(ExpressionKeyValue)
+        .toFloat(); // 値
+
+      // 計算方法の設定
+      let blendType: ExpressionBlendType;
+
+      if (
+        param.getValueByString(ExpressionKeyBlend).isNull() ||
+        param.getValueByString(ExpressionKeyBlend).getString() == BlendValueAdd
+      ) {
+        blendType = ExpressionBlendType.ExpressionBlendType_Add;
+      } else if (
+        param.getValueByString(ExpressionKeyBlend).getString() ==
+        BlendValueMultiply
+      ) {
+        blendType = ExpressionBlendType.ExpressionBlendType_Multiply;
+      } else if (
+        param.getValueByString(ExpressionKeyBlend).getString() ==
+        BlendValueOverwrite
+      ) {
+        blendType = ExpressionBlendType.ExpressionBlendType_Overwrite;
+      } else {
+        // その他 仕様にない値を設定した時は加算モードにすることで復旧
+        blendType = ExpressionBlendType.ExpressionBlendType_Add;
+      }
+
+      // 設定オブジェクトを作成してリストに追加する
+      const item: ExpressionParameter = new ExpressionParameter();
+
+      item.parameterId = parameterId;
+      item.blendType = blendType;
+      item.value = value;
+
+      this._parameters.pushBack(item);
+    }
+
+    CubismJson.delete(json); // JSONデータは不要になったら削除する
+  }
+
   /**
    * コンストラクタ
    */
-  constructor() {
+  protected constructor() {
     super();
 
     this._parameters = new csmVector<ExpressionParameter>();

src/motion/cubismmotion.ts

@@ -35,6 +35,9 @@ const TargetNameModel = 'Model';
 const TargetNameParameter = 'Parameter';
 const TargetNamePartOpacity = 'PartOpacity';
 
+// Id
+const IdNameOpacity = 'Opacity';
+
 /**
  * Cubism SDK R2 以前のモーションを再現させるなら true 、アニメータのモーションを正しく再現するなら false 。
  */
@@ -284,6 +287,11 @@ export class CubismMotion extends ACubismMotion {
         CubismFramework.getIdManager().getId(EffectNameLipSync);
     }
 
+    if (this._modelCurveIdOpacity == null) {
+      this._modelCurveIdOpacity =
+        CubismFramework.getIdManager().getId(IdNameOpacity);
+    }
+
     let timeOffsetSeconds: number =
       userTimeSeconds - motionQueueEntry.getStartTime();
 
@@ -357,6 +365,9 @@ export class CubismMotion extends ACubismMotion {
         eyeBlinkValue = value;
       } else if (curves.at(c).id == this._modelCurveIdLipSync) {
         lipSyncValue = value;
+      } else if (curves.at(c).id == this._modelCurveIdOpacity) {
+        this._modelOpacity = value;
+        model.setModelOapcity(this.getModelOpacityValue());
       }
     }
 
@@ -696,8 +707,10 @@ export class CubismMotion extends ACubismMotion {
     this._motionData = null;
     this._modelCurveIdEyeBlink = null;
     this._modelCurveIdLipSync = null;
+    this._modelCurveIdOpacity = null;
     this._eyeBlinkParameterIds = null;
     this._lipSyncParameterIds = null;
+    this._modelOpacity = 1.0;
   }
 
   /**
@@ -971,6 +984,81 @@ export class CubismMotion extends ACubismMotion {
     return this._firedEventValues;
   }
 
+  /**
+   * 透明度のカーブが存在するかどうかを確認する
+   *
+   * @returns true  -> キーが存在する
+   *          false -> キーが存在しない
+   */
+  public isExistModelOpacity(): boolean {
+    for (let i = 0; i < this._motionData.curveCount; i++) {
+      const curve: CubismMotionCurve = this._motionData.curves.at(i);
+
+      if (curve.type != CubismMotionCurveTarget.CubismMotionCurveTarget_Model) {
+        continue;
+      }
+
+      if (curve.id.getString().s.localeCompare(IdNameOpacity) == 0) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * 透明度のカーブのインデックスを返す
+   *
+   * @returns success:透明度のカーブのインデックス
+   */
+  public getModelOpacityIndex(): number {
+    if (this.isExistModelOpacity()) {
+      for (let i = 0; i < this._motionData.curveCount; i++) {
+        const curve: CubismMotionCurve = this._motionData.curves.at(i);
+
+        if (
+          curve.type != CubismMotionCurveTarget.CubismMotionCurveTarget_Model
+        ) {
+          continue;
+        }
+
+        if (curve.id.getString().s.localeCompare(IdNameOpacity) == 0) {
+          return i;
+        }
+      }
+    }
+    return -1;
+  }
+
+  /**
+   * 透明度のIdを返す
+   *
+   * @param index モーションカーブのインデックス
+   * @returns success:透明度のカーブのインデックス
+   */
+  public getModelOpacityId(index: number): CubismIdHandle {
+    if (index != -1) {
+      const curve: CubismMotionCurve = this._motionData.curves.at(index);
+
+      if (curve.type == CubismMotionCurveTarget.CubismMotionCurveTarget_Model) {
+        if (curve.id.getString().s.localeCompare(IdNameOpacity) == 0) {
+          return CubismFramework.getIdManager().getId(curve.id.getString().s);
+        }
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * 現在時間の透明度の値を返す
+   *
+   * @returns success:モーションの当該時間におけるOpacityの値
+   */
+  public getModelOpacityValue(): number {
+    return this._modelOpacity;
+  }
+
   public _sourceFrameRate: number; // ロードしたファイルのFPS。記述が無ければデフォルト値15fpsとなる
   public _loopDurationSeconds: number; // mtnファイルで定義される一連のモーションの長さ
   public _isLoop: boolean; // ループするか?
@@ -984,6 +1072,9 @@ export class CubismMotion extends ACubismMotion {
 
   public _modelCurveIdEyeBlink: CubismIdHandle; // モデルが持つ自動まばたき用パラメータIDのハンドル。  モデルとモーションを対応付ける。
   public _modelCurveIdLipSync: CubismIdHandle; // モデルが持つリップシンク用パラメータIDのハンドル。  モデルとモーションを対応付ける。
+  public _modelCurveIdOpacity: CubismIdHandle; // モデルが持つ不透明度用パラメータIDのハンドル。  モデルとモーションを対応付ける。
+
+  public _modelOpacity: number; // モーションから取得した不透明度
 }
 
 // Namespace definition for compatibility.

src/physics/cubismphysics.ts

@@ -186,8 +186,8 @@ export class CubismPhysics {
 
       for (let j = 0; j < this._physicsRig.settings.at(i).outputCount; ++j) {
         // initialize
-        currentRigOutput.outputs[j] = 0.0;
+        currentRigOutput.outputs.set(j, 0.0);
-        previousRigOutput.outputs[j] = 0.0;
+        previousRigOutput.outputs.set(j, 0.0);
 
         this._physicsRig.outputs.at(outputIndex + j).destinationParameterIndex =
           -1;
@@ -395,8 +395,8 @@ export class CubismPhysics {
           this._options.gravity
         );
 
-        this._currentRigOutputs.at(settingIndex).outputs[i] = outputValue;
+        this._currentRigOutputs.at(settingIndex).outputs.set(i, outputValue);
-        this._previousRigOutputs.at(settingIndex).outputs[i] = outputValue;
+        this._previousRigOutputs.at(settingIndex).outputs.set(i, outputValue);
 
         const destinationParameterIndex: number =
           currentOutputs[i].destinationParameterIndex;
@@ -532,8 +532,12 @@ export class CubismPhysics {
           currentSetting.baseOutputIndex
         );
         for (let i = 0; i < currentSetting.outputCount; ++i) {
-          this._previousRigOutputs.at(settingIndex).outputs[i] =
+          this._previousRigOutputs
-            this._currentRigOutputs.at(settingIndex).outputs[i];
+            .at(settingIndex)
+            .outputs.set(
+              i,
+              this._currentRigOutputs.at(settingIndex).outputs.at(i)
+            );
         }
       }
 
@@ -645,7 +649,7 @@ export class CubismPhysics {
             this._options.gravity
           );
 
-          this._currentRigOutputs.at(settingIndex).outputs[i] = outputValue;
+          this._currentRigOutputs.at(settingIndex).outputs.set(i, outputValue);
 
           const destinationParameterIndex: number =
             currentOutputs[i].destinationParameterIndex;
@@ -732,8 +736,9 @@ export class CubismPhysics {
           outParameterValues,
           parameterMinimumValues[destinationParameterIndex],
           parameterMaximumValues[destinationParameterIndex],
-          this._previousRigOutputs.at(settingIndex).outputs[i] * (1 - weight) +
+          this._previousRigOutputs.at(settingIndex).outputs.at(i) *
-            this._currentRigOutputs.at(settingIndex).outputs[i] * weight,
+            (1 - weight) +
+            this._currentRigOutputs.at(settingIndex).outputs.at(i) * weight,
           currentOutputs[i]
         );
 

src/rendering/cubismrenderer.ts

@@ -288,11 +288,11 @@ export class CubismTextureColor {
   /**
    * コンストラクタ
    */
-  constructor() {
+  constructor(r = 1.0, g = 1.0, b = 1.0, a = 1.0) {
-    this.R = 1.0;
+    this.R = r;
-    this.G = 1.0;
+    this.G = g;
-    this.B = 1.0;
+    this.B = b;
-    this.A = 1.0;
+    this.A = a;
   }
 
   R: number; // 赤チャンネル

src/rendering/cubismrenderer_webgl.ts

@@ -478,7 +478,7 @@ export class CubismClippingManager_WebGL {
         index < this._clearedFrameBufferflags.getSize();
         index++
       ) {
-        this._clearedFrameBufferflags[index] = false;
+        this._clearedFrameBufferflags.set(index, false);
       }
 
       // 実際にマスクを生成する
@@ -626,12 +626,12 @@ export class CubismClippingManager_WebGL {
             );
 
             // マスクがクリアされていないなら処理する
-            if (!this._clearedFrameBufferflags[clipContext._bufferIndex]) {
+            if (!this._clearedFrameBufferflags.at(clipContext._bufferIndex)) {
               // マスクをクリアする
               // (仮仕様) 1が無効（描かれない）領域、0が有効（描かれる）領域。（シェーダーCd*Csで0に近い値をかけてマスクを作る。1をかけると何も起こらない）
               this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
               this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-              this._clearedFrameBufferflags[clipContext._bufferIndex] = true;
+              this._clearedFrameBufferflags.set(clipContext._bufferIndex, true);
             }
 
             // 今回専用の変換を適用して描く

src/utils/cubismjson.ts

@@ -214,6 +214,8 @@ export abstract class Value {
 
   public static errorValue: Value; // 一時的な返り値として返すエラー。 CubismFramework::Disposeするまではdeleteしない
   public static nullValue: Value; // 一時的な返り値として返すNULL。   CubismFramework::Disposeするまではdeleteしない
+
+  [key: string]: any; // 明示的に連想配列をany型で指定
 }
 
 /**

src/utils/cubismjsonextension.ts

@@ -25,11 +25,14 @@ export class CubismJsonExtension {
   static parseJsonObject(obj: Value, map: JsonMap) {
     Object.keys(obj).forEach((key) => {
       if (typeof obj[key] == 'boolean') {
-        map.put(key, new JsonBoolean(obj[key]));
+        const convValue = Boolean(obj[key]);
+        map.put(key, new JsonBoolean(convValue));
       } else if (typeof obj[key] == 'string') {
-        map.put(key, new JsonString(obj[key]));
+        const convValue = String(obj[key]);
+        map.put(key, new JsonString(convValue));
       } else if (typeof obj[key] == 'number') {
-        map.put(key, new JsonFloat(obj[key]));
+        const convValue = Number(obj[key]);
+        map.put(key, new JsonFloat(convValue));
       } else if (obj[key] instanceof Array) {
         map.put(key, CubismJsonExtension.parseJsonArray(obj[key]));
       } else if (obj[key] instanceof Object) {
@@ -52,12 +55,15 @@ export class CubismJsonExtension {
     Object.keys(obj).forEach((key) => {
       const convKey = Number(key);
       if (typeof convKey == 'number') {
-        if (typeof obj[convKey] == 'boolean') {
+        if (typeof obj[key] == 'boolean') {
-          arr.add(new JsonBoolean(obj[convKey]));
+          const convValue = Boolean(obj[key]);
-        } else if (typeof obj[convKey] == 'string') {
+          arr.add(new JsonBoolean(convValue));
-          arr.add(new JsonString(obj[convKey]));
+        } else if (typeof obj[key] == 'string') {
-        } else if (typeof obj[convKey] == 'number') {
+          const convValue = String(obj[key]);
-          arr.add(new JsonFloat(obj[convKey]));
+          arr.add(new JsonString(convValue));
+        } else if (typeof obj[key] == 'number') {
+          const convValue = Number(obj[key]);
+          arr.add(new JsonFloat(convValue));
         } else if (obj[key] instanceof Array) {
           arr.add(this.parseJsonArray(obj[key]));
         } else if (obj[key] instanceof Object) {
@@ -75,9 +81,10 @@ export class CubismJsonExtension {
       } else if (obj[key] == null) {
         arr.add(new JsonNullvalue());
       } else {
+        const convValue = Array(obj[key]);
         // 配列ともObjectとも判定できなかった場合でも処理する
-        for (let i = 0; i < obj[key].length; i++) {
+        for (let i = 0; i < convValue.length; i++) {
-          arr.add(obj[key][i]);
+          arr.add(convValue[i]);
         }
       }
     });

tsconfig.json

@@ -9,7 +9,9 @@
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "noImplicitAny": true,
+    "useUnknownInCatchVariables": true
   },
   "include": [
     "src/**/*.ts",