Construye un juego de aviones con Sprite Kit: Configuración del proyecto

Este tutorial te enseñará cómo usar el framework Sprite Kit para crear un juego simple de aviones. En el camino, aprenderás todos los conceptos básicos de Sprite Kit: animaciones, emisores, detección de colisiones y más.

Formato de la serie

El tutorial del juego de aviones se dividirá en tres partes para cubrir completamente cada sección. Después de leer el tutorial de tres partes, los lectores podrán crear un juego 2D interesante utilizando el nuevo framework Sprite Kit provisto con iOS 7.

• Construye un juego de aviones con Sprite Kit: Configuración del proyecto
• Construye un juego de aviones con Sprite Kit: Enemigos y emisores
• Construye un juego de aviones con Sprite Kit: Explosiones y nubes

Cada parte producirá un resultado práctico y la suma de todas las partes producirá el juego final. Si bien cada parte de la serie se puede leer de forma independiente, recomendamos seguir la serie paso a paso para una comprensión completa del tema presentado. El código fuente del juego se proporciona de forma incremental con cada publicación.

Vista previa del final

Agradecimientos y recomendaciones

Antes de comenzar con el tutorial, nos gustaría agradecer a Daniel Ferenčak por proporcionarnos el arte del juego utilizado para producir esta serie de tutoriales.

Para apreciar completamente la serie de tutoriales, te recomendamos que pruebes nuestro código implementándolo en un dispositivo real con iOS 7. Necesitarás Xcode 5 y el último SDK de iOS 7. Si aún no tienes estas herramientas, puedes descargarlas desde el Centro de desarrolladores de Apple. Una vez descargado, instala el software y estarás listo para comenzar.

1. Configuración del proyecto

Damas y caballeros, ¡enciendan sus motores y ejecuten Xcode 5!

Una vez que se abra Xcode, ve a Menú de archivo > Nuevo > Proyecto y verás algo como la siguiente imagen:

Como habrás adivinado, debes elegir la plantilla "Sprite Kit Game" (de la lista lateral de iOS). Esta plantilla crea lo que necesitas para iniciar el proyecto y, al mismo tiempo, incluye las bibliotecas necesarias para ejecutar el motor Sprite Kit. Dale al proyecto el nombre que quieras, pero asegúrate de seleccionar "iPad" como dispositivo de destino.

El proyecto se crea con 3 clases (AppDelegate, ViewController y MyScene). Hoy, trabajarás con MyScene.

Si compilas y ejecutas el proyecto, verás el mensaje "¡Hola, mundo!" en la interfaz. Cada vez que haces clic en la pantalla, se presenta una nueva nave espacial con una propiedad de rotación:

Todos los objetos visuales son renderizados por la clase SKView. También se necesita un SKView para presentar las escenas futuras. La plantilla Sprite Kit hace este trabajo por ti. Echa un vistazo al archivo ViewController.m y observa cómo el método viewDidLoad configura la vista y llama a la escena predeterminada.

2. Creación del tablero del juego

En este paso, inicializaremos el tablero del juego. El tablero del juego incluye el fondo, el avión, las animaciones de la hélice y una sombra del avión.

Antes de agregar un objeto, es necesario que ese objeto utilice la ilustración. Debes colocar estos sprites en la carpeta "Archivos de soporte" (o Supporting Files) de tu proyecto.

Una vez que hayas descargado los recursos para esta publicación, encontrarás 7 imágenes. Cópialas en la carpeta Archivos de soporte (o Supporting Files) de tu proyecto y asegúrate de que la opción "Copiar elementos en la carpeta del grupo de destino (si es necesario)" esté marcada.

