Skip to content

Commit

Permalink
remove spine package
Browse files Browse the repository at this point in the history
  • Loading branch information
@MakinoharaShoko
MakinoharaShoko committed Dec 24, 2024
1 parent 7110d0a commit 8d88572
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 118 deletions.
1 change: 0 additions & 1 deletion packages/webgal/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
"modern-css-reset": "^1.4.0",
"pixi-filters": "^4.2.0",
"pixi-live2d-display-webgal": "^0.5.8",
"pixi-spine": "^3.1.2",
"pixi.js": "^6.3.0",
"popmotion": "^11.0.5",
"react": "^17.0.2",
Expand Down
186 changes: 125 additions & 61 deletions packages/webgal/src/Core/controller/stage/pixi/spine.ts
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,64 @@
// spineHandlers.ts
import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
import { v4 as uuid } from 'uuid';
import 'pixi-spine'; // Do this once at the very start of your code. This registers the loader!
import { Spine } from 'pixi-spine';
import * as PIXI from 'pixi.js';
import PixiStage from '@/Core/controller/stage/pixi/PixiController';
import { logger } from '@/Core/util/logger';
// utils/loadPixiSpine.ts
// @ts-ignore
let pixiSpineModule: typeof import('pixi-spine') | null = null;
// @ts-ignore
let pixiSpineLoading: Promise<typeof import('pixi-spine') | null> | null = null;

let spineLoader: undefined | PIXI.Loader;

/**
* 动态加载 'pixi-spine' 模块，并缓存结果
* @returns {Promise<typeof import('pixi-spine') | null>}
*/
// @ts-ignore
export async function loadPixiSpine(): Promise<typeof import('pixi-spine') | null> {
if (pixiSpineModule) {
return pixiSpineModule;
}

if (pixiSpineLoading) {
return pixiSpineLoading;
}

// @ts-ignore
// pixiSpineLoading = import('pixi-spine')
// .then((module) => {
// spineLoader = new PIXI.Loader();
// pixiSpineModule = module;
// return module;
// })
// .catch((error) => {
// console.error('Failed to load pixi-spine. Spine features will be disabled.', error);
// return null;
// })
// .finally(() => {
// pixiSpineLoading = null;
// });

return pixiSpineLoading;
}

