You may have seen something like the above on websites (especially Chinese and Japanese). These are interactive 2D character animations that can be integrated into websites. They are designed to run on the client side using JavaScript and graphics assets with Live2D technology. The characters can move and respond to user interactions.
Here’s a basic idea of how you can add a Live2D widget to a website:
-
You need a Live2D model file, which typically includes a set of files such as textures, model data, and animation settings. You can create your own using Live2D Cubism software. Many ready-made models are available here: https://github.com/evrstr/live2d-widget-models
-
Use a Live2D Library to embed models into your website. Just as jQuery simplifies JavaScript tasks and Bootstrap provides pre-designed components, the Live2D Library simplifies the process of adding interactive 2D characters to your website. It handles the technical details of making your character move and react to user interactions. Like jQuery and Bootstrap, you can include the Live2D Library from a CDN: https://www.jsdelivr.com/package/npm/live2d-widget
That’s all!
Here’s a simple code example:
<!DOCTYPE html>
<html>
<head>
<title>live2d widget</title>
</head>
<body>
<!-- YOUR CODE HERE -->
<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
"jsonPath": "https://cdn.jsdelivr.net/gh/evrstr/live2d-widget-models/live2d_evrstr/koharu/model.json"
},
"display": {
"position": "right",
"width": 85,
"height": 200,
"hOffset": 60,
"vOffset": 40
},
"mobile": {
"show": true,
"scale": 0.3,
"motion": true
}
});
</script>
</body>
</html>Save it as an HTML file and run it in your browser. You can also test it on W3Schools Tryit Editor.
Warning
-
Live2D models can be resource-intensive, particularly if they involve complex animations or high-resolution textures. This can slow down your website, especially on less powerful devices. Additionally, Live2D models can be large in file size, potentially affecting page load times and overall site performance.
-
Live2D may not work consistently across all browsers and devices. Live2D relies on WebGL for rendering, which may not be supported in all browsers or might be disabled in some user settings. Certain older or less common browsers might also have trouble rendering the animations correctly.