Share
SpriteKit es el motor de juegos 2D de Apple, un motor de renderizado construido sobre OpenGL. Se introdujo con iOS 7, y cada versión posterior ha traído grandes adiciones al marco. Con el uso de sprites texturizados, un motor de física incorporado y el muy potente SKAcción clase, puedes construir muy rápidamente juegos 2D funcionales.
SpriteKit tiene editores incorporados para escenas y partículas, un nodo de cámara desde el lanzamiento de iOS9 y soporte incorporado para conjuntos de mosaicos desde el lanzamiento de iOS 10. Con estas nuevas adiciones, SpriteKit se está convirtiendo rápidamente en una potencia para crear juegos 2D..
Para seguir este tutorial, solo descargue el repositorio de GitHub que lo acompaña. Tiene una carpeta llamada Ejemplo de inicio de proyecto. Abra el proyecto en esa carpeta en Xcode y estará listo para comenzar!
Los nodos son los bloques de construcción fundamentales de SpriteKit, y SKNode Es la clase base de todos los nodos. Todos sus activos en pantalla serán un SKNode o una subclase de los mismos. SKNodes por sí mismos no proporcionan ningún contenido visual, sin embargo. Todo el contenido visual se dibuja usando uno de varios predefinidos SKNode subclases. SKNodes y sus subclases comparten varias propiedades que puedes modificar. Algunos de los más importantes son los siguientes.
Accentsconagua
posición (CGPoint): la posición del nodo dentro del sistema de coordenadas de su padreEscala x (CGFloat): escala el ancho de un nodo por un multiplicadorEscala(CGFloat): escala la altura de un nodo por un multiplicadoralfa (CGFloat): la transparencia del nodozRotación (CGFloat): la rotación de Euler sobre el eje z (en radianes)Uno de los mas importantes SKNodes es el SKScene. Este es el nodo raíz al que se agregan todos los demás nodos. Por sí mismo, SKScene no proporciona ningún elemento visual, pero muestra los nodos que se le agregan.
SKScenes son los nodos raíz a los que se agregan todos los demás nodos. La escena anima y reproduce el contenido de sus nodos secundarios. Para mostrar una escena, se agrega a una SKView (que es una subclase de Vista y por lo tanto tiene muchas de las mismas propiedades que Vista).
En el proyecto de inicio SpriteKit, la escena inicial se muestra cuando se carga el proyecto. Por ahora, esto es solo una pantalla negra en blanco. Se muestra cuando el GameViewController invoca presenteScene (_ :) en la instancia de vista, pasando en la escena como un parámetro:
anular func viewDidLoad () super.viewDidLoad () let scene = GameScene (tamaño: CGSize (ancho: 768, alto: 1024)) let skView = self.view as! SKView skView.showsFPS = false skView.showsNodeCount = false skView.ignoresSiblingOrder = false scene.scaleMode = .aspectFill skView.presentScene (scene) // Presenta la escena
No te preocupes por las otras opciones por ahora; Los explicaré más adelante en esta serie..
Muchos juegos tienen más de una pantalla o escena, por lo que crearemos una nueva escena desde cero y luego la mostraremos desde nuestra escena inicial.
Seleccionar Expediente > Nuevo > Expediente desde el menú de Xcode, y elija Clase de Cocoa Touch.
Asegurarse Clase se establece en NuevoScene y eso Subclase de se establece en SKScene. prensa Siguiente y entonces Crear, asegurándose de que el objetivo principal está marcado. Abajo está el código para el NuevoScene.swift.
importar UIKit importar SpriteKit clase NewScene: SKScene
Ahora tenemos dos escenas en nuestro proyecto, y ninguna de ellas tiene contenido visual. Vamos a añadir un SKLabelNode (como todos los nodos, esta es una subclase de SKNode). los SKLabelNodeEl único propósito de 'es mostrar una etiqueta de texto.
Nodos de etiquetas, implementados en el SKLabelNode clase, se utilizan para mostrar texto dentro de su juego. Puede usar fuentes personalizadas si lo desea, pero para nuestros propósitos nos limitaremos a la predeterminada, que muestra el texto en blanco y está configurado para Helvetica Neue Ultra Light, 32 puntos.
Agregue lo siguiente dentro de didMove (to :) método dentro de GameScene.swift. Este método se llama inmediatamente después de que una escena es presentada por una vista. En general, aquí es donde configurarías cualquiera de los recursos de tu juego y los agregarías a la escena..
anular la función didMove (para ver: SKView) let startGameLabel = SKLabelNode (texto: "Start Game")
Aquí creamos un SKLabelNode usando el inicializador de conveniencia init (texto :), que toma como parámetro una cadena de texto.
Solo inicializando los nodos no se mostrarán en la escena. Para obtener los nodos a mostrar, tienes que invocar el addChild (_ :) Método en el nodo receptor, pasando el SKNode que desea agregar como parámetro.
Agregue lo siguiente dentro de didMove (to :) método.
anular la función didMove (ver: SKView) let startGameLabel = SKLabelNode (texto: "Start Game") addChild (startGameLabel)
los addChild (_ :) método no es exclusivo de SKScenes, pero es un método de SKNode. Esto le permite construir una jerarquía compleja de nodos, conocida como el "árbol de nodos". Por ejemplo, suponga que tiene un personaje de juego y que desea mover sus brazos y piernas por separado. Podrías crear un SKNode instancia y luego agregar cada parte individual como un niño de ese SKNode (El nodo que contiene se conoce como el nodo principal). Esto le daría la ventaja de poder mover el personaje como una unidad completa moviendo el padre SKNode, pero también le permiten mover cada parte individualmente.
Otro método importante para agregar nodos es el insertChild (_: at :) Método, que inserta a un niño en una posición específica dentro de la lista de hijos del nodo receptor. Cuando agrega un elemento secundario a un nodo, el nodo mantiene una lista ordenada de elementos secundarios a la que se hace referencia leyendo el nodo niños propiedad. Al agregar varios nodos a un nodo principal, es importante tener esto en cuenta, ya que el orden en que se agregan los nodos afecta algunos de los aspectos del procesamiento de la escena, incluidas las pruebas de impacto y el renderizado..
Para eliminar un nodo, invoca el removeFromParent () Método en el nodo que desea eliminar.
Ahora que hemos cubierto la adición y eliminación de nodos, podemos volver a centrarnos en el proyecto de ejemplo. Si recuerdas, acabábamos de añadir un SKLabelNode al GameScene. Si realiza la prueba ahora, verá solo la mitad del texto en la parte inferior izquierda de la pantalla.
¿Por qué solo se muestra la mitad del texto? Ahora sería un buen momento para hablar sobre el sistema de coordenadas y posicionamiento de SpriteKit.
Por defecto, el sistema de coordenadas de SpriteKit coloca (0,0) en la parte inferior izquierda de la pantalla. También de forma predeterminada, SpriteKit coloca los nodos para que se posicionen en (0,0). Sin embargo, sin embargo ... ¿por qué solo estamos viendo la mitad del texto? Esto se debe a que, de forma predeterminada, la etiqueta de texto está centrada horizontalmente en el origen del nodo de etiqueta, que es (0,0). A continuación se muestra una imagen que muestra cómo funciona el sistema de coordenadas de un nodo..
Los orígenes de Node están en0,0), y una coordenada x positiva se mueve hacia la derecha y una coordenada y positiva sube la pantalla. Recuerda que un SKScene es un nodo, y por lo tanto su origen es también (0,0).
Ahora que hemos aprendido el sistema de coordenadas de SpriteKit y cómo coloca los nodos, podemos mover el SKLabelNode a una posición diferente para que podamos ver todo el texto. Agregue lo siguiente a la didMove (to :) método dentro de GameScene.swift.
anular func didMove (para ver: SKView) let startGameLabel = SKLabelNode (texto: "Start Game") startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2) addChild (startGameLabel)
Aquí colocamos la etiqueta en el centro de la escena. los posición la propiedad es de tipo CGPoint, que tiene valores de x e y que representan un solo punto dentro de la escena.
Si realiza la prueba ahora, debería ver que la etiqueta se ha colocado en el centro de la escena..
En su estado actual, NuevoScene Es solo una escena en blanco. También le agreguemos una etiqueta y luego aprenderemos cómo cambiar entre escenas. Aquí hay un desafío: antes de seguir leyendo, intente agregar una etiqueta a NuevoScene que dice, "Regresa". Mi solución está abajo.
Lo primero que tenemos que hacer es agregar el didMove (to :) método. Agregue lo siguiente a NuevoScene.swift.
clase NewScene: SKScene función de reemplazo didMove (para ver: SKView)
A continuación, tenemos que añadir la etiqueta. Agregue lo siguiente dentro de didMove (to :) método que agregaste arriba.
anular func didMove (para ver: SKView) let goBackLabel = SKLabelNode (texto: "Go Back") goBackLabel.position = CGPoint (x: size.width / 2, y: size.height / 2) addChild (goBackLabel)
Esto agrega una etiqueta a NuevoScene con el texto "Regresa"A continuación, implementaremos la funcionalidad que sugiere esta etiqueta: responderemos a los eventos táctiles cambiando las escenas.
Casi todos los juegos móviles se interactuarán con el uso del toque. En este paso, aprenderá cómo responder a eventos táctiles dentro de su juego..
Para registrar manejadores de eventos táctiles dentro de su juego, debe implementar las vistas TocaBegan (_: con :) método. Agregue lo siguiente a GameScene.swift:
anular los toques de función Comenzar (_ toques: establecer, con evento: UIEvent?) print ("YOU TOUCHED")
Si quieres probar esto ahora, verás Te tocó Impreso en la consola cuando tocas la pantalla. Sin embargo, lo que normalmente necesitamos es poder saber cuándo se ha tocado un nodo específico. Para hacer esto, necesitamos alguna forma de encontrar e identificar los nodos. Aprenderemos cómo lograr esto, y luego regresaremos y terminaremos TocaBegan (_: con :) método.
Para poder identificar un nodo, utiliza el nodo nombre propiedad y la búsqueda en el árbol de nodos para un nodo con ese nombre. El nodo de nombre La propiedad toma una cadena alfanumérica sin ninguna puntuación..
Hay un par de métodos para buscar un nodo por su nombre propiedad. Si ya tiene una referencia al nodo, simplemente puede verificar su nombre propiedad directamente, que es lo que haremos en el TocaBegan (_: con :) método. Sin embargo, es importante saber cómo buscar el árbol de nodos para un nodo en particular por nombre, o buscar un grupo de nodos con el mismo nombre.
los childNode (withName :) El método busca en los hijos de un nodo el nombre específico que se pasa como parámetro.
los enumerateChildNodes (withName: using :) El método busca a los hijos de un nodo y llama al bloque una vez para cada nodo coincidente que encuentre. Utiliza este método cuando quiere encontrar todos los nodos que comparten el mismo nombre.
los subíndice(_:) método devuelve una matriz de nodos que coinciden con el parámetro de nombre.
También puede buscar nodos utilizando una sintaxis de búsqueda avanzada que le permite buscar en todo el árbol de escenas, o buscar un patrón en lugar de un nombre exacto, por ejemplo. Esta capacidad de búsqueda avanzada está fuera del alcance de este tutorial. Sin embargo, si desea obtener más información, puede leer en el SKNode referencia de programación.
Ahora que sabemos cómo buscar nodos dentro del árbol de nodos, pongamos un nombre a nuestras etiquetas.
Agregue lo siguiente dentro de didMove (to :) método dentro de GameScene.swift.
anular func didMove (para ver: SKView) let startGameLabel = SKLabelNode (texto: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel)
Aquí, nos ponemos startGameLabella propiedad del nombre a empezar juego.
También necesitamos establecer el nombre de la etiqueta dentro de NuevoScene. Agregue lo siguiente con el didMove (to :) método dentro de NuevoScene.swift.
anular func didMove (para ver: SKView) let goBackLabel = SKLabelNode (texto: "Go Back") goBackLabel.name = "goback" goBackLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (goBackLabel)
Establecemos el nombre propiedad a regresa.
Agregue lo siguiente dentro de TocaBegan (_: con :) método dentro de GameScene.swift.
anular los toques de función Comenzar (_ toques: establecer, con evento: ¿UIEvent?) guard let touch = touches.first else return let touchLocation = touch.location (in: self) let TouchNode = self.atPoint (touchLocation) if (UCHateNode.name == "startgame") dejar que newScene = NewScene (tamaño: tamaño) newScene.scaleMode = scaleMode dejar que doorsCerrar = SKTransition.doorsCloseVertical (withDuration: 2.0) ver? .presentScene (newScene, transición: doorsClose)
los multiTouchEnabled propiedad de la vista de la escena se establece en falso de forma predeterminada, lo que significa que la vista solo recibe el primer toque de una secuencia multitáctil. Con esta propiedad desactivada, puede recuperar el toque usando el primero propiedad calculada del conjunto de toques, ya que solo hay un objeto en el conjunto.
Podemos obtener el localización táctil dentro de la escena del ubicación Propiedad del tacto. Entonces podemos averiguar qué nodo fue tocado invocando en el punto(_:) y pasando en el localización táctil.
Verificamos si el Nodo tocadola propiedad del nombre es igual a "empezar juego", y si es así, sabemos que el usuario ha tocado la etiqueta. Entonces creamos una instancia de NuevoScene y establecer su modo de escena La propiedad debe ser la misma que la escena actual; esto garantiza que la escena actúe de la misma manera en diferentes dispositivos. Finalmente, creamos un SKTransition e invocar el presenteScene (_: transición :) Método, que presentará la escena junto con la transición..
los SKTransition La clase tiene muchos métodos de clase que puedes invocar para mostrar diferentes transiciones entre escenas en lugar de mostrar la escena inmediatamente. Esto proporciona un poco de "golosinas" para el usuario final, y hace que mostrar una nueva escena parezca menos abrupto. Para ver todos los tipos de transición disponibles, echa un vistazo a la SKTransition clase en la guía de referencia.
No voy a implementar el TocaBegan (_: con :) método en NuevoScene. ¿Por qué no intentas hacer eso por tu cuenta y tienes la transición de la etiqueta a la GameScene utilizando un tipo de transición diferente? El código se asemejará mucho a lo que tenemos arriba, solo recuerda que llamamos el SKLabelNode "regresa".
Hemos aprendido un poco sobre los nodos hasta el momento utilizando escenas, y hemos visto cómo usar un nodo de etiqueta como un ejemplo genérico para aprender algunas de las características de los nodos. Hemos estudiado sus sistemas de coordenadas, cómo ubicarlos dentro del árbol de nodos, cómo ubicarlos y cómo responder a eventos táctiles..
Hay muchos otros tipos de nodos disponibles, y los veremos en el siguiente tutorial, comenzando con SKSpriteNode!
Para obtener más información sobre cómo comenzar con SpriteKit, también deberías consultar la publicación de Davis Allie aquí en Envato Tuts+.
Además, echa un vistazo a nuestros cursos de SpriteKit! Esto te llevará a través de todos los pasos para construir tu primer juego SpriteKit para iOS, incluso si nunca has codificado con SpriteKit antes..
