Cómo usar cocos2d para crear un juego de disparos espaciales

¡En este tutorial aprenderás cómo desarrollar un juego de disparos espaciales!

Podrás utilizar el acelerómetro (sensor de gravedad) para controlar el movimiento de la nave espacial, y podrás tocar la pantalla para disparar armas láser.

Si no estás completamente familiarizado con cómo crear juegos basados ​​en cocos2d-x3.0, ¡este tutorial puede ayudarte! Aprenderás cómo crear un juego completo de principio a fin, ¡no se requiere experiencia!

Si no está completamente familiarizado con la programación cocos2d-x3.0, es posible que primero deba estudiar los tutoriales relevantes.

Este tutorial también es excelente para desarrolladores intermedios, ya que cubre temas más avanzados como el desplazamiento de paralaje, la preasignación de nodos, el movimiento del acelerómetro y el uso de sistemas de partículas.

No hay mucho que decir, ¡vamos directo al grano!

Agregar archivos de recursos relacionados

Para crear un juego móvil de este tipo, necesitarás algunos recursos de imagen y sonido relacionados con el tema espacial.

Puedes descargar directamente los recursos del juego espacial creado por mi esposa.

Entonces, descárgalo directamente y extráelo al directorio de Recursos de tu proyecto.

Si tienes curiosidad, puedes echar un vistazo a lo que acabas de agregar al proyecto. Aquí tienes la lista completa de contenidos:

Fondos: Algunas imágenes de fondo que usarás más adelante para crear un fondo con desplazamiento. Contiene galaxias, soles y anomalías espaciales (que se mueven más lentamente), así como un conjunto de imágenes de polvo espacial (aparecen delante del fondo y se mueven un poco más rápido)

Fuentes: use fuentes de mapa de bits de glifos hecho por Designer, usaremos estas fuentes para mostrar texto en el juego.

Partículas: algunos efectos especiales de partículas creados con Particle Designer. Aquí lo usamos para crear el efecto de estrellas volando.

Sonidos: Alguna música de fondo y efectos de sonido relacionados con el espacio. Realizado con Garage Band y cxfr.

Spritesheets: una imagen grande en el formato pvr.ccz, que contiene muchas imágenes pequeñas que se utilizarán en el juego, como meteoritos, naves espaciales, etc. Este archivo fue creado usando Texture Packer. Es posible que necesite usar esta herramienta si desea usar el formato de archivo pvr.ccz. Por supuesto, las ventajas del formato pvr.ccz son los archivos pequeños y la rápida velocidad de carga.

Si no has instalado ninguna de las herramientas anteriores, ¡no te preocupes! Para este tutorial no los necesitas en absoluto, solo puedes usar los que ya hice. En el futuro, si las condiciones lo permiten, podrás probar las herramientas mencionadas anteriormente.

Quizás te preguntes, ¿por qué todas estas imágenes se convierten en una imagen tan grande? Porque, en primer lugar, ayuda a ahorrar memoria y al mismo tiempo mejora el rendimiento.

A continuación, ¡comencemos a codificar! :)

Agregar una nave espacial

Primero, ¡agreguemos una nave espacial a la pantalla!

¡Probémoslo y veamos si funciona! Abra HelloWorld.h y agregue el siguiente código al comienzo de la clase HelloWorld (arriba de la línea public: existente)

SpriteBatchNode *_batchNode;

Sprite *_ship;

El código anterior crea dos variables de instancia privadas: una para SpriteBatchNode y otra para el sprite de la nave espacial.

Ahora cambie a HelloWorldScene.cpp En el método init(), elimine todo el código del comentario "2. agregue un elemento de menú" al final del método y agregue el siguiente código:

_batchNode = SpriteBatchNode::create("Sprites.pvr.ccz"); // 1

this->addChild(_batchNode); SpriteFrameCache::getInstance() ->addSpriteFramesWithFile("Sprites.plist"); // 3

_ship = Sprite::createWithSpriteFrameName("SpaceFlier_sm_1.png"); >auto winSize = Director: :getInstance()->getWinSize(); // 5

