How to draw debug info in unity runtime

phtcloud

在ts runtime中可以绘制debug信息如hulls bones，我正在制作一个卡牌检视动画用户可以任意旋转或翻转卡牌，我想实现一个伪3D效果当摄像机从不同看向卡牌中的动画时背景的角度也是不同的，这需要获取摄像机位置计算后修改背景骨骼，我打算在测试环境中绘制spine的一些数据如骨骼位置和mesh位置等就像在ts runtime中一样，但我似乎没有找到unity runtime中怎么开启debug绘制的方法，如果能提供一段示例代码我将感激不尽

Spinebot

在 Unity 的 spine-unity runtime 中，您可以通过以下方式绘制调试信息：

使用 Skeleton Debug 窗口

最简单的方法是使用内置的 Skeleton Debug 窗口：

选中场景中的 SkeletonAnimation 或 SkeletonGraphic GameObject
在 Inspector 面板的 Advanced 部分，点击 Debug 按钮
这会打开 Skeleton Debug 窗口，显示骨骼、插槽、约束、绘制顺序等实时信息

Skeleton Debug Window

使用代码绘制调试信息

如果您需要在 Scene 视图中可视化骨骼位置，可以使用以下示例代码：

using UnityEngine;
using Spine.Unity;
using Spine;

public class SpineDebugDrawer : MonoBehaviour
{
    public SkeletonAnimation skeletonAnimation;
    public bool drawBones = true;
    public bool drawSlots = false;
    public Color boneColor = Color.green;
    public Color slotColor = Color.blue;

    void OnDrawGizmos()
    {
        if (skeletonAnimation == null) return;
        
        var skeleton = skeletonAnimation.Skeleton;
        if (skeleton == null) return;

        if (drawBones)
        {
            DrawBones(skeleton);
        }

        if (drawSlots)
        {
            DrawSlots(skeleton);
        }
    }

    void DrawBones(Skeleton skeleton)
    {
        Gizmos.color = boneColor;
        
        foreach (var bone in skeleton.Bones)
        {
            // 获取骨骼的世界位置
            Vector3 bonePos = new Vector3(bone.WorldX, bone.WorldY, 0);
            bonePos = transform.TransformPoint(bonePos);
            
            // 绘制骨骼点
            Gizmos.DrawSphere(bonePos, 0.02f);
            
            // 如果有父骨骼，绘制连线
            if (bone.Parent != null)
            {
                Vector3 parentPos = new Vector3(bone.Parent.WorldX, bone.Parent.WorldY, 0);
                parentPos = transform.TransformPoint(parentPos);
                Gizmos.DrawLine(parentPos, bonePos);
            }
            
            // 绘制骨骼名称（仅在选中时）
            #if UNITY_EDITOR
            if (Selection.activeGameObject == gameObject)
            {
                UnityEditor.Handles.Label(bonePos, bone.Data.Name);
            }
            #endif
        }
    }

    void DrawSlots(Skeleton skeleton)
    {
        Gizmos.color = slotColor;
        
        foreach (var slot in skeleton.Slots)
        {
            if (slot.Bone != null)
            {
                Vector3 slotPos = new Vector3(slot.Bone.WorldX, slot.Bone.WorldY, 0);
                slotPos = transform.TransformPoint(slotPos);
                Gizmos.DrawWireSphere(slotPos, 0.03f);
            }
        }
    }

    // 获取特定骨骼的世界位置（用于您的摄像机计算）
    public Vector3 GetBoneWorldPosition(string boneName)
    {
        var bone = skeletonAnimation.Skeleton.FindBone(boneName);
        if (bone != null)
        {
            Vector3 bonePos = new Vector3(bone.WorldX, bone.WorldY, 0);
            return transform.TransformPoint(bonePos);
        }
        return Vector3.zero;
    }
}

针对您的伪3D效果需求

对于您想要根据摄像机位置调整背景骨骼的需求，这里是一个示例：

using UnityEngine;
using Spine.Unity;

