Live2D看板娘的简单使用

介绍

Live2D看板娘是一种基于Live2D技术的网页插件，它能够在网页上展示一个动态的2D动画角色，这些角色通常具有互动性，能够响应用户的鼠标动作或点击，增加网页的趣味性和互动性。Live2D技术由日本Cybernoids公司开发，主要应用于电子游戏领域，通过将2D图像进行平移、旋转和变形等操作，生成具有自然动画效果的可动人物模型。

原理

Live2D看板娘的工作原理是通过Live2D Cubism技术，它允许开发者使用一系列的2D图像来创建一个动态的角色模型。这些图像可以通过软件进行编辑，定义角色的各个部位如何响应不同的动作和表情，从而生成一个看似3D的动态效果。Live2D看板娘通过JavaScript和HTML5技术在网页上实现，使得角色能够在网页上进行动画展示和交互。

简单的使用教程

以下是将Live2D看板娘添加到你网页的简单步骤：

1. 申请JS权限：如果你的博客平台需要，首先申请JS权限。
2. 添加看板娘代码：在你的网页或博客的HTML代码中添加以下脚本标签：

html

    <!-- 看板娘开始 -->
<link href='https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1-2/kbn/pio.css' rel='stylesheet' type='text/css'/>
    <!-- 可选位置： left 或 right -->
    <div class="pio-container left">
        <div class="pio-action"></div>
        <!-- 高度和宽度根据每个模型的不同 进行调整 -->
        <canvas id="pio" width="170" height="295"></canvas>
    </div>
    <script src='https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1-2/kbn/l2d.js'></script>
    <script src='https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1-2/kbn/pio.js'></script>
    <script>
        var pio = new Paul_Pio({
            "mode": "fixed",
            "touch": ["点击提示文字在kbn/pio.js中修改"],
            "hidden": false, //手机端是否隐藏
            "referer": "?欢迎来自 %t 的朋友~",
            "content": {
                "welcome": "?欢迎来到本站！"
            },
            // 可用参数：
            // "leimu" "1" "2" "kangna" "qingye" "shawu" "xiaomai" "zhinai"

            // 举例子：
            // "model": ["https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1/kbn/ 可修改参数位置 /model.json"]
            "model": ["https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1/kbn/xiaomai/model.json"],

            "tips": true //如果设置为false则会优先显示welcome中的内容“欢迎~”
        });
    </script>
<!-- 看板娘结束 -->

1.  选择模型：你可以通过修改jsonPath的值来更换不同的看板娘模型。以下是一些可用的模型路径示例：

• 黑猫咪：https://unpkg.com/live2d-widget-modelhijiki@1.0.5/assets/hijiki.model.json
• 
• 白猫咪：https://unpkg.com/live2d-widget-modeltororo@1.0.5/assets/tororo.model.json
• 
• 萌娘：https://unpkg.com/live2d-widget-modelshizuku@1.0.5/assets/shizuku.model.json
• 
• 干物小埋妹：

  https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1/kbn/xiaomai/model.json
  保存并刷新页面：添加完代码后，保存你的网页或博客设置，并刷新页面，你的Live2D看板娘就应该出现在页面上了。