Update to Cubism 4 SDK for Web R2

.gitignore

@@ -1,11 +1,13 @@
 # Core directory files
-/Core/*
+/Core/**/.js
-!Please_copy_cubism_core_for_web
+/Core/**/.ts
 # Package files
 node_modules/
 # Build files
+build/
 dist/
 # Other files
+temp/
 .vs/
 .idea/
 *.iml

CHANGELOG.md

@@ -5,11 +5,18 @@ 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/).
 
 
-## [Unreleased]
+## [4-r.2] - 2021-03-09
+
+### Added
+
+* Add dynamic screen size and touch detection support.
 
 ### Fixed
+
+* Adjust size calculation for models displayed in a window and fix to use a view matrix.
 * Avoiding needless namespace syntax to simplify imports by [@cocor-au-lait](https://github.com/cocor-au-lait)
 
+
 ## [4-r.1] - 2020-01-30
 
 ### Added
@@ -67,7 +74,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 * Fix issue with reloading model images in WebKit.
 
 
-[Unreleased]: https://github.com/Live2D/CubismWebSamples/compare/4-r.1...HEAD
+[4-r.2]: https://github.com/Live2D/CubismWebSamples/compare/4-r.1...4-r.2
 [4-r.1]: https://github.com/Live2D/CubismWebSamples/compare/4-beta.2...4-r.1
 [4-beta.2]: https://github.com/Live2D/CubismWebSamples/compare/4-beta.1...4-beta.2
 [4-beta.1]: https://github.com/Live2D/CubismWebSamples/compare/e36ab2233a89de9225f64e5a02d521bc7235bd03...4-beta.1

Framework

@@ -1 +1 @@
-Subproject commit c80e158a66550c5538dca0caf4c542a4bd37022c
+Subproject commit 4b2130bca984e1a5c3714fbe1fae201bc4cff452

README.md

@@ -80,31 +80,32 @@ NOTE: デバック用の設定は、`.vscode/launch.json` に記述していま
 
 ### Node.js
 
-* 13.7.0
+* 15.11.0
-* 12.14.1
+* 14.16.0
-* 10.18.1
+* 12.21.0
+* 10.24.0
 
 
 ## 動作確認環境
 
 | プラットフォーム | ブラウザ | バージョン |
 | --- | --- | --- |
-| Android | Google Chrome | 79.0.3945.136 |
+| Android | Google Chrome | 88.0.4324.181 |
-| Android | Microsoft Edge | 42.0.4.3989 |
+| Android | Microsoft Edge | 46.01.4.5140 |
-| Android | Mozilla Firefox | 68.2.0 |
+| Android | Mozilla Firefox | 86.1.1 |
-| iOS / iPadOS | Google Chrome | 79.0.3945.73 |
+| iOS / iPadOS | Google Chrome | 87.0.4280.77 |
-| iOS / iPadOS | Microsoft Edge | 44.11.15 |
+| iOS / iPadOS | Microsoft Edge | 46.1.10 |
-| iOS / iPadOS | Mozilla Firefox | 21.0 |
+| iOS / iPadOS | Mozilla Firefox | 32.0 |
-| iOS / iPadOS | Safari | 13.0.4 |
+| iOS / iPadOS | Safari | 604.1 |
-| Linux | Google Chrome | 79.0.3945.130 |
+| Linux | Google Chrome | 89.0.4389.72 |
-| Linux | Mozilla Firefox | 72.0.1 |
+| Linux | Mozilla Firefox | 86.0 |
-| macOS | Google Chrome | 79.0.3945.130 |
+| macOS | Google Chrome | 88.0.4324.192 |
-| macOS | Microsoft Edge | 79.0.309.71 |
+| macOS | Microsoft Edge | 88.0.705.81 |
-| macOS | Mozilla Firefox | 72.0.2 |
+| macOS | Mozilla Firefox | 86.0 |
-| macOS | Safari | 13.0.4 |
+| macOS | Safari | 14.0.2 |
-| Windows | Google Chrome | 79.0.3945.130 |
+| Windows | Google Chrome | 88.0.4324.190 |
-| Windows | Internet Explorer 11 | 11.592.18362.0 |
+| Windows | Internet Explorer 11 | 20H2(19042.685) |
-| Windows | Microsoft Edge | 79.0.309.71 |
+| Windows | Microsoft Edge | 88.0.705.74 |
-| Windows | Mozilla Firefox | 72.0.2 |
+| Windows | Mozilla Firefox | 86.0 |
 
 Note: 動作確認時のサーバの起動は `./Samples/TypeScript/Demo/package.json` の `serve` スクリプトを使用して行っています。

Samples/TypeScript/Demo/.eslintrc.yml

@@ -4,7 +4,7 @@ extends:
   - plugin:@typescript-eslint/recommended
   - plugin:@typescript-eslint/recommended-requiring-type-checking
   - plugin:prettier/recommended
-  - prettier/@typescript-eslint
+  - prettier
 plugins:
   - '@typescript-eslint'
 parser: '@typescript-eslint/parser'
@@ -16,7 +16,12 @@ rules:
   prettier/prettier:
     - error
     - singleQuote: true
-  '@typescript-eslint/camelcase': warn
+      trailingComma: none
+      arrowParens: avoid
+  'camelcase': warn
   '@typescript-eslint/no-use-before-define': off
-  '@typescript-eslint/ban-ts-ignore': off
+  '@typescript-eslint/ban-ts-comment': off
   '@typescript-eslint/unbound-method': off
+  '@typescript-eslint/no-unsafe-assignment': off
+  '@typescript-eslint/no-unsafe-return': off
+  '@typescript-eslint/no-floating-promises': off

Samples/TypeScript/Demo/index.html

@@ -7,6 +7,7 @@
   <style>
     html, body {
         margin: 0;
+        overflow: hidden;
     }
   </style>
   <!-- Pollyfill script -->

Samples/TypeScript/Demo/package.json

@@ -1,9 +1,9 @@
 {
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server --progress",
+    "start": "webpack-cli serve --mode development",
-    "build": "webpack -d --hide-modules",
+    "build": "webpack --mode development",
-    "build:prod": "webpack -p --hide-modules",
+    "build:prod": "webpack --mode production",
     "test": "tsc --noEmit",
     "lint": "eslint src --ext .ts",
     "lint:fix": "eslint src --ext .ts --fix",
@@ -11,21 +11,21 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^2.18.0",
+    "@typescript-eslint/parser": "^4.16.1",
-    "eslint": "^6.8.0",
+    "eslint": "^7.21.0",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^3.3.1",
-    "prettier": "^1.19.1",
+    "prettier": "^2.2.1",
-    "rimraf": "^3.0.1",
+    "rimraf": "^3.0.2",
-    "serve": "^11.3.0",
+    "serve": "^11.3.2",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "^8.0.17",
-    "typescript": "^3.7.5",
+    "typescript": "^4.2.2",
-    "webpack": "^4.41.5",
+    "webpack": "^5.24.3",
-    "webpack-cli": "^3.3.10",
+    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.10.1"
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "whatwg-fetch": "^3.0.0"
+    "whatwg-fetch": "^3.6.2"
   }
 }

