给博客添加能动的看板娘(Live2D)-关于模型的二三事

前言

在两年前差不多这个时候，我写了一篇文章，记载了关于在博客里添加浮动小人的过程。后来因为换了新主题，之前的浮动小人与新主题风格不搭，就去掉了。
而两年后，我注意到Live2D这个技术，很适合用来展示看板娘（或者叫做浮动小人、网页宠物、网页挂件之类的），折腾两天后，终于达到了一个基本可用的状态，而具体效果，在看这篇文章的你肯定已经发现了。话不多说，下面讲一下我的折腾过程：

cPlayerOptions.push({"id":5,"list":[{"artist":"\u6749\u6075\u3086\u308a\u304b","name":"\u30a8\u30f3\u30c9\u30eb\u30d5\u30a3\u30f3","image":"\/\/p1.music.126.net\/Vls3tRRSmLjYNX8_jJsjyw==\/2532175280692526.jpg?param=128x128","url":"https:\/\/imjad.cn\/action\/cplayerapi?get=url&id=29764417","lyric":"[by:HAMA\u69d8]\n[ar: \u6749\u6075\u3086\u308a\u304b]\n[ti: \u30a8\u30f3\u30c9\u30eb\u30d5\u30a3\u30f3]\n[al: \u30bb\u30ad\u30e9\u30e9\u30ac\u30fc\u30eb]\n[length: 05:00]\n[00:00.00]\n[00:17.20]\u5c11\u3057\u98a8\u90aa\u5f15\u3044\u305f\n[00:24.18]\u3060\u3051\u3069\u3072\u3068\u308a\u304d\u308a\n[00:31.32]\u660e\u304b\u308a\u3082\u3064\u3051\u305a\u306b\n[00:38.12]\u3053\u3053\u306f\u6d77\u306e\u5e95\n[00:45.10]\u96fb\u8a71\u304c\u9cf4\u308b\u305f\u3073\u306b\n[00:52.02]\u3088\u304e\u308b\u30ad\u30df\u306e\u9854\n[00:59.47]\u6c17\u307e\u3050\u308c\u306a\u547c\u3073\u3060\u3057\n[01:01.72]\u7d42\u96fb\u306a\u3057\u3067\u3082\u304a\u304b\u307e\u3044\u306a\u3057\u3067\n[01:05.72]\u5bb6\u3092\u98db\u3073\u51fa\u3057\u305f\n[01:11.60]\n[01:19.20]\u4e8c\u4eba\u3044\u308b\u304b\u306b\u306a\u3063\u3066\n[01:21.50]\u6ce2\u6253\u3064\u30b7\u30fc\u30c4\u306e\u4e0a\u3067\n[01:25.95]\u3042\u3063\u3061\u30d8\u30c0\u30a4\u30d6\n[01:27.50]\u305d\u3063\u3061\u3067\u30a2\u30a4\u30d6\n[01:29.32]\u6c34\u3057\u3076\u304d\u3068\u3070\u3057\u3066\n[01:33.08]\u3055\u3089\u3051\u51fa\u3059\u672c\u80fd\u3068\n[01:35.45]\u96f2\u96a0\u308c\u3057\u305f\u672c\u97f3\n[01:39.58]\u5feb\u697d\u306e\u3080\u3053\u3046\u4fa7\n[01:43.00]\u671d\u65e5\u304c\u6607\u308b\u3063\u305f\u3089\u304a\u522b\u308c\u306d\n[01:48.58]\u307e\u305f\u7b11\u9854\u3063\u3066\u624b\u3092\u632f\u308b\n[01:54.25]\u3042\u305f\u3057\u304c\u75db\u3044\u3088\n[02:00.68]\n[02:04.40]\u611b\u304c\u307b\u3057\u304f\u3063\u3066\n[02:11.40]\u305d\u308c\u3060\u3051\u3058\u3083\u30c0\u30e1\u3067\n[02:19.00]\u611b\u3057\u3066\u3053\u308c\u306a\u3044\u306a\u3089\n[02:21.10]\u8ab0\u3067\u3082\u3044\u3044\u3088\u305d\u3093\u306a\u306e\u5618\u3088\n[02:25.08]\u3042\u306a\u305f\u304c\u307b\u3057\u3044\u3088\n[02:31.00]\n[02:33.05]I can fly away\n[02:36.40]You can fly away\n[02:39.87]I can fly away\n[02:43.35]You can fly away\n[02:46.60]\u4e00\u4eba\u3044\u308b\u304b\u306b\u306a\u3063\u3066\n[02:48.72]\u3055\u3056\u6ce2\u30b7\u30fc\u30c4\u306e\u4e0a\u3067\n[02:53.08]\u5b50\u3069\u3082\u307f\u305f\u3044\u306b\u6ce3\u3044\u3066\u3044\u305f\n[02:56.34]\u6ce1\u306b\u6d88\u3048\u3066\u3057\u307e\u3044\u305f\u3044\u3084\n[03:00.42]\u5927\u30ad\u30e9\u30a4\u306a\u30ad\u30df\u306e\n[03:02.63]\u8eab\u52dd\u624b\u3082\u8a31\u3057\u3066\n[03:06.86]\u3042\u3052\u307e\u3057\u3087\u3046\u597d\u304d\u306b\u3057\u3066\n[03:10.13]\u305f\u3060\u305d\u3070\u306b\u304a\u3044\u3066\u304f\u308c\u308b\u306e\u306a\u3089\n[03:15.76]\u305d\u308c\u4ee5\u4e0a\u671b\u307e\u306a\u3044\n[03:21.60]\u671b\u3081\u306a\u3044\u75db\u3044\u3088\n[03:31.36]\u4e8c\u4eba\u3044\u308b\u304b\u306b\u306a\u3063\u3066\n[03:33.65]\u6ce2\u6253\u3064\u30b7\u30fc\u30c4\u306e\u4e0a\u3067\n[03:37.92]\u3042\u3063\u3061\u30d8\u30c0\u30a4\u30d6\u305d\u3063\u3061\u3067\u30a2\u30a4\u30d6\n[03:41.40]\u6c34\u3057\u3076\u304d\u3068\u3070\u3057\u3066\n[03:45.30]\u3055\u3089\u3051\u51fa\u3059\u672c\u80fd\u3068\n[03:47.59]\u96f2\u96a0\u308c\u3057\u305f\u672c\u97f3\n[03:51.68]\u5feb\u697d\u306e\u5411\u3053\u3046\u4fa7\n[03:55.10]\u307e\u305f\u54c0\u3057\u307f\u304c\u5f85\u3063\u3066\u3044\u308b\u304b\u3089\n[04:00.76]\u4e00\u7dd2\u306b\u3086\u3053\u3046\u30a8\u30f3\u30c9\u30ed\u30fc\u30eb\n[04:05.90]\u305d\u306e\u5148\u3067\u30ad\u30b9\u3057\u3066\n[04:13.20]\n[04:17.50]I can fly away\n[04:20.85]You can fly away\n[04:24.36]I can fly away\n[04:27.87]You can fly away\n[04:30.81]\n","transLyric":"[by:\u554a\u4eca\u5929\u662f\u4e03\u6708\u5341\u65e5\u5462]\n[00:17.20]\u7a0d\u5fae \u6709\u70b9\u611f\u5192\u4e86\n[00:24.18]\u53ef\u662f\u5374 \u72ec\u81ea\u4e00\u4eba\n[00:31.32]\u706f\u5149\u4e5f\u90fd \u672a\u66fe\u70b9\u4eae\n[00:38.12]\u8fd9\u91cc\u662f \u6d77\u6d0b\u6df1\u5904\n[00:45.10]\u6bcf\u6bcf\u542c\u5230 \u7535\u8bdd\u94c3\u54cd\n[00:52.02]\u4f60\u7684\u9762\u5bb9\u4fbf \u63a0\u8fc7\u8111\u6d77\n[00:59.47]\u5fc3\u8840\u6765\u6f6e\u7684 \u4e00\u6b21\u547c\u53eb\n[01:01.72]\u5373\u4f7f\u8d76\u4e0d\u4e0a\u672b\u73ed\u7535\u8f66 \u4e5f\u8bf7\u522b\u5728\u610f\n[01:05.72]\u4ece\u5bb6\u4e2d \u5954\u8dd1\u7740\u5306\u5306\u51fa\u95e8\n[01:19.20]\u4e24\u4eba\u5316\u8eab\u4e3a\u6d77\u8c5a\n[01:21.50]\u5728\u6ce2\u6d9b\u62cd\u6253\u7684\u5e8a\u5355\u4e4b\u4e0a\n[01:25.95]\u5411\u7740\u90a3\u91cc\u6df1\u6f5c\n[01:27.50]\u5c31\u5728\u90a3\u91cc\u7231\u629a\n[01:29.32]\u626c\u8d77\u4e00\u4e32\u4e32\u6676\u83b9\u6c34\u82b1\n[01:33.08]\u66b4\u9732\u65e0\u9057\u7684 \u672c\u80fd\u4e0e\n[01:35.45]\u6df1\u6df1\u57cb\u85cf\u7684 \u771f\u5fc3\u8bdd\n[01:39.58]\u5728\u5feb\u4e50\u7684 \u53e6\u4e00\u8fb9\n[01:43.00]\u671d\u9633\u82e5\u5df2\u7ecf\u5347\u8d77 \u4fbf\u8981\u9053\u522b\u5462\n[01:48.58]\u518d\u4e00\u6b21 \u5c55\u9732\u7b11\u5bb9 \u6325\u624b\n[01:54.25]\u6211\u7684\u5fc3 \u9690\u9690\u4f5c\u75db\n[02:04.40]\u7231\u603b\u662f \u6709\u6240\u6e34\u6c42\n[02:11.40]\u4ec5\u4ec5\u5982\u6b64 \u662f\u4e0d\u884c\u7684\u5440\n[02:19.00]\u5982\u679c\u4e0d\u80fd\u597d\u597d\u88ab\u7231\n[02:21.10]\u65e0\u8bba\u662f\u8c01\u90fd\u597d \u8fd9\u79cd\u8bdd\u5176\u5b9e\u662f\u8c0e\u8a00\u5440\n[02:25.08]\u60f3\u8981\u62e5\u6709\u7684 \u53ea\u6709\u4f60\n[02:33.05]\u6211\u53ef\u4ee5\u5c55\u7fc5\n[02:36.40]\u4f60\u80fd\u591f\u98de\u7fd4\n[02:39.87]\u6211\u53ef\u4ee5\u79bb\u53bb\n[02:43.35]\u4f60\u4ea6\u53ef\u4ee5\u53bb\u8fdc\u65b9\n[02:46.60]\u72ec\u81ea\u5316\u8eab\u4e3a\u6d77\u8c5a\n[02:48.72]\u5728\u5c42\u5c42\u6d9f\u6f2a\u7684\u5e8a\u5355\u4e4b\u4e0a\n[02:53.08]\u50cf\u4e2a\u5b69\u5b50\u4e00\u6837 \u7eb5\u60c5\u54ed\u6ce3\n[02:56.34]\u60f3\u8981\u5728\u6ce1\u6cab\u4e4b\u4e2d\u6d88\u5931\u6b86\u5c3d\u554a\n[03:00.42]\u8fde\u6700\u6700\u8ba8\u538c\u7684 \u4f60\u7684\u90a3\u4efd\n[03:02.63]\u81ea\u79c1\u4efb\u6027 \u4e5f\u90fd\u539f\u8c05\n[03:06.86]\u90fd\u4ea4\u7ed9\u4f60\u5427 \u4e00\u5207\u968f\u4f60\u559c\u6b22\n[03:10.13]\u53ea\u8981\u80fd\u591f\u6765\u5230\u6211\u7684\u8eab\u8fb9\n[03:15.76]\u9664\u6b64\u4e4b\u5916 \u518d\u4e5f\u6ca1\u6709\u5176\u4ed6\u613f\u671b\n[03:21.60]\u65e0\u6cd5\u7948\u613f \u63ea\u5fc3\u75bc\u75db\n[03:31.36]\u4e24\u4eba\u5316\u8eab\u4e3a\u6d77\u8c5a\n[03:33.65]\u5728\u6ce2\u6d9b\u62cd\u6253\u7684\u5e8a\u5355\u4e4b\u4e0a\n[03:37.92]\u5411\u7740\u90a3\u91cc\u6df1\u6f5c \u5c31\u5728\u90a3\u91cc\u7231\u629a\n[03:41.40]\u626c\u8d77\u4e00\u4e32\u4e32\u6676\u83b9\u6c34\u82b1\n[03:45.30]\u66b4\u9732\u65e0\u9057\u7684 \u672c\u80fd\u4e0e\n[03:47.59]\u6df1\u6df1\u57cb\u85cf\u7684 \u771f\u5fc3\u8bdd\n[03:51.68]\u5728\u5feb\u4e50\u7684 \u53e6\u4e00\u8fb9\n[03:55.10]\u4ecd\u7136 \u6709\u65e0\u9650\u54c0\u4f24 \u5728\u7b49\u5f85\u7740\n[04:00.76]\u4e00\u540c\u524d\u53bb\u5427 \u7247\u5c3e\u7684\u6f14\u804c\u4eba\u5458\u8868\u7f13\u7f13\u6eda\u52a8\n[04:05.90]\u5c31\u5728\u90a3\u91cc \u7ed9\u6211\u4e00\u4e2a\u543b\n[04:17.50]\u6211\u80fd\u591f\u5c55\u7fc5\n[04:20.85]\u4f60\u53ef\u4ee5\u98de\u7fd4\n[04:24.36]\u6211\u80fd\u591f\u79bb\u53bb\n[04:27.87]\u4f60\u4ea6\u53ef\u4ee5\u53bb\u8fdc\u65b9\n","id":"29764417"}]});

