xiazeyu/live2d-widget.js

Live2D on webpages with out-of-the-box experience.

Hi there 👋

Platform&Tools

Programming Languages

Top Languages

Github Stats

live2d-widget.js's Issues

feat: high res and frame rate support

• L2DTargetPoint.FRAME_RATE = 60; in Live2DFramework.js
• use 60% instead of xxxpx

移动端的scale参数不起作用

Issue

参数配置如下：

<script src="/assets/live2dw/lib/L2Dwidget.min.js"></script>
    <script>L2Dwidget.init({
        "pluginRootPath": "live2dw/",
        "pluginJsPath": "lib/",
        "pluginModelPath": "assets/",
        "tagMode": false,
        "debug": false,
        "model": {"jsonPath": "/assets/live2dw/assets/unitychan.model.json"},
        "display": {"position": "right", "width": 120, "height": 180},
        "mobile": {"show": true, "scale": 0.02},
        "log": false
    });</script>

在电脑端能够跟随model.width、model.height而改变大小，但移动端的大小始终如一，一个示意图如下：

请问是否是移动端的参数有什么黑科技？
还是我哪里设置的不对？
我的博客网址：https://www.oukohou.wang/
谢谢，致礼！

• I have alreday read instructions in CONTRIBUTING.
  我已仔细阅读CONTRIBUTING中的相关内容。

• I have alreday read instructions in README.
  我已仔细阅读README中的相关内容。

@xiazeyu @EYHN

feat: add support for idle and mtn

Migrated from EYHN/hexo-helper-live2d#43

提取到的一些模型含有久置动作，想把这些动作利用起来。
例如鼠标停留或移出浏览器窗口指定时间后触发

• 将motion组所有的动作都使用起来
• 确认声音可以正常加载
  #53
  https://developer.mozilla.org/zh-CN/docs/Web/Events

this.models[i].startRandomMotion(cDefine.MOTION_GROUP_PINCH_IN,
      cDefine.PRIORITY_NORMAL);
this.models[i].startRandomMotion(cDefine.MOTION_GROUP_PINCH_OUT,
      cDefine.PRIORITY_NORMAL);

// unused motion: flick_head
// unused motion: pinch_in
// unused motion: pinch_out
// unused motion: shake

样式问题

详见 EYHN/hexo-helper-live2d#149

@EYHN @xiazeyu

不能更换模型

截图

• 我已仔细阅读CONTRIBUTING中的相关内容。

• 我已仔细阅读README中的相关内容。

@EYHN @xiazeyu

Hitokoto has been blocked by CORS policy

描述你的问题
启用hitokoto后，浏览器的控制台会有一下报错（但不影响使用）

出现问题的网站地址: https://l2dwidget.js.org/dev.html

额外的信息
请在此处描述其他的内容

• 我已仔细阅读CONTRIBUTING中的相关内容。

• 我已仔细阅读README中的相关内容。

@EYHN @xiazeyu

gpu.js

Tree shaking?

Cannot assign to read only property 'exports' of object

描述你的问题

• 使用webpack 4运行时报错
  Cannot assign to read only property 'exports' of object

  追查原因是src/dialog/index.js中import与module.exports混用...

  import { config } from '../config/configMgr';
  import { L2Dwidget } from '../index';
  
  ...
  
  module.exports = {
    createDialogElement, displayDialog, hiddenDialog, alertText, showHitokotoLoop
  }
  

• 使用webpack 4运行时报错
  Identifier 'aE' has already been declared
Identifier 't' has already been declared

  追查原因是 src/lib/live2d.core.js中function aE()和function t()确实定义了2次...
  第一次3133-3168行
  第二次4871-4906行
  考虑去除4871-4906行？live2d.core.js-4871

环境信息(请务必填写下列信息)

• 设备: [PC]

• 操作系统: [MACOS]

• 浏览器 [Chrome 73]

• live2d-widget: [3.1.3]

• 我已仔细阅读CONTRIBUTING中的相关内容。

• 我已仔细阅读README中的相关内容。

@EYHN

破千stars回坑flag

高考爆炸...

纸片人哑巴了的问题

描述你的问题
哑巴现象1：带语音模型不发声
哑巴现象2：dialog配置无效

