sprite-kit - SpriteKit: チュートリアルのように、シーンのセクションをどのようにハイライトしますか?

Question

ゲームでチュートリアルを作成しようとしています。これは、UI の一部を通過してそれらを強調表示し、シーンの残りの部分を暗くします。

Sprites と SKBlendMode でできると思いますが、アップルのリファレンス ガイドでは説明が不十分です。

何か案が？

Answer 1

これを実現する 1 つの方法は、目的の「Cookie」を SKSpriteNodes で構成し、テクスチャを作成してそれを新しい SpriteNode に「そのまま」レンダリングし、シーン全体にブレンドすることです。

この単純な例では、ハイライトするために四角形を使用しましたが、そのノードを任意のノード タイプまたはイメージにして、それに応じてアルファ値を調整することもできます。

通常どおりシーンを描画し、次のコードを追加します。

// 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;