Awesome
nep-live2d
Beta versions can be found in the Beta Test Channel
The project is based on Live2D WebGL SDK 2.1, and thus models of newer or older version are not supported.
Setup
Dependencies
It's recommended to use Yarn as package manager, npm is fine though.
yarn install
Source files
Due to copyright restrictions, the files of backgrounds, Live2D SDK and Live2D models are not provided, you need to supply them by yourself.
-
(Optional) Download Live2D WebGL SDK 2.1 and take
live2d.min.js
within. -
Create
wallpaper
directory at project root. -
Copy following files from the distribution of this wallpaper and paste into
wallpaper
. (In Wallpaper Engine, right click on the preview of this wallpaper and select Open in Explorer.)
.
└── /wallpaper
├── /img
│ ├── bg_forest.jpg
│ ├── bg_halloween.jpg
│ └── bg_lowee.jpg
├── /live2d (take entire folder)
└── live2d.min.js
Serving
Sering for browsers
yarn serve
Serving for Wallpaper Engine
By redirecting the running wallpaper to the server, we are able to use the liveReload
and Hot Module Replacement (HMR) features of Webpack dev server, which are extremely useful for development.
To achieve that, a script was made to generate a bridge HTML file, there are a few steps to prepare before using this script:
-
Create a folder in
myproject
directory of Wallpaper Engine, for example:C:\Program Files (x86)\Steam\steamapps\common\wallpaper_engine\projects\myprojects\live2d
-
Go back to this project, create
.env.local
file at project root, addWALLPAPER_PATH
variable which describes the destination of output files.WALLPAPER_PATH=C:\Program Files (x86)\Steam\steamapps\common\wallpaper_engine\projects\myprojects\live2d
For more information about the format of this file, see dotenv.
-
Run following command. You may be asked for confirmations to overwrite existing files.
yarn setup
-
Check the Wallpaper Engine browser, a new wallpaper should appear with
[DEV]
prefix.
This preparation should be done only once, but any time you think the generated files are supposed be updated, you need to run yarn setup
again.
Now, just like serving for browsers, run yarn serve
, and then select the wallpaper, everything will work as it should be in browsers.
Building
yarn build
If you are updating an existing Workshop project instead of creating a new one, you need to specify a WORKSHOP_ID
in .env.local
before building the project.
WORKSHOP_ID=123456
When publishing to Workshop, don't forget to copy files in /wallpaper
and paste them into your project.