Share
En este tutorial, la cuarta entrega de la serie SpriteKit From Scratch, analizamos las diversas características visuales y de audio que SpriteKit proporciona para agregar más detalles y variedad a sus juegos. Esto incluye sistemas de partículas, filtros, iluminación y audio..
Para seguirme, puede utilizar el proyecto que creó en el tutorial anterior de esta serie o descargar una copia nueva de GitHub.
Los gráficos utilizados para el juego en esta serie se pueden encontrar en GraphicRiver. GraphicRiver es una gran fuente para encontrar ilustraciones y gráficos para tus juegos.
En SpriteKit, el término sistema de partículas.se refiere a un solo nodo emisor, representado por el SKEmitterNode clase. Define la posición del sistema en tu escena y todas las partículas que crea. El emisor especifica los distintos comportamientos de las partículas que genera..
Los sistemas de partículas se utilizan mejor en los juegos SpriteKit en los que necesitas generar un gran número de sprites idénticos o similares, que no necesitan tener una ubicación específica ni ejecutar ninguna acción.
En este tutorial, agregaremos dos sistemas de partículas cuando el automóvil se tope con un obstáculo:
Si bien los sistemas de partículas se pueden crear mediante programación, es mucho más fácil hacerlo utilizando el editor integrado de Xcode. Todas las propiedades de un sistema de partículas pueden modificarse en este editor y los cambios que realice se visualizan inmediatamente. Esto es mucho más fácil que tener que ejecutar tu juego después de cada cambio que haces..
Primero vamos a crear el efecto de explosión. Crea un nuevo archivo en tu proyecto y elige el iOS> Recurso> SpriteKit Particle File modelo.
Del menú que aparece, seleccione Fuego como el Plantilla de partículas. Nombra el archivo Explosión o algo similar.
Después de que Xcode haya creado el archivo, verá que hay dos archivos nuevos en su proyecto., Explosion.sks y spark.png.
Explosion.sks contiene el sistema de partículas y es el archivo con el que trabajaremos. El segundo archivo, spark.png, Es una imagen simple utilizada por el Fuego Plantilla de partículas para crear su efecto visual. Si abres Explosion.sks, Puedes ver el fuego animando.
Los cambios más importantes que debemos realizar en este sistema de partículas es que las partículas se muevan hacia afuera del emisor en todas las direcciones y que no generen nuevas partículas continuamente..
Para hacer el primer cambio, abre el Inspector de atributos y, bajo el Partículas seccion, cambio Rango de ángulo a 360 °.
Inmediatamente, puedes ver que las partículas ahora se están moviendo hacia afuera en una forma circular.
Para evitar que el sistema de partículas cree continuamente nuevas partículas, podemos especificar un Máximo valor. Este valor le dice al sistema de partículas cuántas partículas en total debe crear. El valor predeterminado de 0 significa que no hay un máximo, lo que hace que las nuevas partículas se creen continuamente.
Además de especificar un valor máximo, también vamos a cambiar algunas otras propiedades para crear un mejor efecto de explosión. En el Partículas sección de la Inspector de atributos, cambiar los siguientes valores:
Nosotros fijamos Tasa de natalidad a un valor que es más alto que el Máximo Propiedad porque determina cuántas partículas se crean. por segundo. Queremos que la explosión suceda muy rápido. Entonces, en lugar de tener 1,000 partículas que se generan en el lapso de un segundo completo, lo que sucedería con una Tasa de natalidad de 1,000, especificamos un Tasa de natalidad de 5,000. Esto significa que todas las partículas son creadas en solo 0.2 segundos..
Configurando Vida útil> Inicio a 3 Las partículas viven durante 3 segundos. los Rango de vida La propiedad se puede usar para agregar variación a la vida útil de las partículas..
Por último, nos propusimos Velocidad> Inicio a 200 para que las partículas salgan del emisor muy rápidamente como sucedería en una explosión real.
Después de hacer estos cambios, puedes ver que el sistema de partículas se ve bastante diferente y más como una explosión apropiada.
Tenga en cuenta que, aunque la animación se repite periódicamente en el editor de Xcode, el sistema de partículas solo se anima una vez cuando se agrega a su escena..
Con el sistema de partículas de explosión completado, es hora de pasar al sistema de partículas de humo. Crear un nuevo archivo, Fumar, Usando la misma plantilla que usamos para la explosión. La única diferencia es la Plantilla de partículas, que nos propusimos Fumar.
El único cambio que debemos hacer a este sistema de partículas es hacer que el humo se mueva hacia afuera en un círculo en lugar de simplemente hacia arriba. Para ello, cambia la Ángulo> Rango propiedad a 360 ° Como hicimos para el sistema de partículas de explosión. Después de hacerlo, el sistema de partículas de humo debería verse así:
Con ambos sistemas de partículas listos, podemos agregarlos a nuestra escena. Para ello, cargamos cada uno de los archivos que creamos como SKEmitterNode objetos y luego agregarlos a la escena como un nodo regular. Abierto MainScene.swift y reemplazar la implementación de didBeginContact (_ :) con lo siguiente:
Accentsconagua
func didBeginContact (contact: SKPhysicsContact) if contact.bodyA.node == player || contact.bodyB.node == jugador si permite explosionPath = NSBundle.mainBundle (). pathForResource ("Explosion", ofType: "sks"), smokeyPath = NSBundle.mainBundle (). pathForResource ("Smoke", ofType: " sks "), deje explosion = NSKeyedUnarchiver.unarchiveObjectWithFile (explosionPath) como? SKEmitterNode, let smoke = NSKeyedUnarchiver.unarchiveObjectWithFile (smokePath) como? SKEmitterNode player.removeAllActions () camera? .RemoveAllActions () player.hidden = true player.removeFromParent () explosion.position = player.position smoke.position = player.position addChild (smoke) addChild (explosion)Como en la implementación anterior de didBeginContact (_ :), realizamos la misma comprobación que antes para ver si alguno de los nodos involucrados en la colisión es el nodo del coche. Luego utilizamos el enlace opcional para obtener las rutas a los archivos de recursos del sistema de partículas de humo y explosión. Utilizamos estos caminos para instanciar SKEmitterNode objetos de ellos.
A continuación, eliminamos todas las acciones de la cámara y los nodos del reproductor, y ocultamos el nodo del jugador eliminándolo de la escena. Retiramos el coche para evitar más colisiones que luego conducen a más explosiones..
También establecemos la posición de los nodos emisores a la del auto y los agregamos a la escena. Como resultado, SpriteKit comienza inmediatamente a animar los sistemas de partículas tan pronto como se agregan a la escena..
Construye y ejecuta tu juego. Debería ver el sistema de partículas de explosión tan pronto como el automóvil golpee un obstáculo. Esto es seguido por humo una vez que el fuego se ha despejado.
En SpriteKit, hay un tipo especial de nodo (representado por el SKEffectNode clase) que puede usar un Imagen del núcleo objeto de filtro (representado por el CIFilter clase) para renderizar sus nodos hijos con una variedad de efectos. los SKScene clase es también una subclase de SKEffectNode, lo que significa que también puede aplicar un filtro a toda la escena.
Desafortunadamente, al momento de escribir este tutorial, hay algunos problemas relacionados con estos filtros y nodos de efectos en iOS 9. Actualmente, tan pronto como se habilita un efecto para un nodo de efecto, todos sus elementos secundarios están ocultos, lo que resulta en El efecto no es visible..
Aunque no podemos implementar esto en nuestro juego y ver cómo se ve, aún podemos ejecutar el código que se usaría para crear un efecto. En este caso, el siguiente método es un ejemplo de agregar y desvanecer gradualmente un efecto de desenfoque en toda la escena.
func addBlurFilter () let blurFilter = CIFilter (nombre: "CIGaussianBlur") blurFilter? .setDefaults () blurFilter? .setValue. : (node: SKNode, elapsedTime: CGFloat) en let currentRadius = elapsedTime * 10.0 blurFilter? .setValue (currentRadius, forKey: "inputRadius"))))
Creamos un CIFilter objeto de un tipo particular. Si desea ver algunos de los otros filtros integrados disponibles para usted, consulte la Referencia de filtro de imagen principal. Aseguramos que este filtro tenga todos los valores de entrada predeterminados y luego lo configuremos manualmente entradaRadio a 0.0, lo que significa que inicialmente no hay desenfoque.
Luego asignamos el filtro a la filtrar Propiedad de la escena actual y del conjunto. shouldEnableEffects a cierto para habilitarlo. Finalmente, ejecutamos una costumbre. SKAcción que aumenta gradualmente el radio de entrada del filtro a 10.
Con suerte, en una futura versión de iOS, los problemas que afectan a los nodos de efectos se solucionan, ya que proporcionan una manera de agregar algunos efectos únicos e interesantes a sus escenas SpriteKit.
SpriteKit también incluye un excelente sistema de iluminación que puede usarse para hacer que sus escenas se sientan más realistas. Las luces son muy fáciles de implementar y se crean a través del uso del SKLightNode clase. Un nodo de luz define ciertas propiedades, como el color de la luz (incluido el color ambiente) y su fuerza en la distancia.
En nuestra escena, vamos a crear una única luz blanca que se adjuntará al automóvil. Esta luz iluminará los obstáculos frente al automóvil y producirá sombras..
Empecemos por crear una luz en el didMoveToView (_ :) método de su la MainScene clase.
anular la función didMoveToView (ver: SKView) ... let light = SKLightNode () light.lightColor = UIColor.whiteColor () light.falloff = 0.5 player.addChild (light)
Con este código creamos un nuevo SKLightNode objeto, cambia su color claro propiedad a blanco, y baja su caerse propiedad del valor predeterminado de 1 a 0.5.
Al igual que al configurar la detección de colisiones físicas en SpriteKit, debe especificar qué luces interactúan con qué nodos de una escena mediante el uso de máscaras de bits. Cuando SpriteKit renderiza las luces en una escena, utiliza un operador lógico AND en el nodo de luz categoríaBitMask y el iluminaciónBitMask y shadowCastBitMask de cada nodo para determinar cómo debe aparecer ese nodo en particular.
Para nuestro juego, queremos que los obstáculos interactúen con la luz para que proyecten sombras en la escena. Para hacerlo, agregue las siguientes dos líneas al final de la spawnObstacle (_ :) método de la MainScene clase:
func spawnObstacle (timer: NSTimer) … obstacle.lightingBitMask = 0xFFFFFFFF obstacle.shadowCastBitMask = 0xFFFFFFFF
Al establecer una máscara de bits con todos los bits habilitados, los obstáculos interactúan con cada luz en la escena.
Construye y ejecuta tu aplicación. Verá que, a medida que su automóvil se mueve a través de la escena, cada obstáculo tiene una sombra dinámica, que siempre apunta hacia el centro del automóvil..
Como puede ver, las luces en SpriteKit son muy fáciles de usar y pueden agregar efectos agradables a sus escenas.
Finalmente, vamos a ver los nodos de audio en SpriteKit. Los nodos de audio se utilizan para agregar efectos de sonido a una escena. Estos nodos especiales están representados por el SKAudioNode clase. Porque SKAudioNode es un SKNode subclase, puede agregarlos y colocarlos en cualquier lugar de la escena, como un nodo regular.
Además de reproducir audio de manera regular y sonar igual, sin importar cómo esté organizada su escena (por ejemplo, música de fondo), SpriteKit le permite utilizar audio posicional para crear un efecto realmente envolvente. Esto se hace especificando un oyente nodo para su escena, que es donde el sonido se "escuchará" desde.
Los nodos de audio son posicionales por defecto. Esto significa que, si no desea utilizar esta funcionalidad en casos particulares, puede configurar un nodo específico posicional propiedad a falso.
Si bien no lo implementaremos en nuestro juego, el siguiente es un método de ejemplo para agregar un nodo de música de fondo que se repite siempre que forme parte de la escena. En el método, también agregamos un nodo de sonido de explosión que comienza a reproducirse cuando le decimos que.
Tenga en cuenta que importamos el Fundación Marco en la parte superior. Esto es necesario para acceder y trabajar con el avAudioNode propiedad de un SKAudioNode objeto. Como puede ver, los nodos de audio son muy fáciles de configurar y trabajar con SpriteKit.
import AVFoundation func addAudioNode () listener = player let backgroundMusic = SKAudioNode (fileNamed: "backgroundMusic") backgroundMusic.positional = false let explosion = SKAudioNode (fileNamed: "explosion") explosion.autoplayLooped = false addChild (backgroundMusic) hacer try explosion.avAudioNode? .engine? .start () // Se le llama cuando desea reproducir el sonido catch // Haga algo con el error
Ahora debería sentirse cómodo trabajando con algunos de los efectos más avanzados en SpriteKit, que incluyen sistemas de partículas, filtros, luz y audio. Estos efectos combinados pueden tener un gran impacto en la apariencia de tu juego y en lo inmersivo que es..
En el siguiente y último tutorial de esta serie, cubrimos algunas de las mejores prácticas a tener en cuenta al trabajar con SpriteKit. También te muestro cómo crear atlas de textura y guardar / cargar escenas.
Como siempre, asegúrese de dejar sus comentarios y sugerencias en los comentarios a continuación.