获取到可用的模型

live2d并不是一种先进的技术，它产生的效果，都是用基本的平移、旋转、透明、曲面变形等操作实现的。最终的效果与贴图关系很大，而每一个动作，都需要制作师的精细调整。这是一个需要消耗大量时间精力的过程，因此质量好的模型并不多，质量好的也一般是在游戏中，版权受到保护，不能随意使用。

关于模型的制作，日后若有机会我会另写一篇文章介绍，这里我偷个懒，直接提取手机游戏 「药水制作师」里Pio的模型和贴图

解包是第一步

下载药水制作师的apk安装包，并使用解压缩软件解压，这款游戏是用Unity引擎开发的，因此我尝试搜索*.assets，发现了这个目录\assets\bin\Data，从包含文件判断，这也许就是我们需要的目录。
启动Unity Studio，依次点击File-Load floder，选择上述目录，Unity Studio会尝试读取此目录包含的所有资源文件。
读取完成后，在Asset List选项卡中可以看到许多资源文件。live2d的模型文件后缀名是.moc，动作数据后缀名是.mtn，在过滤器填入后缀名，可以只显示此类资源。
贴图文件较为特殊，需要按Type排序，然后一个一个查看，对于Pio来说，我们所需的贴图文件名为default-custome、school-costume和pajamas-costume。

