Share
Este tutorial le enseñará cómo usar el marco de trabajo de Cocos2D para crear juegos 2D simples pero avanzados dirigidos a todos los dispositivos iOS. Está diseñado para usuarios principiantes y avanzados. En el camino, aprenderá acerca de los conceptos básicos de Cocos2D, la interacción táctil, los menús y las transiciones, las acciones, las partículas y las colisiones. Sigue leyendo!
El tutorial de Cocos2D se dividirá en tres partes para cubrir completamente cada sección. Después del tutorial de tres partes, podrás crear un juego 2D interesante con Cocos2D!
Cada parte producirá un resultado práctico, y la suma de todas las partes producirá el juego final. A pesar del hecho de que cada parte se puede leer de forma independiente, para una mejor comprensión y orientación, sugerimos que se siga el tutorial paso a paso. También hemos incluido el código fuente para cada parte por separado, proporcionando una manera de comenzar el tutorial en cualquier punto del tutorial sin tener que leer las partes anteriores.
Antes de comenzar el tutorial, nos gustaría agradecer a Rodrigo Bellão por proporcionarnos las imágenes de los monstruos..
Si es la primera vez que trabaja con Cocos2D, deberá descargar e instalar el SDK de la página web de Cocos2D para iPhone o del repositorio de GitHub. Una vez que lo hayas descargado, deberás instalar las plantillas de proyecto de Xcode. Descomprima el paquete y abra una ventana de terminal en el directorio donde descargó Cocos2D.
Ingrese el siguiente comando.
./install-templates.sh -f -u
Este comando solo funcionará si Xcode está instalado dentro del directorio predeterminado.
Ahora tenemos instalado Cocos2D. Para comenzar nuestro juego, necesitamos lanzar Xcode e ir a Menú Archivo> Nuevo> Proyecto. Veremos algo como la siguiente imagen..
Ilustración del selector de plantillas (Xcode). Necesitamos elegir el "Cocos2D iOS"plantilla (de la lista lateral de Cocos2D v2.x). Esta plantilla crea lo que necesitamos para iniciar nuestro proyecto e incluye las bibliotecas necesarias para ejecutar Cocos2D. El proyecto se crea con tres clases (AppDelegate, HelloWorldLayer e IntroLayer). Hoy trabajarás con HelloWorldLayer.
Un píxel es el elemento controlable más pequeño de una imagen representada en la pantalla. Hay varias resoluciones de pantalla en la familia iDevice. Por lo tanto, el marco de Cocos2D introduce una notación para ayudar a los desarrolladores a posicionar objetos en la pantalla. Esto se llama notación de puntos..
El espacio de coordenadas del dispositivo normalmente se mide en píxeles. Sin embargo, el espacio de coordenadas lógicas se mide en puntos. La siguiente tabla presenta la relación directa entre dispositivos, puntos y píxeles..
| Dispositivo | Puntos | Pixel |
| iPhone 3G | 480x320 | 480x320 |
| Retina iPhone | 480x320 | 960x640 |
| Ipad 3 | 1024x768 | 2048x1536 |
Desde la versión 0.99.5-rc0 de Cocos2D y superior, el usuario puede colocar objetos en la pantalla usando solo la notación de puntos. Esto ofrecerá una gran ventaja ya que el usuario sabe que la ubicación del objeto será la misma a pesar del dispositivo final donde se ejecutará la aplicación..
Sin embargo, si el usuario lo desea, es posible colocar objetos usando notación de píxeles simplemente modificando el tipo de mensaje que pasamos al objeto..
// Director CCDirector * director [CCDirector sharedDirector]; CGSize objectA = [director winSize]; // notación de puntos CGSize objectB = [director winSizeInPixels]; // notación de píxeles // Nodo CCNodo * nodo = […]; CGPoint posA = [posición del nodo]; // notación de puntos CGPoint posB = [node positionInPixels]; // notación de píxeles // Sprite CCSprite * sprite = […]; CGRect rectA = [sprite rect]; // notación de puntos CGRect rectB = [sprite rectInPixels]; // notación de pixel
Tenga en cuenta que los definidores de objetos también se pueden utilizar en ambas notaciones..
[sprite setPosition: ccp (x, y)]; // notación de puntos [sprite setPositionInPixels: (x, y)] // notación de píxeles
Recomendamos usar la notación de puntos ya que sabemos que las posiciones serán las mismas en todos los dispositivos.
Ahora que sabemos cómo funcionan los píxeles y la notación de puntos, el siguiente paso es comprender dónde se ubican los objetos cuando pasamos una coordenada específica. En Codos2D, el punto (0,0) está en la esquina inferior izquierda de la pantalla. Así, la esquina superior derecha tiene el punto (480,320).
Ilustración de la notación de píxeles y puntos utilizando el simulador de iPhone.. Por ejemplo, para posicionar un sprite tenías que hacer:
sprite.position = ccp (480,320); // en la esquina superior derecha sprite.position = ccp (0,320); // en la esquina superior izquierda sprite.position = ccp (480,0); // en la esquina inferior derecha sprite.position = ccp (240,160); // en el centro de la pantalla
Cocos2D introdujo el concepto de escenas. Cada escena puede verse como una pantalla diferente, que se utiliza para incorporar menús, niveles, créditos y todo lo que ves durante el juego. Tenga en cuenta que solo una escena puede estar activa en un momento dado.
Dentro de las escenas, puedes tener varias capas (como Photoshop). Las capas pueden tener varias propiedades, y podemos tener un gran número de ellas en la pantalla simultáneamente. Pueden tener varias propiedades, como el color de fondo, la animación, un menú o incluso una sombra..
Los Sprites son simplemente imágenes 2D que se pueden mover, rotar, escalar, animar, etc. En el siguiente paso, cambiará el código fuente del proyecto y agregará un sprite.
Antes de agregar un sprite, se requieren algunas ilustraciones, que están disponibles en la carpeta de recursos.
Todos los recursos utilizados en este tutorial están diseñados para la resolución original del iPad.
Una vez que hayas descargado los recursos, encontrarás seis imágenes. Cópielos en la carpeta de recursos de su proyecto y asegúrese de que la opción "Copie los elementos en la carpeta de los grupos de destino (si es necesario)" está chequeado.
Ahora en el HelloWorldLayer.m Puedes borrar todo dentro de la condición. if ((self = [super init])). La creación de sprites se puede lograr en código usando el siguiente fragmento de código.
CGSize winSize = [CCDirector sharedDirector] .winSize; CCSprite * backgroundImage = [CCSprite spriteWithFile: @ "WoodRetroApple_iPad_HomeScreen.jpg"]; backgroundImage.position = ccp (winSize.width / 2, winSize.height / 2); [auto addChild: backgroundImage z: -2];
Con el fragmento de código mencionado anteriormente, puede cambiar la imagen de fondo predeterminada de esa clase. El código es fácil de entender y resumir..
Tenga en cuenta que ponemos el z = -2 Porque el fondo necesita estar detrás de todos los objetos..
Vamos a añadir un logo. En cuanto al código mencionado anteriormente, ya sabemos cómo lograrlo. El proceso es simple y directo. Si necesitas ayuda, puedes usar el siguiente código.
CCSprite * logo = [CCSprite spriteWithFile: @ "MonsterSmashing.png"]; logo.scale = 1.2; logo.position = ccp (winSize.width / 2, 800); [auto addChild: logo];
Ahora es el momento de ejecutar el proyecto y ver si todo funciona como se espera. Deberías ver similar a la siguiente pantalla..
Ilustración de la primera pantalla. La pantalla contiene el nombre del juego y el logotipo predeterminados.. El objetivo principal de este paso es agregar un menú predeterminado. El menú tendrá dos opciones:
La opción de reproducción iniciará un nuevo juego, mientras que la opción de sonido es un botón de alternancia que nos proporcionará una forma de detener o iniciar el motor de sonido (en este caso, la música de fondo).
Para implementar el botón Play (usando el botón CCMenuItem clase), solo necesitamos agregar una línea (por ahora). Esta línea representa un elemento del menú. La opción se representa mediante una imagen (agregada previamente a los recursos)
CCMenuItem * startGameButtonImage = [CCMenuItemImage itemFromNormalImage: @ "playButton.png" selectedImage: @ "playButtonSelected.png" target: self selector: @selector (onStartGamePressed)];
Para crear y describir el botón Reproducir, necesitamos pasarlo a través de varios mensajes. los itemFromNormalImage es la información de ubicación de la imagen, y la Imagen seleccionada es la imagen que aparece cuando nuestro dedo se sitúa sobre el elemento. los selector es el método que se llamará cuando el usuario levante el dedo del elemento del menú, que en este caso es el método enStartgamePressed. Hablaremos de eso más tarde..
El botón de alternar es más complejo que el botón de reproducción, ya que usa dos estados, encendido y apagado. Necesitamos definir los dos estados y luego agregarlos al botón de alternar final, CCMenuItemToogle. los en y apagado botón se define como el botón de reproducción.
Después de crear las dos opciones, debemos unir las opciones. Usa el fragmento de abajo para esto..
CCMenuItem * startGameButtonImage = [CCMenuItemImage itemFromNormalImage: @ "playButton.png" selectedImage: @ "playButtonSelected.png" target: self selector: @selector (onStartGamePressed)]; CCMenuItem * _soundOn = [[CCMenuItemImage itemFromNormalImage: @ "soundOn.png" selectedImage: @ "soundOnSSelected.png" target: nil selector: nil] retain]; CCMenuItem * _soundOff = [[CCMenuItemImage itemFromNormalImage: @ "soundOff.png" selectedImage: @ "soundOffSelected.png" target: nil selector: nil] retain]; CCMenuItemToggle * toggleItem = [CCMenuItemToggle itemWithTarget: self selector: @selector (soundButtonTapped :) items: _soundOn, _soundOff, nil];
Después de agregar el fragmento de código anterior, debemos crear el menú real con las opciones inherentes. Necesitamos usar un CCMenu y enviar varios CCMenuItems a través del método menuWithItems. Al igual que con cualquier otro objeto, debemos definir su posición y su relleno, que en este caso es vertical. Aquí está el código.
CCMenu * menu = [CCMenu menuWithItems: startGameButtonImage, toggleItem, nil]; menu.position = ccp (winSize.width * 0.5f, winSize.height * 0.4f); [menú alignItemsVerticallyWithPadding: 15]; // Agregar el menú como un elemento secundario a esta capa [self addChild: menu];
Anteriormente, dijimos que el parámetro selector llamado método. Llamamos dos metodos, enStartGamePressed y SoundButtonTapped. El primero reemplazará la escena actual, mientras que el segundo activará o desactivará el sonido del juego.
Antes de ir a las implementaciones de métodos, necesitamos crear una nueva escena. Entonces, ve a Archivo> Nuevo> Archivo ... y seleccione un CCnodo clase y nombreMonsterRun". Se agregarán dos nuevos archivos a su proyecto., MonsterRun.h y MonsterRun.m). Asegúrese de que la clase usa el siguiente código.
+(CCScene *) escena CCScene * escena = [nodo CCScene]; MonsterRun * layer = [nodo MonsterRun]; [escena addChild: capa]; escena de retorno
Ahora, podemos volver a la HelloWorldLayer.m y referencia el MonsterRun. Usamos la siguiente línea para crearla..
#importar "MonsterRun.h"
Por ahora, dejaremos esta clase y su código solo. Será cubierto en el siguiente tutorial. Retrocedamos un poco por los menús y los dos métodos de los que hablamos antes, enStartGamePressed y SoundButtonTapped.
- (void) soundButtonTapped: (id) sender // Covered in Part 3 - (void) onStartGamePressed CCScene * MonsterRunScene = [escena de MonsterRun]; CCTransitionFlipAngular * transition = [CCTransitionFlipAngular transitionWithDuration: 0.5f escena: helloWorldScene]; [[CCDirector sharedDirector] replaceScene: MonsterRunScene];
Ahora ejecuta el proyecto para ver si todo está funcionando correctamente. Verás algo similar a la siguiente imagen..
Ilustración de la primera pantalla. La pantalla contiene el nombre del juego, el logotipo y el menú de opciones predeterminados.. En este punto, debe poder comprender y realizar las siguientes tareas:
Accentsconagua