• Editor
  • Rotating a bone without affecting the mesh

I've made a mockup animation in After effects that I'm now recreating in Spine, and have trouble recreating the following effect:

In AE the rotating rays in the background are masked out in the middle so they're only visible outside the edges. But animating the rotation of the image doesn't affect the rotation of the mask in AE. And I can't figure out what would be the best way to approach this in spine.

My first thought was to cut out the middle section with a mesh and rotate the bone, but in this case, the mesh rotates together with the bone, making the edges visible. So I tried "locking" the inner mesh vertices with weights, but the only deforms the outer vertices and gives me this effect:

I know I could export it form AE as a png sequence, but I'm trying to avoid using sequences as much as possible. So I was wondering if there is a simple way to recreate this in spine?

Related Discussions
...

A good approach could do the following:

  • Have the rays on their own separate image(s) parented to a bone in the middle that will rotate (right now they are rotating on their own pivot which is not what you want to achieve)
  • Add a 4 vertices clipping as a child of the bone that holds the middle images not rotating, set the clipping so it only affects the rays in the draw order.
    https://esotericsoftware.com/spine-clipping
    If the image in the middle doesn't have to be transparent you may also skip the clipping.
  • NeOreo đã trả lời bài viết này.

    Erika Hey, thank you for the replay.

    I have made the rays a separate image, but the issue I'm running in with clipping is, I would need to invert it, because the clipping mask cuts out the rays outside the rectangle, but leaves what is within the rectangle.

    Ah never mind, I figured I can make the clipping the same way as I did the mesh to cut out the inner part.

    Now it works

    But if there is a more efficient way to do it, please let me know 😃

    • Misaki đã trả lời bài viết này.

      NeOreo If the final output of the animation is intended to be in video format, this is not a problem, but if the final output of the animation is intended to be played back using the Spine runtime, such use of clipping attachments is computationally expensive and is not recommended.
      The general approach is to prepare an image that covers the center and hides the image behind it without trying to make the center transparent that way.

      • NeOreo đã thích điều này.

      I assume NeOreo needs the center transparent, otherwise Misaki is right that covering the center with an image would be better for performance. However, I disagree that this use of clipping is not recommended. Any amount of clipping can be perfectly fine as long as the performance impacts don't cause a problem for the app, which typically means that the user notices. The important thing is to understand that clipping can affect performance and what you can do to reduce that. Clipping just a few triangles for these light rays is likely fine.

      The approach is good but it can be done more efficiently. Remember your goals whenever using clipping: reduce both the number of vertices in the clipping attachment and the total number of vertices in all the clipped region and mesh attachments (which determines the number of clipped triangles). Also prefer convex polygons.
      http://esotericsoftware.com/spine-clipping#Performance

      The metrics view shows you the clipping polygon and triangle counts, keep them low.
      https://esotericsoftware.com/spine-metrics#Clipping-polygons

      Note for the above goals, it doesn't matter how large your clipping polygons are. With that in mind you can do it with one fewer clipping vertex:

      You can even do better, removing another vertex (I spaced out the vertices a bit so you can more easily see what is happening):

      Hình ảnh bị xóa do không hỗ trợ HTTPS. | Vẫn hiển thị

      Fewer vertices can be much better, especially if clipping many triangles. This particular setup isn't terribly lightweight, as it has concave parts. The metrics view shows 5 clipping polygons because the single concave polygon has to be broken into 5 convex polygons. Clipping is then done for each of those polygons, same as if you had 5 convex clipping attachments. This means the work is clipping for however many triangles you are clipping times 5. This can be OK, but shows how you can easily explode the amount of work that needs to be done. It's especially important to understand when clipping an entire skeleton with many vertices.

      Lastly, look closely at what you are clipping. Can it have fewer vertices and look the same? Extra vertices for unnecessary mesh details becomes expensive when clipping. Each of the vertices is compared against each of the vertices of each clipping polygon.

        Nate Oh wow, thanks for this comprehensive explanation. And you were right, I need the center transparent so covering it wasn't an option.

        Since we're on the topic of performance, can I ask what would be the best approach to do particles, that isn't too terrible for performance.

        I'm preparing game assets that will be later implemented by out pixi developers. As mentioned I made a mockup in after effects and there are a lot of particles in there. Right now I've used some png sequences to import the complex ones. I've recreated one by combining 3 still image that fade between each other while doing some simple mesh deformation (I tried to use as few vertices as possible). And for some I just took one particle, animate it, make loads of duplicates and offset the keyframes.

        I've been told to avoid png sequences as much as possible. I assume because the size gets bigger, which makes loading times longer. But I'm guessing that duplicating hundreds of bones to make particles can also be heavy on the processing? And as I've read, mesh deformation also isn't very easy on the processing. So which option would be the most optimal for game implementation?

        while doing some simple mesh deformation

        It's almost always better to use bones to deform meshes:
        https://esotericsoftware.com/spine-keys#Deform-keys

        I've been told to avoid png sequences as much as possible.

        Like most things, there's no hard and fast rule. It uses up texture space, but that isn't always an issue. Maybe your developers can accept some texture switches to allow you to use more unique images. See the first 2 paragraphs here:
        https://esotericsoftware.com/spine-texture-packer

        See the performance page for some details:
        https://esotericsoftware.com/spine-metrics#Performance

        I'm guessing that duplicating hundreds of bones to make particles can also be heavy on the processing?

        Sure, too much of anything adds up. The important thing is to know your boundaries. Consider everything that is being rendered, see how far you can push the number of bones, or mesh deforms, or anything else until it becomes unacceptable. You have to do it yourself, as there are so many variables that every app will behave differently. If your app is doing very little except render a single skeleton, that skeleton can be quite complex and using hundreds of bones is probably fine.

        Using hundreds of bones or clipping a ton eats up CPU while other things eat up other resources. Drawing tons of images sends lots of geometry to the GPU and uses up GPU fill rate. You need to push the boundaries in different ways to understand where the limits are for your app.

        It also matters what hardware you are targeting, which is something you and your team need to decide on early on.

        All that is hard and the results can change -- everything is fine until more stuff is added to the app. Due to that people usually aim for some rule of thumb type voodoo where they avoid some features or use them sparingly without doing any of the work to figure out where the boundaries are. That can be fine, unless you really need the features for the effects you want. It's often best to keep it in mind and not go way off into the weeds by using expensive things excessively when that will be hard to fix later, but at the same time don't optimize prematurely and save performance that you could have used or, more likely, waste lots of time saving performance when there is plenty.

        Skeletal animation doesn't lend itself well to a large number of particles. A particle system is highly optimized for a very specific task. You can use a bone or point attachment and render particles at runtime between your skeleton layers using a real particle system, if that is really needed.

        You can do particles in Spine, but you'll want to keep it simple most of the time. Sometimes you can use a single image with multiple particles on it and animate in a way that it is hard to tell they aren't separate.

        At runtime you can pose a skeleton once, then render it multiple times, possibly rotating it each time. This can cut out a large amount of effort to pose the skeleton, if the duplication is acceptable or can be hidden.

        • NeOreo đã thích điều này.