/**
* 添加 Spine 立绘的实现函数
* @param key 立绘的标识
* @param url Spine 数据的 URL
* @param presetPosition 预设位置
*/
// eslint-disable-next-line max-params
export function addSpineFigureImpl(
export async function addSpineFigureImpl(
this: PixiStage,
key: string,
url: string,
presetPosition: 'left' | 'center' | 'right' = 'center',
) {
console.log(key, url, presetPosition);
const spineId = `spine-${url}`;
const loader = this.assetLoader;
const pixiSpine = await loadPixiSpine();
// 准备用于存放这个立绘的 Container
const thisFigureContainer = new WebGALPixiContainer();

Expand All @@ -42,73 +85,84 @@ export function addSpineFigureImpl(
key: key,
pixiContainer: thisFigureContainer,
sourceUrl: url,
sourceType: 'live2d',
sourceType: 'spine', // 修改为 'spine'
sourceExt: this.getExtName(url),
});

// 完成图片加载后执行的函数
const setup = () => {
const spineResource: any = this.assetLoader.resources?.[spineId];
// TODO：找一个更好的解法，现在的解法是无论是否复用原来的资源，都设置一个延时以让动画工作正常！
setTimeout(() => {
if (spineResource && this.getStageObjByUuid(figureUuid)) {
const figureSpine = new Spine(spineResource.spineData);
const spineBounds = figureSpine.getLocalBounds();
const spineCenterX = spineBounds.x + spineBounds.width / 2;
const spineCenterY = spineBounds.y + spineBounds.height / 2;
figureSpine.pivot.set(spineCenterX, spineCenterY);
// TODO: set animation 还没做
// figureSpine.state.setAnimation()
/**
* 重设大小
*/
const originalWidth = figureSpine.width;
const originalHeight = figureSpine.height;
const scaleX = this.stageWidth / originalWidth;
const scaleY = this.stageHeight / originalHeight;
const targetScale = Math.min(scaleX, scaleY);
const figureSprite = new PIXI.Sprite();
figureSprite.addChild(figureSpine);
figureSprite.scale.x = targetScale;
figureSprite.scale.y = targetScale;
figureSprite.anchor.set(0.5);
figureSprite.position.y = this.stageHeight / 2;
const targetWidth = originalWidth * targetScale;
const targetHeight = originalHeight * targetScale;
thisFigureContainer.setBaseY(this.stageHeight / 2);
if (targetHeight < this.stageHeight) {
thisFigureContainer.setBaseY(this.stageHeight / 2 + this.stageHeight - targetHeight / 2);
}
if (presetPosition === 'center') {
thisFigureContainer.setBaseX(this.stageWidth / 2);
}
if (presetPosition === 'left') {
thisFigureContainer.setBaseX(targetWidth / 2);
}
if (presetPosition === 'right') {
thisFigureContainer.setBaseX(this.stageWidth - targetWidth / 2);
}
thisFigureContainer.pivot.set(0, this.stageHeight / 2);
thisFigureContainer.addChild(figureSprite);
const setup = async () => {
if (!pixiSpine) {
// 无法加载 'pixi-spine'，跳过 Spine 相关逻辑
logger.warn(`Spine module not loaded. Skipping Spine figure: ${key}`);
return;
}

const { Spine } = pixiSpine;
const spineResource: any = spineLoader!.resources?.[spineId];
if (spineResource && this.getStageObjByUuid(figureUuid)) {
const figureSpine = new Spine(spineResource.spineData);
const spineBounds = figureSpine.getLocalBounds();
const spineCenterX = spineBounds.x + spineBounds.width / 2;
const spineCenterY = spineBounds.y + spineBounds.height / 2;
figureSpine.pivot.set(spineCenterX, spineCenterY);
// TODO: set animation 还没做
// figureSpine.state.setAnimation(0, figureSpine.spineData.animations[0].name, true)

/**
* 重设大小
*/
const originalWidth = figureSpine.width;
const originalHeight = figureSpine.height;
const scaleX = this.stageWidth / originalWidth;
const scaleY = this.stageHeight / originalHeight;
const targetScale = Math.min(scaleX, scaleY);
const figureSprite = new PIXI.Sprite();
figureSprite.addChild(figureSpine);
figureSprite.scale.x = targetScale;
figureSprite.scale.y = targetScale;
figureSprite.anchor.set(0.5);
figureSprite.position.y = this.stageHeight / 2;
const targetWidth = originalWidth * targetScale;
const targetHeight = originalHeight * targetScale;
thisFigureContainer.setBaseY(this.stageHeight / 2);
if (targetHeight < this.stageHeight) {
thisFigureContainer.setBaseY(this.stageHeight / 2 + this.stageHeight - targetHeight / 2);
}
}, 0);
if (presetPosition === 'center') {
thisFigureContainer.setBaseX(this.stageWidth / 2);
}
if (presetPosition === 'left') {
thisFigureContainer.setBaseX(targetWidth / 2);
}
if (presetPosition === 'right') {
thisFigureContainer.setBaseX(this.stageWidth - targetWidth / 2);
}
thisFigureContainer.pivot.set(0, this.stageHeight / 2);
thisFigureContainer.addChild(figureSprite);
}
};

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

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

Expand All @@ -130,13 +184,21 @@ export function addSpineBgImpl(this: PixiStage, key: string, url: string) {
key: key,
pixiContainer: thisBgContainer,
sourceUrl: url,
sourceType: 'live2d',
sourceType: 'spine', // 修改为 'spine'
sourceExt: this.getExtName(url),
});

// 完成图片加载后执行的函数
const setup = () => {
const spineResource: any = this.assetLoader.resources?.[spineId];
const setup = async () => {
const pixiSpine = await loadPixiSpine();
if (!pixiSpine) {
// 无法加载 'pixi-spine'，跳过 Spine 相关逻辑
logger.warn(`Spine module not loaded. Skipping Spine background: ${key}`);
return;
}

const { Spine } = pixiSpine;
const spineResource: any = spineLoader!.resources?.[spineId];
// TODO：找一个更好的解法，现在的解法是无论是否复用原来的资源，都设置一个延时以让动画工作正常！
setTimeout(() => {
if (spineResource && this.getStageObjByUuid(bgUuid)) {
Expand Down Expand Up @@ -174,12 +236,14 @@ export function addSpineBgImpl(this: PixiStage, key: string, url: string) {

/**
* 加载器部分
* 这里不再使用 this.loadAsset，因为我们可能需要单独管理 Spine 资源
* 但为了避免性能问题，我们继续使用现有的 loader，并确保资源只加载一次
*/
this.cacheGC();
if (!loader.resources?.[url]) {
this.loadAsset(url, setup, spineId);
if (!spineLoader!.resources?.[spineId]) {
spineLoader!.add(spineId, url).load(setup);
} else {
// 复用
setup();
await setup();
}
}
56 changes: 0 additions & 56 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -603,50 +603,6 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"

"@pixi-spine/base@~3.1.2":
version "3.1.2"
resolved "https://registry.yarnpkg.com/@pixi-spine/base/-/base-3.1.2.tgz#0bf9ec7a1367d8d8474004f0784d990300328310"
integrity sha512-sMOZsCJQW4O11QR7afuHcuu8cSUgJv3paSNzZOh+imxvYB/cOcyG7K+f5sWqlGe+z3J2CLEYCX2WfXeeJi6pHg==

"@pixi-spine/loader-base@~3.1.2":
version "3.1.2"
resolved "https://registry.yarnpkg.com/@pixi-spine/loader-base/-/loader-base-3.1.2.tgz#b208f14f2cd4b29ff575fc5a32c4f5328e6008f1"
integrity sha512-llg0RuuWiqVkyoQA+ceORV0sfUtrWGJj4jQ6erDFn2hMnob+QGzh+qwHSTMAnTNZTINEMfiUxmcwbmUYwTd8Ag==
dependencies:
"@pixi-spine/base" "~3.1.2"

"@pixi-spine/loader-uni@~3.1.2":
version "3.1.2"
resolved "https://registry.yarnpkg.com/@pixi-spine/loader-uni/-/loader-uni-3.1.2.tgz#3671675dba01d655f5c207b10723823313e09d00"
integrity sha512-5th9gXqNQWMSuOu3euMw2kHETlncxU7LIFvOYqTMsKnwrOAIsPjHSF/4Sat1d3EAvvdMrYm4LmhHklgrAfk6UA==
dependencies:
"@pixi-spine/base" "~3.1.2"
"@pixi-spine/loader-base" "~3.1.2"
"@pixi-spine/runtime-3.7" "~3.1.2"
"@pixi-spine/runtime-3.8" "~3.1.2"
"@pixi-spine/runtime-4.1" "~3.1.2"

"@pixi-spine/runtime-3.7@~3.1.2":
version "3.1.2"
resolved "https://registry.yarnpkg.com/@pixi-spine/runtime-3.7/-/runtime-3.7-3.1.2.tgz#909ee4b906fe3e1faf8df996025d29c05f2c68b4"
integrity sha512-dMcw5x9jG+0itzzbPsJUn8hvhxzRXRzbm/kCUQ51iyFfLZQIK1LoPck4XPVuXckwFjU1qCT+tDZSEGBMYs5//A==
dependencies:
"@pixi-spine/base" "~3.1.2"

"@pixi-spine/runtime-3.8@~3.1.2":
version "3.1.2"
resolved "https://registry.yarnpkg.com/@pixi-spine/runtime-3.8/-/runtime-3.8-3.1.2.tgz#be0fe73ce75384d3815a729c826b09c43a9c3db4"
integrity sha512-AgS3mUC+5HQ/ehJO5Wo4oBoLg8F+tssF5WXi3FnnjqOaMcO+Ag232ForoL2iYHW40TKx0xMi5MpXsSafgS1i1A==
dependencies:
"@pixi-spine/base" "~3.1.2"

"@pixi-spine/runtime-4.1@~3.1.2":
version "3.1.2"
resolved "https://registry.yarnpkg.com/@pixi-spine/runtime-4.1/-/runtime-4.1-3.1.2.tgz#43aa99b71dca01a962db7dee04a38e2fe167d33e"
integrity sha512-XtaKAuLTtJ3o3llcUTr0d94dnRTyYHlss+x4VsYm1H38r4DUmQTBS13nisW0pgS3fY60D8AbEJkYVW7mwokxag==
dependencies:
"@pixi-spine/base" "~3.1.2"

"@pixi/accessibility@6.5.10":
version "6.5.10"
resolved "https://registry.yarnpkg.com/@pixi/accessibility/-/accessibility-6.5.10.tgz#53727df881251ad0db545de93f8b273c5b34ff67"
Expand Down Expand Up @@ -4281,18 +4237,6 @@ pixi-live2d-display-webgal@^0.5.8:
dependencies:
gh-pages "^4.0.0"

pixi-spine@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/pixi-spine/-/pixi-spine-3.1.2.tgz#f63c5c566c2e74eae3e0c99da172f67404227398"
integrity sha512-rTTwXhBl5gZFZ793zdM/to0bifU8K4aa1gD0ilOiCqC/pgw5OxCcKnoRW3i05ythjzI3GlN6G0MDblOe2myr3w==
dependencies:
"@pixi-spine/base" "~3.1.2"
"@pixi-spine/loader-base" "~3.1.2"
"@pixi-spine/loader-uni" "~3.1.2"
"@pixi-spine/runtime-3.7" "~3.1.2"
"@pixi-spine/runtime-3.8" "~3.1.2"
"@pixi-spine/runtime-4.1" "~3.1.2"

pixi.js@^6.3.0:
version "6.5.10"
resolved "https://registry.yarnpkg.com/pixi.js/-/pixi.js-6.5.10.tgz#a82638e0b7afc5bf7f3ab70d960521477276e866"
Expand Down

0 comments on commit 8d88572

Please sign in to comment.