初次入坑live2d，在github上找到了崩崩中的德莉莎live2d模型，里面带有语音包。我的博客使用nuxt手工搭建，在找到你的项目之前，在npm里找到了live2d-vue-component组件并使用，语音能正常使用。
在使用你的项目时，不传入模型，用默认的配置加载出来的live2d模型点击有音效，该设置自己的模型后无效。因为readme中Setting的文档连接已经失效，我不好判断是不是需要加什么设置。所以只能在这提出来了。
项目中README-SCRIPT.md文档有关于dialog的配置说明，但按照上面说的配置无效

复现步骤

L2Dwidget.init({
                    // pluginModelPath: 'http://cloud.qiniu.lroyia.top/static/live2dw/model/',
                    tagMode: true,
                    // debug: false,
                    model: { jsonPath: 'http://cloud.qiniu.lroyia.top/static/live2dw/model/Terisa/model.json' },//已全部挂着到个人七牛云中
                    //model: { jsonPath: '/live2d/Terisa/model.json' },//博客实际使用静态路径，因七牛云https收费，博客使用了https，因此直接将模型放在项目的静态目录上了
                    display: { position: 'right', width: 300, height: 650},
                    // mobile: { show: true },
                    // log: false,
                    dialog: {
                        // 开启对话框
                        enable: true,
                        script: {
                        // 每空闲 10 秒钟，显示一条一言
                         'every idle 1s': 'test',
                         //当触摸到星星图案
                         'hover .info-box .author>a': '点击这里可以返回到首页哦~',
                         // 当触摸到角色身体
                         'tap body': '哎呀！别碰我！',
                         // 当触摸到角色头部
                         'tap face': '人家已经不是小孩子了！'
                        }
                    }
 })

出现问题的网站地址:https://blog.lroyia.top
加载命令:

// 点击有语音的默认模型配置
L2Dwidget.init({
      tagMode: true,
      display: { position: 'right', width: 300, height: 650},
      dialog: {
                        // 开启对话框
                        enable: true,
                        script: {
                        // 每空闲 10 秒钟，显示一条一言
                         'every idle 1s': 'test',
                         //当触摸到星星图案
                         'hover .info-box .author>a': '点击这里可以返回到首页哦~',
                         // 当触摸到角色身体
                         'tap body': '哎呀！别碰我！',
                         // 当触摸到角色头部
                         'tap face': '人家已经不是小孩子了！'
                        }
                    }
});


// 点击无语音的个人模型配置
L2Dwidget.init({
tagMode: true,
model: { jsonPath: 'http://cloud.qiniu.lroyia.top/static/live2dw/model/Terisa/model.json' },//已全部挂着到个人七牛云中
                    //model: { jsonPath: '/live2d/Terisa/model.json' },//博客实际使用静态路径，因七牛云https收费，博客使用了https，因此直接将模型放在项目的静态目录上了
display: { position: 'right', width: 300, height: 650},
dialog: {
                        // 开启对话框
                        enable: true,
                        script: {
                        // 每空闲 10 秒钟，显示一条一言
                         'every idle 1s': 'test',
                         //当触摸到星星图案
                         'hover .info-box .author>a': '点击这里可以返回到首页哦~',
                         // 当触摸到角色身体
                         'tap body': '哎呀！别碰我！',
                         // 当触摸到角色头部
                         'tap face': '人家已经不是小孩子了！'
                        }
                    }
});

控制台输出:
无报错

预期的行为
10秒空闲会弹出test的dialog，点击模型可以发出语音

屏幕截图
无

环境信息(请务必填写下列信息)

• 设备: PC
• 操作系统: Windows 10
• 浏览器 Chrome 83.0.4103.106
• live2d-widget: 3.1.4

使用 npm ls live2d-widget 来获取当前插件版本.

额外的信息
请在此处描述其他的内容

• 我已仔细阅读CONTRIBUTING中的相关内容。（404）

• 我已仔细阅读README中的相关内容。

将 [ ] 变为 [x] 来表示我接受了这些问题。

@EYHN @xiazeyu

ci: set codeclimate

