Hello
Even if I'm an experienced mobile app developper, I'm new to game dev and Spine 2D animation.
I create an Android and iOS game with .net9 MAUI and Skiasharp. I've bought an essential Spine license to integrate cool 2D animated characters.
To render a skeleton (spineboy to start), I use Spine-csharp generic runtime, and I have to implement a kind of SkiasharpSkeletonRenderer.
This is where I need some help please.. I think I'm missing a little details, but after hours and hours, this is the only result I can reach :
Looks like regions orientation are wrong..
Here is my draw region code :
`private void DrawRegionAttachment(SKCanvas canvas, RegionAttachment regionAttachment, Slot slot)
{
Bone bone = slot.Bone;
// Calculate the cumulative position and rotation
float worldX = bone.WorldX;
float worldY = bone.WorldY;
float rotation = bone.WorldRotationX + regionAttachment.Rotation; // Add attachment's rotation to the bone's world rotation
float scaleX = bone.WorldScaleX * regionAttachment.ScaleX; // Combine bone and attachment scales (X)
float scaleY = bone.WorldScaleY * regionAttachment.ScaleY; // Combine bone and attachment scales (Y)
// Convert the rotation to radians for trigonometric calculations
float radians = rotation * MathF.PI / 180f;
float cos = MathF.Cos(radians);
float sin = MathF.Sin(radians);
// Calculate the world vertices
float offsetX = regionAttachment.X;
float offsetY = regionAttachment.Y;
float renderX = worldX + (offsetX * cos - offsetY * sin); // Transform X using rotation and offset
float renderY = worldY + (offsetX * sin + offsetY * cos); // Transform Y using rotation and offset (do not invert Y for SkiaSharp)
// Load the texture for the attachment
string textureName = "spineboy/spineboy-ess.png";
var bitmap = textureLoader.GetTexture(textureName);
// Get the texture dimensions and UV coordinates
float textureWidth = bitmap.Width;
float textureHeight = bitmap.Height;
var sourceRect = new SKRect(
regionAttachment.Region.u * textureWidth,
regionAttachment.Region.v * textureHeight,
regionAttachment.Region.u2 * textureWidth,
regionAttachment.Region.v2 * textureHeight
);
// Calculate the attachment's size
float attachmentWidth = regionAttachment.Width * scaleX;
float attachmentHeight = regionAttachment.Height * scaleY;
// Define the destination rectangle for rendering
var destRect = new SKRect(
renderX - attachmentWidth / 2,
renderY - attachmentHeight / 2,
renderX + attachmentWidth / 2,
renderY + attachmentHeight / 2
);
// Render the texture onto the canvas
using var paint = new SKPaint
{
IsAntialias = true, // Enable anti-aliasing for smoother rendering
FilterQuality = SKFilterQuality.High // Use high-quality filtering for the texture
};
canvas.DrawBitmap(bitmap, sourceRect, destRect, paint);
}
`
I would be thankfull for any help please !
Maxime
