Skip to content

Commit 8d88572

Browse files
MakinoharaShokoMakinoharaShoko
committed
remove spine package
1 parent 7110d0a commit 8d88572

File tree

3 files changed

+125
-118
lines changed

3 files changed

+125
-118
lines changed

‎packages/webgal/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
"modern-css-reset": "^1.4.0",
2323
"pixi-filters": "^4.2.0",
2424
"pixi-live2d-display-webgal": "^0.5.8",
25-
"pixi-spine": "^3.1.2",
2625
"pixi.js": "^6.3.0",
2726
"popmotion": "^11.0.5",
2827
"react": "^17.0.2",

‎packages/webgal/src/Core/controller/stage/pixi/spine.ts

Lines changed: 125 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,64 @@
1+
// spineHandlers.ts
12
import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
23
import { v4 as uuid } from 'uuid';
3-
import 'pixi-spine'; // Do this once at the very start of your code. This registers the loader!
4-
import { Spine } from 'pixi-spine';
54
import * as PIXI from 'pixi.js';
65
import PixiStage from '@/Core/controller/stage/pixi/PixiController';
76
import { logger } from '@/Core/util/logger';
7+
// utils/loadPixiSpine.ts
8+
// @ts-ignore
9+
let pixiSpineModule: typeof import('pixi-spine') | null = null;
10+
// @ts-ignore
11+
let pixiSpineLoading: Promise<typeof import('pixi-spine') | null> | null = null;
812

