添加了几个api功能

2024-10-30 17:07:35 +08:00 · 2020-08-24 20:12:59 +08:00 · 2020-08-24 20:12:59 +08:00 · 673e5b1616
commit 673e5b1616
parent a08d3e4d36
16 changed files with 1412 additions and 61 deletions
--- a/README.md
+++ b/README.md
@ -5,31 +5,45 @@
 ![npm](https://img.shields.io/npm/v/react-live2d)


+[示例地址](http://test2.supmiao.com)
+
 服务器配置较差，网站首次打开，看板娘需要加载大量模型和动作，请耐心等候
-[示例地址](test2.supmiao.com)


 ## 目录说明

+```
+·
+├─ Core                         # Cubism Core 核心库

-├─ Core                         # Cubism Core 核心库
-
-└─ Samples                      # 示例项目
+└─ Samples                      

    └─ TypeScript

-      └─ Demo                   # 直接在此处npm install后 npm run build:prod得到打包的bundle.js，按照index.html的引入方式引入到项目即可
+      └─ Demo                   # 项目目录

-         └─ Resources           # 这里面放的是live2D的模型及动作导出的文件，需要添加自定义模型，请在此处添加，注意文件夹名字即为模型名字
+         └─ Resources           # live2D的模型及动作导出的文件

-         └─ Framework           # 包含渲染和动画功能等的源代码的目录
+         └─ Framework           # 包含渲染和动画功能等的源代码

          └─ src                 # 核心代码
+```
+
+## 🖥 Environment Support
+|  | Windows | macOS | Linux | Android | iOS |
+| ----- | :-----: | :-----: | :-----: | :-----: | :-----: |
+| Google Chrome | ✔ | ✔ | ✔ | ✔ | ✔ |
+| Firefox | ✔ | ✔ | ✔ | ✔ | ✔ |
+| Safari | - | ✔ | - | - | ✔ |
+| Microsoft Edge | ✔ | ✔ | - | ✔ | ✔ |
+| Internet Explorer 11 | ✔ | - | - | - | - |

 ## 📦 Install

-为了不增加npm包的负担，基础包还是直接使用script引入，在你个人的react项目的->public->index.html先插入
+为了不增加npm包的负担，基础包还是直接使用script引入，在你个人的react项目的->public->index.html先插入，Core里可获得该min.js
+```
 <script src = "http://publicjs.supmiao.com/live2dcubismcore.min.js"></script>
+```

 ```bash
 npm install react-live2d
@ -53,16 +67,20 @@ const App = () => (

 比如你想要给页面加入模型Hiyori，那就在你的react项目中的public目录下，将Hiyori放入Resources资源文件夹,如

-└─ public                     
+```
+·
+└─ public                     

    └─ Resources

       └─ Hiyori
+```
+更多模型，请动手在github搜索'live2d 模型'即可，模型大多有版权，请慎勿用于商业~

 api 文档 （待完善，如有需要功能欢迎提[issue](https://github.com/chendishen/Live2DBase/issues)）

 | 成员 | 说明 | 类型 | 默认值 |
-| ----- | ----- | ----- | ----- |
+| :-----: | ----- | ----- | ----- |
 | width | 盒子宽度 | Number | 300 |
 | height | 盒子高度 | Number | 400 |
 | top | position：relative的top值 | String | '' |
@ -70,5 +88,8 @@ api 文档 （待完善，如有需要功能欢迎提[issue](https://github.com/
 | bottom | position：relative的bottom值 | String | '0' |
 | left | position：relative的left值 | String | '' |
 | ModelList | 模型列表，暂时只展示数组的第一个模型 | Array<String> | ['Hiyori'] |
+| TouchBody | 点击身体时聊天框随机出现数组的值 | Array<String> | ['啊呀，你的手在摸哪里嘛~','哼，坏人'] |
+| TouchHead | 点击头部时聊天框随机出现数组的值 | Array<String> | ['讨厌~不要掐人家的脸嘛~','希望明天也能感受到你的触摸呢'] |
+| color | 聊天框背景颜色 | String | '#C8E6FE' |


--- a/Samples/TypeScript/Demo/dist/bundle.js
+++ b/Samples/TypeScript/Demo/dist/bundle.js
--- a/Samples/TypeScript/Demo/dist/hot/hot-update.js
+++ b/Samples/TypeScript/Demo/dist/hot/hot-update.js
--- a/Samples/TypeScript/Demo/dist/hot/hot-update.json
+++ b/Samples/TypeScript/Demo/dist/hot/hot-update.json
@ -1 +1 @@
-{"h":"1f936269d911d962023c","c":{"main":true}}
+{"h":"b2961935fe729c0ed374","c":{"main":true}}
--- a/Samples/TypeScript/Demo/dist/index.js
+++ b/Samples/TypeScript/Demo/dist/index.js
@ -9,7 +9,7 @@ exports["default"] = void 0;

 var _lappdelegate = require("./lappdelegate");

-var _lappdefine = require("./lappdefine");
+var LAppDefine = _interopRequireWildcard(require("./lappdefine"));

 var _react = _interopRequireWildcard(require("react"));

@ -17,17 +17,49 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return

 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function ReactLive2d(props) {
+  // 好看颜色列表
+  // green: '#B4DEAE',
+  // DeepBlue: '#5B8DBE',
+  // LightBlue: '#C8E6FE',
+  // pink: '#F9B8BE'
+  // 容器样式
+  var containerStyle = {
+    position: 'fixed',
+    top: props.top ? props.top : '',
+    right: props.right ? props.right : '0',
+    bottom: props.bottom ? props.bottom : '0',
+    left: props.left ? props.left : ''
+  }; // canvas样式
+
  var canvasStyle = {
    position: 'relative',
    top: props.top ? props.top : '',
    right: props.right ? props.right : '0',
    bottom: props.bottom ? props.bottom : '0',
    left: props.left ? props.left : ''
-  };
+  }; // 对话框样式
+
+  var printStyle = _defineProperty({
+    position: 'absolute',
+    width: props.width > 300 ? props.width / 2 : '150px',
+    left: props.width > 300 ? (props.width - props.width / 2) / 2 : (props.width - 150) / 2,
+    top: '0',
+    minHeight: '20px',
+    display: 'block',
+    borderRadius: '5px',
+    border: '1px dashed #ccc',
+    padding: '5px',
+    background: props.color ? props.color : '#C8E6FE'
+  }, "display", 'none');
+
  (0, _react.useEffect)(function () {
    console.log('props', props);
-    props.ModelList ? _lappdefine.lappdefineSet.setModelDir(props.ModelList) : _lappdefine.lappdefineSet.setModelDir([]);
+    props.ModelList ? LAppDefine.lappdefineSet.setModelDir(props.ModelList) : LAppDefine.lappdefineSet.setModelDir([]);
+    props.TouchBody ? LAppDefine.lappdefineSet.setHitBody(props.TouchBody) : LAppDefine.lappdefineSet.setHitBody([]);
+    props.TouchHead ? LAppDefine.lappdefineSet.setHitHead(props.TouchHead) : LAppDefine.lappdefineSet.setHitHead([]);

    if (_lappdelegate.LAppDelegate.getInstance().initialize() == false) {
      return;
@ -39,13 +71,21 @@ function ReactLive2d(props) {
      return _lappdelegate.LAppDelegate.releaseInstance();
    };
  }, []);
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("canvas", {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: containerStyle,
+    width: props.width ? props.width : '300',
+    height: props.height ? props.height : '500',
+    id: "live2d-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    id: "live2d-print",
+    style: printStyle
+  }), /*#__PURE__*/_react["default"].createElement("canvas", {
    id: "live2d",
    style: canvasStyle,
    width: props.width ? props.width : '300',
-    height: props.height ? props.height : '400',
+    height: props.height ? props.height : '500',
    className: "live2d"
-  }));
+  })));
 }

 var _default = ReactLive2d;
--- a/Samples/TypeScript/Demo/dist/lappdefine.ts
+++ b/Samples/TypeScript/Demo/dist/lappdefine.ts
@ -49,6 +49,10 @@ export const MotionGroupTapBody = 'TapBody'; // 体をタップしたとき
 export const HitAreaNameHead = 'Head';
 export const HitAreaNameBody = 'Body';

+// 对话内容
+export let HitBodyList: string[] = ['啊呀，你的手在摸哪里嘛~','哼，坏人'];
+export let HitHeadList: string[] = ['讨厌~不要掐人家的脸嘛~','希望明天也能感受到你的触摸呢'];
+
 // モーションの優先度定数
 export const PriorityNone = 0;
 export const PriorityIdle = 1;
@ -71,4 +75,10 @@ export class lappdefineSet {
    public static setModelDir(modelDir:Array<string>): void {
        ModelDir = modelDir.length>0 ? modelDir : ModelDir
    }
+    public static setHitBody(hitBodyList:Array<string>): void {
+        HitBodyList = hitBodyList.length>0 ? hitBodyList : HitBodyList
+    }
+    public static setHitHead(hitHeadList:Array<string>): void {
+        HitHeadList = hitHeadList.length>0 ? hitHeadList : HitHeadList
+    }
 }
--- a/Samples/TypeScript/Demo/dist/lappdelegate.ts
+++ b/Samples/TypeScript/Demo/dist/lappdelegate.ts
@ -95,6 +95,7 @@ export class LAppDelegate {
    //监听cavas的鼠标点击事件,如果你希望在鼠标点击页面元素后
    //看板娘不在看向鼠标，直到你再次移动鼠标，把监听事件对象从canvas换成document
    canvas.addEventListener("click", function (e) {
+      console.log(e)
      if (!LAppDelegate.getInstance()._view) {
        LAppPal.printMessage("view notfound");
        return;
--- a/Samples/TypeScript/Demo/dist/lapplive2dmanager.ts
+++ b/Samples/TypeScript/Demo/dist/lapplive2dmanager.ts
@ -19,6 +19,8 @@ import * as LAppDefine from './lappdefine';

 export let s_instance: LAppLive2DManager = null;

+let timer = null;
+
 /**
 * サンプルアプリケーションにおいてCubismModelを管理するクラス
 * モデル生成と破棄、タップイベントの処理、モデル切り替えを行う。
@ -112,6 +114,7 @@ export class LAppLive2DManager {
          LAppPal.printMessage(
            `[APP]hit area: [${LAppDefine.HitAreaNameHead}]`
          );
+          this.talkPrint(LAppDefine.HitHeadList[Math.floor(Math.random()*LAppDefine.HitHeadList.length)])
        }
        this._models.at(i).setRandomExpression();
      } else if (this._models.at(i).hitTest(LAppDefine.HitAreaNameBody, x, y)) {
@ -119,6 +122,7 @@ export class LAppLive2DManager {
          LAppPal.printMessage(
            `[APP]hit area: [${LAppDefine.HitAreaNameBody}]`
          );
+          this.talkPrint(LAppDefine.HitBodyList[Math.floor(Math.random()*LAppDefine.HitBodyList.length)])
        }
        this._models
          .at(i)
@ -131,6 +135,18 @@ export class LAppLive2DManager {
    }
  }

+  // 页面属性变化
+  public talkPrint(print:string): void {
+    clearTimeout(timer);
+    let printNow = document.getElementById('live2d-print');
+    printNow.innerHTML = print;
+    printNow.style.display = 'block';
+    timer = setTimeout(() => {
+      printNow.innerHTML = '';
+      printNow.style.display = 'none';
+    }, 2000);
+  }
+
  /**
   * 画面を更新するときの処理
   * モデルの更新処理及び描画処理を行う
@ -183,8 +199,6 @@ export class LAppLive2DManager {
    // ディレクトリ名とmodel3.jsonの名前を一致させておくこと。
    const model: string = LAppDefine.ModelDir[index];
    const modelPath: string = LAppDefine.ResourcesPath + model + '/';
-    console.log("LAppDefine.ResourcesPath",LAppDefine.ResourcesPath)
-    console.log("model",model)
    let modelJsonName: string = LAppDefine.ModelDir[index];
    modelJsonName += '.model3.json';

@ -209,6 +223,5 @@ export class LAppLive2DManager {
  // モーション再生終了のコールバック関数
  _finishedMotion = (self: ACubismMotion): void => {
    LAppPal.printMessage('Motion Finished:');
-    console.log(self);
  };
 }
--- a/Samples/TypeScript/Demo/example/src/App.js
+++ b/Samples/TypeScript/Demo/example/src/App.js
@ -12,6 +12,7 @@ import ReactLive2d from '../../src/index.js';
                bottom={'10px'}
                right={'10px'}
                ModelList={['Haru']}
+                TouchBody={['啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊你要干嘛','哼','坏人']}
             />
        </div>
    )
--- a/Samples/TypeScript/Demo/package-lock.json
+++ b/Samples/TypeScript/Demo/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "react-live2d",
-  "version": "1.0.7",
+  "version": "1.0.11",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -8980,6 +8980,95 @@
        }
      }
    },
+    "url-loader": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.0.tgz",
+      "integrity": "sha512-IzgAAIC8wRrg6NYkFIJY09vtktQcsvU8V6HhtQj9PTefbYImzLB1hufqo4m+RyM5N3mLx5BqJKccgxJS+W3kqw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.26",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.4",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
+          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "mime-db": {
+          "version": "1.44.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+          "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.27",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+          "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+          "dev": true,
+          "requires": {
+            "mime-db": "1.44.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
+      }
+    },
    "url-parse": {
      "version": "1.4.7",
      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
--- a/Samples/TypeScript/Demo/package.json
+++ b/Samples/TypeScript/Demo/package.json
@ -13,7 +13,7 @@
  },
  "main": "dist/bundle.js",
  "name": "react-live2d",
-  "version": "1.0.11",
+  "version": "1.0.12",
  "description": "live2D 看板娘",
  "author": {
    "name": "DS",
@ -50,6 +50,7 @@
    "serve": "^11.3.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
+    "url-loader": "^4.1.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
--- a/Samples/TypeScript/Demo/src/index.js
+++ b/Samples/TypeScript/Demo/src/index.js
@ -1,8 +1,23 @@
 import { LAppDelegate } from './lappdelegate';
-import { lappdefineSet } from './lappdefine';
+import * as LAppDefine from './lappdefine';
 import React, { useState, useEffect } from 'react';

 function ReactLive2d(props) {
+    // 好看颜色列表
+    // green: '#B4DEAE',
+    // DeepBlue: '#5B8DBE',
+    // LightBlue: '#C8E6FE',
+    // pink: '#F9B8BE'
+
+    // 容器样式
+    let containerStyle = {
+        position : 'fixed',
+        top: props.top ? props.top : '',
+        right: props.right ? props.right : '0',
+        bottom: props.bottom ? props.bottom : '0',
+        left: props.left ? props.left : ''
+    }
+    // canvas样式
    let canvasStyle = {
        position : 'relative',
        top: props.top ? props.top : '',
@ -10,11 +25,27 @@ function ReactLive2d(props) {
        bottom: props.bottom ? props.bottom : '0',
        left: props.left ? props.left : ''
    }
+    // 对话框样式
+    let printStyle = {
+        position: 'absolute',
+        width: props.width > 300 ? props.width/2 : '150px',
+        left: props.width > 300 ? (props.width - props.width/2)/2 : (props.width-150)/2,
+        top: '0',
+        minHeight: '20px',
+        display: 'block',
+        borderRadius: '5px',
+        border: '1px dashed #ccc',
+        padding: '5px',
+        background: props.color ? props.color : '#C8E6FE',
+        display: 'none',
+    }

    useEffect(() => {
        console.log('props', props)
        
-        props.ModelList ? lappdefineSet.setModelDir(props.ModelList) : lappdefineSet.setModelDir([])
+        props.ModelList ? LAppDefine.lappdefineSet.setModelDir(props.ModelList) : LAppDefine.lappdefineSet.setModelDir([])
+        props.TouchBody ? LAppDefine.lappdefineSet.setHitBody(props.TouchBody) : LAppDefine.lappdefineSet.setHitBody([])
+        props.TouchHead ? LAppDefine.lappdefineSet.setHitHead(props.TouchHead) : LAppDefine.lappdefineSet.setHitHead([])

        
        if (LAppDelegate.getInstance().initialize() == false) {
@ -27,16 +58,26 @@ function ReactLive2d(props) {
        window.onbeforeunload = () => LAppDelegate.releaseInstance();

    }, []);
+
    return (
        <div>
+            <div
+             style={containerStyle}
+             width={props.width ? props.width : '300'}
+             height={props.height ? props.height : '500'}
+             id="live2d-container">
+                <div id="live2d-print"
+                    style={printStyle}
+                ></div>
                <canvas
                    id="live2d"
                    style={canvasStyle}
                    width={props.width ? props.width : '300'}
-                height={props.height ? props.height : '400'}
+                    height={props.height ? props.height : '500'}
                    className="live2d"
                ></canvas>
            </div>
+        </div>
    )
 }

--- a/Samples/TypeScript/Demo/src/lappdefine.ts
+++ b/Samples/TypeScript/Demo/src/lappdefine.ts
@ -49,6 +49,10 @@ export const MotionGroupTapBody = 'TapBody'; // 体をタップしたとき
 export const HitAreaNameHead = 'Head';
 export const HitAreaNameBody = 'Body';

+// 对话内容
+export let HitBodyList: string[] = ['啊呀，你的手在摸哪里嘛~','哼，坏人'];
+export let HitHeadList: string[] = ['讨厌~不要掐人家的脸嘛~','希望明天也能感受到你的触摸呢'];
+
 // モーションの優先度定数
 export const PriorityNone = 0;
 export const PriorityIdle = 1;
@ -71,4 +75,10 @@ export class lappdefineSet {
    public static setModelDir(modelDir:Array<string>): void {
        ModelDir = modelDir.length>0 ? modelDir : ModelDir
    }
+    public static setHitBody(hitBodyList:Array<string>): void {
+        HitBodyList = hitBodyList.length>0 ? hitBodyList : HitBodyList
+    }
+    public static setHitHead(hitHeadList:Array<string>): void {
+        HitHeadList = hitHeadList.length>0 ? hitHeadList : HitHeadList
+    }
 }
--- a/Samples/TypeScript/Demo/src/lappdelegate.ts
+++ b/Samples/TypeScript/Demo/src/lappdelegate.ts
@ -95,6 +95,7 @@ export class LAppDelegate {
    //监听cavas的鼠标点击事件,如果你希望在鼠标点击页面元素后
    //看板娘不在看向鼠标，直到你再次移动鼠标，把监听事件对象从canvas换成document
    canvas.addEventListener("click", function (e) {
+      console.log(e)
      if (!LAppDelegate.getInstance()._view) {
        LAppPal.printMessage("view notfound");
        return;
--- a/Samples/TypeScript/Demo/src/lapplive2dmanager.ts
+++ b/Samples/TypeScript/Demo/src/lapplive2dmanager.ts
@ -19,6 +19,8 @@ import * as LAppDefine from './lappdefine';

 export let s_instance: LAppLive2DManager = null;

+let timer = null;
+
 /**
 * サンプルアプリケーションにおいてCubismModelを管理するクラス
 * モデル生成と破棄、タップイベントの処理、モデル切り替えを行う。
@ -112,6 +114,7 @@ export class LAppLive2DManager {
          LAppPal.printMessage(
            `[APP]hit area: [${LAppDefine.HitAreaNameHead}]`
          );
+          this.talkPrint(LAppDefine.HitHeadList[Math.floor(Math.random()*LAppDefine.HitHeadList.length)])
        }
        this._models.at(i).setRandomExpression();
      } else if (this._models.at(i).hitTest(LAppDefine.HitAreaNameBody, x, y)) {
@ -119,6 +122,7 @@ export class LAppLive2DManager {
          LAppPal.printMessage(
            `[APP]hit area: [${LAppDefine.HitAreaNameBody}]`
          );
+          this.talkPrint(LAppDefine.HitBodyList[Math.floor(Math.random()*LAppDefine.HitBodyList.length)])
        }
        this._models
          .at(i)
@ -131,6 +135,18 @@ export class LAppLive2DManager {
    }
  }

+  // 页面属性变化
+  public talkPrint(print:string): void {
+    clearTimeout(timer);
+    let printNow = document.getElementById('live2d-print');
+    printNow.innerHTML = print;
+    printNow.style.display = 'block';
+    timer = setTimeout(() => {
+      printNow.innerHTML = '';
+      printNow.style.display = 'none';
+    }, 2000);
+  }
+
  /**
   * 画面を更新するときの処理
   * モデルの更新処理及び描画処理を行う
@ -183,8 +199,6 @@ export class LAppLive2DManager {
    // ディレクトリ名とmodel3.jsonの名前を一致させておくこと。
    const model: string = LAppDefine.ModelDir[index];
    const modelPath: string = LAppDefine.ResourcesPath + model + '/';
-    console.log("LAppDefine.ResourcesPath",LAppDefine.ResourcesPath)
-    console.log("model",model)
    let modelJsonName: string = LAppDefine.ModelDir[index];
    modelJsonName += '.model3.json';

@ -209,6 +223,5 @@ export class LAppLive2DManager {
  // モーション再生終了のコールバック関数
  _finishedMotion = (self: ACubismMotion): void => {
    LAppPal.printMessage('Motion Finished:');
-    console.log(self);
  };
 }
--- a/Samples/TypeScript/Demo/webpack.config.js
+++ b/Samples/TypeScript/Demo/webpack.config.js
@ -56,6 +56,13 @@ module.exports = {
        use: {
            loader: "babel-loader"
        }
+      },
+      {
+        test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        exclude: /node_modules/,
+        use: {
+            loader: "url-loader"
+        }
      }
    ]
  },