1. 首页首页
  2. 编程基础编程基础

二、Live2d 简介与使用

编程基础 • • 阅读 18

二、Live2d 简介与使用本文介绍了 Live2D 技术 用于将 2D 图像转化为动态角色 并详细阐述了如何在 Web 上使用 L2Dwidget min js 库集成 Live2D 模型 包括编译 运行 源代码解析 模型更换 人物交互等功能

When you cry for missing the sun, you will miss the stars again.

当你为错过太阳而哭泣时，你也要再错过群星了。

——泰戈尔

一、Live2d 简介

Live2D是一种基于2D图像的动态角色技术，它能够将静态的2D角色转化为具有丰富表情和动作的实时交互角色。通过使用Live2D，开发者可以为游戏、动画、虚拟主播等应用创建出生动活泼的角色。

Live2D的核心技术是基于多层次的2D绘制，通过对角色进行分割并赋予不同部位独立的动作能力，从而实现角色的自由变形和动态效果。这种技术使得角色能够根据用户的操作或者外部输入实时响应，展现出更加真实的表情和动作。

除了基本的动作表现，Live2D还提供了丰富的特效功能，如光影效果、粒子效果等，使得角色在交互过程中更加生动有趣。同时，Live2D还支持与其他引擎和平台的集成，方便开发者将其应用到各种不同的项目中。

二、Live2d Web

L2Dwidget.min.js 是一个基于 WebGL 技术的开源库，用于在网页上实现可爱的 Live2D 角色模型。Live2D 是一种二维动画技术，可以将静态的插图转化为具有动态效果的角色模型。

L2Dwidget.min.js 提供了一些简单易用的接口，使得开发者可以轻松地将 Live2D 模型嵌入到网页中。它支持鼠标交互、触摸事件和设备重力感应等功能，使得用户可以与 Live2D 模型进行互动。

使用 L2Dwidget.min.js，你可以通过引入相应的 JavaScript 文件和配置文件，将 Live2D 模型添加到你的网页中。你可以自定义模型的大小、位置、动作等属性，并且可以根据需要添加额外的特效和动画效果。

网上很多文章都有介绍使用 L2Dwidget.min.js 实现看板娘效果，我们也来实现一个简单的 demo，

1、编译 L2Dwidget.min.js

git clone https://github.com/xiazeyu/live2d-widget.js.git

把源代码克隆下来，进入根目录，准备安装依赖，

# 使用 cnpm i 有问题 npm i

# 模块打包 yarn add webpack webpack-cli --dev yarn webpack

模块打包完成后不会自动退出，可以直接在 ./lib 目录下看到已经生成了  L2Dwidget.0.min.js 和  L2Dwidget.min.js，

2、运行效果

启动一个 node server 来代理 html 入口，

npm install -g serve serve .

访问 localhost:3000，然后 dev.html，

可以看到右下角成功显示了看板娘，

3、源代码解析

我们来看下 dev.html 里面都有些什么，

<!-- dev.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Live2d Test Env</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <script src="lib/L2Dwidget.min.js"></script>
  <script type="text/javascript">
    L2Dwidget.init();
  </script>
  </body>
</html>

页面引入了 L2Dwidget.min.js 库，并且做了初始化  L2Dwidget.init(); ，默认加载的是 live2d-widget-model-shizuku 这个模型，在 src/config/defaultConfig.js 中可以看到默认配置如下，

/ * @description The storage of configs. Intend to unify serverJs and clientJs's config */ / * Default settings for defaulter * @type {Object} */ const defaultConfig = { model: { jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json', scale: 1, }, display: { superSample: 2, width: 200, height: 400, position: 'right', hOffset: 0, vOffset: -20, }, mobile: { show: true, scale: 0.8, motion: true, }, name: { canvas: 'live2dcanvas', div: 'live2d-widget', }, react: { opacity: 1, }, dev: { border: false }, dialog: { enable: false, script: null } } module.exports = defaultConfig;

在 src/index.js 文件中可以看到配置的说明如下，

