bellow

I am wondering about the best approach to masking part of a skeleton on runtime display in libGDX. For example, given a skeleton representing the full body of a character, could a separate "portrait" view be created where only the head and shoulders of the character are shown?

The effect would be similar to what's discussed in the unity runtime here: Show the character\'s head in UI.

The solution in that thread mentions a SkeletonRenderSeparator, that I believe is not available in the libGDX runtime.

It seems like it may be possible to achieve this effect using the "clipping" options in the Spine Editor, but given that clipping may be an expensive runtime operation, I'm wondering if there's a less intensive way to achieve it.

Some further forum searching leads to this cryptic solution suggesting the use of some runtime code to "listen" for the drawing of a bounding box which is then used as a mask.

In purely libGDX terms, I've previously been able to achieve such an effect by drawing an Image to a framebuffer and masking it there, or using pixmap draw calls to mask the image (much like the approaches laid out in these StackOverflow answers: here and here). Would it be possible to write the current frame of a Skeleton object to a buffer and mask it as a still image in this way?
bellow
  • Posts: 5

Nate

Sure, you can render a skeleton to a libgdx FrameBuffer. However, you could use GL20#glScissor, which is likely the easiest and best performing solution for hard rectangular clipping. Note its parameters are in screen coordinates.

SkeletonRenderSeparator is for rendering slots up to a specific slots, or after a specific slot. This is unrelated to clipping.
User avatar
Nate

Nate
  • Posts: 9653

bellow

Thanks for the tips! And thanks for clearing up what SkeletonRenderSeparator is for. From the linked thread, I got the idea that it could be used as a workaround to show only part of a full skeleton. For example, just the head and any of its attachments. Not exactly clipping, but maybe would suffice if you just wanted a partial view of a character.

For now I'm trying to do a non-rectangular mask, so I am sticking with the FrameBuffer approach. That gives me a still image, which works for my purposes:

mix_and_match_masked.png


If I try to get a "live" masked skeleton in the future, I'll look into the GL20#glScissor approach, and see if I can figure out how to overlay that with a mask.
You do not have the required permissions to view the files attached to this post.
bellow
  • Posts: 5

Nate

Glad you got it working! Depending on your needs, you might be able to use glScissors and put graphics over it to make it appear circular.
User avatar
Nate

Nate
  • Posts: 9653

bellow

Okay, I'm happy, if a little chagrined, to report that it is truly just as easy as using a call to glScissor, and placing an image on top of the rectangle cut out by the scissor. This image shows the still, FrameBuffer-generated portraits on the right, and on the left, an animated skeleton, masked by an image of a circle with a transparent center, placed over a rectangle cut out by glScissor.

spine_mask_with_scissors.PNG


Very cool! Thanks again for the pointers.
You do not have the required permissions to view the files attached to this post.
bellow
  • Posts: 5


Return to Runtimes