tanfuling/l2dpetformac

基于electronjs的live2d桌宠项目，想在mac上养一只live2d宠物的话可以fork下来学习一下。这个项目是比较适合学习live2d的sdk与electron的一个项目。

L2dPetForMac/Live2d桌宠

前言

希望有生之年整合完善所有功能点，成为可配置，可扩展，可自定义的多功能应用。

持续维护中 - 20200831

作者的逼逼叨

• 因为本是程序员，想要在Mac上运行一个可爱的小萝莉很久了。苦于Mac市场目前我找了很久都没找到符合心意的项目。
• 于是自己写了一套并且开源！
• 然后目前项目初期,现阶段可能类似demo版本，整个项目需要的所有技术点对我而言都是直接上手，代码可能不会很优雅。
• 如果你会js，node，你将很容易玩转这个项目！因为我已经给你搭好架子了。（踩了超多坑！！！
• 最后:如果你喜欢live2d，喜欢这个项目,欢迎fork,反馈,一定第一时间解答!

环境

1. chrome 83.0.4103.64
2. node 12.14.1
3. electron 9.1.0
4. Live2D Cubism Core version: 04.00.0000 (67108864)

主要功能

1. 窗口置顶
2. 窗口透明
3. live2d的透明区域点击穿透
4. 窗口在dock层显示
5. live2d的sdk与electron关联-electron的node提供应用后端支持，live2d提供前端展示。
6. electron与osx端关联-osx端提供应用的应用级底层支持
7. ejs端的网络请求模块,对Promise做的一些理解性的注释
8. 实现了websocket服务
9. js 与 ts 打包后的 js 代码通信问题
10. node-imap mail-listener5 邮件监听，随时获取最新邮件信息
11. opencv-node 准备接入人脸扫描，期望达到类似faceicg 的效果,face-api可以研究还是有些问题需要解决[x]
12. cron 定时任务库引入
13. Volume.js 声音控制
14. 谷歌浏览器历史记录实时获取
15. sqlite3加入为了读取Chrome的sqlite
16. 引入openBES弹幕系统
17. 快捷键cmd+p打开debug模式
18. 拖动移动位置
19. 顶部的菜单栏里加了管理面板的入口(google历史下载记录查看，拖动文件获得地址)
20. loading加载窗口
21. 拖入图片，压缩图片

项目开始

本项目食用方法

开发版

为了方便后面 electronjs

0. 分别进入 panel | live2d | 还有根目录 / 运行 yarn 初始化构建一下，3个缺一不可

1. 启动 electronjs 命令：yarn ; yarn run start 正常的话这时桌面应该有模型被显示了

2. 启动 live2d 热更新 命令：cd live2d ; yarn ; yarn run start 这一步是为了开启热更新，方便修改

3. 不想开启热更新的话可以在 cd live2d 目录下面使用yarn run build 此时会更新 live2d 目录下的 dict 文件夹

4. 默认为debug模式，可手动修改app/libs/Config.js中的debug为false

5. cmd + p 打开界面里的debug视图

6. yarn run download_vue_element_ui vue相关的需要执行这个命令

7. yarn global add imagezip 全局安装压缩图片的命令或者项目安装yarn add imagezip

8. 添加一个空任务文件

# 文件路径文件名: plugins/cron/system.js

module.exports =  [
    {
        time: '0 9,23 * * 1-6',
        call: () => {
            // 你的定时任务
        }
    }
]

上面的流程走完，出现Buffer警告解决方案，其实不管也没什么关系，强迫症看着不舒服可以用下面的方法

使用项目./patches目录下的补丁文件

# 项目根目录运行
git apply --ignore-whitespace patches/imap+0.8.19.patch
git apply --ignore-whitespace patches/applescript+1.0.0.patch

tips

主进程的处理逻辑都在 app/main/ 目录下 渲染进程的逻辑 app/renderer/ 目录下

重要文件

1. app/main/libs/Config.js 应用配置整个app都可以拿到的配置属性
2. live2d/src/lappdefine.ts live2d的配置，像更换模型，和live2d有关的都在这里
3. app/main/loads/EmailListen.js 可以配置一些邮件方面的东西
4. app/main/loads/WebSocket.js websocket相关的代码在这个文件里面
5. app/main/loads/log.js 应用的node层全局有log(any,tag)方法,打印log
6. app/main/renderer/renderer.js renderer（渲染）层也定义了一个log(any,tag) 方法，输出与node层的一样，同样在渲染层可用

运行

正常显示

Dock栏级别的显示

邮件获取截图

监听Chrome浏览截图

cmd + p 打开关闭debug

弹幕功能

左边是model模型，右边是model3模型 ps:实验性测试,结论是ok的，就是支持live2d可以加载不同版本的模型

fork前需要技术栈

1. js live2d 4.0打包之后是这个
2. ts live2d 4.0的sdk需要这个
3. nodejs electron需要这个
4. oc 需要了解程度，窗口顶端化需要这个语言
5. c++ 需要了解程度，涉及到nodejs和oc通信
6. webgl 需要有了解，live2d展示核心是这个
7. 需要看一遍 electron 的官网那些文档最起码的概念要知道 官网文档
8. live2d 官网的sdk文档，建议每个字都去看一下，建议选日语或者英语用chrome浏览器自带的翻译看，官网的机翻更渣 live2d官网文档4.0

已知bug

1. loop方法更新动画时会出现警告-[已解决]原因是为了实现透明区域点击穿透导致的性能问题。

Todo List

整合完善所有功能点(终极目标)，成为可配置，可扩展的应用。- 有条件的话兼容windows系统

1. element-ui vue 做管理页面
2. pic 上传

需要优化

1. cpu占用率过高-因为live2dsdk4的渲染是使用的cpu，导致drawImage方法太费cpu资源了。后续可以优化一下
2. 模型文件夹太大，没有提取出来，后续会提出去，不然安装包会大到几百mb

依赖

由此项目扩展出的让窗口置顶的方法

electron-panel-window 魔改