可以看到模型文件有两个，动作数据有许多（Unity Studio会给重名资源文件名添加一个格式为#+数字的后缀），选中它们，依次点击Export-Selected assets，选择一个目录放置解包后的数据。

组装模型真的是很麻烦呢

新建一个motions目录用于存储动作数据，一个textures目录用于存储贴图，将上述的.mtn文件和贴图文件放入对应目录，目录树如下：

│  model.moc
│
├─motions
│      Breath Dere1.mtn
│      Breath Dere2.mtn
│      Breath Dere3.mtn
│      Breath1.mtn
│      Breath2.mtn
│      ...
│
└─textures
        default-costume.png
        pajamas-costume.png
        school-costume.png

新建一个名为model.json的文件，这个JSON用于存储模型名字，指示模型与贴图、动作的关系等，内容如下：

{
    "version":"1.0.0",
    "model":"model.moc",
    "textures":[
        "textures/default-costume.png",
        "textures/pajamas-costume.png",
        "textures/school-costume.png"
    ],
    "layout":{
        "center_x":0.0,
        "center_y":-0.05,
        "width":2.0
    },
    "motions":{
        "idle":[
            {"file":"motions/WakeUp.mtn"},
            {"file":"motions/Breath1.mtn"},
            {"file":"motions/Breath2.mtn"},
            {"file":"motions/Breath3.mtn"},
            {"file":"motions/Breath5.mtn"},
            {"file":"motions/Breath7.mtn"},
            {"file":"motions/Breath8.mtn"}
        ],
        "":[
            {"file":"motions/Breath1.mtn"},
            {"file":"motions/Breath2.mtn"},
            {"file":"motions/Breath3.mtn"},
            {"file":"motions/Breath4.mtn"},
            {"file":"motions/Breath5.mtn"},
            {"file":"motions/Breath6.mtn"},
            {"file":"motions/Breath7.mtn"},
            {"file":"motions/Breath8.mtn"},
            {"file":"motions/Fail.mtn"},
            {"file":"motions/Sleeping.mtn"},
            {"file":"motions/Success.mtn"},
            {"file":"motions/Sukebei1.mtn"},
            {"file":"motions/Sukebei2.mtn"},
            {"file":"motions/Sukebei3.mtn"},
            {"file":"motions/Touch Dere1.mtn"},
            {"file":"motions/Touch Dere2.mtn"},
            {"file":"motions/Touch Dere3.mtn"},
            {"file":"motions/Touch Dere4.mtn"},
            {"file":"motions/Touch Dere5.mtn"},
            {"file":"motions/Touch Dere6.mtn"},
            {"file":"motions/Touch1.mtn"},
            {"file":"motions/Touch2.mtn"},
            {"file":"motions/Touch3.mtn"},
            {"file":"motions/Touch4.mtn"},
            {"file":"motions/Touch5.mtn"},
            {"file":"motions/Touch6.mtn"},
            {"file":"motions/WakeUp.mtn"}
        ]
    }
}

