给 Typecho 博客添加 Live 2D 看板娘的笔记

under Website  Notes of Programming  tag Typecho  live 2D  Pio  javascript    Published on February 23rd , 2020 at 09:56 pm

1. 给 Typecho 博客安装 live 2D 插件

茶这里使用的是 Paugram dalao 制作的 Pio 插件。
具体安装就不细述啦。

插件项目 Gayhub 地址:
https://github.com/Dreamer-Paul/Pio
插件项目帮助文档 & 常见问题:
https://docs.paul.ren/pio
插件项目开发故事:
https://paugram.com/coding/add-poster-girl-with-plugin.html

下面两段是搬运的作者写的文档【捂脸】

初始安装

  1. 从 GitHub 上获取本项目。
  2. 将插件压缩包上传到你的网站。Typecho 插件的默认存放路径在 /usr/plugins
  3. 解压插件的压缩包文件,默认得到一个文件夹,应该为 Pio-master
  4. 将文件夹更名为 Pio 以确保插件可以正常工作
  5. 登录你的 Typecho 后台,在导航栏找到 控制台 > 插件 > Pio > 启用

指导视频

你是 Typecho 新手吗?不妨先观看一下本视频后再进行操作吧!访问 Bilibili 观看 将支持展示 CC 字幕!

安装完成后默认看板娘没载出来?

多半是主题模板所致,至少我的是酱紫。解决方法就是在后台更改主题文件的 footer.php
在其末尾加上一句 <?php $this -> footer(); ?>

2. 添加其他看板娘模型

这里的模型均位于 插件目录/models 文件夹,并且所有模型的配置文件名必须为 model.json 才可以正常使用。

所以下好的模型直接丢进 插件目录/models 文件夹就完事啦,可以直接在 Pio 插件的后台进行模型更换。

Pio 插件作者开设的模型下载站,可以在里面找找
https://mx.paul.ren/

3. 调教你的看板娘(大雾

QQ截图20200222205557.png

相信在很多情况下,你的看板娘总是由于本身模型宽度空余过大,导致TA不会贴边站,而是如上图一样挡住一部分的页面排版。

而通过在 Pio 插件后台修改宽度时,有些看板娘又格外地傲娇,修改宽度并不会直接缩短这类看板娘的模型宽度空余使其靠边站,而是会整体渲染变小。

而茶经研究发现,在 Pio 插件按照原长宽尺寸设定并渲染看板娘后,再通过 F12 键审查元素并改变其长宽后,看板娘居然服帖地不改变大小而是成功贴边站了,此时缩短宽度就可以使这类看板娘向右平移。

运用 js 实现对看板娘的渲染后更改其长宽

如何渲染后更改其长宽呢?经过一番资料的搜寻,茶终于找到了用 js 解决的方案。

JavaScript 控制(改变)canvas(画布)的大小
https://blog.csdn.net/qq_29594393/article/details/52849339

感谢上面这只 dalao 的文章让我有了法子调教TA

Pio 插件所显示的 Live 2D 模型是建立在一个 canvas 里的。

canvas 是 HTML5 的“画布”标签,而 canvas 的widthheight 实际上不是 style 的属性,而是 attribute 属性。

所以我们就可以通过更改 canvas 的 attribute 属性来实现更改其长宽的目的。

于是就有了下面这串 js

<?php $this -> footer(); ?>

<script type="text/javascript">
var pio=document.getElementById("pio")

var width=280;
var height=550;

pio.setAttribute("width",width)
pio.setAttribute("height",height)

</script>

上面整一段 js 我放在了主题文件的footer.php 的最末尾,因为我想那里大概也应是模型渲染之后了吧XD。

QQ截图20200222205521.png

如图,经过一番折腾,看板娘也终于服帖地贴边站不再挡东西啦

注意,宽高值可以先通过 F12 键审查元素并改变其长宽,调试好后再写进上方的 js 里诶!

有些看板娘更改宽高会比例失调比如画面压缩怎么破?

那当然上面的 js 把他最后两句注释掉就完事啦因为没有用啦,你也可以留着它,对于这类比例于尺寸正相关的看板娘,在你算好对应正确比例的宽高尺寸之后,可以直接在 js 里更改输入正确比例宽高值,而不用去经常崩溃或者加载莫名巨久的 Pio 插件后台再更改啦。

当然我现在的看板娘没这个特性所以我就不研究下去惹。

茶觉得设置为 静态 模式下体验最佳

经过一番测(ba)试(wan),还是觉得看板娘在 Pio 插件的静态模式下体验最佳。

为什么捏?

因为首先看板娘可拖动主要是为了挡东西时可以手动地移开它,而这个问题经上面的折腾后已经解决了,现在 TA 已经不太会再挡东西了。

其次,为什么不选择固定模式,固定模式不是可以有按钮的交互么?因为插件的不完善,其互动仅限于文字层面和博客功能层面的互动,而不会触发 Live 2D 模型本身的 motion 动作,所以我暂时还是干脆不开启按钮交互了。

就算是设置为 静态模式,看板娘在 PC 端的页面上依旧会有文字问候语,但是每访问一个页面模型都会来一句,怎么解决吖?

茶的办法是给服务器上 pio 插件中路径为 \usr\plugins\Pio\static\pio.js 的第53行附近加上一段判断此时用户访问的 url 是否为首页。

var testurl = window.location.href;
if(testurl === "http://matce.cn/i/"){
    clearTimeout(this.t);
    this.t = setTimeout(function () {
        dialog.classList.remove("active");
    }, 3000);
}
else{
    dialog.classList.remove("active");
}

酱紫就可以让看板娘只能在首页说话 hhh


本页由 matcha 整理和发布,采用 知识共享署名4.0 国际许可协议进行许可,转载前请务必署名
  文章最后更新时间为:April 7th , 2022 at 02:03 pm
分享到:Twitter  Weibo  Facebook