public class Pseudo3DBackground : MonoBehaviour
{
    public SkeletonAnimation skeletonAnimation;
    public Camera mainCamera;
    public string backgroundBoneName = "background";
    public float parallaxStrength = 0.5f;

    void LateUpdate()
    {
        if (skeletonAnimation == null || mainCamera == null) return;

        var bone = skeletonAnimation.Skeleton.FindBone(backgroundBoneName);
        if (bone == null) return;

        // 获取摄像机相对于卡牌的位置
        Vector3 cameraDir = mainCamera.transform.position - transform.position;
        
        // 根据摄像机角度调整背景骨骼
        float angleOffset = Mathf.Atan2(cameraDir.y, cameraDir.x) * Mathf.Rad2Deg;
        bone.Rotation = angleOffset * parallaxStrength;
        
        // 或者调整位置
        bone.X = cameraDir.x * parallaxStrength;
        bone.Y = cameraDir.y * parallaxStrength;
        
        // 应用修改
        skeletonAnimation.Skeleton.UpdateWorldTransform();
    }
}

将第一个脚本挂载到您的 SkeletonAnimation GameObject 上，您就可以在 Scene 视图中看到骨骼的调试信息了。第二个脚本可以帮助您实现基于摄像机位置的背景调整效果。

phtcloud

如何在游戏窗口绘制呢这段代码只能在unity editor中绘制

Misaki

phtcloud As far as I know, there isn't an official component for displaying debug information during gameplay, so you'll have to create one yourself. The script below was generated by an AI, but based on my testing, it worked as shown in the video below, so you might want to give it a try:

using UnityEngine;
using Spine.Unity;

[RequireComponent(typeof(SkeletonRenderer))]
public class SpineRuntimeDebugDraw : MonoBehaviour
{
    public bool showBones = true;
    public bool showMesh = true;

    SkeletonRenderer skeletonRenderer;
    MeshFilter meshFilter;
    Material lineMaterial;

    void Awake()
    {
        skeletonRenderer = GetComponent<SkeletonRenderer>();
        meshFilter = GetComponent<MeshFilter>();

        lineMaterial = new Material(Shader.Find("Hidden/Internal-Colored"));
        lineMaterial.hideFlags = HideFlags.HideAndDontSave;
    }

    void OnRenderObject()
    {
        if (!enabled || lineMaterial == null) return;

        lineMaterial.SetPass(0);
        GL.PushMatrix();
        GL.MultMatrix(transform.localToWorldMatrix);
        GL.Begin(GL.LINES);

        if (showBones)
        {
            GL.Color(Color.green);
            foreach (var bone in skeletonRenderer.Skeleton.Bones)
            {
                var pose = bone.AppliedPose;

                float x = pose.WorldX;
                float y = pose.WorldY;

                float length = bone.Data.Length;
                float rot = pose.WorldRotationX;

                float endX = x + Mathf.Cos(rot * Mathf.Deg2Rad) * length;
                float endY = y + Mathf.Sin(rot * Mathf.Deg2Rad) * length;

                GL.Vertex3(x, y, 0);
                GL.Vertex3(endX, endY, 0);
            }
        }

        if (showMesh && meshFilter != null && meshFilter.sharedMesh != null)
        {
            GL.Color(Color.cyan);

            var mesh = meshFilter.sharedMesh;
            var vertices = mesh.vertices;
            var triangles = mesh.triangles;

            for (int i = 0; i < triangles.Length; i += 3)
            {
                Vector3 a = vertices[triangles[i]];
                Vector3 b = vertices[triangles[i + 1]];
                Vector3 c = vertices[triangles[i + 2]];

                GL.Vertex(a); GL.Vertex(b);
                GL.Vertex(b); GL.Vertex(c);
                GL.Vertex(c); GL.Vertex(a);
            }
        }

        GL.End();
        GL.PopMatrix();
    }
}

Please note that this is intended for SkeletonRenderer. You'll need to create a separate one for SkeletonGraphic.

phtcloud

