Spanish (Español) translation by Javier Salesi (you can also view the original English article)
En ésta serie, vamos a aprender cómo usar SpriteKit para crear juegos 2D para iOS. En éste artículo, continuaremos nuestra exploración de nodos de SpriteKit, y aprenderemos sobre una clase especial de nodo llamada "sprite"-un SKSpriteNode
.
Para seguir éste tutorial, solo descarga el complementario repositorio en Github. Tiene un directorio llamado ExampleProject Starter. Abre el proyecto en ese directorio en Xcode, ¡y estás listo para iniciar!
Nodos de Sprite
Un SKSpriteNode
es dibujado como un rectángulo con una textura mapeada en él, o como un rectángulo de color sin textura. Crear un SKSpriteNode
con una textura mapeada en él es el más común, pues así es cómo haces que tu juego cobre vida.
Agrega lo siguiente al método didMove(to:)
dentro de GameScene.swift.
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(startGameLabel) let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200)) addChild(redSprite) }
Aquí estamos usando el inicializador de conveniencia init(color:size:)
que dibujará un sprite rectangular con el color y tamaño que pasas como parámetros. Si pruebas el proyecto ahora, verás que se muestra la mitad del cuadrado rojo.

Podrías estarte preguntando por qué únicamente la mitad del sprite se muestra debido a que ya determinamos que los orígenes de SKNode
estén en (0,0). Éste porque el marco de SKSpriteNode
y por lo tanto su textura está centrada en su posición. Para cambiar éste comportamiento puedes cambiar la propiedad anchorPoint
del sprite, que determina el punto en el que es colocado el marco. El diagrama de abajo muestra cómo funciona el anchorPoint
.

El anchorPoint
es especificado en el sistema de coordenadas de la unidad, el cual coloca (0,0) en la esquina inferior izquierda y (1,1), en la esquina superior derecha del marco. El predetermnado para SKSpriteNode
es (0.5,0.5).
Continúa y cambia la propiedad anchorPoint
a (0,0) y nota la diferencia que realiza.
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(startGameLabel) let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 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 movámoslo a la parte superior central de la escena al cambiar la propiedad de su posición. Reemplaza tu función didMove(to:)
con lo siguiente:
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(startGameLabel) let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200)) redSprite.anchorPoint = CGPoint(x: 0, y:0) redSprite.position = CGPoint(x: size.width/2 - 100, y: size.height - 210) addChild(redSprite) }
Nota cómo tuvimos que restar de los valores x
y y
al centro del sprite. Si hubiéramos dejado el anchorPoint
como su predeterminado entonces ya habría estado centrado en el eje x
. Es importante recordar que cuando cambias el punto de ancla, podrías tener que hacer algunos ajustes en tu posicionamiento.

Sprites Texturizados
Ese cuadro rojo es bueno para practicar el posicionamiento, pero generalmente querrás texturizar tu sprite con una ilustración para tu juego.
Creemos un SKSpriteNode
texturizado. Agrega el siguiente código en la parte inferior del método didmove(to:)
.
override func didMove(to view: SKView) { ... let player = SKSpriteNode(imageNamed: "player") player.position = CGPoint(x: size.width/2 , y: 300) addChild(player) }
Aquí usamos el inicializador de conveniencia init(imageNamed:)
, que toma como un parámetro el nombre de una imagen sin la extensión. Ésta es la manera más fácil de crear un sprite texturizado pues crea la textura por tí de la imagen que pasas.
La otra manera de crear un SKSpriteNode
texturizado es crear un SKTexture
de antemano, y usar uno de los inicializadores que toman una textura como parámetro.

