Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate to pixi-live2d-display #82

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Migrate to pixi-live2d-display #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b5a431b
fix: fix default model id is not 0
perqin Jul 9, 2021
5649bbf
feat: migrate to pixi-live2d-widget
perqin Jul 10, 2021
31ff95c
fix: remove old model on loading new one
perqin Jul 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,20 @@ Font Awesome (v4 or v5) is required for this plugin. Take Font Awesome v4 as an
```
否则图标将无法正常显示。（如果网页中已经加载了任何版本的 Font Awesome，就不要重复加载了）

本插件使用[pixi-live2d-display](https://github.com/guansss/pixi-live2d-display)组件以支持渲染所有版本的Live2D模型。为此，你需要添加PixiJS和pixl-live2d-display依赖。例如，要支持所有版本的模型，则需要添加如下依赖：
```html
<!-- PixiJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.10/pixi.min.js"></script>
<!-- Live2D v2.1 -->
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<!-- Live2D v3 -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<!-- pixi-live2d-display -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
```

关于Live2D SDK、PixiJS版本的支持情况，请查阅pixi-live2d-display的文档。

## 使用 Usage

将这一行代码加入 `<head>` 或 `<body>`，即可展现出效果：
Expand Down
3 changes: 1 addition & 2 deletions autoload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,10 @@ function loadExternalResource(url, type) {
});
}

// 加载 waifu.css live2d.min.js waifu-tips.js
// 加载 waifu.css waifu-tips.js
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
initWidget({
Expand Down
1 change: 0 additions & 1 deletion live2d.min.js
View file
Open in desktop

This file was deleted.

38 changes: 33 additions & 5 deletions waifu-tips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,27 @@
* https://github.com/stevenjoezhang/live2d-widget
*/

let pixiApp;

/**
* Load Live2D model into the PIXI application.
*/
async function loadlive2dPixi(jsonPath) {
const model = await PIXI.live2d.Live2DModel.from(jsonPath);
if (pixiApp.stage.children.length > 0) {
pixiApp.stage.removeChildren(0);
}
pixiApp.stage.addChild(model);
const parentWidth = pixiApp.renderer.width;
const parentHeight = pixiApp.renderer.height;
// Scale to fit the stage
const ratio = Math.min(parentWidth / model.width, parentHeight / model.height);
model.scale.set(ratio, ratio);
// Align bottom and center horizontally
model.x = (parentWidth - model.width) / 2;
model.y = parentHeight - model.height;
}

function loadWidget(config) {
let { waifuPath, apiPath, cdnPath } = config;
let useCDN = false, modelList;
Expand All @@ -19,7 +40,7 @@ function loadWidget(config) {
sessionStorage.removeItem("waifu-text");
document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
<div id="waifu-tips"></div>
<canvas id="live2d" width="800" height="800"></canvas>
<canvas id="live2d"></canvas>
<div id="waifu-tool">
<span class="fa fa-lg fa-comment"></span>
<span class="fa fa-lg fa-paper-plane"></span>
Expand All @@ -30,6 +51,13 @@ function loadWidget(config) {
<span class="fa fa-lg fa-times"></span>
</div>
</div>`);
// Create PIXI application
const live2dCanvas = document.getElementById('live2d');
pixiApp = new PIXI.Application({
view: live2dCanvas,
resizeTo: live2dCanvas,
transparent: true,
});
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
setTimeout(() => {
document.getElementById("waifu").style.bottom = 0;
Expand Down Expand Up @@ -162,7 +190,7 @@ function loadWidget(config) {
modelTexturesId = localStorage.getItem("modelTexturesId");
if (modelId === null) {
// 首次访问加载 指定模型 的 指定材质
modelId = 1; // 模型 ID
modelId = 0; // 模型 ID
modelTexturesId = 53; // 材质 ID
}
loadModel(modelId, modelTexturesId);
Expand Down Expand Up @@ -213,9 +241,9 @@ function loadWidget(config) {
if (useCDN) {
if (!modelList) await loadModelList();
const target = randomSelection(modelList.models[modelId]);
loadlive2d("live2d", `${cdnPath}model/${target}/index.json`);
loadlive2dPixi(`${cdnPath}model/${target}/index.json`);
} else {
loadlive2d("live2d", `${apiPath}get/?id=${modelId}-${modelTexturesId}`);
loadlive2dPixi(`${apiPath}get/?id=${modelId}-${modelTexturesId}`);
console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`);
}
}
Expand All @@ -226,7 +254,7 @@ function loadWidget(config) {
if (useCDN) {
if (!modelList) await loadModelList();
const target = randomSelection(modelList.models[modelId]);
loadlive2d("live2d", `${cdnPath}model/${target}/index.json`);
loadlive2dPixi(`${cdnPath}model/${target}/index.json`);
showMessage("我的新衣服好看嘛？", 4000, 10);
} else {
// 可选 "rand"(随机), "switch"(顺序)
Expand Down