https://docs.codeclimate.com/docs/
https://docs.codeclimate.com/docs/excluding-files-and-folders#section-pattern-format
https://docs.codeclimate.com/docs/nodesecurity
https://docs.codeclimate.com/docs/markdownlint
https://docs.codeclimate.com/docs/eslint
https://docs.codeclimate.com/docs/fixme

feat: update to Cubism3 using pixiJs

Migrated from EYHN/hexo-helper-live2d#50

• Cubism3
• pixi
• 可能存在的模型兼容性问题

may create a new branch future.

elementMgr.js 在vue中的一些问题

在Vue中使用先说目前发现的几个问题吧：
1.在 elementMgr.js 中导入 import htmlTemplate from './tmplate/innerHTML';会报找到不模块。
解决：在后面加上‘.html’import htmlTemplate from './tmplate/innerHTML.html';
2在npm i live2d-widget后，需要再手动安装一下live2d-widget的依赖
3里面会生成‘[object Object]’字样，如下图

创建DOM后添加钩子方法

你的新功能与某一个问题有关吗?

现在功能比较单一，于是自己简单加上了拖拽、放大缩小、右键菜单（感觉以后都会有
但是现在只能在init之后使用轮训来查找dom，找到后再绑定相应的事件...😷

你的方案是

配置中添加钩子，如config.hook.afterCreate
在elementMgr.js53行
document.body.appendChild(newElem)后
添加config.hook.afterCreate()

额外的信息

根据情况应该考虑开放更多的钩子方法吧

style: load assets with promise and CORS

Migrated from EYHN/hexo-helper-live2d#65

• Promise
  http://es6.ruanyifeng.com/#docs/promise
• CORS

perf: quicker and friendlier loading

Migrated from EYHN/hexo-helper-live2d#72

• loading symbol?
  https://github.com/EYHN/Aki
• optimize

"idle" 设置多个动作时每次加载只会执行其中一个动作，不会随机到别的动作

Describe the bug

"idle": [
      {"file": "mtn/idle_01.mtn", "fade_in": 2000, "fade_out": 2000},
      {"file": "mtn/idle_02.mtn", "fade_in": 2000, "fade_out": 2000},
      {"file": "mtn/idle_03.mtn", "fade_in": 2000, "fade_out": 2000},
      {"file": "mtn/idle_04.mtn", "fade_in": 2000, "fade_out": 2000}
    ]

我在 "idle" 中设置了4个动作，使用 Live2D 的 SampleApp 加载时，模型会不断随机这 4 个动作。但是当我用 hexo-helper-live2d 加载到博客中时，每次刷新页面只会随机加载一个，然后再也不会随机到另外三个动作，而是不断重复加载到的这个动作。

@EYHN @xiazeyu

init()向下兼容

perf: Better performance for MatrixStack

Migrated from EYHN/hexo-helper-live2d#90

https://github.com/avgjs/pixi-live2d/blob/master/src/lib/MatrixStack.js#L89
https://github.com/avgjs/pixi-live2d/blob/master/src/lib/glMatrix-mat4.js
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array
https://github.com/avgjs/pixi-live2d/blob/master/src/lib/glMatrix-common.js
https://msdn.microsoft.com/en-us/library/windows/desktop/bb153169(v=vs.85).aspx
http://blog.csdn.net/schrodinger1900/article/details/52734568
http://glmatrix.net/docs/module-mat4.html

feat: message system

Migrated from EYHN/hexo-helper-live2d#14

TBD.

More build options

Single file
Single file UMD
no polyfill

add yarn installation comment

3.0的支持？

3.0上导出的模型并不能使用（

有没有什么方法实现3.0转2.0或者是其他的轮子...?

demo挂了

perf: improve code quality

Migrated from EYHN/hexo-helper-live2d#59

• 简化无需使用的代码
• cJs代码为单model
• 调整 cJs function 顺序
• onbeforeprint
• onfterprint

feat: add z-index to config

feat: scaling to avoid too much white on the edge

Migrated from EYHN/hexo-helper-live2d#58

• Add scaling to let the user scale their model
• Auto scale the model and let it fit the canvas

Need destroy the L2Dwidget instance before module destroy

I want to destroy L2Dwidget instance before user leave this page

这个妹子是个monster, 还我正常的妹子

