live2d-widget.js

NOTEICE: This project won't be updated until next year

• See #38

Add the Sseexxyyy live2d to your webpages! Seperated from hexo-helper-live2d.

Demo: Playground

Docs: Click me!

Browser requirements

We use config below as our babel-preset-env's config.

"browsers": [
  "cover 99%",
  "last 2 years",
  "not ie < 9",
  "edge >= 12"
]

Installation

Please have a look at both README and CHANGELOG if you are upgraded from older version.

Yarn

yarn add live2d-widget@4

Sometimes yarn does better job than npm.

NPM

npm i --save live2d-widget@4

Hexo

See hexo-helper-live2d for the hexo plugin.

Webpages

JS code online generator: Click me!

Store script on your own web server

Download the latest release,

then extract and copy the dist folder to your website.

Insert codes into your HTML files using online generator, or make your own code

Making code manually:

import the js(replcae your own js path here in the src):

eg.

<script src="//js/live2d-widget/L2Dwidget.min.js"></script>

Then init it.

eg.

var currL2Dwidget = new L2Dwidget().init({});

Or with your own config

eg.

var currL2Dwidget = new L2Dwidget().init({
  'modelJsonPath': "https://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku/assets/shizuku.model.json",
  'displayWidth': 150,
  'mobileShow': true
});

Using CDN

We have 3 CDNs,

• Jsdelivr(Recommended) https://cdn.jsdelivr.net/npm/live2d-widget@4/dist/L2Dwidget.min.js

• Unkpg https://unpkg.com/live2d-widget@4/dist/L2Dwidget.min.js

• BundleRun https://bundle.run/live2d-widget@4/dist/L2Dwidget.min.js

Select your favourite CDN, and put code like this into your webpage.

eg.

<script src ="//cdn.jsdelivr.net/npm/live2d-widget@4/dist/L2Dwidget.min.js"></script>

Bookmarks

data:text/html,<script src=https://cdn.jsdelivr.net/npm/live2d-widget@4/dist/L2Dwidget.min.js></script><script>const currL2Dwidget = new L2Dwidget().init({});</script>

javascript:function loadScript(c,b){var a=document.createElement("script");a.type="text/javascript";"undefined"!=typeof b&&(a.readyState?a.onreadystatechange=function(){if("loaded"==a.readyState||"complete"==a.readyState)a.onreadystatechange=null,b()}:a.onload=function(){b()});a.src=c;document.body.appendChild(a)};loadScript("https://cdn.jsdelivr.net/npm/live2d-widget@4/dist/L2Dwidget.min.js",function(){const currL2Dwidget = new L2Dwidget().init({});});

Settings

See the document.

Default settings are atconfigStorage.js.

Enjoy!:beer:

This is my first plugin, star ⭐ and watch 👓, pull request is also welcomed.

Github: https://github.com/xiazeyu/live2d-widget.js

issues: https://github.com/xiazeyu/live2d-widget.js/issues

Contribute

Please pay enough attention to this document if you want to commit your changes or submit issues

CONTRIBUTING

Releated projects

• hexo-helper-live2d

• live2d-widget-models

• Cubism SDK WebGL 2.1

About me

Dependcies

Special Thanks

• @mashirozx
• @fghrsh
• @journey-ad
• @gwzz

Open sourced under the GPL v2.0 license.