_ship->setPosition(Point(winSize.width *0.1, winSize.height *0.5));

_batchNode->addChild(_ship,1); // 7

Tenga en cuenta que estos códigos son muy similares a la versión Objective-C de cocos2d que utilizó en el pasado. La API tiene muchas similitudes, pero existen algunas diferencias de sintaxis con respecto a C++.

Compile y ejecute, debería ver su nave aparecer en la pantalla

Agregar desplazamiento de paralaje

A continuación, agregaremos el fondo cósmico para que tenga desplazamiento de paralaje. es una forma genial de desplazarse.

En primer lugar, tenemos que agregar el espacio de nombres cocos2d:: delante de todos los nombres de clases, ¡lo cual es muy molesto! Así que agregue la siguiente línea antes de la declaración de clase HelloWorld.h:

USING_NS_CC;

Luego agregue algunas variables nuevas en la parte privada de HelloWorld (tenga en cuenta que ya no necesitamos agregar la prefijo cocos2d):

ParallaxNodeExtras *_backgroundNode;

Sprite *_spacedust1;

Sprite *_spacedust2;

Sprite *_planetsunrise;

Sprite *_galaxy;

Sprite *_spacialanomaly;

Sprite *_spacialanomaly2;

Luego, en el método de inicio de HelloWorldScene.cpp, agregue lo siguiente antes del código de declaración de devolución:

// 1) Cree ParallaxNodeExtras

_backgroundNode = ParallaxNodeExtras::node();

this->addChild( _backgroundNode,-1);

// 2) Crea los sprites que agregaremos a ParallaxNodeExtras

_spacedust1 = Sprite::create("bg_front_spacedust.png");

_spacedust2 = Sprite::create("bg_front_spacedust.png");

_planetsunrise = Sprite::create("bg_planetsunrise.png");

_galaxy = Sprite ::create("bg_galaxy .png");

_spacialanomaly = Sprite::create("bg_spacialanomaly.png");

_spacialanomaly2 = Sprite::create("bg_spacialanomaly2.png ");

// 3) Determinar las velocidades de movimiento relativas para el polvo espacial y el fondo

Point DustSpeed ​​​​= Point(0.1, 0.1);

Point bgSpeed ​​​​= Point(0.05, 0.05) ;

// 4) Agregar hijos a ParallaxNodeExtras

_backgroundNode->addChild(_spacedust1,0,dustSpeed,Point(0, winSize. altura / 2));

_backgroundNode->addChild(_spacedust2,0,dustSpeed,Point(_spacedust1->getContentSize().width, winSize.height / 2));

_backgroundNode->addChild(_galaxy, -1, bgSpeed,Point(0, winSize.height *0.7

));

_backgroundNode->addChild(_planetsunrise, -1, bgSpeed,Point(600, winSize.height * 0));

_backgroundNode->addChild(_spacialanomaly, -1 , bgSpeed,Point(900, winSize.height *0.3));

_backgroundNode->addChild(_spacialanomaly2, -1, bgSpeed,Point(1500, winSize.height *0.9));

Compila y ejecuta, y deberías ver comenzar una escena del universo

Sin embargo, aún no es muy interesante, ¡porque todavía no se mueve nada!

Para mover el polvo espacial y las capas de fondo relacionadas, solo necesitas mover una cosa, ParallaxNodeExtras. Por cada valor de y que se mueva el nodo de paralaje, el polvo se moverá en un valor de 0,1 y, mientras que el fondo se moverá en un valor de 0,05 y.

Para mover el nodo de paralaje, solo necesitas actualizar su posición en un cuadro. Abra el archivo HelloWorldLayer.m y agregue el siguiente código: (preste atención a los comentarios al agregar la ubicación)

this->scheduleUpdate();

void HelloWorld::update( float dt)

{

Punto backgroundScrollVel = Punto(-1000, 0);

_backgroundNode->setPosition(_backgroundNode->getPosition()+ backgroundScrollVel*dt);

}

Compile y ejecute el proyecto, verá que usar parallax para crear un efecto de desplazamiento de paralaje es muy simple.