// Created by xiazeyu. // Celebrate for the 3.0 version! // / * @description The entry point of live2d-widget. */ 'use strict'; import device from 'current-device'; import { config, configApplyer }from './config/configMgr'; import { EventEmitter } from './utils/EventEmitter'; if (process.env.NODE_ENV === 'development'){ console.log('--- --- --- --- ---\nLive2Dwidget: Hey that, notice that you are now in DEV MODE.\n--- --- --- --- ---'); } / * The main entry point, which is ... nothing */ class L2Dwidget extends EventEmitter { constructor() { super(); this.config = config; } / * The init function * @param {Object} [userConfig] User's custom config 用户自定义设置 * @param {String} [userConfig.model.jsonPath = ''] Path to Live2D model's main json eg. `https://test.com/miku.model.json` model主文件路径 * @param {Number} [userConfig.model.scale = 1] Scale between the model and the canvas 模型与canvas的缩放 * @param {Number} [userConfig.display.superSample = 2] rate for super sampling rate 超采样等级 * @param {Number} [userConfig.display.width = 150] Width to the canvas which shows the model canvas的长度 * @param {Number} [userConfig.display.height = 300] Height to the canvas which shows the model canvas的高度 * @param {String} [userConfig.display.position = 'right'] Left of right side to show 显示位置：左或右 * @param {Number} [userConfig.display.hOffset = 0] Horizontal offset of the canvas canvas水平偏移 * @param {Number} [userConfig.display.vOffset = -20] Vertical offset of the canvas canvas垂直偏移 * @param {Boolean} [userConfig.mobile.show = true] Whether to show on mobile device 是否在移动设备上显示 * @param {Number} [userConfig.mobile.scale = 0.5] Scale on mobile device 移动设备上的缩放 * @param {String} [userConfig.name.canvas = 'live2dcanvas'] ID name of the canvas canvas素的ID * @param {String} [userConfig.name.div = 'live2d-widget'] ID name of the div div素的ID * @param {Number} [userConfig.react.opacity = 0.7] opacity 透明度 * @param {Boolean} [userConfig.dev.border = false] Whether to show border around the canvas 在canvas周围显示边界 * @param {Boolean} [userConfig.dialog.enable = false] Display dialog 显示人物对话框 * @param {Boolean} [userConfig.dialog.hitokoto = false] Enable hitokoto 使用一言API * @return {null} */ init(userConfig = {}){ configApplyer(userConfig); this.emit('config', this.config); if((!config.mobile.show)&&(device.mobile())){ return; } import(/* webpackMode: 'lazy' */ './cLive2DApp').then(f => { this.coreApp = f; this.live2DMgr = this.coreApp.theRealInit(this); }).catch(err => { console.error(err); }); } / * Capture current frame to png file {@link captureFrame} * @param {Function} callback The callback function which will receive the current frame * @return {null} */ captureFrame(callback){ return this.coreApp.captureFrame(callback); } / * download current frame {@link L2Dwidget.captureFrame} * @return {null} */ downloadFrame(){ this.captureFrame( function(e){ let link = document.createElement('a'); document.body.appendChild(link); link.setAttribute('type', 'hidden'); link.href = e; link.download = 'live2d.png'; link.click(); } ); } }; let _ = new L2Dwidget(); export { _ as L2Dwidget, }

4、更换模型

在 https://github.com/xiazeyu/live2d-widget-models.git 这个地址可以看到可以用的model，

use npm install {packagename} The package name is the folder name in packages/ We have: live2d-widget-model-chitose live2d-widget-model-epsilon2_1 live2d-widget-model-gf live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru) live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru) live2d-widget-model-haruto live2d-widget-model-hibiki live2d-widget-model-hijiki live2d-widget-model-izumi live2d-widget-model-koharu live2d-widget-model-miku live2d-widget-model-ni-j live2d-widget-model-nico live2d-widget-model-nietzsche live2d-widget-model-nipsilon live2d-widget-model-nito live2d-widget-model-shizuku live2d-widget-model-tororo live2d-widget-model-tsumiki live2d-widget-model-unitychan live2d-widget-model-wanko live2d-widget-model-z16

安装模型，

# cnpm install live2d-widget-model-shizuku cnpm install live2d-widget-model-koharu

在 node_modules 目录下可以看到 live2d-widget-model-koharu文件夹，在使用的时候，指定model的json位置即可，

<script type="text/javascript"> //L2Dwidget.init(); L2Dwidget.init({ model: { jsonPath: 'node_modules/live2d-widget-model-koharu/assets/koharu.model.json', scale: 1, }, display: { superSample: 2, width: 200, height: 400, position: 'right', hOffset: 0, vOffset: -20, }, mobile: { show: true, scale: 0.8, motion: true, }, name: { canvas: 'live2dcanvas', div: 'live2d-widget', }, react: { opacity: 1, }, dev: { border: false }, dialog: { enable: false, script: null } }); </script>

5、人物自动说话

在README-SCRIPT.md文件中有介绍，人物可以每 10 秒钟显示一条一言，用的是一言接口，只需要配置 dialog 属性即可，

