Cómo crear una máscara alfa en iOS usando el kit de sprites

El efecto que estoy tratando de lograr es tener un círculo de luz en un área de oscuridad. El efecto es similar al de los juegos de pokemon, cuando estás en una cueva oscura y solo tienes una visión limitada que te rodea. Por lo que he intentado y leído, no he podido crear una máscara sobre los nodos en el kit de sprite que tiene niveles alfa. Las máscaras que logro crear tienen un borde duro, y básicamente solo recortan. Al leer en la página de desarrollador de Apple sobre el SKCropNode, que tiene la propiedad maskNode, dice "Si el píxel en la máscara tiene un valor alfa inferior a 0.05, el píxel de la image está enmascarado". Por desgracia, me parece que los píxeles estarán completamente enmascarados o completamente incluidos, sin valores alfa intermedios. Si lo que trato de decir ha sido difícil de seguir, he aquí una image de lo que he logrado: https://www.dropbox.com/s/y5gbk8qvuq4ynh0/iOS%20Simulator%20Screen%20shot%20Jan%2020%2C % 202014% 201.06.23% 20 PM.png

y aquí hay una image de lo que me gustaría lograr: https://www.dropbox.com/s/wtwfdi1mjs2n8e6/iOS%20Simulator%20Screen%20shot%20Jan%2020%2C%202014%201.05.54%20PM.png

De la forma en que logré get el resultado anterior, oculté el círculo del borde duro y luego agregué una image que tiene un degradado que va desde negro en el exterior hasta transparente en el interior. La razón por la cual este enfoque no funciona es porque necesito tener varios círculos, y con el método que acabo de mencionar, cuando se cruzan los círculos, se puede ver la oscuridad en el exterior del círculo transparente.

En conclusión, lo que necesito es una forma de tener un círculo que comienza a oscurecer en el centro, y luego se desvanece. Luego, hazlo donde el círculo esté oscuro, la image detrás de él se pueda ver y donde el círculo sea transparente, la image detrás de él no se pueda ver. Una vez más, disculpe si lo que estoy diciendo es difícil de seguir. Aquí está el código que estoy usando. Parte de esta fue encontrada en otras publicaciones.

SKSpriteNode *background = [SKSpriteNode spriteNodeWithColor:[SKColor networkingColor] size:CGSizeMake(500, 500)]; background.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame)); SKCropNode *cropNode = [[SKCropNode alloc] init]; SKNode *area = [[SKNode alloc] init]; int x = 65; //radius of the circle _circleMask = [[SKShapeNode alloc ]init]; CGMutablePathRef circle = CGPathCreateMutable(); CGPathAddArc(circle, NULL, 0, 0, x/2, 0, M_PI*2, YES); _circleMask.path = circle; _circleMask.lineWidth = x*2; _circleMask.strokeColor = [SKColor whiteColor]; _circleMask.name=@"circleMask"; _circleMask.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame)); //Here is where I just added in the gradient circle To give the desinetworking appearance, but this isn't necessary to the code //_circleDark = [SKSpriteNode spriteNodeWithImageNamed:@"GradientCircle"]; //_circleDark.position = [cropNode convertPoint:_circleMask.position fromNode:area]; [area addChild:_circleMask]; [cropNode setMaskNode:area]; [cropNode addChild:background]; //[cropNode addChild:_circleDark]; [self addChild:cropNode]; 

Este método también me ha permitido mover los círculos, revelando diferentes partes de la image detrás de ella, que es lo que quiero. Para hacer esto, simplemente lo configuré para cambiar el _circleMask.position cuando el usuario toca la pantalla.

Además, solo para aclararlo en caso de que alguien estuviera confundido, el negro es solo el color de background de la escena, la image está encima de eso, y luego el círculo forma parte del nodo de la máscara.

Una versión muy simple (y tal vez less … o más performante) de esto sería simplemente agregar un SKSpriteNode en la parte superior que tiene su viñeta sobre un background transparente. En otras palabras, si se ve en Photoshop, vería una cantidad decreciente de tablero de ajedrez visible en el círculo a medida que avanza desde el centro hacia afuera, y finalmente muestra un negro sólido. Cuando se utiliza la image PNG en su aplicación, esta transparencia se conservará cuando los dos sprites estén compuestos.

Tengo una idea … espero que ayude.

Haga un PNG con el degradado que desee de blanco a negro sin transparencia.

Use un nodo de sprite separado con el png para cada luz que desee y añádalos a un nodo SKEffectNode o SKCropNode. No importa qué, ya que ambos se representan en un context separado. Configure cada nodo de sprite en modo de fusión de pantalla.

Luego, cuando agregue el elemento principal SKEffectNode o SKCropNode a la escena, configúrelo en modo de mezcla múltiple.

Al final, la proyección fusionará las "luces" juntas muy bien, mientras que la multiplicación hará que el área blanca sea transparente.