Live 2D

WordPress Live 2D 1.7.8_beta 版本更新

  • 此版本为测试版本,请在github上下载更新

  • 新增后台设置:moc3模型自定义动作,提供给Cubism Editor 3.x版本的模型明确指定动作文件使用

  • lapplive2dmanager.ts 的 onTap 方法:增加判断自定义的hitAreaList,用户可在WP后台对hitAreaList进行设置
  • 对缩放算法进行修正,由原有lapplive2dmanager.ts 的 onUpdate 方法中计算 projection.scale(zoom, (zoom * width) / height); 改为使用Framework/math/cubismmodelmatrix.ts 中的构造方法this.setHeight(zoom); 进行控制,以确保缩放时触摸区域同比例缩放。
  • 此版本为本地调整版本,下一个版本将直接修改API,从源头来保证生成的文件可被动作调用。
  • 具体调整细节请看上一篇文章中的调整过程。
Live 2D

对于Live2D的Motion可以成功读取

在官方framework里面有一个motion3.json的parse方法,他会转换json中的动作,给到group动作组,提供后续触碰支持,在1.7.3版本中已经实际安装,此版本的debug版已经上传至github,debug版本安装后将会加载并反馈点击模型后触发的提示,如果可以,请协助我安装debug版本,并在留言处留下你的网址。

注意:debug版本会扰乱控制台内容,经常输出很多字符,请慎重安装。

https://github.com/jiangweifang/wp-live2d/releases/tag/1.7.3_dev

  • lappmodel.ts 的 375 行 loadCubismMotion 中需要读取 model3.json含有Motions的内容

  • Motions的组成 :
"Motions" : {
    "动作": [
        {
            "File": "motions/动作组_1.motion3.json"
        },
        {
            "File": "motions/动作组_2.motion3.json"
        },
        {
            "File": "motions/动作组_3.motion3.json"
        }
    ]
}

当前问题:
1. moc3模型制作结果由于v3版本生成和v4版本生成后结果不同,导致model3.json中对于Motions的定义有一定差异。
2. 没有动作组被触发,这个需要设置,我会在后台增加设置来配置动作触发的条件。
3. 触发动作可以在model3.json中配置好后直接使用

model3.json配置成功的例子“Hiyori”:

