Live2D in Electron – live2d-widget.js

As part of a larger project (upcoming), I am currently working on an electron application, which has Live2D as a key feature. After digging around Github, I found xiazeyu/live2d-widget.js, a JavaScript implementation of Live2D.

This tutorial was originally intended for Electron. However, I soon found that it applies to all platforms, not just Electron. Thus, feel free to continue even if you’re using something else. Everything should apply as long as it is HTML-JS based.

Using Live2d in live2d-widget.js

Importing Live2d-Widget.js is easy. Simply download the JavaScript files and then place them in your electron project folder. Then, import Live2d-Widget in your html file.

<script src="L2Dwidget.min.js"></script>

Next, create a canvas for your Live2D figure.

<div id="live2d-widget">
    <canvas id="live2dcanvas" width="300" height="600"></canvas>
</div>

Finally, initialize the widget and enjoy seeing waifu come to life!

L2Dwidget.init()
// put this in your javascript file
A waifu powered by Live2D in Electron

Configuring Live2D-Widget.js

Despite all the goodness in Live2d-Widget.js, it has a very large flaw: a shitty documentation. Many of its links are outdated (as many of the links points to a 404 error on Github pages). The only thing useful is the huge table of init() arguments, some of which are not even used. Here’s some of the basics:

NameTypeDefault valueDescription
userConfig.model.jsonPath
StringPath to your Live2D model’s json file (often *.model.json)
userConfig.model.scaleNumber1Scale of the model relative to the canvas
userConfig.display.widthNumber150Basically the width of the canvas
userConfig.display.heightNumber300Basically the height of the canvas
userConfig.display.positionString‘right’The horizontal anchor of the model on the canvas. Can be ‘left’ or ‘right’
userConfig.display.hOffsetNumber0Horizontal offset
userConfig.display.vOffsetNumber-20Vertical offset
userConfig.name.canvas
String‘live2dcanvas’The id of the HTML canvas to show the model in
userConfig.name.divString‘live2d-widget’The id of the div that the canvas is in.
userConfig.react.opacityDefaultNumber0.7Opacity
userConfig.react.opacityOnHoverNumber0.2Opacity on mouse hover

That said, let’s start editing!

Using our own Live2D models

First of all, let’s use our own Live2D model. This is defined by
userConfig.model.jsonPath
. To define this, we pass a userConfig object (aka dictionary for the python users) with model.jsonPath set.

L2Dwidget.init({
    model: {jsonPath: 'assets/myModel/myModel.model.json'}
})

Opacity

Furthermore, the default opacity is really annoying. Since the widget is originally made for websites, the default values are understandable. However, when using Live2D in Electron, they are unwanted. Let us remove that by changing userConfig.react.opacityDefault and userConfig.react.opacityOnHover.

L2Dwidget.init({
    model: {jsonPath: 'assets/myModel/myModel.model.json'},
    react: {opacityDefault: 1, opacityOnHover: 0.2}
})

And there you have it! You’ve used Live2D in Electron. This, however is the end. Play around with the config for a little longer and you’ll experience the pain of Live2d-Widget.js. It’s nature of web-oriented removes a lot of desirable possibilities, such as playing certain animations instead of randomly cycling through them.

To solve these issues, I’ve been digging around the source code and changing some core behaviors. You can see the changes at gundamMC/live2d-widget.js. In addition, a new post will also be coming soon to discuss the edits. In the mean time, why not enjoy some anime renders and illustrations that I’ve created! Like this one!

Epoch

More Information

Live2d
给博客添加能动的看板娘(Live2D)-关于模型的二三事

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.