Misaki的代码无法在我这里生效只能在场景中看到绘制信息无法在Game中看到
我自己参考了的代码(我使用的是4.1版本的runtime所以没有bone.AppliedPose)


using System.Collections.Generic;
using UnityEngine;
using Spine;
using Spine.Unity;

public class SpineRuntimeDebugLines : MonoBehaviour
{


    public Color boneColor = Color.green;
    public Color meshColor = Color.cyan;

    float lineWidth = 1.5f;

    SkeletonRenderer skeletonRenderer;

    Material lineMaterial;

    readonly List<LineRenderer> lines = new();

    int lineIndex;

    void Awake()
    {
        skeletonRenderer = GetComponent<SkeletonRenderer>();

        lineMaterial = new Material(Shader.Find("Sprites/Default"));
    }

    void LateUpdate()
    {
        lineIndex = 0;

        if (settingctl.showbonesdebug)
            DrawBones();

        if (settingctl.showmeshdebug)
            DrawMesh();

        if (settingctl.showhulldebug)
            DrawHull();

        for (int i = lineIndex; i < lines.Count; i++)
        {
            lines[i].gameObject.SetActive(false);
        }
    }


    void DrawBones()
    {
        foreach (var bone in skeletonRenderer.Skeleton.Bones)
        {
            float x = bone.WorldX;
            float y = bone.WorldY;

            float rot = bone.WorldRotationX * Mathf.Deg2Rad;
            float len = bone.Data.Length;

            Vector3 a = new Vector3(x, y, 0);
            Vector3 b = new Vector3(
                x + Mathf.Cos(rot) * len,
                y + Mathf.Sin(rot) * len,
                0
            );

            DrawLine(a, b, boneColor);
        }
    }

    static readonly float[] worldVertices = new float[8192];

    void DrawMesh()
    {
        var skeleton = skeletonRenderer.Skeleton;

        foreach (var slot in skeleton.DrawOrder)
        {
            var attachment = slot.Attachment;

            if (attachment == null)
                continue;

            if (attachment is RegionAttachment region)
            {
                DrawRegion(slot, region);
            }
            else if (attachment is MeshAttachment mesh)
            {
                DrawMeshAttachment(slot, mesh);
            }
        }
    }

    void DrawHull()
    {
        var skeleton = skeletonRenderer.Skeleton;

        foreach (var slot in skeleton.DrawOrder)
        {
            var attachment = slot.Attachment;
            if (attachment == null)
                continue;

            if (attachment is RegionAttachment region)
            {
                region.ComputeWorldVertices(slot, worldVertices, 0, 2);

                Vector3 a = new(worldVertices[0], worldVertices[1], 0);
                Vector3 b = new(worldVertices[2], worldVertices[3], 0);
                Vector3 c = new(worldVertices[4], worldVertices[5], 0);
                Vector3 d = new(worldVertices[6], worldVertices[7], 0);

                DrawLine(a, b, Color.yellow);
                DrawLine(b, c, Color.yellow);
                DrawLine(c, d, Color.yellow);
                DrawLine(d, a, Color.yellow);

                continue;
            }

            if (attachment is MeshAttachment mesh)
            {
                int vertexCount = mesh.WorldVerticesLength;

                mesh.ComputeWorldVertices(slot, 0, vertexCount, worldVertices, 0, 2);

                int hull = mesh.HullLength;

                if (hull <= 0)
                    continue;

                for (int i = 0; i < hull; i += 2)
                {
                    int ni = (i + 2) % hull;

                    Vector3 a = new(
                        worldVertices[i],
                        worldVertices[i + 1],
                        0
                    );

                    Vector3 b = new(
                        worldVertices[ni],
                        worldVertices[ni + 1],
                        0
                    );

                    DrawLine(a, b, Color.yellow);
                }
            }
        }
    }


