Share
En esta serie, estamos aprendiendo a usar SpriteKit para construir juegos 2D para iOS. En esta publicación, continuaremos nuestra exploración de los nodos SpriteKit y aprenderemos sobre un tipo especial de nodo llamado "sprite" -an SKSpriteNode.
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!
Un SKSpriteNode se dibuja como un rectángulo con una textura asignada en él, o como un rectángulo sin textura de color. Creando un SKSpriteNode Con una textura mapeada en ella es la más común, ya que así es como le das vida a las ilustraciones de tu juego..
Agregue lo siguiente a la didMove (to :) método dentro de GameScene.swift.
anular func didMove (ver: SKView) let startGameLabel = SKLabelNode (texto: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) deja que redSprite = SKSpriteNode (color: .red, tamaño: CGSize (ancho: 200, alto: 200)) addChild (redSprite)
Aquí estamos utilizando el intiailizador de conveniencia. init (color: tamaño :) que dibujará un sprite rectangular con el color y el tamaño que pasas como parámetros. Si prueba el proyecto ahora, verá la mitad del cuadrado rojo que muestra.
Quizás se esté preguntando por qué solo se muestra la mitad del sprite ya que ya determinamos que SKNodeLos orígenes de0,0). Esto porque el SKSpriteNodeEl marco y, por tanto, su textura se centra en su posición. Para cambiar este comportamiento, puedes cambiar el sprite punto de anclaje propiedad, que determina el punto en el que se coloca el marco. El siguiente diagrama muestra cómo punto de anclaje trabajos.
los punto de anclaje se especifica en el sistema de coordenadas de la unidad, que coloca (0,0) en la parte inferior izquierda y (1,1) en la esquina superior derecha del marco. El valor predeterminado para SKSpriteNodes es0.5,0.5).
Sigue adelante y cambia el punto de anclaje propiedad a0,0) y note la diferencia que hace.
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) permite que redSprite = SKSpriteNode (color: .red, tamaño: CGSize (ancho: 200, alto: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) addChild (redSprite)
Ahora, si pruebas, verás que el sprite está alineado perfectamente con la parte inferior izquierda de la escena..
Ahora vamos a moverlo a la parte superior central de la escena cambiando su propiedad de posición. Reemplace su didMove (to :) Funciona con lo siguiente:
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) permite que redSprite = SKSpriteNode (color: .red, tamaño: CGSize (ancho: 200, alto: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) redSprite.position = CGPoint (x: size.width / 2 - 100, y: size.height - 210) addChild (redSprite)
Observe cómo tuvimos que restar de ambos X y y Valores para centrar el sprite. Si hubiéramos dejado el punto de anclaje en su defecto entonces ya habría sido centrado en el X eje. Es importante recordar que cuando cambia el punto de anclaje, es posible que deba hacer algunos ajustes en su posición..
Ese cuadro rojo es bueno para la práctica con el posicionamiento, pero normalmente querrás texturizar tu sprite con ilustraciones para tu juego.
Vamos a crear una textura. SKSpriteNode. Agregue el siguiente código en la parte inferior de la didMove (to :) método.
anular func didMove (para ver: SKView) … dejar player = SKSpriteNode (imageNamed: "player") player.position = CGPoint (x: size.width / 2, y: 300) addChild (player)
Aquí utilizamos el inicializador de conveniencia. init (imageNamed :), que toma como parámetro el nombre de una imagen sin la extensión. Esta es la forma más fácil de crear un sprite texturado, ya que crea la textura para usted desde la imagen que pasa..
La otra forma de crear una textura. SKSpriteNode es crear un SKTexture de antemano, y use uno de los intializadores que toman una textura como parámetro.
Vamos a crear un par más SKSpriteNodeS y cambiar algunas de sus propiedades. Una vez más, agregue estos al fondo de su didMove (to :) función.
anular func didMove (para ver: SKView) ... let enemy1 = SKSpriteNode (imageNamed: "enemy1") enemy1.position = CGPoint (x: 100, y: 300) enemy1.xScale = 2 addChild (enemy1) dejar enemy2 = SKSpriteNode ( imageNamed: "enemy2") enemy2.position = CGPoint (x: size.width - 100, y: 300) enemy2.zRotation = 3.14 * 90/180 addChild (enemy2)
Aquí creamos dos SKSpriteNodes, enemigo1 y enemigo2. Establecemos el Escala x en enemigo1 a 2 y cambiar el zRotación en enemigo2 girarlo por 90 grados (Los zRotación la propiedad toma sus valores en radianes, y un valor positivo indica una rotación en sentido contrario a las agujas del reloj.)
Hemos experimentado con el cambio de algunas propiedades en un sprite. Eche un vistazo a la documentación de SKNodes y SKSpriteNodes e intente cambiar algunas de las otras propiedades para ver los efectos que tienen..
Los nodos Sprite son buenos para los rectángulos y texturas básicos, pero a veces se necesitará una forma más compleja. los SKShapeNode te tiene cubierto en esos casos. Vamos a echar un vistazo a los nodos de forma siguiente.
Otro nodo útil es el SKShapeNode. Este nodo representa una forma definida por una ruta de Core Graphics. SKShapeNodes son útiles para contenido que no se puede realizar fácilmente con un SKSpriteNode. Esta clase requiere más memoria y tiene menos rendimiento que el uso de un SKSpriteNode, por lo que debe tratar de usarlo con moderación.
Para asignar una forma a SKShapeNode, puedes establecer un CGPath a los nodos camino propiedad. Sin embargo, hay algunos inicializadores que ofrecen formas predefinidas como rectángulos, círculos y elipses. Vamos a crear un círculo usando el inicializador de conveniencia init (circleOfRadius :).
Luego, agregue lo siguiente a la parte inferior de la didMove (to :) método.
anular func didMove (para ver: SKView) … let circle = SKShapeNode (circleOfRadius: 50) circle.strokeColor = SKColor.green circle.fillColor = SKColor.blue circle.lineWidth = 8 circle.position = CGPoint (x: size.width / 2, y: 400) addChild (círculo)
Cambiamos algunas propiedades en el nodo de forma, lo posicionamos y lo agregamos a la escena. Es muy fácil usar los inicializadores de forma predefinidos. Sin embargo, creando un complejo. CGPath manualmente toma una cantidad de tiempo considerable y no es para los débiles de corazón, ya que generalmente involucra algunas matemáticas complejas.
Afortunadamente, hay una herramienta que te permite dibujar formas visualmente y exportar sus CGPath como el código Swift. Echa un vistazo a PaintCode si quieres aprender más.
Los nodos de Sprite y los nodos de forma cubrirán la mayoría de los casos, pero a veces es posible que desee mostrar el video en sus aplicaciones. los SKVideoNode, Lo que veremos a continuación, te tiene cubierto..
El último nodo que vamos a echar un vistazo es el SKVideoNode. Como su nombre lo indica, este nodo le permite reproducir video dentro de sus juegos.
Hay algunas maneras diferentes de crear un SKVideoNode. Uno usa una instancia de un AVPlayer, otro simplemente usa el nombre de un archivo de video que está almacenado en el paquete de la aplicación, y la tercera forma es usar una URL.
Una cosa a tener en cuenta es que el video es tamaño La propiedad inicialmente será la misma que el tamaño del video objetivo. Puedes cambiar esto tamaño propiedad, sin embargo, y el video se extenderá al nuevo tamaño.
Otra cosa a tener en cuenta es que la SKVideoNode ofrece jugar() y pausa() Sólo métodos. Si quisiera más control sobre sus videos, debería inicializar un SKVideoNode con un existente AVPlayer y usar eso para controlar tus videos.
Usemos el método más simple para crear un SKVideoNode. Agregue lo siguiente en la parte inferior de la didMove (to :) método.
anular func didMove (para ver: SKView) ... let video = SKVideoNode (fileNamed: "video.mov") video.position = CGPoint (x: size.width / 2, y: 600) addChild (video) video.play ( )
Aquí utilizamos el intiailizante. init (fileNamed :) para crear un video Pasas el nombre del video junto con la extensión. No he incluido un video junto con el código fuente del proyecto, pero si desea ver este trabajo, puede agregar un video llamado "video.mov"a tu proyecto.
Esto completa nuestro estudio sobre los nodos. Después de leer este post y el anterior, debe tener un buen entendimiento de SKNodes y sus subclases. En la siguiente parte de esta serie, echaremos un vistazo a SKACCIONES y utilizando la física dentro de nuestros juegos. Gracias por leer, y te veré allí.!
Mientras tanto, echa un vistazo a algunos de nuestros otros excelentes cursos y tutoriales sobre cómo crear aplicaciones de iOS con Swift y SpriteKit.
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..
Accentsconagua