SpriteKit: How do you highlight a section of the scene, like in a tutorial?

Question

I'm trying to create a tutorial in a game, that goes through parts of the UI and highlights them, whilst dimming the rest of the scene.

I think I can do it with Sprites and SKBlendMode, but these are poorly explained in the apple reference guide.

Any idea?

score 2 · Accepted Answer · answered Mar 10 '15 at 19:01

One way of achieving this is by composing your desired 'cookie' with SKSpriteNodes, then creating a texture to render it 'as is' to a new SpriteNode, which will then blend as a whole with the scene.

In this simple example I've used a rectangle to highlight, but you could make that node any node type or image, and adjust the alpha value accordingly.

Draw your scene as normal, then add this code:

// dim the entire background of the scene to 70% darker
SKSpriteNode* background = [SKSpriteNode spriteNodeWithColor:[UIColor colorWithRed:0
                                                                             green:0
                                                                              blue:0
                                                                             alpha:0.7]
                                                        size:self.frame.size];

// make a square of 100,100. This could be an image or shapenode rendered to a spritenode
// make the cut out only dim 20% - this is because no dim will look very harsh
SKSpriteNode* cutOut = [SKSpriteNode spriteNodeWithColor:[UIColor colorWithRed:0
                                                                         green:0
                                                                          blue:0
                                                                         alpha:0.2]
                                                    size:CGSizeMake(100,100)];

// add the cut out to the background and make the blend mode replace the colors
cutOut.blendMode = SKBlendModeReplace;
[background addChild:cutOut];

// we now need to make a texture from this node, otherwise the cutout will replace the underlying
// background completely

SKTexture* newTexture = [self.view textureFromNode:background];
SKSpriteNode* newBackground = [SKSpriteNode spriteNodeWithTexture:newTexture];

// position our background over the entire scene by adjusting the anchor point (or position)
newBackground.anchorPoint = CGPointMake(0,0);
[self addChild:newBackground];

// if you have other items in the scene, you'll want to increaes the Z position to make it go ontop.
newBackground.zPosition = 5;

I thought SKCropNode would crop a sprite, not invert the cropped area - or is there a crop mode to change its behaviour? — GilesDMiddleton, Mar 10 '15 at 20:03
@Marin Sorry - I'm not a Swifty yet - but the same principles probably apply. Maybe post as a new question and cross reference my post - you'll have more visibility. — GilesDMiddleton, Feb 19 '18 at 11:17

SpriteKit: How do you highlight a section of the scene, like in a tutorial?

1 Answers1