Cómo utilizar Cocos2d-x 3.0 para crear juegos basados en texturas
En la primera parte de este tutorial, te mostraré cómo crear un mapa usando mosaicos, cómo agregar un mapa a tu juego, cómo hacer que el mapa se desplace con el jugador y cómo utilizar capas de objetos.
En la segunda parte del tutorial, cubriré cómo crear áreas colisionables en el mapa, cómo usar las propiedades de los mosaicos, cómo crear objetos de recogida y modificar dinámicamente el mapa, y cómo garantizar que ¡Los ninjas no se llenan!
Si aún no estás listo, también puedes comenzar con la serie de tutoriales "Cómo usar Cocos2d-x3.0 para crear un juego simple", porque usamos muchas herramientas en este tutorial. que se puede aprender de los tutoriales anteriores. Adquirir conceptos básicos.
¡Bien, juguemos con el mapa de mosaicos!
Crear el esqueleto del proyecto
Primero, creemos el esqueleto de todo el proyecto para que podamos asegurarnos de que los archivos que necesitamos en el futuro estén incluidos y ejecutándose.
Primero, nombra el proyecto TileGame.
A continuación, descarga los archivos de recursos del juego. Este paquete de archivos de recursos contiene el siguiente contenido:
Sprites del jugador. Esta imagen es similar a "Cómo hacer un juego sencillo usando Cocos2d-x3.0".
Algunos efectos de sonido los hice usando la herramienta cxfr.
Alguna música de fondo que hice usando Garage Band. (Consulte esta publicación de blog para obtener más información)
La colección de mosaicos que usaremos; en realidad, se usará con el editor de mapas de mosaicos, pero pensé que sería más fácil ponerla aquí para otros fines Uso parcial.
Más adelante explicaré algunos mosaicos "especiales" adicionales.
Una vez que tengas estos recursos, descomprímelos y arrástralos a tu proyecto en el grupo "Recursos". (Nota del editor: el editor ha convertido los recursos de audio anteriores al formato mp3)
Si todo va bien, todos los archivos deberían aparecer en su proyecto. ¡Ahora es el momento de hacer el mapa!
Creación de mapas usando Tile
Cocos2d-x admite mapas en formato TMX producidos usando el editor de mapas Tile. (Se recomienda que seleccione inglés durante la instalación. Este tutorial utiliza la versión en inglés de Tile)
Después de la descarga, haga doble clic para ejecutarlo. Haga clic en Archivo/Nuevo y aparecerá el siguiente cuadro de diálogo:
En la sección Orientación, puede seleccionar Ortogonal. También elegimos el Base64 predeterminado (compresión zlib) para el formato de capa.
A continuación, establece el tamaño del mapa. Tenga en cuenta que el tamaño está en vatios, no en píxeles. Queremos crear un mapa lo más pequeño posible, así que elija 50*50.
Finalmente, especifica el ancho y alto de cada mosaico. El ancho y el alto que elija aquí se basarán en las dimensiones de la imagen del mosaico real. El tamaño de mosaico de ejemplo utilizado en este tutorial es 32*32, así que seleccione 32*32 en las opciones anteriores.
A continuación, importamos la colección de mosaicos necesarios para hacer el mapa. Haga clic en el menú "mapa" en la barra de menú, "Nuevo conjunto de mosaicos..." y aparecerá la siguiente ventana. Aparecerá la siguiente ventana:
Para obtener las imágenes, haga clic en el botón "Examinar..." y navegue hasta el botón "Nuevo conjunto de texturas..." del proyecto, luego ubique la carpeta de recursos del proyecto y seleccione tmw_desert_spacing.png (el archivo que acabamos de extraer) y agréguelo al proyecto. Completará automáticamente el nombre según el nombre del archivo. Luego, nombra la nueva imagen "tmw_desert_spacing.png". Además, establezca el espacio entre mosaicos y el margen a continuación en 1.
Puedes mantener el ancho y el alto en 32*32 porque ese es el tamaño real del mosaico.
En cuanto al margen y el espaciado, no he encontrado buena documentación para explicar cómo establecer estos dos valores. Aquí está mi opinión personal:
El margen se refiere al cálculo de sus propios píxeles (incluidos el ancho y el alto). Los píxeles deben restarse del mosaico actual. (Similar al margen en Word y CSS)
El espaciado es el espacio entre dos mosaicos adyacentes (teniendo en cuenta tanto el ancho como el alto) (similar al espaciado en Word y CSS)
Si miras tmw_desert_spacing.
Una vez que selecciones Aceptar, verás algunos mosaicos en la ventana Conjunto de mosaicos.
¡Ahora puedes hacer tu mapa! En la pequeña ventana Conjunto de mosaicos, seleccione un mosaico y haga clic en cualquier parte del mapa, y verá que el mosaico seleccionado aparece donde está el punto.
Sigue creando mapas: ¡dale rienda suelta a tu ingenio! Asegúrate de agregar al menos un par de edificios al mapa, ya que necesitaremos algo para colisionar más adelante.
Tenga en cuenta algunos atajos útiles:
Puede seleccionar varios mosaicos a la vez arrastrando un cuadro fuera del selector de conjunto de mosaicos.
Puedes usar el botón "Herramienta de llenado de cubo" en la barra de herramientas (la que tiene el cubo) para dibujar el mapa completo basándose en los mosaicos base.
Puedes utilizar "Ver/Acercar..." y "Ver/Alejar..." para acercar y alejar el mapa.
Cuando hayas terminado de dibujar el mapa, haz doble clic en la capa en la pestaña Capas (ahora "Capa1") y renómbrala como "Fondo". Luego haga clic en "Archivo/Guardar" para guardar el archivo en la carpeta de recursos del proyecto y asígnele el nombre "TileMap.tmx".
Vamos a hacer algunas cosas divertidas con este tmx más adelante, ¡así que carguemos el mapa en el juego!
Agregue el mapa de mosaicos a la escena Cocos2d-x
Abra HelloWorldScene.h y agregue algunas variables miembro:
cpp
/ / Reemplace el método init con lo siguiente
bool HelloWorld::init()
{
if ( !Layer::init() )
{
return false;
}
std::string file = "TileMap.tmx";
auto str = String::createWithContentsOfile(FileUtils::getInstance()->fullPathForFilename(file.c_str()).c_str());
_tileMap = TMXTiledMap::createWithXML(str->getCString( ) ,"");
_background = _tileMap->layerNamed("Background");
addChild(_tileMap, -1);
devuelve verdadero; /p>
}
Aquí, llamamos a algunos métodos de la clase TMXTiledMap para cargar el archivo de mapa que acabamos de crear.