preface

Many friends have asked this sister blog below the right of the cartoon character how to generate it? Below I will simply drop to small partners how to configure two yuan Kanban girl.

This girl’s kanban niang first to the host to show a face! Please take care of a lot ^ ^ raoenhui. Making. IO/nodejs / 2019…

usage

Talk is cheap. Show me the code.

Step 1: Reference the file l2dWidget.min.js at github.com/raoenhui/li…

Step 2: reference the json file corresponding to the animation Sprite, reference the animation Sprite address: github.com/raoenhui/li…

Step 3: Initialize Kanban girl

L2Dwidget.init({
    "model": { "jsonPath": "packages/live2d-widget-model-shizuku/assets/shizuku.model.json"}});Copy the code

It’s easy to do in three steps. It will automatically generate a DOM element in the page with the ID of Live2D-Widget. This is your Kanban girl. Also want to DIY under the friends can continue to see ~

Advanced usage

Only some kanban women have advanced usage

Event listeners

You can add event listeners, such as a pop-up prompt when touching her

L2Dwidget.on(The '*', (name) => {
    console.log('Event is:' + name)
})
Copy the code

Display dialog

When a character’s body or face is touched, a dialog box pops up.

L2Dwidget.init({
    dialog: {
        enable: true.script: {
            'tap body': 'oh! Don't touch me!!!!!!! '.'tap face': 'I'm seriously blogging -- front end girl.',}}});Copy the code

Kanban niang position

The default location is in the lower left corner. You can also set right top

L2Dwidget.init({
    display: {
        position: 'right'}});Copy the code

Mobile compatibility configuration

You can set whether to display it on the mobile end or zoom out

L2Dwidget.init({
    "mobile": { "show": true.scale: 0.5}});Copy the code

Replace different kanban girls

Model reference to the corresponding KANban girl JSON file, specific can choose which Kanban girl, you can see the following case

L2Dwidget.init({
    "model": { "jsonPath": "packages/live2d-widget-model-" + modalName + "/assets/" + selectId + ".model.json"}});Copy the code

Also confused friends to see the direct look I wrote the demo, source address: github.com/raoenhui/li…

Through the demo, Kanban girl has the following options:

  • chitose
  • Epsilon2.1
  • Gantzert_Felixander
  • haru01
  • haru02
  • haruto
  • hibiki
  • hijiki
  • izumi
  • koharu
  • miku
  • nico
  • ni-j
  • nipsilon
  • nito
  • shizuku
  • tororo
  • tsumiki
  • Unitychan
  • wanko
  • z16

The plug-in

Many people who have a Hexo blog can install the Hexo-Helper-Live2D plugin directly

The PixiJS animation engine can also be used with the Pixi-Live2D plugin

Other YY

Kanban musume mainly with the core engine, Live2D Live2D mainly Guyzware Japanese company is a development, support for native and web side, if you want to customize kanban musume friends, can study case Live2D. Making. IO/CubismJsCom… .

Although this girl wants to enter the game development very much, but the technology is limited, is still hovering in zero basis, slightly embarrassed. But the friends who have the foundation of painting can give their blog please a kanban girl who likes singing, dancing, rap and basketball.

Happy coding .. 🙂

A link to the

The demo. Frontendx. Cn/live2d – exam…

Github.com/raoenhui/li…

Raoenhui. Making. IO/domes/live2…

L2dwidget.js.org/docs/index….

Github.com/xiazeyu/liv…

www.live2d.com/

Live2d. Making. IO/CubismJsCom…