feat: Consider adding motion (.mtn) cache / 考虑加上动作缓存

Expected behavior 预期行为

Network request should only be make when requiring a certain .mtn file for the first time. And the same file should be loaded from cache for subsequent requests.
当且仅当第一次请求某个动作文件时发出网络请求。后续对同一个文件的请求应该从缓存中获取。

Actual behavior 实际行为

Network requests are made each time requiring the same .mtn file.
请求同一个 .mtn 文件会发送多个网络请求。

Steps to reproduce the behavior 复现步骤

config / 配置如下：

live2d:
  enable: true
  scriptFrom: local
  model:
    use: local-model
  display:
    position: right
    width: 125
    height: 250
    hOffset: 50
  mobile:
    show: false
  react:
    opacityDefault: 1

P.S. Actually, I'm using the hexo-helper-live2d plugin. But, I think it should be a issue for this repo. / 实际上，我是用的是 hexo-helper-live2d 插件，但是我认为这应该是这个仓库的模块的问题。

• I have alreday read instructions in CONTRIBUTING.
  我已仔细阅读CONTRIBUTING中的相关内容。

@EYHN @xiazeyu

这个错误是什么意思？

L2Dwidget.0.min.js:2618 Live2D 2.1.00_1
L2Dwidget.0.min.js:2615 profile : Desktop
L2Dwidget.0.min.js:2615 [PROFILE_NAME] = Desktop
L2Dwidget.0.min.js:2615 [USE_ADJUST_TRANSLATION] = false
L2Dwidget.0.min.js:2615 [USE_CACHED_POLYGON_IMAGE] = false
L2Dwidget.0.min.js:2615 [EXPAND_W] = 2
L2Dwidget.0.min.js:551 dump exception : _$gi _$C _$li , _$Q0 _$P0.
L2Dwidget.0.min.js:551 stack :: undefined

最后面两行的错误

bug: wrong reaction when AASetting(scaling) isn't 1

Migrated from EYHN/hexo-helper-live2d#32

将scaling调至大于1时，由于实际大小与显示大小不同，所以鼠标指针的跟随也会出现问题，右下角无法识别

• Solve it
• Test if mobileScaling also have problem

feat: opacity settings about mouse and touch event

Migrated from EYHN/hexo-helper-live2d#29

• Now trying to added it into clientJs
  http://m.jb51.net/article/63841.htm
  http://m.jb51.net/article/45354.htm
  https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
  https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
  监听onmousemove事件再获取一个鼠标位置算出是否hover
• maxinumDelay: 300ms

use fecth

https://github.com/github/fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

feat: Webpack 4.0

Migrated from EYHN/hexo-helper-live2d#93

• webpack 4.0.
• more output library settings.

Shelve notice.

TODO

NOTICE

To prepare for the College Entrance Examination, I decided to put the project off for a year.

为了准备高考, 我准备将此项目搁置一年.

Any question please contant EYHN.

Thanks for all your supports. See you next summer vacation.

File list

• │ .babelrc

• │ .codeclimate.yml

• │ .czrc

• │ .editorconfig

• │ .esdoc.json

• │ .eslintignore

• │ .eslintrc.js

• │ .gitignore

• │ .gitmodules

• │ .mdlrc

• │ .npmignore

• │ .travis.yml

• │ CHANGELOG.md

• │ jsconfig.json

• │ LICENSE

• │ package-lock.json

• │ package.json

• │ playground.html

• │ README.md

• │ TO-DO.md

• │ webpack.config.js

• │ yarn.lock

• ├───.github

• │ │ CODE_OF_CONDUCT.md

• │ │ CONTRIBUTING.md

• │ │ ISSUE_TEMPLATE.md

• │ │ PULL_REQUEST_TEMPLATE.md

• │ └───ISSUE_TEMPLATE

• │ bug-report-----.md

• │ bug_report.md

• │ feature-request------.md

• │ feature_request.md

• ├───.vscode

• │ settings.json

• ├───build

• │ afterBuild.js

• │ afterCIBuild.js

• │ deployDocs.sh

• │ generator.html

• │ getProjPath.js

• │ id_rsa.enc

• │ playgroundProduction.html

• │ playgroundProductionv3.html