Creemos un par más de SKSpriteNode
y cambia algunas de sus propiedades. De nuevo, agrega éstos a la parte inferior de tu función didMove(to:)
.
override func didMove(to view: SKView) { ... let enemy1 = SKSpriteNode(imageNamed: "enemy1") enemy1.position = CGPoint(x: 100 , y: 300) enemy1.xScale = 2 addChild(enemy1) let 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
, enemy1
y enemy2
. Establecemos el xSale
de enemy1
en 2 y cambiamos el zRotation
de enemy2
para rotarlo 90 grados. (La propiedad zRotation
toma valores en radianes, y un valor positivo indica una rotación en sentido contrario a las manecillas del reloj.)
Hemos experimentado cambiar unas cuantas propiedades en un sprite. Veamos la documentación de SKNodes y SKSpriteNodes y trata de cambiar unas cuantas de las otras propiedades para ver los efectos que tienen.

Los nodos Sprite son buenos para rectángulos básicos y texturas, pero a veces una forma más compleja será necesaria. El SKShapeNode
te tiene cubierto en esos casos. A continuación veremos los nodos de forma.
Nodos de Forma
Otro útil nodo es el SKShapeNode
. Éste nodo renderiza una forma definida por un trazado Core Graphics. SKSnode
s son útiles para contenido que no puede ser fácilmente realizado con un SKSpriteNode
. Ésta clase es más intensa en cuestión de memoria y tiene un desempeño más bajo que usar un SKSpriteNode
, así que deberías intentar usarlo ocasionalmente.
Para asignar una forma a SKShapeNode
, puedes establecer un CGPath
a la propiedad path
del nodo. Sin embargo, hay unos cuantos incializadores que ofrecen formas predefinidas como rectángulos, círculos, y elipses. Creemos un círculo usando el inicializador de conveniencia init(circleOfRadius:)
.
Luego, agrega lo siguiente a la parte inferior del método didMove(to:)
.
override func didMove(to view: 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(circle) }
Cambiamos unas cuantas propiedades en el nodo de forma, colocándolo, y agregándolo en la escena. Es muy fácil usar los inicializadores de forma predefinidos. Sin embargo, crear un complejo CGPath
manualmente toma una considerable cantidad de tiempo y no es para personas de pulso débil puesto que generalmente involucra algo de matemáticas complejas.
Por fortuna, hay una herramienta que te permite dibujar formas visualmente y exportar su CGPath
como código Swift. Consulta PaintCode si quieres aprender más.

Nodos de Sprite y Nodos de Forma cubrirán en la mayoría de los casos, pero a veces podrías querer mostrar video en tus aplicaciones. El SKVideoNode
, que veremos en seguida, te tiene cubierto.
Nodos de Video
El último nodo que veremos es el SKVideoNode
. Como el nombre lo indica, éste nodo te permite reproducir video dentro de tus juegos.
Hay unas cuantas maneras de crear un SKVideoNode
. Uno usa una instancia de un AVPlayer
, otro solo utiliza el nombre de un archivo de video que es almacenado en el paquete de la aplicación, y la tercer manera es usar una URL
.
Una cosa a tener presente es que la propiedad size
del video inicialmente será el mismo que el tamaño del video objetivo. Aunque puedes cambiar ésta propiedad size
, y el video será estirado al nuevo tamaño.
Otra cosa de la que debes estar consciente es que el SKVideoNode
ofrece únicamente los métodos play()
y pause()
. Si querías más control sobre tus videos, inicializarías un SKVideoNode
con un existente AVPlayer
y usa ese para controlar tus videos.
Usemos el método más simple para crear un SKVideoNode
. Agrega lo siguiente a la parte inferior del método didMove(to:)
.
override func didMove(to view: SKView) { ... let video = SKVideoNode(fileNamed: "video.mov") video.position = CGPoint(x: size.width/2,y: 600) addChild(video) video.play() }
Aquí usamos el incializador init(fileNamed:)
para crear un video. Tu pasas el nombre del video junto con la extensión. No he incluído un video junto con el código fuente de proyecto, pero si quieres ver éste trabajo, puedes agregar un video llamado "video.mov" a tu proyecto.
Conclusión
Ésto completa nuestro estudio en nodos. Después de leer éste artículo y el anterior, deberías tener una buena comprensión de SKNode
s y sus subclases. En la próxima parte de ésta serie, veremos SKActions
y el uso de físicas dentro de nuestros juegos. Gracias por leer, y ¡nos vemos ahí!
Mientras tanto, consulta algunos de nuestros otros magníficos cursos y tutoriales sobre la creación de aplicaciones iOS con Swift y SpriteKit.
- SpriteKitCrea Invasores del Espacio con Swift y Sprite Kit: Presentando Sprite KitJames Tyner
- iOS SDKCrea un Juego Blackjack en Swift 3 y SpriteKitJames Tyner
- iOSSpriteKit Desde Cero: FundamentosDavis Allie
También, ¡consulta nuestros cursos de SpriteKit! Éstos te guiarán por los pasos para crear tu primer juego SpriteKit en iOS, aún si nunca has programado antes con SpriteKit.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post