    void DrawRegion(Slot slot, RegionAttachment region)
    {
        region.ComputeWorldVertices(slot, worldVertices, 0, 2);

        Vector3 v0 = new(worldVertices[0], worldVertices[1], 0);
        Vector3 v1 = new(worldVertices[2], worldVertices[3], 0);
        Vector3 v2 = new(worldVertices[4], worldVertices[5], 0);
        Vector3 v3 = new(worldVertices[6], worldVertices[7], 0);

        DrawLine(v0, v1, meshColor);
        DrawLine(v1, v2, meshColor);
        DrawLine(v2, v3, meshColor);
        DrawLine(v3, v0, meshColor);
    }

    void DrawMeshAttachment(Slot slot, MeshAttachment mesh)
    {
        int vertexCount = mesh.WorldVerticesLength;

        mesh.ComputeWorldVertices(slot, 0, vertexCount, worldVertices, 0, 2);

        var triangles = mesh.Triangles;

        for (int i = 0; i < triangles.Length; i += 3)
        {
            int ia = triangles[i] * 2;
            int ib = triangles[i + 1] * 2;
            int ic = triangles[i + 2] * 2;

            Vector3 a = new(worldVertices[ia], worldVertices[ia + 1], 0);
            Vector3 b = new(worldVertices[ib], worldVertices[ib + 1], 0);
            Vector3 c = new(worldVertices[ic], worldVertices[ic + 1], 0);

            DrawLine(a, b, meshColor);
            DrawLine(b, c, meshColor);
            DrawLine(c, a, meshColor);
        }
    }

    void DrawLine(Vector3 a, Vector3 b, Color color)
    {
        LineRenderer lr;

        if (lineIndex >= lines.Count)
        {
            lr = CreateLineRenderer();
            lines.Add(lr);
        }
        else
        {
            lr = lines[lineIndex];
        }

        lineIndex++;

        lr.gameObject.SetActive(true);

        lr.startColor = color;
        lr.endColor = color;

        lr.positionCount = 2;

        lr.SetPosition(0, a);
        lr.SetPosition(1, b);
    }

    LineRenderer CreateLineRenderer()
    {
        GameObject go = new("DebugLine");

        go.transform.SetParent(transform, false);

        var lr = go.AddComponent<LineRenderer>();

        lr.material = lineMaterial;

        lr.useWorldSpace = false;
        lr.sortingOrder = 9999;
        lr.startWidth = lineWidth;
        lr.endWidth = lineWidth;

        lr.shadowCastingMode = UnityEngine.Rendering.ShadowCastingMode.Off;
        lr.receiveShadows = false;

        lr.textureMode = LineTextureMode.Stretch;

        lr.numCapVertices = 0;
        lr.numCornerVertices = 0;

        return lr;
    }
}

这段代码实现了一个看起来和ts运行时中debug绘制差不多的效果我也可以用来调试其他角色在画面中的位置
ts中开启bones的debug还有这种绿色的点

我不知道怎么使用C#去实现
以及Clipping

Harald

phtcloud Misaki's code doesn't work for me. I can only see the debug drawing in the Scene view, not in the Game view.
I wrote my own code based on it (I'm using runtime version 4.1, so there is no bone.AppliedPose).

If you're using an older runtime than 4.3, please note that any sample code provided needs to be adjusted accordingly to the 4.2 to 4.3 upgrade guide, just the other way round:
https://esotericsoftware.com/forum/d/29234-spine-unity-42-to-43-upgrade-guide

For the future please be sure to mention the runtime version you're using up front, otherwise chances are that the answer you receive will be suboptimal.

Harald

phtcloud When bones debug is enabled in ts, there are also these green dots:

I don't know how to implement that in C#

Basically you just need to draw just a single point or sprite at the bone location instead of drawing a line from the bone to the parent.

Misaki's code could be adjusted simply adjusting the code from
GL.Begin(GL.LINES);
to
GL.Begin(GL.POINTS);
Regarding your provided code, unfortunately there seems to be no PointRenderer provided by the Unity API, so you would need to call something like the following for each bone transform matrix:

 Graphics.DrawMesh(quadMesh, matrix, dotMaterial, 0);