前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo -5- 添加 live2d 看板动画

Hexo -5- 添加 live2d 看板动画

作者头像
为为为什么
发布2022-08-04 13:26:07
3810
发布2022-08-04 13:26:07
举报
文章被收录于专栏:又见苍岚

live2d是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。 在Hexo中生成可以与用户互动的卡通人物,简直就是博客的灵魂所在。本文介绍live2d 看板动画添加方法。

安装 hexo-helper-live2d

官网链接 hexo-helper-live2d Github 官方链接 安装时需要在 Hexo 工程目录下输入命令:

代码语言:javascript
复制
npm install --save hexo-helper-live2d

挑选喜欢的模型

基础的live2d模型有很多,挑选你喜欢的记录下他的名字:

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

模型下载

命令行

在hexo目录中输入命令:

代码语言:javascript
复制
npm install --save live2d-widget-model-`模型名字`

此时在hexo根目录/node_modules/ 文件夹中增加 ’ live2d-widget-model-模型名字 ’ 文件夹

github下载

上述列表模型 github地址 新模型 gtihub地址 可以下载模型放在hexo根目录/node_modules/ 文件夹中,以达到命令行安装的效果

模型应用配置

站点配置文件中加入配置信息:

代码语言:javascript
复制
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<模型名字>
  display:
    position: right  # left
    width: 220
    height: 440
  mobile:
    show: true   #是否在手机进行显示
  react:
    opacity: 0.7

haru

haru 和其他模型有些不同,haru包中包含 01 / 02 两个模型,在使用时模型名字为:

代码语言:javascript
复制
model:
  use: live2d-widget-model-haru/01

代码语言:javascript
复制
model:
  use: live2d-widget-model-haru/02

此时模型仍然无法正确加载,因为hexo根目录/node_modules/live2d-widget-model-haru/01/或02/ 中的json文件是空的,所以需要把hexo根目录/node_modules/live2d-widget-model-haru/中的json文件复制到01/或02/文件夹中。

测试

输入命令:

代码语言:javascript
复制
hexo clean && hexo g && hexo s

http://127.0.0.1:4000/查看测试结果 (示例为z16)

加强版(可以说话、互动)

优化版live2d-widget

具体方法参考 https://blog.csdn.net/weixin_34235371/article/details/91468588 https://blog.csdn.net/cungudafa/article/details/104282643#_47

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020年3月9日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装 hexo-helper-live2d
  • 挑选喜欢的模型
    • 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
                                              • 模型下载
                                                • 命令行
                                                  • github下载
                                                  • 模型应用配置
                                                  • haru
                                                  • 测试
                                                  • 加强版(可以说话、互动)
                                                  相关产品与服务
                                                  腾讯云 BI
                                                  腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
                                                  领券
                                                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档