This is the 18th day of my participation in the August Challenge

Live2d is a graphic rendering technology for video games developed by Japanese company Cybernoids. Through a series of continuous images and character modeling to generate a two-dimensional image similar to a THREE-DIMENSIONAL model. Generating cartoon characters that interact with users in Hexo is the soul of the blog. This article introduces how to add Live2D Kanban animation.

Install hexo helper — live2d

Hexo-helper-live2d Github official link

To install, you need to enter the command in the Hexo project directory:

npm install --save hexo-helper-live2d
Copy the code

Pick your favorite model

There are many basic Live2D models, pick the one you like and record his name:

chitose

epsilon2_1

gf

haru/01

haru/02

haruto

hibiki

hijiki

izumi

koharu

miku

nico

nietzsche

ni-j

nipsilon

nito

shizuku

tororo

tsumiki

unitychan

wanko

z16

Model download

The command line

Enter the command in the hexo directory:

NPM install --save live2D-widget-model - 'model name'Copy the code

Add the ‘live2D-Widget-model-model name’ folder to the hexo root /node_modules/ folder

Making the download

Above list model github address

New model GTIHub address

You can download the model and place it in the hexo root /node_modules/ folder for a command-line installation

Model application configuration

Add configuration information to the site configuration file:

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: Live2d-widget-model -< model name >
  display:
    position: right  # left
    width: 220
    height: 440
  mobile:
    show: true   # Whether to display on the mobile phone
  react:
    opacity: 0.7

Copy the code

haru

Haru is a bit different from the other models. The haru package contains two models 01/02, which are named as:

  model:
    use: live2d-widget-model-haru/01
Copy the code

or

  model:
    use: live2d-widget-model-haru/02
Copy the code

The model is still not loading correctly because the JSON file in the hexo root directory /node_modules/ live2D-Widget-model-haru /01/ or 02/ is empty, So you need to copy the JSON files in the hexo root directory /node_modules/ live2D-widget-model-haru/to 01/ or 02/.

test

Enter the command:

hexo clean && hexo g && hexo s
Copy the code

View test results at http://127.0.0.1:4000/ (example: Z16)

Enhanced version (can talk, interact)

Optimize live2d – widget

Specific method reference

Blog.csdn.net/weixin_3423…

Blog.csdn.net/cungudafa/a…