Advertisement
  1. Code
  2. iOS SDK

Conceptos básicos del SpriteKit: Ponlo todo junto

by
Read Time:9 minsLanguages:
This post is part of a series called SpriteKit Basics.
SpriteKit Basics: Actions and Physics

Spanish (Español) translation by Andrea J (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

En este post vamos a construir un juego sencillo desde cero. En el camino, tocaremos algunos de los aspectos más importantes de la librería de SpriteKit.

Esta publicación se basa en lo que hemos aprendido anteriormente en la serie de Conceptos básicos del SpriteKit. Si quieres actualizar tus conocimientos sobre el SpriteKit, echa un vistazo a algunas de mis otras publicaciones.

Nuevo proyecto

Abre Xcode e inicia un nuevo proyecto desde el menú Archivo > Nuevo > Proyecto. Asegúrate de que iOS esté seleccionado y elige la opción Juego como plantilla.

new projectnew projectnew project

Asígnale un nombre a tu proyecto y asegúrate de que la opción Idioma esté establecida en Swift, Tecnología de juego esté establecida en SpriteKit y Dispositivos establecido en iPad.

project optionsproject optionsproject options

Planificación de las escenas del juego

Una de las primeras cosas que me gusta hacer al crear un proyecto es determinar cuántas escenas necesitaré para el proyecto. Normalmente tendré al menos tres escenas: una escena de la introducción, una escena del juego principal, y una escena para mostrar las puntuaciones altas, etc.

Para este ejemplo, solo necesitamos una introducción y una escena de juego principal, ya que no realizaremos un seguimiento de las vidas, puntuaciones, etc. SpriteKit ya viene con una escena cuando creas un nuevo proyecto, así que solo necesitamos una escena de introducción.

En el menú de Xcode, elige Archivo > Nuevo > Archivo. Asegúrate de que la opción de iOS esté seleccionada y elige Cocoa Touch Class.

new cocoa touch classnew cocoa touch classnew cocoa touch class

Asígnale un nombre a la clase StartGameScene y asegúrate de que la opción Subclase de esté establecida en SKScene y Lenguaje esté establecido en Swift.

startgamescene classstartgamescene classstartgamescene class

Configuración de GameViewController

Abre GameViewController.swift. Elimina todo lo que esté en ese archivo y sustitúyelo por lo siguiente.

Cuando creas un nuevo proyecto, el archivo GameViewController.swift está configurado para cargar GameScene.sks desde el disco. GameScene.sks se utiliza junto con el editor de escenas integrado de SpriteKit, que te permite diseñar visualmente tus proyectos. No usaremos GameScene.sks, y en su lugar crearemos todo a partir del código, así que aquí iniciamos una nueva instancia de StartGameScene y la mostramos.

Crear la escena de introducción

Agrega lo siguiente al StartGameScene.swift que acabamos de crear.

Esta escena es bastante simple. En el método didMove agregamos un logotipo y un botón. Luego, en touchesBegan detectamos toques en el nuevo botón del juego y respondemos cargando la escena principal GameScene.

Planificación de las clases de juegos

Lo siguiente que me gusta hacer al crear un nuevo juego es decidir qué clases necesitaré. Puedo decir de inmediato que necesitaré la clase Player y la clase Enemy. Ambas clases extenderán el SKSpriteNode. Creo que para este proyecto vamos a crear el jugador y las balas del enemigo directamente dentro de sus respectivas clases. Si quieres puedes hacer clases separadas de las balas del jugador y de las balas de los enemigos, y te sugiero que lo hagas por tu cuenta.

Por último, están las islas. Estas no tienen ninguna funcionalidad específica sino moverse hacia abajo de la pantalla. En este caso, dado que son solo adornos, creo que también está bien no crear una clase, y solo crearlas en el GameScene principal.

Creación de la clase Player

En el menú de Xcode, elige la opción Archivo > Nuevo > Archivo. Asegúrate de que iOS esté seleccionado y elige Cocoa Touch Class.

new cocoa touch classnew cocoa touch classnew cocoa touch class

Asegúrate de que Clase esté configurado en Jugador, Subclase de: esté configurado en SKSpriteNode y Lenguaje esté configurado en Swift.

player classplayer classplayer class

Ahora agrega lo siguiente a Player.swift.

Dentro del método init(), configuramos physicsBody e invocamos generateBullets(). El método generateBullets llama repetidamente a fireBullet(), que crea una bala, establece su physicsBody y muévelo hacia abajo de la pantalla.

Cuando el jugador pierde una vida, se invoca el método respawn(). Dentro del método respawn, desvanecemos el plano dentro y fuera cinco veces, durante el cual el jugador será invencible. Una vez que el jugador ha agotado todas las vidas, se invoca el método kill(). El método kill simplemente carga el StartGameScene.

Creación de la clase Enemy

Elige la opción Archivo > Nuevo > Archivo en el menú de Xcode. Asegúrate de que iOS esté seleccionado y elige Cocoa Touch Class.

new cocoa touch classnew cocoa touch classnew cocoa touch class

Asegúrate de que Clase esté establecido en Enemy, Subclase de: esté establecido en SKSpriteNode y Lenguaje esté establecido en Swift.

Agrega lo siguiente a Enemy.swift.

Esta clase es bastante similar a la clase Player. Establecemos su physicsBody e invocamos generateBullets(). El move() simplemente mueve al enemigo hacia abajo en la pantalla.

Creación de la escena principal del juego

Elimina todo lo que hay en GameScene.swift y agrega lo siguiente.

Creamos una instancia de Player y una instancia de CMMotionManager. Usamos el acelerómetro para mover al jugador en este juego.

Dentro del método didMove(to:) apagamos la gravedad, configuramos el ContactDelegate, agregamos un loop del borde y establecemos la posición player antes de agregarla a la escena. Luego invocamos setupAccelerometer(), que configura el acelerómetro e invocamos los métodos addEnemies() y generateIslands().

El método addEnemies() llama repetidamente al método generateEnemy(), el cual creará una instancia de Enemy y la agregará a la escena.

El método generateIslands() funciona de forma similar al método addEnemies() en el sentido de que llama repetidamente a createIsland() el cual crea un SKSpriteNode y lo agrega a la escena. Dentro de createIsland(), también creamos un SKAction que mueve la isla por la escena.

Dentro del método didBegin(_:), verificamos qué nodos están haciendo contacto y respondemos eliminando el nodo apropiado de la escena e invocando player.die() si es necesario. El método createExplosion() crea una animación de explosión y la agrega a la escena. Una vez finalizada la explosión, se retira de la escena.

Conclusión

Durante esta serie, aprendimos algunos de los conceptos más importantes utilizados en casi todos los juegos de SpriteKit. Terminamos la serie mostrando lo simple que es poner en marcha un juego básico. Todavía hay algunas mejoras que se podrían hacer, como un HUB, puntuaciones altas, y sonidos (Incluí un par de MP3 que se pueden utilizar para esto en el repositorio). Espero que hayas aprendido algo útil a lo largo de esta serie, ¡y gracias por leer!

Si quieres aprender más sobre la programación de juegos con SpriteKit, ¡echa un vistazo a uno de nuestros cursos de vídeo completos! Aprenderás a crear un juego en SpriteKit de la A a la Z.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.