13+
let spineLoader: undefined | PIXI.Loader;
14+
15+
/**
16+
* 动态加载 'pixi-spine' 模块，并缓存结果
17+
* @returns {Promise<typeof import('pixi-spine') | null>}
18+
*/
19+
// @ts-ignore
20+
export async function loadPixiSpine(): Promise<typeof import('pixi-spine') | null> {
21+
if (pixiSpineModule) {
22+
return pixiSpineModule;
23+
}
24+
25+
if (pixiSpineLoading) {
26+
return pixiSpineLoading;
27+
}
28+
29+
// @ts-ignore
30+
// pixiSpineLoading = import('pixi-spine')
31+
// .then((module) => {
32+
// spineLoader = new PIXI.Loader();
33+
// pixiSpineModule = module;
34+
// return module;
35+
// })
36+
// .catch((error) => {
37+
// console.error('Failed to load pixi-spine. Spine features will be disabled.', error);
38+
// return null;
39+
// })
40+
// .finally(() => {
41+
// pixiSpineLoading = null;
42+
// });
43+
44+
return pixiSpineLoading;
45+
}
46+
47+
/**
48+
* 添加 Spine 立绘的实现函数
49+
* @param key 立绘的标识
50+
* @param url Spine 数据的 URL
51+
* @param presetPosition 预设位置
52+
*/
953
// eslint-disable-next-line max-params
10-
export function addSpineFigureImpl(
54+
export async function addSpineFigureImpl(
1155
this: PixiStage,
1256
key: string,
1357
url: string,
1458
presetPosition: 'left' | 'center' | 'right' = 'center',
1559
) {
16-
console.log(key, url, presetPosition);
1760
const spineId = `spine-${url}`;
18-
const loader = this.assetLoader;
61+
const pixiSpine = await loadPixiSpine();
1962
// 准备用于存放这个立绘的 Container
2063
const thisFigureContainer = new WebGALPixiContainer();
2164

@@ -42,73 +85,84 @@ export function addSpineFigureImpl(
4285
key: key,
4386
pixiContainer: thisFigureContainer,
4487
sourceUrl: url,
45-
sourceType: 'live2d',
88+
sourceType: 'spine', // 修改为 'spine'
4689
sourceExt: this.getExtName(url),
4790
});
4891

4992
// 完成图片加载后执行的函数
50-
const setup = () => {
51-
const spineResource: any = this.assetLoader.resources?.[spineId];
52-
// TODO：找一个更好的解法，现在的解法是无论是否复用原来的资源，都设置一个延时以让动画工作正常！
53-
setTimeout(() => {
54-
if (spineResource && this.getStageObjByUuid(figureUuid)) {
55-
const figureSpine = new Spine(spineResource.spineData);
56-
const spineBounds = figureSpine.getLocalBounds();
57-
const spineCenterX = spineBounds.x + spineBounds.width / 2;
58-
const spineCenterY = spineBounds.y + spineBounds.height / 2;
59-
figureSpine.pivot.set(spineCenterX, spineCenterY);
60-
// TODO: set animation 还没做
61-
// figureSpine.state.setAnimation()
62-
/**
63-
* 重设大小
64-
*/
65-
const originalWidth = figureSpine.width;
66-
const originalHeight = figureSpine.height;
67-
const scaleX = this.stageWidth / originalWidth;
68-
const scaleY = this.stageHeight / originalHeight;
69-
const targetScale = Math.min(scaleX, scaleY);
70-
const figureSprite = new PIXI.Sprite();
71-
figureSprite.addChild(figureSpine);
72-
figureSprite.scale.x = targetScale;
73-
figureSprite.scale.y = targetScale;
74-
figureSprite.anchor.set(0.5);
75-
figureSprite.position.y = this.stageHeight / 2;
76-
const targetWidth = originalWidth * targetScale;
77-
const targetHeight = originalHeight * targetScale;
78-
thisFigureContainer.setBaseY(this.stageHeight / 2);
79-
if (targetHeight < this.stageHeight) {
80-
thisFigureContainer.setBaseY(this.stageHeight / 2 + this.stageHeight - targetHeight / 2);
81-
}
82-
if (presetPosition === 'center') {
83-
thisFigureContainer.setBaseX(this.stageWidth / 2);
84-
}
85-
if (presetPosition === 'left') {
86-
thisFigureContainer.setBaseX(targetWidth / 2);
87-
}
88-
if (presetPosition === 'right') {
89-
thisFigureContainer.setBaseX(this.stageWidth - targetWidth / 2);
90-
}
91-
thisFigureContainer.pivot.set(0, this.stageHeight / 2);
92-
thisFigureContainer.addChild(figureSprite);
93+
const setup = async () => {
94+
if (!pixiSpine) {
95+
// 无法加载 'pixi-spine'，跳过 Spine 相关逻辑
96+
logger.warn(`Spine module not loaded. Skipping Spine figure: ${key}`);
97+
return;
98+
}
99+
100+
const { Spine } = pixiSpine;
101+
const spineResource: any = spineLoader!.resources?.[spineId];
102+
if (spineResource && this.getStageObjByUuid(figureUuid)) {
103+
const figureSpine = new Spine(spineResource.spineData);
104+
const spineBounds = figureSpine.getLocalBounds();
105+
const spineCenterX = spineBounds.x + spineBounds.width / 2;
106+
const spineCenterY = spineBounds.y + spineBounds.height / 2;
107+
figureSpine.pivot.set(spineCenterX, spineCenterY);
108+
// TODO: set animation 还没做
109+
// figureSpine.state.setAnimation(0, figureSpine.spineData.animations[0].name, true)
110+
111+
/**
112+
* 重设大小
113+
*/
114+
const originalWidth = figureSpine.width;
115+
const originalHeight = figureSpine.height;
116+
const scaleX = this.stageWidth / originalWidth;
117+
const scaleY = this.stageHeight / originalHeight;
118+
const targetScale = Math.min(scaleX, scaleY);
119+
const figureSprite = new PIXI.Sprite();
120+
figureSprite.addChild(figureSpine);
121+
figureSprite.scale.x = targetScale;
122+
figureSprite.scale.y = targetScale;
123+
figureSprite.anchor.set(0.5);
124+
figureSprite.position.y = this.stageHeight / 2;
125+
const targetWidth = originalWidth * targetScale;
126+
const targetHeight = originalHeight * targetScale;
127+
thisFigureContainer.setBaseY(this.stageHeight / 2);
128+
if (targetHeight < this.stageHeight) {
129+
thisFigureContainer.setBaseY(this.stageHeight / 2 + this.stageHeight - targetHeight / 2);
93130
}
94-
}, 0);
131+
if (presetPosition === 'center') {
132+
thisFigureContainer.setBaseX(this.stageWidth / 2);
133+
}
134+
if (presetPosition === 'left') {
135+
thisFigureContainer.setBaseX(targetWidth / 2);
136+
}
137+
if (presetPosition === 'right') {
138+
thisFigureContainer.setBaseX(this.stageWidth - targetWidth / 2);
139+
}
140+
thisFigureContainer.pivot.set(0, this.stageHeight / 2);
141+
thisFigureContainer.addChild(figureSprite);
142+
}
95143
};
96144

97145
/**
98146
* 加载器部分
147+
* 这里不再使用 this.loadAsset，因为我们可能需要单独管理 Spine 资源
148+
* 但为了避免性能问题，我们继续使用现有的 loader，并确保资源只加载一次
99149
*/
100150
this.cacheGC();
101-
if (!loader.resources?.[url]) {
102-
this.loadAsset(url, setup, spineId);
151+
if (!spineLoader!.resources?.[spineId]) {
152+
spineLoader!.add(spineId, url).load(setup);
103153
} else {
104154
// 复用
105-
setup();
155+
await setup();
106156
}
107157
}
108158

109-
export function addSpineBgImpl(this: PixiStage, key: string, url: string) {
159+
/**
160+
* 添加 Spine 背景的实现函数
161+
* @param key 背景的标识
162+
* @param url Spine 数据的 URL
163+
*/
164+
export async function addSpineBgImpl(this: PixiStage, key: string, url: string) {
110165
const spineId = `spine-${url}`;
111-
const loader = this.assetLoader;
112166
// 准备用于存放这个背景的 Container
113167
const thisBgContainer = new WebGALPixiContainer();
114168

@@ -130,13 +184,21 @@ export function addSpineBgImpl(this: PixiStage, key: string, url: string) {
130184
key: key,
131185
pixiContainer: thisBgContainer,
132186
sourceUrl: url,
133-
sourceType: 'live2d',
187+
sourceType: 'spine', // 修改为 'spine'
134188
sourceExt: this.getExtName(url),
135189
});
136190

137191
// 完成图片加载后执行的函数
138-
const setup = () => {
139-
const spineResource: any = this.assetLoader.resources?.[spineId];
192+
const setup = async () => {
193+
const pixiSpine = await loadPixiSpine();
194+
if (!pixiSpine) {
195+
// 无法加载 'pixi-spine'，跳过 Spine 相关逻辑
196+
logger.warn(`Spine module not loaded. Skipping Spine background: ${key}`);
197+
return;
198+
}
199+
200+
const { Spine } = pixiSpine;
201+
const spineResource: any = spineLoader!.resources?.[spineId];
140202
// TODO：找一个更好的解法，现在的解法是无论是否复用原来的资源，都设置一个延时以让动画工作正常！
141203
setTimeout(() => {
142204
if (spineResource && this.getStageObjByUuid(bgUuid)) {
@@ -174,12 +236,14 @@ export function addSpineBgImpl(this: PixiStage, key: string, url: string) {
174236

175237
/**
176238
* 加载器部分
239+
* 这里不再使用 this.loadAsset，因为我们可能需要单独管理 Spine 资源
240+
* 但为了避免性能问题，我们继续使用现有的 loader，并确保资源只加载一次
177241
*/
178242
this.cacheGC();
179-
if (!loader.resources?.[url]) {
180-
this.loadAsset(url, setup, spineId);
243+
if (!spineLoader!.resources?.[spineId]) {
244+
spineLoader!.add(spineId, url).load(setup);
181245
} else {
182246
// 复用
183-
setup();
247+
await setup();
184248
}
185249
}

‎yarn.lock

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -603,50 +603,6 @@
603603
"@nodelib/fs.scandir" "2.1.5"
604604
fastq "^1.6.0"
605605

606-
"@pixi-spine/base@~3.1.2":
607-
version "3.1.2"
608-
resolved "https://registry.yarnpkg.com/@pixi-spine/base/-/base-3.1.2.tgz#0bf9ec7a1367d8d8474004f0784d990300328310"
609-
integrity sha512-sMOZsCJQW4O11QR7afuHcuu8cSUgJv3paSNzZOh+imxvYB/cOcyG7K+f5sWqlGe+z3J2CLEYCX2WfXeeJi6pHg==
610-
611-
"@pixi-spine/loader-base@~3.1.2":
612-
version "3.1.2"
613-
resolved "https://registry.yarnpkg.com/@pixi-spine/loader-base/-/loader-base-3.1.2.tgz#b208f14f2cd4b29ff575fc5a32c4f5328e6008f1"
614-
integrity sha512-llg0RuuWiqVkyoQA+ceORV0sfUtrWGJj4jQ6erDFn2hMnob+QGzh+qwHSTMAnTNZTINEMfiUxmcwbmUYwTd8Ag==
615-
dependencies:
616-
"@pixi-spine/base" "~3.1.2"
617-
618-
"@pixi-spine/loader-uni@~3.1.2":
619-
version "3.1.2"
620-
resolved "https://registry.yarnpkg.com/@pixi-spine/loader-uni/-/loader-uni-3.1.2.tgz#3671675dba01d655f5c207b10723823313e09d00"
621-
integrity sha512-5th9gXqNQWMSuOu3euMw2kHETlncxU7LIFvOYqTMsKnwrOAIsPjHSF/4Sat1d3EAvvdMrYm4LmhHklgrAfk6UA==
622-
dependencies:
623-
"@pixi-spine/base" "~3.1.2"
624-
"@pixi-spine/loader-base" "~3.1.2"
625-
"@pixi-spine/runtime-3.7" "~3.1.2"
626-
"@pixi-spine/runtime-3.8" "~3.1.2"
627-
"@pixi-spine/runtime-4.1" "~3.1.2"
628-
629-
"@pixi-spine/runtime-3.7@~3.1.2":
630-
version "3.1.2"
631-
resolved "https://registry.yarnpkg.com/@pixi-spine/runtime-3.7/-/runtime-3.7-3.1.2.tgz#909ee4b906fe3e1faf8df996025d29c05f2c68b4"
632-
integrity sha512-dMcw5x9jG+0itzzbPsJUn8hvhxzRXRzbm/kCUQ51iyFfLZQIK1LoPck4XPVuXckwFjU1qCT+tDZSEGBMYs5//A==
633-
dependencies:
634-
"@pixi-spine/base" "~3.1.2"
635-
636-
"@pixi-spine/runtime-3.8@~3.1.2":
637-
version "3.1.2"
638-
resolved "https://registry.yarnpkg.com/@pixi-spine/runtime-3.8/-/runtime-3.8-3.1.2.tgz#be0fe73ce75384d3815a729c826b09c43a9c3db4"
639-
integrity sha512-AgS3mUC+5HQ/ehJO5Wo4oBoLg8F+tssF5WXi3FnnjqOaMcO+Ag232ForoL2iYHW40TKx0xMi5MpXsSafgS1i1A==
640-
dependencies:
641-
"@pixi-spine/base" "~3.1.2"
642-
643-
"@pixi-spine/runtime-4.1@~3.1.2":
644-
version "3.1.2"
645-
resolved "https://registry.yarnpkg.com/@pixi-spine/runtime-4.1/-/runtime-4.1-3.1.2.tgz#43aa99b71dca01a962db7dee04a38e2fe167d33e"
646-
integrity sha512-XtaKAuLTtJ3o3llcUTr0d94dnRTyYHlss+x4VsYm1H38r4DUmQTBS13nisW0pgS3fY60D8AbEJkYVW7mwokxag==
647-
dependencies:
648-
"@pixi-spine/base" "~3.1.2"
649-
650606
"@pixi/accessibility@6.5.10":
651607
version "6.5.10"
652608
resolved "https://registry.yarnpkg.com/@pixi/accessibility/-/accessibility-6.5.10.tgz#53727df881251ad0db545de93f8b273c5b34ff67"
@@ -4281,18 +4237,6 @@ pixi-live2d-display-webgal@^0.5.8:
42814237
dependencies:
42824238
gh-pages "^4.0.0"
42834239

4284-
pixi-spine@^3.1.2:
4285-
version "3.1.2"
4286-
resolved "https://registry.yarnpkg.com/pixi-spine/-/pixi-spine-3.1.2.tgz#f63c5c566c2e74eae3e0c99da172f67404227398"
4287-
integrity sha512-rTTwXhBl5gZFZ793zdM/to0bifU8K4aa1gD0ilOiCqC/pgw5OxCcKnoRW3i05ythjzI3GlN6G0MDblOe2myr3w==
4288-
dependencies:
4289-
"@pixi-spine/base" "~3.1.2"
4290-
"@pixi-spine/loader-base" "~3.1.2"
4291-
"@pixi-spine/loader-uni" "~3.1.2"
4292-
"@pixi-spine/runtime-3.7" "~3.1.2"
4293-
"@pixi-spine/runtime-3.8" "~3.1.2"
4294-
"@pixi-spine/runtime-4.1" "~3.1.2"
4295-
42964240
pixi.js@^6.3.0:
42974241
version "6.5.10"
42984242
resolved "https://registry.yarnpkg.com/pixi.js/-/pixi.js-6.5.10.tgz#a82638e0b7afc5bf7f3ab70d960521477276e866"

0 commit comments

Comments
 (0)