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.

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

Feat: refactor spine loader & add ability for dynamic skin change #112

Open
wants to merge 20 commits into
base: dev/4.2
Choose a base branch
from

Conversation

johanzhu
Copy link
Collaborator

@johanzhu johanzhu commented Nov 19, 2024

What does this PR do?
Adjust spine basic API.

Related issue:
#110

Changes

  • src/SpineAnimationRenderer.ts : Fix bounding box bug.
  • src/index.ts: Export util function for dynamic skin change.
  • src/loader/EditorSpineAtlasLoader.ts: Adapt to 1.3.20 resource manager api.
  • src/loader/LoaderUtils.ts: Add createSpineResource and createTextureAtlas function.
  • src/loader/SpineLoader.ts: Refactor loader, optimize code.
  • src/loader/SpineResource.ts: Change url param to name.
  • src/util/AttachmentTools.ts: Add util for create attachment based on new region.
  • src/util/BufferReader.ts: Delete reader, use engine reader.
  • vite.config.js: change listen port.

Dynamic change examples:

  1. Change atlas by creating a new spine resource
const textureAtlas = await engine.resourceManager.load({
    url: '/spineboy-pro.atlas', // your new atlas
  });
  const spinejson = await request(
    'https://mdn.alipayobjects.com/oasis_be/afts/file/A*7e6nSLQT9gsAAAAAAAAAAAAADkp5AQ/spineboy.json',
    {
      type: 'text',
    }
  );
const spineResource = createSpineResource(engine, spinejson, textureAtlas);
const entity = spineResource.instantiate();
root.addChild(entity);
  1. Change attachment using a new atlas.
const renderer = entity.getComponent(SpineAnimationRenderer);
 const { skeleton, state } = renderer;
const slot = skeleton.findSlot(slotName);
const region = atlas.findRegion(regionName);
const originalAttachment = slot.attachment as RegionAttachment | MeshAttachment;
if (region == null) {
  slot.attachment = null;
} else if (originalAttachment != null) {
  slot.attachment = cloneAttachmentWithRegion(originalAttachment, region);
} else {
  slot.attachment = createAttachmentFromRegion(region, region.name);
}

src/util/AttachmentTools.ts Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
src/loader/LoaderUtils.ts Outdated Show resolved Hide resolved
skeletonRawData = data;
}
} catch {
// origin asset
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there is an exception, return null to let the caller be aware.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

}
} catch {
// origin asset
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there is an exception, return null to let the caller be aware.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using JSON.parse to determine whether atlasText is editor asset is the most straightforward approach.
If parsing fails, it indicates that the text is not JSON and is instead a none editor Spine atlas asset.
If the raw asset is invalid, an error will be thrown when creating a new TextureAtlas.

src/loader/SpineLoader.ts Outdated Show resolved Hide resolved
src/loader/SpineLoader.ts Show resolved Hide resolved
src/loader/SpineLoader.ts Show resolved Hide resolved
const header = this._bufferReader.nextStr();
isEditorAsset = header.startsWith('spine');
} catch {} // origin asset may exceed when call next str
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

check is editor asset should be simpler?

src/loader/SpineLoader.ts Show resolved Hide resolved
src/loader/SpineLoader.ts Outdated Show resolved Hide resolved
src/loader/SpineLoader.ts Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants