Share
SpriteKit, disponible en iOS, tvOS y OS X, es un marco que permite a los desarrolladores crear juegos 2D de alta calidad sin preocuparse por las complejidades de las API de gráficos, como OpenGL y Metal. Además de manejar todos los gráficos para desarrolladores, SpriteKit también ofrece una amplia gama de funciones adicionales, que incluyen simulación física, reproducción de audio / video y juegos de guardar / cargar.
A lo largo de esta serie, aprendes todo sobre SpriteKit y adquieres habilidades, que luego puedes aplicar a cualquier tipo de juego 2D que se esté construyendo con este excelente marco. En esta serie, creamos un juego totalmente funcional en el que el jugador controla un automóvil que debe evitar los obstáculos que se cruzan en su camino..
Esta serie requiere que esté ejecutando Xcode 7.3 o superior, que incluye soporte para Swift 2.2, así como los SDK para iOS 9.3, tvOS 9.2 y OS X 10.11.5. También necesita descargar el proyecto de inicio de GitHub, que contiene los recursos visuales que se utilizarán en el juego y algunas líneas de código para ayudarnos a comenzar..
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.
La primera clase que debe tener en cuenta al trabajar con SpriteKit es la SKScene clase. Para cualquier juego 2D construido con SpriteKit, divides el contenido del juego en múltiples escenas, cada una con su propio SKScene subclase.
Mientras que vamos a ver la funcionalidad y el funcionamiento interno de la SKScene Más adelante en esta serie, lo que debes saber por ahora es que una escena es lo que agregas al contenido del juego y actúa como el nodo raíz. Esto nos lleva a los nodos..
los SKNode clase, que SKScene es una subclase de, se utiliza para representar cualquier tipo de elemento dentro de su escena. Si bien hay muchos tipos diferentes de nodos disponibles en SpriteKit, comúnmente conocidos como sprites, comparten las mismas propiedades clave con el ser más importante:
Accentsconagua
posición (CGPoint)Escala x (CGFloat): representa la escala horizontal de un nodoEscala (CGFloat): Similar a Escala x pero actúa en la dirección vertical en su lugaralfa (CGFloat): representando la transparencia del nodooculto (Bool): valor que determina si el nodo debe ser visible o nozRotación (CGFloat): representa el ángulo, en radianes, que debe girar el nodozPosición (CGFloat): se utiliza para determinar qué nodos se deben mostrar sobre otros nodos en la escenaComo puede ver, las propiedades anteriores le permiten posicionar, rotar y editar con precisión la apariencia básica de cada nodo en una escena.
Así como usted puede agregar subvistas a cualquier Vista objeto en UIKit, en SpriteKit puede agregar cualquier número de niño nodos a un nodo existente. Esto se hace usando el addChild (_ :) método en cualquier SKNode objeto.
También similar a Vista Los objetos, las propiedades de posición y escala de cualquier nodo secundario están relacionados con el nodo principal al que se agrega. Así es como un SKScene objeto, siendo una subclase de SKNode, Puede actuar como el nodo raíz de tu escena. Para los nodos que desee en su escena, debe agregarlos como elementos secundarios de la escena misma usando el addChild (_ :) método.
los SKNode La clase por sí sola no es capaz de producir ningún contenido visual. Para hacerlo, debes usar una de las muchas subclases disponibles en SpriteKit. Algunas importantes SKNode Las subclases a tener en cuenta son:
SKSpriteNode: toma una imagen y crea un sprite texturado en tu escenaSKCameraNode: controla desde donde se ve tu escenaSKLabelNode: representa una cadena de textoSKEmitterNode: se utiliza junto con un sistema de partículas para generar efectos de partículasSKLightNode: crea efectos de iluminación y sombras en tu escena.A lo largo de esta serie, utilizamos estos tipos de nodos, así como algunos de los otros menos comunes..
Para mostrar el contenido de SpriteKit dentro de una aplicación que funcione, debe usar el SKView clase. Esta es una subclase de Vista (o NSView en OS X), que puede agregarse fácilmente a cualquier parte de su aplicación. Para presentar una escena SpriteKit, debe llamar a cualquiera presenteScene (_ :) o presenteScene (_: transición :) método en un SKView ejemplo. El segundo método se utiliza cuando desea una animación personalizada o una transición a su nueva escena.
Además de simplemente representar su contenido SpriteKit, el SKView La clase también ofrece alguna funcionalidad extra y muy útil. Esto incluye un Bool propiedad llamada en pausa, que puede utilizarse fácilmente para pausar o reanudar una escena.
También hay varias propiedades que son útiles para depurar tu juego y pueden mostrar información, como el FPS actual (cuadros por segundo), el recuento de nodos y los campos de física dentro de tu escena. Si desea echar un vistazo a todas las propiedades disponibles, consulte la SKView referencia de clase.
Ahora que hemos revisado las clases básicas utilizadas en los juegos SpriteKit, es hora de crear nuestra primera escena. Si bien las escenas se pueden crear completamente mediante programación, Xcode proporciona una excelente herramienta de edición de escenas, que le permite arrastrar y soltar fácilmente los nodos en su escena mientras edita su posición, apariencia y otras propiedades.
Abra el proyecto de inicio y cree un nuevo archivo presionando Comando + N o seleccionando Nuevo> Archivo ... de Xcode's Expediente menú. Elegir la iOS> Recursos> SpriteKit Scene tipo de archivo y haga clic Siguiente.
Nombra el archivo MainScene y guárdalo. Ahora debería ver su nuevo archivo de escena en el Navegador de proyectos.
Seleccionar MainScene.sks para abrir el editor de escenas de Xcode. En este momento, su escena está en blanco y tiene un fondo gris. Aún no hay nodos en ella. Antes de agregar algunos sprites a tu escena, primero necesitamos cambiar su tamaño.
En el Inspector de atributos a la derecha, cambia el tamaño de la escena para que tenga un ancho (W) de 320 puntos y una altura (H) de 480 puntos.
Este tamaño de escena se correlaciona con el tamaño de pantalla más pequeño al que nos dirigimos (pantalla de 3.5 "en iPhone 4s) para que podamos dimensionar correctamente nuestros nodos. Cambiaremos el tamaño de escena para adaptarlo al tamaño de pantalla del dispositivo actual en un tutorial posterior..
Para agregar nodos a su escena, abra el Biblioteca de objetos a la derecha. Es posible que deba hacer clic en el icono resaltado en azul si Biblioteca de objetos no es visible.
Desde el Biblioteca de objetos, arrastrar un Color Sprite a la mitad de tu escena.
Abre el Inspector de atributos a la derecha y cambiar el Textura, Posición, y tamaño atributos a los siguientes valores:
Tu escena ahora debería tener un auto en el medio como se muestra a continuación..
Tenga en cuenta que, a diferencia del sistema de coordenadas UIKit, en SpriteKit, el posición de un nodo siempre se relaciona con su centro desde el punto de origen de la esquina inferior izquierda de la escena (0, 0). Esta es la razón por la cual la posición del auto (160, 120) coloca el centro del auto 160 puntos desde la izquierda y 120 puntos desde la parte inferior.
Con tu escena terminada por ahora, abre ViewController.swift y agregue una declaración de importación para el marco SpriteKit en la parte superior. Esto nos permite utilizar las clases y API de SpriteKit en ViewController.swift.
importar UIKit importar SpriteKit
A continuación, actualice la implementación del viewDidLoad () método de la ViewController clase de la siguiente manera:
anular func viewDidLoad () super.viewDidLoad () deja skView = SKView (marco: self.view.frame) deja scene = SKScene (fileNamed: "MainScene") skView.presentScene (scene) view.addSubview (skView)
Con este código, primero creamos un SKView instancia, que es del mismo tamaño que la vista del controlador de vista. A continuación, cargamos nuestra escena desde el archivo que creamos utilizando el SKScene (fileNamed :) inicializador Hacemos el SKView La instancia presenta esta escena y luego la agrega como una subvista a la vista principal.
Selecciona el iphone 4s simulador (para que nuestra escena tenga el tamaño correcto para la pantalla) y cree y ejecute su aplicación. Debería ver una pantalla similar a la siguiente:
En este primer tutorial de SpriteKit From Scratch, aprendiste los conceptos básicos de vistas, escenas y nodos en SpriteKit. Creaste una escena básica con un sprite usando el editor de escenas integrado en Xcode, lo que hace que crear escenas sea mucho más fácil en comparación con hacerlo todo programáticamente.
En el siguiente tutorial, agregaremos más funcionalidad a nuestro juego mediante el uso de acciones SpriteKit para mover el auto en la escena. También se te presentará la simulación física en SpriteKit al detectar cuándo el auto choca con otro nodo..
Como siempre, deje sus comentarios y opiniones en la sección de comentarios a continuación..
