ayush705
I've deleted Spinebot's answer since it suggested a solution using Unity features.
Spine skeletons are clearly more complex than an image used as a CSS background.
You can still achieve something similar using drawSkeleton and some math. drawSkeleton has the following signature:
drawSkeleton (skeleton: Skeleton, premultipliedAlpha = false, slotRangeStart = -1, slotRangeEnd = -1, transform: VertexTransformer | null = null) {
And here’s the VertexTransformer definition:
type VertexTransformer = (vertices: NumberArrayLike, numVertices: number, stride: number) => void;
This function allows you to transform mesh vertices, which also contain the coordinates.
This means you can call drawSkeleton as many times as needed, passing a different VertexTransformer each time to draw the skeleton at different positions.
For example:
const offsetX = 100;
const offsetY = 100;
renderer.drawSkeleton(skeleton, pma, -1, -1, (vertices, size, vertexSize) => {
for (let i = 0; i < size; i += vertexSize) {
vertices[i] = vertices[i] + offsetX;
vertices[i + 1] = vertices[i + 1] + offsetY;
}
});
This draws the skeleton with an offset of 100 units on both x and y axes (Spine world units).
With this approach, you can create a loop to calculate the required offsets and draw as many skeletons as needed to fill your background.
Just be mindful of performance!