Ahora que tienes tus imágenes, puedes colocarlas en la pantalla. Sprite Kit es similar a Cocos2D en que también usa una orientación de coordenadas que comienza desde la esquina inferior izquierda de la pantalla (0,0), y los valores "x" y "y" aumentan a medida que te mueves hacia arriba y hacia la derecha. Este juego se configurará para ejecutarse en orientación vertical, por lo que no nos centraremos en la orientación horizontal en este momento. Configura esto de una vez yendo al panel de configuración de tu proyecto, seleccionando la pestaña "General" y desmarcando todas las opciones debajo de "Información de implementación" excepto "Retrato".

Ahora, querrás colocar el avión cerca de la parte inferior y en el medio del eje x.

En MyScene.h, agrega el siguiente código:

1

@interface MyScene : SKScene{

2

    CGRect screenRect;

3

    CGFloat screenHeight;

4

    CGFloat screenWidth;

5

}

6

7

@property SKSpriteNode *plane;

Esto simplemente declara las variables que usaremos en la implementación.

En el archivo MyScene.m, puedes eliminar todo lo que está dentro del condicional if (self = [super initWithSize:size]), así como todo lo que está dentro del método de evento -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event. Esto eliminará el código repetitivo incluido con el proyecto.

La creación del sprite se puede lograr usando el siguiente fragmento de código:

1

        //init several sizes used in all scene

2

        screenRect = [[UIScreen mainScreen] bounds];

3

        screenHeight = screenRect.size.height;

4

        screenWidth = screenRect.size.width;

5

6

        //adding the airplane

7

        _plane = [SKSpriteNode spriteNodeWithImageNamed:@"PLANE 8 N.png"];

8

        _plane.scale = 0.6;

9

        _plane.zPosition = 2;

10

        _plane.position = CGPointMake(screenWidth/2, 15+_plane.size.height/2);

11

        [self addChild:_plane];

12

13

        //adding the background

14

        SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:@"airPlanesBackground"];

15

        background.position = CGPointMake(CGRectGetMidX(self.frame),CGRectGetMidY(self.frame));

16

        [self addChild:background];

Ahora puedes compilar y ejecutar la aplicación. Tu fondo y el avión deberían verse bien, similar a la siguiente figura. El código proporcionado comienza con la inicialización de los valores de la pantalla para realizar varios cálculos en esta clase (los usarás varias veces). Al igual que Cocos2D, Sprite Kit viene con propiedades como "scale", "zPosition" y "position", que son realmente útiles. Finalmente, para agregar el objeto a nuestra escena, solo necesitamos usar el método addChild. El tercer bloque de código agregará el fondo al centro de la pantalla.

3. Agregando animaciones a los aviones

Si miraste los recursos, verás dos hélices (es decir, izquierda y derecha) y una sombra del avión. La ubicación de la sombra del avión debería ser fácil para ti en este momento. Para lograr la mejor animación, esto debe comenzar 15 puntos a la derecha (eje x) y 15 puntos debajo (eje y) del avión.

Ahora, vamos a continuar y agregaremos el código para crear una sombra:

En MyScene.h, agrega lo siguiente:

1

@property SKSpriteNode *planeShadow;

Y en Scene.m, agrega lo siguiente justo después de [self addChild:_plane];:

1

    _planeShadow = [SKSpriteNode spriteNodeWithImageNamed:@"PLANE 8 SHADOW.png"];

2

    _planeShadow.scale = 0.6;

3

    _planeShadow.zPosition = 1;

4

    _planeShadow.position = CGPointMake(screenWidth/2+15, 0+_planeShadow.size.height/2);

5

    [self addChild:_planeShadow];

Eso fue fácil, ¿verdad? Solo estamos agregando un objeto de sombra a la escena y colocándolo en relación con el plano.

Ahora, pasemos a la animación de la hélice. Para hacer la animación, tenemos dos sprites (PLANE PROPELLER 1 y PLANE PROPELLER 2). La SKAction te permitirá crear diferentes animaciones y realizar varios tipos de acciones con ellas. En este tutorial, debes cambiar entre solo dos imágenes. Para que esto suceda, necesitará dos métodos: animateWithTextures:timePerFrame y repeatActionForever. Como puedes ver, los nombres de los métodos se explican por sí mismos. El primer método recibirá las texturas (PLANE PROPELLER 1 y 2) y cambiará las texturas durante el tiempo definido (timePerFrame). El segundo método repetirá esta acción para siempre.

