9. 看板娘配置指南

695 字
3 分钟
9. 看板娘配置指南

看板娘配置指南#

配置文件位置#

src/config/pioConfig.ts

看板娘类型#

博客支持两种看板娘模型:

类型说明
Spine骨骼动画,配置更灵活
Live2D平面建模,资源丰富

Spine 看板娘配置#

启用/禁用#

export const spineModelConfig: SpineModelConfig = {
// Spine 看板娘开关
enable: true, // true=启用, false=禁用
// ...
}

模型配置#

model: {
// Spine模型文件路径
path: "/pio/models/spine/firefly/1310.json",
// 模型缩放比例
scale: 1.0,
// X轴偏移
x: 0,
// Y轴偏移
y: 0,
},

位置配置#

position: {
// 显示位置
// bottom-left=左下角, bottom-right=右下角
// top-left=左上角, top-right=右上角
corner: "bottom-left",
// 距离边缘0px
offsetX: 0,
// 距离下边缘0px
offsetY: 0,
},

注意:右下角可能会挡住返回顶部按钮。

尺寸配置#

size: {
// 容器宽度
width: 135,
// 容器高度
height: 165,
},

交互配置#

interactive: {
// 交互功能开关
enabled: true,
// 点击时随机播放的动画列表
clickAnimations: [
"emoji_0",
"emoji_1",
"emoji_2",
"emoji_3",
"emoji_4",
"emoji_5",
],
// 点击时随机显示的文字消息
clickMessages: [
"你好呀!我是流萤~",
"今天也要加油哦!✨",
"想要一起去看星空吗?🌟",
"记得要好好休息呢~",
"有什么想对我说的吗?💫",
],
// 文字显示时间(毫秒)
messageDisplayTime: 3000,
// 待机动画列表
idleAnimations: ["idle", "emoji_0", "emoji_1", "emoji_3", "emoji_4"],
// 待机动画切换间隔(毫秒)
idleInterval: 8000,
},

响应式配置#

responsive: {
// 在移动端隐藏
hideOnMobile: true,
// 移动端断点
mobileBreakpoint: 768,
},

层级与透明度#

// 层级
zIndex: 1000,
// 透明度
opacity: 1.0,

Live2D 看板娘配置#

启用/禁用#

export const live2dModelConfig: Live2DModelConfig = {
// Live2D 看板娘开关
enable: false, // true=启用, false=禁用
// ...
}

模型配置#

model: {
// Live2D模型文件路径
path: "/pio/models/live2d/snow_miku/model.json",
// 也可以使用其他模型
// path: "/pio/models/live2d/illyasviel/illyasviel.model.json",
},

其他配置#

Live2D 的位置、尺寸、交互等配置与 Spine 相同,参考上面的说明。

切换看板娘类型#

启用 Spine#

spineModelConfig: {
enable: true,
},
live2dModelConfig: {
enable: false,
},

启用 Live2D#

spineModelConfig: {
enable: false,
},
live2dModelConfig: {
enable: true,
},

常见问题#

Q: 看板娘不显示?#

  1. 检查对应类型的 enable 是否为 true
  2. 检查模型文件路径是否正确
  3. 检查浏览器控制台是否有错误

Q: 看板娘挡住内容?#

调整 position.corner 切换位置:

corner: "bottom-left", // 改到左下角

或调整 zIndex 降低层级:

zIndex: 100,

Q: 移动端也想显示看板娘?#

responsive: {
hideOnMobile: false, // 在移动端显示
},

Q: 如何自定义对话内容?#

修改 clickMessages 数组:

clickMessages: [
"你的第一条消息",
"你的第二条消息",
"你的第三条消息",
],

Q: 待机动画不切换?#

检查 idleAnimations 是否配置了有效的动画名称。

Q: 点击没有反应?#

  1. 检查 interactive.enabled 是否为 true
  2. 检查 clickAnimations 是否配置了有效的动画

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!

赞助
9. 看板娘配置指南
https://blogboy.eu.cc/posts/9/
作者
Coldairboy
发布于
2026-04-01
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
Coldairboy
记录学习笔记、折腾过程和日常灵感。
公告
Hi,欢迎来到 Coldairboy学习笔记。
音乐
封面

音乐

暂未播放

0:00 0:00
暂无歌词
分类
标签
站点统计
文章
31
分类
3
标签
5
总字数
36,702
运行时长
0 天
最后活动
0 天前

目录