添加了几个api功能

This commit is contained in:
chendishen 2020-08-24 20:12:59 +08:00
parent a08d3e4d36
commit 673e5b1616
16 changed files with 1412 additions and 61 deletions

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
{"h":"1f936269d911d962023c","c":{"main":true}}
{"h":"b2961935fe729c0ed374","c":{"main":true}}

View File

@ -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;

View File

@ -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
}
}

View File

@ -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;

View File

@ -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);
};
}

View File

@ -12,6 +12,7 @@ import ReactLive2d from '../../src/index.js';
bottom={'10px'}
right={'10px'}
ModelList={['Haru']}
TouchBody={['啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊你要干嘛','哼','坏人']}
/>
</div>
)

View File

@ -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",

View File

@ -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",

View File

@ -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>
)
}

View File

@ -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
}
}

View File

@ -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;

View File

@ -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);
};
}

View File

@ -56,6 +56,13 @@ module.exports = {
use: {
loader: "babel-loader"
}
},
{
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
exclude: /node_modules/,
use: {
loader: "url-loader"
}
}
]
},