L2Dwidget.init({ dialog: { // 开启对话框 enable: true, script: { // 每空闲 10 秒钟，显示一条一言 'every idle 10s': '$hitokoto$', // 当触摸到星星图案 'hover .star': '星星在天上而你在我心里 (*/ω＼*)', // 当触摸到角色身体 'tap body': '哎呀！别碰我！', // 当触摸到角色头部 'tap face': '人家已经不是小孩子了！' } } });

6、手动调用对话框

L2Dwidget.min.js 中只提供了自动说话的信息框，没有手动调用的接口，因此需要修改源代码新增接口，在 src/index.js 中添加如下代码，

import { alertText } from './dialog'; / * 弹出对话框 */ alert(text){ alertText(text); }

修改后，

//代码省略 import device from 'current-device'; import { config, configApplyer }from './config/configMgr'; import { EventEmitter } from './utils/EventEmitter'; import { alertText } from './dialog'; //代码省略 / * download current frame {@link L2Dwidget.captureFrame} * @return {null} */ downloadFrame(){ this.captureFrame( function(e){ let link = document.createElement('a'); document.body.appendChild(link); link.setAttribute('type', 'hidden'); link.href = e; link.download = 'live2d.png'; link.click(); } ); } / * 弹出对话框 */ alert(text){ alertText(text); } //代码省略

此时只需要执行yarn webpack重新编译就可以，使用示例如下，

// js L2Dwidget.alert("~");

注意，必须配置 dialog: {enable: true} 开启对话功能，

7、更多模型

https://mx.paul.ren/about

8、补充：Cubism 4 SDK for Web

Cubism 4 SDK for Web 是由 Live2D 开发的一款用于在 Web 环境下实现 Live2D 角色模型的软件开发工具包（SDK）。它是基于 WebGL 技术的，可以将静态的插图转化为具有动态效果的角色模型。除了使用 L2Dwidget.min.js 实现看板娘，也可以使用 SDK 实现。

三、Live2d Desktop

Cubism 4 SDK for Native 是由 Live2D 开发的一款用于在本地应用程序中实现 Live2D 角色模型的软件开发工具包（SDK）。它适用于各种平台，如 Windows、macOS、iOS 和 Android 等。

Cubism 4 SDK for Native 提供了一系列功能和工具，使得开发者可以更加灵活地创建、渲染和控制 Live2D 模型。它支持多种图形 API，如 OpenGL、DirectX 和 Metal，并且提供了丰富的 API 接口，方便开发者进行定制化开发。

使用 Cubism 4 SDK for Native，开发者可以通过加载模型文件、纹理文件和动作数据文件，将 Live2D 模型嵌入到本地应用程序中。SDK 提供了丰富的参数设置和动作控制接口，可以实现模型的移动、旋转、表情变化等交互效果。同时，SDK 还支持用户自定义的着色器和特效，以及模型的物理运动模拟。

1、SDK 下载

# 需要下载 sdk for native https://www.live2d.com/zh-CHS/download/cubism-sdk/

SDK 解压后的目录是这样子，主要分为三大模块，

1、Core => Live2DCubismCore 的动态链接库

2、Framework => 基本的框架，用于模型的读取和配置

3、Samples => 示例与脚本

2、基于 OpenGL 运行项目

OpenGL（Open Graphics Library）是一个跨平台的图形编程接口，用于渲染二维和三维图形。它由一系列函数和状态机组成，可以在各种操作系统和硬件平台上使用。

OpenGL 提供了一套标准化的接口，使得开发者可以利用硬件加速来创建高性能的图形应用程序。它支持各种图形效果，如光照、阴影、纹理映射等，并且可以处理复杂的几何变换和投影操作。

OpenGL 是一个底层的图形库，它提供了对图形硬件的直接访问，因此具有很高的灵活性和可定制性。开发者可以使用 OpenGL 来创建各种类型的图形应用程序，包括游戏、计算机辅助设计（CAD）、数据可视化等。

OpenGL 的工作原理是通过定义一系列的状态和操作来描述图形对象，并将其发送到图形硬件进行处理和渲染。开发者可以使用 OpenGL 的函数来设置状态、加载纹理、执行变换等操作，从而实现所需的图形效果。

这里以 Win10  为例使用脚本生成 OpenGL 项目，脚本路径为，

\CubismSdkForNative-4-r.7\Samples\OpenGL\Demo\proj.win.cmake\scripts

在此之前我们需要下载对应版本的 glew 和 glfw，因为 OpenGL 需要用到这两个库，

# 发布版本 https://github.com/nigels-com/glew/releases/download/glew-2.2.0/glew-2.2.0.zip # 发布版本 https://github.com/glfw/glfw/releases/download/3.3.8/glfw-3.3.8.zip

下载好放到 thirdParty 路径下，

\CubismSdkForNative-4-r.7\Samples\OpenGL\thirdParty

当然，如果网络畅通的话可以直接使用 scripts 中的脚本一键安装，脚本源代码如下，

@echo off set GLEW_VERSION=2.2.0 set GLFW_VERSION=3.3.8 set SCRIPT_PATH=%~dp0 cd %SCRIPT_PATH%/.. :::::::::::::::: :: Setup GLEW :: :::::::::::::::: :: Download and extract the archive. echo - Setup GLEW %GLEW_VERSION% echo Downloading... curl -fsSL -o glew.zip ^ "https://github.com/nigels-com/glew/releases/download/glew-%GLEW_VERSION%/glew-%GLEW_VERSION%.zip" if %errorlevel% neq 0 pause & exit /b %errorlevel% echo Extracting... powershell "$progressPreference = 'silentlyContinue'; expand-archive -force glew.zip ." if %errorlevel% neq 0 pause & exit /b %errorlevel% ren glew-%GLEW_VERSION% glew del glew.zip :::::::::::::::: :: Setup GLFW :: :::::::::::::::: echo. :: Download and extract the archive. echo - Setup GLFW %GLFW_VERSION% echo Downloading... curl -fsSL -o glfw.zip ^ https://github.com/glfw/glfw/releases/download/%GLFW_VERSION%/glfw-%GLFW_VERSION%.zip if %errorlevel% neq 0 pause & exit /b %errorlevel% echo Extracting... powershell "$progressPreference = 'silentlyContinue'; expand-archive -force glfw.zip ." if %errorlevel% neq 0 pause & exit /b %errorlevel% ren glfw-%GLFW_VERSION% glfw del glfw.zip echo. pause

安装好依赖库好，我们执行开头说的脚本，proj_msvc2022.bat，

可以看到项目已经生成， Demo.sln 打开项目，

# 项目路径 \CubismSdkForNative-4-r.7\Samples\OpenGL\Demo\proj.win.cmake\build\proj_msvc2022_x64_mt

直接运行即可，

注：如果报错：can't create glfw Window，要么是虚拟机没开OpenGL，要么是第三库没有安装好，

3、基于 D3D11 运行项目

D3D11（Direct3D 11）是微软公司开发的一种图形编程接口，用于在 Windows 平台上实现高性能的三维图形渲染。它是 DirectX 11 的一部分，是 Direct3D 的最新版本。

D3D11 提供了一套功能强大且灵活的接口，使得开发者可以利用硬件加速来创建复杂的三维图形应用程序。它支持各种图形效果，如光照、阴影、纹理映射等，并且可以处理复杂的几何变换和投影操作。

D3D11 是一个底层的图形库，它直接与图形硬件交互，因此具有很高的性能和可定制性。开发者可以使用 D3D11 来创建各种类型的图形应用程序，包括游戏、计算机辅助设计（CAD）、虚拟现实（VR）等。

D3D11 的工作原理是通过定义一系列的状态和操作来描述图形对象，并将其发送到图形硬件进行处理和渲染。开发者可以使用 D3D11 的接口来设置状态、加载纹理、执行变换等操作，从而实现所需的图形效果。

步骤类同 2，首先到 D3D11 目录下找到 Demo 对应平台的脚本，脚本生成项目代码，

然后配置项目的依赖库，在 D3D11 目录下找到 thirdParty 找到安装脚本设置第三方库，这里会下载 DirectX11 库，

最后在 build 目录下找到生成的项目解决方案 Demo.sln，

直接运行项目，

4、补充：虚拟机开启 OpenGL 支持

  1. 在 VirtualBox 中选择您的虚拟机，并 "设置"。
  2. 在虚拟机设置窗口中，选择 "显示" 选项卡。
  3. 在 "显示" 选项卡中，确保 "启用 3D 加速" 复选框被选中。
  4. 在 "显卡" 部分，选择 "VBoxVGA" "VBoxSVGA"或 "VMSVGA" 作为显卡控制器。这几个选项都支持 OpenGL 加速。
  5. "确定" 保存更改并关闭设置窗口。
  6. 启动虚拟机，并在 Windows 10 中安装 VirtualBox Guest Additions。在虚拟机的菜单栏中，选择 "设备" -> "安装增强功能"。

今天的文章 二、Live2d 简介与使用分享到此就结束了，感谢您的阅读。
编程小号
上一篇 2025-01-05 12:46
下一篇 2025-01-05 12:40

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ji-chu/102496.html