Giter Site home page Giter Site logo

thesecondakari / vscode-live2d Goto Github PK

View Code? Open in Web Editor NEW
43.0 2.0 9.0 11.97 MB

vscode插件-live2d。 默认角色会设置为asoul的嘉然

License: Apache License 2.0

TypeScript 42.21% CSS 8.88% JavaScript 47.62% HTML 1.29%
bilibili electron vscode asoul

vscode-live2d's Introduction

A-SOUL-live2d 使用简介

嘉晚饭是真的! 赢!

简单预览:

视频演示

插件介绍视频 可以的话请给我点一下赞,能转发分享评论就最好了
我的b站账号 关注吗?也不是不行,(^_^)

功能概况:

使用 iframe 嵌入页面中,实现效果。

  • 启动 live2d 看板娘视图(使用sdk: pixi-live2d-display pio)
  • 模型:嘉然、向晚(来源 b 站 up:木果阿木果
  • 整体操作
    • 拖拽位置
    • 缩放大小
    • 点击穿透
  • 随机切换背景图
    • 该功能可与 A-SOUl-background插件功能配合使用,本插件的背景图优先级会更高
    • 点击切换随机背景图 图来源
    • 保存背景图
    • 加载保存背景图
    • 定时切换背景图
    • 背景图样式配置
    • 下载背景图
  • 随机溜冰场: 部分常见溜冰场,可能会有部分滞后
  • asoul 导航入口
  • 一个魂二创入口

使用介绍:

TIPS: 当人物无法正常启动时,可尝试点击配置文件生成按钮。(vscode版本更新后也需要手动点一下生成按钮)

若依赖文件生成失败:
- windows可尝试使用以管理者身份运行vscode,再点击生成按钮
- mac 请留意是否将vscode从【下载】移动到【应用程序】里  
  - mac 可通过【检查vscode是否可以更新】来判断软件是否处于可写的硬盘中  

Warns 警告:

本插件是通过修改 vscode 的 js 文件的方式运行 所以会在初次安装,或者 vscode 升级的时候,出现以下提示,请选择 【不再提示】:

This extension works by editting the vscode's css file. So, a warning appears while the first time to install or vscode update. U can click the [never show again] to avoid it.

This is the reason:

使用流程

本插件下载后,可以在侧边栏 “资源管理区” (第一个图标),的最下面看到新的抽屉层【LIVE2D-A-SOUL】。
初次打开该抽屉,会进行资源的配置,右下角提示需要重新启动vscode
再次打开该抽屉可以看到很多对应的功能按钮
- 基本操作
  - 启动、关闭live2d: 字面意思,会启动看板人物,初始默认位置右下角
  - 保存当前配置: 在调整live2d大小缩放和拖拽位置后,可保存信息,下次启动时自动携带
  - 重置默认位置: 当前位置异常,无法拖拽移动时可重置使用【缩放大小也会重置】
  - 背景图
    - 点击切换: 点击按钮为人物右侧图标第二个
    - 保存背景图: 需要当前背景图存在才会生效。只能保存一份,再次点击会覆盖旧的
    - 加载背景图: 加载保存的背景图
    - 定时切换: 字面意思,可查看 切换按钮 是否旋转判断是否开启定时功能
    - 背景图样式配置
    - 下载背景图
- 配置信息
  - 自启动: 字面意思,开启后。vscode启动,live2d自动启动
  - 定位依赖: 人物定位的依赖角
- 补充配置
  - 插件依赖文件:
    - 插件依赖文件会在初次安装插件并启动时自动生成
    - 生成: live2d无法正常启动时,可尝试点击该按钮,强制重新生成覆盖配置信息
    - 移除: 卸载该插件前,请尽可能先执行该操作。 可移除插件对vscode文件的所有修改

- 人物功能
  - 目光跟随鼠标 【缺点,暂时无法实现整个页面的跟随】
  - 点击互动
  - asoul粉丝导航网站入口
  - 切换背景图
  - 切换模型
  - 溜冰场
  - 音频测试
  - 一个魂二创网站入口
  - 模型来源

卸载流程

卸载该插件前,请尽可能先执行该操作。可移除插件对vscode文件的所有修改,恢复正常。
然后在插件列表卸载该插件

额外要求 【如果想开启音频支持】

当前插件仅一个简单的语音测试,暂且可以不用考虑该功能

VS Code 使用的 Electron 版本不包含 ffmpeg,需替换自带的 ffmpeg 动态链接库才能正常播放 (每次更新 VS Code 都需重新替换)

VS Code for Windows 1.31.0 - 1.35.1 不需替换,1.36.0 后无此待遇

VS Code for macOS 1.43+ 替换后闪退解决方案

手动替换操作
首先需要查看 vscode 版本对应的electron版本, 然后下载对应系统的electron版本的压缩包,将里面的特定文件ffmpeg 解压到vscode的安装目录下,替换原vscode的ffmpeg文件

electron下载

Windows

界面左上角 点击 help(帮助) => about(关于),弹窗可查看electron版本  
下载 **electron-%version%-win32-x64.zip**
替换 `./ffmpeg.dll` 文件

macOS

界面左上角 点击 code => about,弹窗可查看electron版本 
下载 **electron-%version%-darwin-x64.zip**
替换 `./Electron.app/Contents/Frameworks/Electron\ Framework.framework/Libraries/libffmpeg.dylib`

Linux

界面左上角 Help(帮助) → \rightarrow →About(关于)
下载 **electron-%version%-linux-x64.zip**
替换 `./libffmpeg.so`

鸣谢

live2d-widget
vscode-background
CharlesZ.vscode-live2d
pixi-live2d-display
pio
journey-ad

还有乐于分享的一个魂们
asoul 导航
一个魂二创
部分小图标也来源b站一个魂们的分享
嘉然 向晚 模型:木果阿木果

请勿使用该项目涉及的资源进行商业盈利

vscode-live2d's People

Contributors

thesecondakari avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vscode-live2d's Issues

The plugin didn't work after installation

Hi there, I've just installed the newest version of this plugin from the extension panel on my vscode under openSUSE Tumbleweed and, when I tried to get the live2d pic shown by clicking the "启动live2d" buttom, nothing happened.

What's more is that, no matter which buttom I've clicked, nothing will happen. No logs, no notifications, just like the plugin didn't exist. I don't know the reason why but, the plugin didn't work for me at all : (

I don't know whether the plugin is only suitable for vscode under Windows or macOS but, I really like these A-SOUL girls and, I sincerelly hope that they can be shown in my vscode workspace.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.