{
    "Version": 3,
    "FileReferences": {
        "Moc": "Hiyori.moc3",
        "Textures": [
            "Hiyori.2048/texture_00.png",
            "Hiyori.2048/texture_01.png"
        ],
        "Physics": "Hiyori.physics3.json",
        "Pose": "Hiyori.pose3.json",
        "UserData": "Hiyori.userdata3.json",
        "Motions": {
            "Idle": [
                {
                    "File": "motions/Hiyori_m01.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                },
                {
                    "File": "motions/Hiyori_m02.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                },
                {
                    "File": "motions/Hiyori_m03.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                },
                {
                    "File": "motions/Hiyori_m05.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                },
                {
                    "File": "motions/Hiyori_m06.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                },
                {
                    "File": "motions/Hiyori_m07.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                },
                {
                    "File": "motions/Hiyori_m08.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                },
                {
                    "File": "motions/Hiyori_m09.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                },
                {
                    "File": "motions/Hiyori_m10.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                }
            ],
            "TapBody": [
                {
                    "File": "motions/Hiyori_m04.motion3.json",
                    "FadeInTime": 0.5,
                    "FadeOutTime": 0.5
                }
            ]
        }
    },
    "Groups": [
        {
            "Target": "Parameter",
            "Name": "LipSync",
            "Ids": [
                "ParamMouthOpenY"
            ]
        },
        {
            "Target": "Parameter",
            "Name": "EyeBlink",
            "Ids": [
                "ParamEyeLOpen",
                "ParamEyeROpen"
            ]
        }
    ],
    "HitAreas": [
        {
            "Id": "HitArea",
            "Name": "Body"
        }
    ]
}

例子中“动作”设置为“Idle”为待机动作,模型将会各段时间随机选择“Idle”组中的动作触发,“TapBody”为触发身体触碰时的动作。

在ExStudio中可以看到 hemin_3 有TouchBody、TouchHead、TouchSpecial网格,他们代表触碰这3个位置可以有指定动作触发,这种网格只可以在Cubism Editor工具中进行修改和创建。

鉴于以上情景,我将会在代码中增加读取motions的方法,提供给没有按照Hiyori 配置的model3.json,但是相对的,用户需要在后台对触发的位置进行定义.

Live 2D

我们遇到了麻烦:(

在使用MOC3模型的时候发现有动作导致无法兼容的问题,果然是偷懒不想修改官方Framework的后果么,我不太敢用经过爆改的版本,今天开始要和爆改版本进行对比,检查哪里有问题了…

Live 2D

WordPress Live 2D 1.7.1版本更新

此版本新增多语言支持,目前支持繁体中文和英文。

从本周起差将将不再每周更新,欢迎留言提出问题,我会针对问题进行修复。

moc3模型触摸的问题是需要通过工具去修改配置文件才可以

您可以使用 Live2DViewerEX 来对模型被触摸的触发点进行调整,我将会在此文章中增加教学。

Live 2D

使用moc3模型的FAQ

我跟踪了一下使用者的网站,其实使用moc3模型的人并不多,下面我解释一下WordPress Live 2D 插件如何使用moc3模型。

什么是moc3模型
– moc3模型指的是在Live 2D Cubism Editor 3.0或更新版本生成的动态文件。

如何在本插件中使用moc3模型
– 将你准备好的moc3模型上传至目录当中,如果您准备存放github中,可以直接存储至Public项目。
– 然后请了解存放路径,并给材质API选项中填写此路径至*.model3.json
– 例如:https://cdn.jsdelivr.net/gh/jiangweifang/[email protected]_api_v4/model/kiritan/kiritan.model3.json

– 刷新页面后,您将会看到moc3模型展示至前台。
– moc3的缩放比例可能会比较小,所以您需要将模型缩放比例调整至合适大小,建议2.0,我没有进行控制是因为如果我在代码中写入2.0,其计算方式将会x2 ,例如1.1 实际计算结果将会是2.2。

Live 2D

WordPress Live 2D 1.7.0版本更新

  1. 对moc3 鼠标事件进行算法修改,现在模型头部可正确的看鼠标行动了
  2. 新增moc3截图功能,可以点击截图按钮拍下看板娘了
  3. 去掉对moc3模型自动x2倍的缩放算法,改为用户自行调整
  4. 追加了帮助信息,您可以通过后台查看帮助了解具体内容。
Live 2D

WordPress Live 2D 1.6.3版本更新

第一次使用MAC电脑完整开发,有点不太顺手,本周更新有点慢了哈哈~

今后大部分更新针对live2d.js文件,请更新之后清理您的cdn加速,以便缓存新版本js文件

  1. 对于Cubism Live2D SDK 4.0的鼠标事件进行算法修改
  2. moc3模型的鼠标跟随视角更宽广(但是还是有问题)
  3. moc3模型背景透明
  4. 您可以直接将后台api地址更换为model3.json的相对地址,以展示moc3的模型,这个地址可以是一个jsdelivr.com
  5. 提示框位置对应错了功能,已经修复了
  • 在使用moc3版本模型的时候,目前不可点击切换模型、材质和截图,后续会逐渐更新。
Live 2D

关于Ver3.0版本moc3的Live2D功能实装

如果您进入我的网站,应该会看到一个模型中没有的样式。
这是在Steam 中 FaceRig 这个软件的创意工坊中下载的。
您如果读过我的代码,可以模仿我的方式进行加载。目前SDK已支持。

但是有一些小问题,这还是测试阶段,我会用我的网站进行展示性测试,问题主要在于
1. 鼠标动作过于灵敏
2. 背景没有调整为透明色
3. 鼠标点击画板交互时,有一些表情无法展示

我会对SDK继续调教。另外我也在进行API的重新制作,以符合可读v3以上版本模型的要求。

另外新的电脑买了!

等到货了发开箱!

Live 2D

WordPress Live 2D 1.6.2版本更新

提醒各位,每次更新都会有JS文件的更改,如果您在使用CDN加速,尤其是cloudflare免费计划,务必在更新之后删除缓存,以便JS生效。


  1. 本次更新将会实装 Cubism Live2D SDK 4.0 以便测试版本
  2. 由于打包JS文件变大,我会尽量在2.0上线之前进行拆分
  3. 新增:模型缩放大小控制,您可以在后台自由设置模型在画布中的缩放倍数
  4. 修正:默认模型 ID改为手动填写(我通过来访页面找到了各位的网站,发现我如果固定这个选项会给各位带来不便)
  5. 如果有问题欢迎在Github上反馈issues
  6. 本次更新不会改变您当前的任何设置。
  7. 在樱花庄的白猫主题中测试兼容性正常,请在使用之前清理之前安装的Live2D功能避免JS冲突
  8. 捕获了一个来源的异常,这个不太影响使用,但是我觉得报错不行,我就给做成命令提示出来了。
  9. 捕获了一个加载异常,在未完全加载的时候会出现一个错误提示,在代码中理解这是一个在mousedown事件发生的时候出现的,当时画布应该还没有加载内容,导致没有坐标点。

PS:本次更新的隐藏功能

您可以修改waifu-tips.js 以支持3.0-4.0版本的Live2D
方法如下:
– 找到loadlive2d函数,将此函数替换为loadlive2dv3
– 传递以下参数:

/**
 * 
 * @param {必填:画框的ID,画框必须是HTML5中的canvas} id 
 * @param {目前仅支持本地的模型,请将文件放在可以对应上的目录} modelurl 
 * @param {缩放倍数建议为2.0,此项可不传,如果不传递就是2.0} zoom 
 */
loadlive2dv3('live2d','./model/miku/miku.model3.json',2.0);

//您需要将模型存放至插件根目录下,例如/www/wordparss/plugin/live2d/model/miku/

已经在WordPress中引入了moc3模型的SDK,但是实际没有直接在WordPress中进行测试,我会在下一个版本合并函数,并直接从API中区分版本。

Live 2D

Live2D v2 v4合并完成

通过一个周末的努力,我简单的理解了typescript的大概用法,并和之前的v2版本代码进行对比,了解了官方framework的使用方式和demo的原理,我成功的把代码进行了合并。

接下来我将会着重于处理一个bug就是模型不自适应画框。

等这个问题处理好以后,我将会修改api部分,后续我设计的是将模型放入之后自己识别v2还是v3+

另外如果您通过插件后台访问我的网站,请了解,我会跟着页面监控回访各位网站,来检查js是否在不同兼容环境下的错误,以便更好的修改代码兼容性,请不要介意。