Para lograr esto, comienza agregando lo siguiente a tu archivo de encabezado (header):

1

@property SKSpriteNode *propeller;

Y de vuelta en el archivo de implementación:

1

        _propeller = [SKSpriteNode spriteNodeWithImageNamed:@"PLANE PROPELLER 1.png"];

2

        _propeller.scale = 0.2;

3

        _propeller.position = CGPointMake(screenWidth/2, _plane.size.height+10);

4

5

        SKTexture *propeller1 = [SKTexture textureWithImageNamed:@"PLANE PROPELLER 1.png"];

6

        SKTexture *propeller2 = [SKTexture textureWithImageNamed:@"PLANE PROPELLER 2.png"];

7

8

        SKAction *spin = [SKAction animateWithTextures:@[propeller1,propeller2] timePerFrame:0.1];

9

        SKAction *spinForever = [SKAction repeatActionForever:spin];

10

        [_propeller runAction:spinForever];

11

12

        [self addChild:_propeller];

Compila y ejecuta tu código. Ahora es un buen momento para invertir varios minutos en la exploración del código para aprender la estructura básica del proyecto. Simplemente echa un vistazo y familiarízate con la organización básica.

Desafortunadamente, en este momento el avión todavía está estático. Para crear el movimiento, utilizarás los datos del acelerómetro interno y el avión reaccionará al movimiento físico del iPad. Ten en cuenta que no explicaremos en profundidad cómo funciona el acelerómetro, ya que este tutorial no se centra en ese tema. Sin embargo, si deseas obtener más información sobre el acelerómetro específicamente, puedes consultar la documentación oficial de Apple.

En MyScene.h es necesario realizar algunos cambios. Debes agregar UIAcelerometerDelegate, dos variables dobles para ambos valores de eje (es decir, AccelX y AccelY) y una propiedad para administrar CoreMotion.

Tu archivo final MyScene.h debe parecerse al siguiente fragmento:

1

#import <SpriteKit/SpriteKit.h>

2

#import <CoreMotion/CoreMotion.h>

3

4

@interface MyScene : SKScene<UIAccelerometerDelegate>{

5

    CGRect screenRect;

6

    CGFloat screenHeight;

7

    CGFloat screenWidth;

8

    double currentMaxAccelX;

9

    double currentMaxAccelY;

10

}

11

12

@property (strong, nonatomic) CMMotionManager *motionManager;

13

@property SKSpriteNode *plane;

14

@property SKSpriteNode *planeShadow;

15

@property SKSpriteNode *propeller;

16

17

@end

Entonces, para obtener los datos del acelerómetro, debes agregar un código al final del método -(id)initWithSize:(CGSize)size. Mientras aún estás dentro del condicional if (self = [super initWithSize:size]), agrega el siguiente código donde lo dejaste antes:

1

//CoreMotion

2

self.motionManager = [[CMMotionManager alloc] init];

3

self.motionManager.accelerometerUpdateInterval = .2;

4

5

[self.motionManager startAccelerometerUpdatesToQueue:[NSOperationQueue currentQueue]

6

                                         withHandler:^(CMAccelerometerData  *accelerometerData, NSError *error) {

7

                                         [self outputAccelertionData:accelerometerData.acceleration];

8

                                         if(error)

9

                                         {

10

                                             NSLog(@"%@", error);

11

                                         }

12

}];

Ahora agrega el siguiente método al archivo de implementación:

1

-(void)outputAccelertionData:(CMAcceleration)acceleration

2

