This is a fork of the original live2d-widget.js. This fork updates the library to work with the newest version of live2D.
- Works with the newest version of live2D.
- Widget has more functions to allow the user to start motions.
- User can define their own callback to respond to hit area clicks.
- User can inspect the model's expressions, motions, etc. with the added utility functions.
- Widget adapts to the specified div now instead of forcing it to a corner
- Disabled the chat module.
- Lipsync can be used now. You just need to specify a function that accepts the deltatime between updates as parameters and that returns the value used on the mouth parameter(you specify which parameter is used on the live2d editor)
- Auto blink works as well.(Same as with lipsync you specify which parameters are used for this with the live2d editor on your model)
Simply import the script L2Dwidget.min.js and the live2dcubismcore.min.js(this one can be found on the Live2D SDK for web package) on your html file.
<script type="text/javascript" charset="utf8" async="" src="/live2dcubismcore.min.js"></script>
<script type="text/javascript" charset="utf8" async="" src="/L2Dwidget.min.js"></script>
Call the init function with a configuration object as a parameter on any script tag:
L2Dwidget.init({
model: { jsonPath: '../resources/model/mymodel.model3.json' },
scale:2.0,
opacity:1.0
})
This will create a div containing a canvas using webgl to show the model on the right side of the screen. However you can specify to use a div in particular by giving said div the default id live2d-widget and putting a canvas element with the id live2dcanvas. These ids can be changed by specifying them on the configuration object.
These are all the configuration options available, trying to use almost the same config options as the original live2D widget:
| Param | Type | Default | Description |
|---|---|---|---|
| [userConfig] | Object |
User's custom config 用户自定义设置 | |
| [userConfig.model.jsonPath] | String |
'' |
Path to Live2D model's main json eg. https://test.com/miku.model3.json model主文件路径 |
| [userConfig.model.jsonDir] | String |
'' |
Folder containing the model's json files |
| [userConfig.model.eyeBlink] | Boolean |
true |
Wheter to allow eyeblink or not |
| [userConfig.model.lipsync] | Boolean |
false |
Wheter to allow lipsync or not |
| [userConfig.model.lipsyncFunction] | String |
null |
Lipsync function, the function will receive the deltatime between updates and must return a value(depends on your model's config but it's usually just between 0 and 1) |
| [userConfig.scale] | Number |
1 |
Scale between the model and the canvas 模型与canvas的缩放 |
| [userConfig.display.superSample] | Number |
2 |
rate for super sampling rate 超采样等级 |
| [userConfig.display.width] | Number |
150 |
Width to the canvas which shows the model canvas的长度 |
| [userConfig.display.height] | Number |
300 |
Height to the canvas which shows the model canvas的高度 |
| [userConfig.display.position] | String |
'right' |
Left of right side to show 显示位置：左或右 |
| [userConfig.display.hOffset] | Number |
0 |
Horizontal offset of the canvas canvas水平偏移 |
| [userConfig.display.vOffset] | Number |
-20 |
Vertical offset of the canvas canvas垂直偏移 |
| [userConfig.mobile.show] | Boolean |
true |
Whether to show on mobile device 是否在移动设备上显示 |
| [userConfig.mobile.scale] | Number |
0.5 |
Scale on mobile device 移动设备上的缩放 |
| [userConfig.name.canvas] | String |
'live2dcanvas' |
ID name of the canvas canvas元素的ID |
| [userConfig.name.div] | String |
'live2d-widget' |
ID name of the div div元素的ID |
| [userConfig.opacity] | Number |
1.0 |
opacity 透明度 |
| [userConfig.onTouchHitArea] | function |
null |
callback for on touch model on a hitarea, the callback contains the hit area name and the X and Y coordinates |
There are several functions added that allow you to modify's the model animations or capture a frame of it(like a take a photo sort of function).
Capture current frame to png file captureFrame
| Param | Type | Description |
|---|---|---|
| callback | function |
The callback function which will receive the current frame |
Download current frame L2Dwidget.captureFrame
Useful for knowing which parameters your model has.
Useful for debugging sometimes.he loaded model.
Starts a random expression on the loaded model.
Kind: instance method of L2Dwidget
Starts the specified expression by it's id.
| Param | Type |
|---|---|
| expressionId | String |
returns a list containing the ids of all the parameters the loaded model has
Sets a parameter's value by it's id
| Param | Type | Description |
|---|---|---|
| parameterId | CubismId |
the parameter's id |
| value | Number |
the value to set |
Sets an specific parameter to an specific value.
| Param | Type | Description |
|---|---|---|
| name | String |
the parameter's name |
| value | Number |
the value to set |
If you want to develop/build your own version of this library, first you'll need to clone/download this repository.
git clone git@github.com:aldoram5/live2d-widget.js.git
Then run
git submodule init
to grab the live2d framework dependency.
After that you need to download the Core SDK from the official site yourself and paste only the contents of the Core/ folder inside the Core folder here.
After all that then just install the dependencies with npm install.
When building a release version(minified js) use npm run-script build:prod. If you're developing and testing is easier to run npm run-script build:dev which will keep automatically building the library for you and won't minify it so it's easier to debug.
Add the Sseexxyyy live2d to your webpages! Seperated from hexo-helper-live2d.
Demo: Still working, but you can have a look~
Docs(including APIs): Click me!
Online generator: TBD.
Please visit hexo-helper-live2d for the hexo plugin.
Download the latest release,
and then copy and extract the lib folder to your website.
Use online generator (recommended) to generate codes.
However, if you want to do it manually, follow the instruction below:
import the js:
<script src = "( your script path here )"></script>Then call the function along with your config.
L2Dwidget.init({
'config1': 'value1',
'config2': 'value2',
});TBD.
https://www.cnblogs.com/pcyy/p/5655542.html
See the document.
Current supported models:
chitoseEpsilon2.1Gantzert_Felixanderharu01haru02harutohibikihijikiizumikoharumikuniconi-jnipsilonnitoshizukutororotsumikiUnitychanwankoz16
-
Create a
live2d_modelsfolder at your blog's root directory. -
Create a folder by the name of your model.
-
Copy your model to this folder.
Attention! The path of the model's json must be /live2d_models/{name}/{name}.model.json
An Example:
Your model is named mymiku.
Then, create a folder at / (Which should exists _config.yml 、sources 、 themes ) named mymiku.
Copy your model to /live2d_models/mymiku/.
Up to now, there should be mymiku.model.json in the directory of /live2d_models/mymiku/.
The problem was once releated to (#22).
Enjoy!:beer:
This is my first hexo plugin, star ⭐ and watch 👓, pull request is also welcomed.
Github: https://github.com/EYHN/hexo-helper-live2d
issues: https://github.com/EYHN/hexo-helper-live2d/issues
Please pay enough attention to this document if you want to commit your changes or submit issues.
- @mashirozx
- @fghrsh
- @journey-ad
- @gwzz
Open sourced under the GPL v2.0 license.
This project exists thanks to all the people who contribute.
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