其中motions的idle组是放置时的动作，按照次序依次显示，可以在这里添加更多的动作
layout的center_x字段和center_y字段用于偏移显示模型，日后若有显示错位可以修改此处的值

因为重名的关系，模型、动作和贴图的关系需要在接下来的步骤中尝试出来

来看看工作成果吧

查看模型需要使用LIVE2D官方提供的Live2D Viewer，下载和安装方法请查看这个网页

打开Live2D Viewer，将model.json拖入主窗口，可以看到模型已经加载成功，若有贴图错位、动作鬼畜等情况则为上一步的model.json文件配置有误，测试直到找到正确的模型、动作、贴图组合

测试动作

选择要测试的动作，点击Playback播放动作以测试动作是否正常，勾选Loop可以循环播放

获取更多贴图

APK安装包内仅包含默认两个人物的三套贴图，获取更多贴图请参考以下步骤：

安装并打开药水制作师　没错我是来安利游戏的 玩一段时间以赚到足够多的金币 用金币购买喜欢的衣服（氪金也是可以的） 贴图会被下载至/mnt/sdcard/Android/data/com.sinsiroad.potionmaker/files/UnityCache/Shared下以40位hash命名的目录，文件名为__data 将上述文件传送至PC 使用UABE将__data文件转换为.assets格式 参照步骤 解包 提取出贴图文件 在model.json的textures字段中加入提取到的贴图

结语

至此模型已经基本完善，将其添加至blog将留待下一篇文章再谈
附上Pio和Tia的模型（包含两人的动作和初始的三套贴图）：Potion-Maker.zip

请注意本文中出现的“药水制作师”、“Potion Maker”字样及应用内包含的文本、模型、图片、动作数据等所有权均属于“药水制作师”作者Sinsiroad，仅供研究学习，不得用于商业用途

参考

Live2D官网
什么是Live2D
Live2D Viewer - Live2D Cubism 2 中文說明書
药水制作师
Unity Studio
UABE