Samples/TypeScript/Demo/src/lappdefine.ts

@@ -10,12 +10,19 @@ import { LogLevel } from '@framework/live2dcubismframework';
 /**
  * Sample Appで使用する定数
  */
+
+// Canvas width and height pixel values, or dynamic screen size ('auto').
+export const CanvasSize: { width: number; height: number } | 'auto' = 'auto';
+
 // 画面
+export const ViewScale = 1.0;
 export const ViewMaxScale = 2.0;
 export const ViewMinScale = 0.8;
 
 export const ViewLogicalLeft = -1.0;
 export const ViewLogicalRight = 1.0;
+export const ViewLogicalBottom = -1.0;
+export const ViewLogicalTop = 1.0;
 
 export const ViewLogicalMaxLeft = -2.0;
 export const ViewLogicalMaxRight = 2.0;

Samples/TypeScript/Demo/src/lappdelegate.ts

@@ -54,8 +54,12 @@ export class LAppDelegate {
   public initialize(): boolean {
     // キャンバスの作成
     canvas = document.createElement('canvas');
-    canvas.width = LAppDefine.RenderTargetWidth;
+    if (LAppDefine.CanvasSize === 'auto') {
-    canvas.height = LAppDefine.RenderTargetHeight;
+      this._resizeCanvas();
+    } else {
+      canvas.width = LAppDefine.CanvasSize.width;
+      canvas.height = LAppDefine.CanvasSize.height;
+    }
 
     // glコンテキストを初期化
     // @ts-ignore
@@ -107,6 +111,15 @@ export class LAppDelegate {
     return true;
   }
 
+  /**
+   * Resize canvas and re-initialize view.
+   */
+  public onResize(): void {
+    this._resizeCanvas();
+    this._view.initialize();
+    this._view.initializeSprite();
+  }
+
   /**
    * 解放する。
    */
@@ -272,6 +285,14 @@ export class LAppDelegate {
     this._view.initializeSprite();
   }
 
+  /**
+   * Resize the canvas to fill the screen.
+   */
+  private _resizeCanvas(): void {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+
   _cubismOption: Option; // Cubism SDK Option
   _view: LAppView; // View情報
   _captured: boolean; // クリックしているか

Samples/TypeScript/Demo/src/lapplive2dmanager.ts

@@ -131,21 +131,28 @@ export class LAppLive2DManager {
    * モデルの更新処理及び描画処理を行う
    */
   public onUpdate(): void {
-    let projection: CubismMatrix44 = new CubismMatrix44();
-
     const { width, height } = canvas;
-    projection.scale(1.0, width / height);
 
-    if (this._viewMatrix != null) {
+    const projection: CubismMatrix44 = new CubismMatrix44();
-      projection.multiplyByMatrix(this._viewMatrix);
-    }
-
-    const saveProjection: CubismMatrix44 = projection.clone();
     const modelCount: number = this._models.getSize();
 
     for (let i = 0; i < modelCount; ++i) {
       const model: LAppModel = this.getModel(i);
-      projection = saveProjection.clone();
+
+      if (model.getModel()) {
+        if (model.getModel().getCanvasWidth() > 1.0 && width < height) {
+          // 横に長いモデルを縦長ウィンドウに表示する際モデルの横サイズでscaleを算出する
+          model.getModelMatrix().setWidth(2.0);
+          projection.scale(1.0, width / height);
+        } else {
+          projection.scale(height / width, 1.0);
+        }
+
+        // 必要があればここで乗算
+        if (this._viewMatrix != null) {
+          projection.multiplyByMatrix(this._viewMatrix);
+        }
+      }
 
       model.update();
       model.draw(projection); // 参照渡しなのでprojectionは変質する。
@@ -184,6 +191,12 @@ export class LAppLive2DManager {
     this._models.at(0).loadAssets(modelPath, modelJsonName);
   }
 
+  public setViewMatrix(m: CubismMatrix44) {
+    for (let i = 0; i < 16; i++) {
+      this._viewMatrix.getArray()[i] = m.getArray()[i];
+    }
+  }
+
   /**
    * コンストラクタ
    */

Samples/TypeScript/Demo/src/lappview.ts

@@ -44,16 +44,23 @@ export class LAppView {
   public initialize(): void {
     const { width, height } = canvas;
 
-    const ratio: number = height / width;
+    const ratio: number = width / height;
-    const left: number = LAppDefine.ViewLogicalLeft;
+    const left: number = -ratio;
-    const right: number = LAppDefine.ViewLogicalRight;
+    const right: number = ratio;
-    const bottom: number = -ratio;
+    const bottom: number = LAppDefine.ViewLogicalLeft;
-    const top: number = ratio;
+    const top: number = LAppDefine.ViewLogicalRight;
 
     this._viewMatrix.setScreenRect(left, right, bottom, top); // デバイスに対応する画面の範囲。 Xの左端、Xの右端、Yの下端、Yの上端
+    this._viewMatrix.scale(LAppDefine.ViewScale, LAppDefine.ViewScale);
 
-    const screenW: number = Math.abs(left - right);
+    this._deviceToScreen.loadIdentity();
-    this._deviceToScreen.scaleRelative(screenW / width, -screenW / width);
+    if (width > height) {
+      const screenW: number = Math.abs(right - left);
+      this._deviceToScreen.scaleRelative(screenW / width, -screenW / width);
+    } else {
+      const screenH: number = Math.abs(top - bottom);
+      this._deviceToScreen.scaleRelative(screenH / height, -screenH / height);
+    }
     this._deviceToScreen.translateRelative(-width * 0.5, -height * 0.5);
 
     // 表示範囲の設定
@@ -104,6 +111,8 @@ export class LAppView {
 
     const live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
 
+    live2DManager.setViewMatrix(this._viewMatrix);
+
     live2DManager.onUpdate();
   }
 

Samples/TypeScript/Demo/src/main.ts

@@ -6,6 +6,7 @@
  */
 
 import { LAppDelegate } from './lappdelegate';
+import * as LAppDefine from './lappdefine';
 
 /**
  * ブラウザロード後の処理
@@ -23,3 +24,12 @@ window.onload = (): void => {
  * 終了時の処理
  */
 window.onbeforeunload = (): void => LAppDelegate.releaseInstance();
+
+/**
+ * Process when changing screen size.
+ */
+window.onresize = () => {
+  if (LAppDefine.CanvasSize === 'auto') {
+    LAppDelegate.getInstance().onResize();
+  }
+};

Samples/TypeScript/Demo/webpack.config.js

@@ -2,6 +2,8 @@
 var path = require('path');
 
 module.exports = {
+  mode: 'production',
+  target: ['web', 'es5'],
   entry: './src/main.ts',
   output: {
     path: path.resolve(__dirname, 'dist'),

Samples/TypeScript/README.md

@@ -7,8 +7,8 @@ TypeScript で実装したアプリケーションのサンプル実装です。
 
 | パッケージ | バージョン |
 | --- | --- |
-| TypeScript | 3.7.5 |
+| TypeScript | 4.2.2 |
-| Webpack | 4.41.5 |
+| Webpack | 5.24.3 |
 
 その他のパッケージに関しては、各プロジェクトの `package.json` を確認してください。
 また、その他の開発環境・動作確認環境はトップディレクトリにある [README.md](/README.md) を参照してください。