{

3

    currentMaxAccelX = 0;

4

    currentMaxAccelY = 0;

5

6

    if(fabs(acceleration.x) > fabs(currentMaxAccelX))

7

    {

8

        currentMaxAccelX = acceleration.x;

9

    }

10

    if(fabs(acceleration.y) > fabs(currentMaxAccelY))

11

    {

12

        currentMaxAccelY = acceleration.y;

13

    }

14

}

Ahora que tienes los valores del acelerómetro del iPad, los utilizaremos en el siguiente paso moviendo el avión.

4. Moviendo el avión

Con los valores del acelerómetro establecidos, debes aplicarlos para mover el avión. Sprite Kit usa un método -(void)update:(NSTimeInterval)currentTime para actualizar todo en tu juego. Entonces, para mover el avión solo necesitas actualizar la posición de todos los sprites (avión, sombra y hélices). Reemplaza o agrega el método de actualización con el siguiente código:

1

-(void)update:(NSTimeInterval)currentTime{

2

    //NSLog(@"one second");

3

4

5

    float maxY = screenWidth - _plane.size.width/2;

6

    float minY = _plane.size.width/2;

7

8

9

    float maxX = screenHeight - _plane.size.height/2;

10

    float minX = _plane.size.height/2;

11

12

    float newY = 0;

13

    float newX = 0;

14

15

    if(currentMaxAccelX > 0.05){

16

        newX = currentMaxAccelX * 10;

17

        _plane.texture = [SKTexture textureWithImageNamed:@"PLANE 8 R.png"];

18

    }

19

    else if(currentMaxAccelX < -0.05){

20

        newX = currentMaxAccelX*10;

21

        _plane.texture = [SKTexture textureWithImageNamed:@"PLANE 8 L.png"];

22

    }

23

    else{

24

        newX = currentMaxAccelX*10;

25

        _plane.texture = [SKTexture textureWithImageNamed:@"PLANE 8 N.png"];

26

    }

27

28

    newY = 6.0 + currentMaxAccelY *10;

29

30

    float newXshadow = newX+_planeShadow.position.x;

31

    float newYshadow = newY+_planeShadow.position.y;

32

33

    newXshadow = MIN(MAX(newXshadow,minY+15),maxY+15);

34

    newYshadow = MIN(MAX(newYshadow,minX-15),maxX-15);

35

36

    float newXpropeller = newX+_propeller.position.x;

37

    float newYpropeller = newY+_propeller.position.y;

38

39

    newXpropeller = MIN(MAX(newXpropeller,minY),maxY);

40

    newYpropeller = MIN(MAX(newYpropeller,minX+(_plane.size.height/2)-5),maxX+(_plane.size.height/2)-5);

41

42

    newX = MIN(MAX(newX+_plane.position.x,minY),maxY);

43

    newY = MIN(MAX(newY+_plane.position.y,minX),maxX);

44

45

46

    _plane.position = CGPointMake(newX, newY);

47

    _planeShadow.position = CGPointMake(newXshadow, newYshadow);

48

    _propeller.position = CGPointMake(newXpropeller, newYpropeller);

49

}

Están sucediendo dos cosas importantes en el método de actualización: actualizas la posición e intercambias el objeto mostrado.

Si el iPad gira a la izquierda, el sprite del avión se cambiará por "PLANE 8 L.png". Alternativamente, si el iPad gira a la derecha, el sprite del avión se cambiará por el "PLANE 8 R.png".

Finalmente, continúa y prueba el código del movimiento. Deberías ver algo similar a la siguiente imagen:

Conclusión

¡Ese es el final del primer tutorial! En este punto, debes comprender cómo realizar las siguientes tareas:

• Iniciar un proyecto de Sprite Kit
• Agrega un objeto a la escena
• Implementar animaciones simples
• Recibir datos del acelerómetro
• Actualizar datos de juegos y objetos

Si algo de lo anterior sigue siendo "difuso", echa otro vistazo al código que creamos anteriormente. ¡Espera la próxima entrega de esta serie donde continuaremos construyendo nuestro juego de aviones!