• │ ssh_config

• └───src

• │ elementMgr.js

• │ index.js

• │ index_.js

• │ main.js

• │ main_.js

• │ Model.js

• │ ModelManager.js

• │ Model_.js

• │ Storage.js

• ├───config

• │ configMgr.js

• │ configStorage.js

• ├───lib

• │ BaseModel.js

• │ ExpressionMotion.js

• │ ExpressionParam.js

• │ EyeBlink.js

• │ live2d.core.nodoc.js

• │ MotionManager.js

• │ PartsParam.js

• │ Physics.js

• │ polyfill.nodoc.js

• │ Pose.js

• │ setEnv.nodoc.js

• │ TargetPoint.js

• ├───tmplate

• │ innerHTML.html

• └───utils

• Matrix.js

• ModelSettingJson.js

• pathHandler.js

• PlatformManager.js

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

i don't know what mean `Use online generator`

where are the online generator? sorry, i don't understand. i need help.

feat: add device motion event

Migrated from EYHN/hexo-helper-live2d#30

http://www.cnblogs.com/summer_shao/p/webevent.html
https://www.helloweba.com/view-blog-287.html
http://www.qdfuns.com/notes/17783/36b744ee3af8de3f58c1e555b3ee622f.html
http://www.haorooms.com/post/html5_DeviceMotionEvent

请问能否增加语言功能~~~

如题，好希望可以添加看板娘的提示话语，不知道怎么弄~

Contributor svg

https://opencollective.com/live2d-widgetjs#contributors
https://opencollective.com/live2d-widgetjs/contributors.svg?width=890&button=true

feat: achieve left functions

Migrated from EYHN/hexo-helper-live2d#63

• DEBUG_DRAW_HIT_AREA
• DEBUG_DRAW_ALPHA_MODEL
• lipSync

more from pixi-live2d and live2d.core api

页面内多次渲染 配置/模型不更新

描述你的问题

页面内成功渲染(init)过一次模型后，更换配置后再次渲染不生效（不刷新页面）...

追查原因

发现配置src/config/configMgr.js做了更改 不知此处的更改是何故

从src/config/defaultsDeep.js现有逻辑来看

var val = target[key];
// add the missing property, or allow a null property to be updated
if (val == null) {
    target[key] = value;
} else if (typeof val === 'object' && val !== null && typeof value === 'object' && value !== null) {
    defaultsDeep(val, value);
}

第一次渲染后target（currConfig）每一项都有值，再次渲染后if else并不会更新target的值，也就是少考虑了val为string的情况?

尝试解决

• 还原此处更改 考虑到事出有因，似乎不可取

• 上述if else逻辑改为（直接一个else可能欠妥？不知道还有没有其他情况）

if (typeof val === 'object' && val !== null && typeof value === 'object' && value !== null) {
    defaultsDeep(val, value);
} else {
    target[key] = value;
}

且src/config/configMgr.js中28行
defaultsDeep(currConfig, userConfig, defaultConfig);
更改为
defaultsDeep(currConfig, defaultConfig, userConfig);

环境信息(请务必填写下列信息)

• 设备: [PC]

• 操作系统: [MACOS]

• 浏览器 [Chrome 73]

• live2d-widget: [3.1.4]

• 我已仔细阅读CONTRIBUTING中的相关内容。

• 我已仔细阅读README中的相关内容。

@EYHN

如何在TypeScript中使用？

最近在写一个react项目，使用了typescript，请问这个插件如何在typescript中使用？

控制台出现这个？

dump exception : _$gi _$C _$li , _$Q0 _$P0.
L2Dwidget.0.min.js:551 stack :: undefined

CI: use Appveyor to build downloadable builds

向下兼容入口函数

Css about canvas to avoid pollution

EYHN/hexo-helper-live2d#101

有嘤嘤嘤的模型嘛？

你的新功能与某一个问题有关吗?
请简明清晰地描述你的问题, 例如: 我常常因为 [...] 而失望

你的方案是
请简明清晰地描述你的方案

一些你考虑过的替代方案有
请简明清晰地描述你的考虑过的替代方案或功能

额外的信息
请在此处描述其他的内容或者一些有关此功能的截图