Assuming there is a slot, I want to load an image (attachment) from an external source, insert it, and display it in the slot.
Is this method possible? I am currently using the Spine Player on the web.
I'm not very good at English. I apologize if my sentences sound awkward.
Hello and welcome to out forum.
I'm not very good at English. I apologize if my sentences sound awkward.
You can write in your own language. The forum has a convenient AI-assisted Translate button that makes it easy to converse in each person's own language.
Assuming there is a slot, I want to load an image (attachment) from an external source, insert it, and display it in the slot.
Is this method possible? I am currently using the Spine Player on the web.
There is no API out of the box yet to do that, but we're considering adding an API to facilitate this.
You can still do that, even though it is not straightforward. Read this answer that guides you in doing so.
Unlike the code in the link, if you don't want to replace the attachment region but create a new one, you can clone the current attachment and replace the texture region there.
const slot = player.skeleton.slots.find(slot => slot.data.name == "raptor-body");
const attachment = slot.attachment;
if (attachment) {
const copiedAttachment = attachment.copy();
slot.setAttachment(copiedAttachment)
copiedAttachment.region = region;
slot.attachment.updateRegion();
}In that case, rather than copying an existing attachment, you need to create a new one.
There are two kinds of attachments that can be rendered: RegionAttachment and MeshAttachment.
Unless you know the shape of the mesh, you probably want to create a RegionAttachment, which is just a rectangle.
To do that, you just need to call the constructor and set some properties:
const slot = player.skeleton.slots.find(slot => slot.data.name == "gun");
const newAttachment = new spine.RegionAttachment(region.name, region.name);
newAttachment.region = region;
newAttachment.width = region.width;
newAttachment.height = region.height;
slot.setAttachment(newAttachment);
slot.attachment.updateRegion();You can change the coordinates, angle, and size of the attachment by modifying the following properties: x, y, rotation, width, height.
시도해보았지만 이미지가 보이지 않습니다. 에러도 나지 않습니다.
실행 후 해당 slot의 attachment에는 regionAttachment가 들어가 있었습니다.
제가 무엇을 놓치고 있나요?
혹시 slot에 skin이 있어야 하나요?
var loadTextureForAttachment = function (imageUrl) {
return new Promise((resolve, reject) => {
var image = new Image();
image.crossOrigin = 'anonymous';
image.src = imageUrl;
image.onload = function () {
var region = new spine.TextureAtlasRegion(new spine.TextureAtlasPage(imageUrl), imageUrl);
region.u = region.v = 0;
region.u2 = region.v2 = 1;
region.page.width = region.width = region.originalWidth = image.width;
region.page.height = region.height = region.originalHeight = image.height;
region.page.setTexture(SpineObject.player.assetManager.textureLoader(image));
resolve(region);
};
image.onerror = function () {
reject(new Error('Failed to load image: ' + imageUrl));
};
});
};
loadTextureForAttachment(path + imageName + '.png')
.then((newRegion) => {
var skeleton = SpineObject.player.skeleton;
var slot = skeleton.findSlot(slotName);
var attachment = slot.attachment;
var newAttachment = null;
if (attachment) {
newAttachment = attachment.copy();
} else {
newAttachment = new spine.RegionAttachment(newRegion.name, newRegion.name);
newAttachment.width = newRegion.width;
newAttachment.height = newRegion.height;
}
newAttachment.region = newRegion;
slot.setAttachment(newAttachment);
slot.attachment.updateRegion();
})
.catch((error) => {
console.error('Error loading texture:', error);
});I'm sorry, but it works for me. I would need a full runnable example in order to detect the issue.
Can you upload you example here? You can also send it to us at contact@esotericsoftware.com.