如何在SpriteKit中分解节点？

Question

I have 2 SKSpriteNode objects, and I want to crossfade them. One of the easiest way is to create a fadeOut SKAction and a fadeIn SKAction, and apply them to the SKSpriteNode objects. But the problem of this approach is that during the action both of them have the alpha under 1.0, which looks not so good.

For example, I'd like to dissolve the red square SKNode to a green round SKNode

If just fade out the red square and fade in the green round during the action it'll look like this

So you can see background through these 2 objects. I hope to dissolve these 2 objects like this:

In UIKit I can use UIView.transitionWithView but in SpriteKit I only found a similar method for presenting scenes ( SKViewObject.presentScene: transition: ). So is there anyway to make a dissolve transition for SKNodes?

Answer 1

There's little you can about the background coming through when adjusting the alpha settings on both nodes. A possible hack could be to temporarily insert a solid node in front of your background but behind both other nodes until the action is done. At which point you remove it.

The node should be in the shape of both nodes cross-section (pardon the sloppy artwork on my part):

Answer 2

I searched a lot for this question and I nearly decided to use a shader to do this kind of dissolve (since you can directly edit the pixel in a shader), but then I found that there's an unusual way to solve this problem. It may not be useful for every situation, but if your background doesn't do things like scroll or zoom, this approach may be the easiest. In simple words, just create a screenshot for the current screen and display it at the top, then change your node to the sprite you need, and at last fade out the screenshot you took.

So at first you have to make sure all the nodes are in the correct node tree. Then use SKViewObject.textureFromNode(rootNode) to create the screenshot, make a sprite node from this texture, and add it to your screen. Then, you can create the fade out SKAction to fade out this screenshot sprite. You may also remove it when the action ends.

Using this approach, during the fade out the screen will just look like this: