Bases de SpriteKit: Sprites

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.

Diagram showing the anchorPoint property within a coordinate system

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. SKSnodes 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 SKNodes 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.

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.