Cómo crear un mapa en android cocos2d x
Para este tutorial, necesita instalar la última versión de Cocos2D-X (actualizada a 2.1.4 al momento de escribir este tutorial). Si no tiene la última versión de Cocos2D-X, descárguela primero y ejecute el siguiente comando en la terminal para instalar las plantillas:
cd ~/Downloads/cocos2d-x-2.1.4 ./ install-templates- xcode.sh -f -u Luego cree un nuevo proyecto en Xcode usando la plantilla iOS\cocos2d-x\cocos2dx. Haga clic en Siguiente, asigne al proyecto el nombre TileGame, establezca el proyecto en Universal, haga clic en Siguiente y luego haga clic en Crear.
Utilizarás ARC en este proyecto, por lo que si es la primera vez que escuchas sobre ARC, te animo a que lo conozcas primero. Las plantillas no usan ARC por defecto, pero afortunadamente podemos modificarlo fácilmente. Vaya a Editar\Refactor\Convertir a Objective-C ARC. Desplácese hacia abajo y seleccione solo los archivos main.m, AppDelegate.cpp, HelloWorldScene.cpp, luego haga clic en Verificar y complete el asistente.
selecciona objetivos (de raywenderlich)
Crea y ejecuta, luego asegúrate de que todo sigue funcionando correctamente; deberías poder ver la pantalla estándar "Hola mundo".
A continuación descarga el archivo comprimido de los recursos del juego. El archivo comprimido contiene el siguiente contenido:
El sprite que usarás para el objeto reproductor.
Algunos efectos de sonido creados con la utilidad cfxr (que usarás en el tutorial).
Música de fondo de acompañamiento creada por Garage Band.
Algunas de las configuraciones de mosaicos que usarás: vendrán con el editor de mapas que usarás, pero creo que podremos incluirlas más fácilmente con otro contenido.
Algunos ladrillos "especiales" adicionales, que se explicarán detalladamente más adelante.
Cuando hayas descargado el recurso, ábrelo y arrastra la carpeta TileGameResources al grupo Recursos del proyecto. En el menú del proyecto, haga clic derecho en el grupo Recursos y seleccione Agregar archivos a “TileGame”... Seleccione la carpeta Recursos/TileGameResources, verifique que Copiar elementos en la carpeta del grupo de destino (si es necesario) y Crear grupos para cualquier carpeta agregada estén seleccionados, y haga clic en Finalizar.
Si todo va bien, todos los archivos aparecerán en tu proyecto.
Juego de fichas (de raywenderlich)
¡Ahora comenzaremos a crear el mapa!
Crear mapas
Cocos2D-X admite la creación de mapas basados en el editor de mapas Tiled de código abierto y guardarlos en formato TMX.
Descargar Editor de mapas en mosaico. Al momento de escribir este tutorial, la última versión es 0.9.0.
Luego ejecuta Tiled, ve a Archivo\Nuevo y completa el cuadro de diálogo de la siguiente manera:
nuevo mapa (de raywenderlich)
En el área direccional, Puedes elegir entre ortogonal o isométrica. Aquí seleccionará Ortogonal.
A continuación establecerás el tamaño del mapa. Recuerde que esto está en ladrillos, no en píxeles. Estarás creando un mapa más pequeño, así que aquí debes elegir 50×50. Se le presentará en mosaico
el tamaño de su mapa general en píxeles, en la parte inferior del cuadro de diálogo Nuevo mapa.
Esto se calcula multiplicando el tamaño del mapa (50 mosaicos) por el tamaño de los mosaicos (32 píxeles) según el largo y el ancho.
Por último, especificarás el ancho y el alto. Lo que elijas aquí depende de los mosaicos configurados por el artista. Para este tutorial, utilizará algunos de los mosaicos de muestra que vienen con Tiled Editor, que son de 32 × 32. Selecciónelo y haga clic en Aceptar.
A continuación debes agregar la configuración de mosaicos para dibujar tu mapa. Haga clic en Mapa en la barra de menú, luego desactive Nuevo conjunto de mosaicos... y complete el cuadro de diálogo de la siguiente manera:
nuevo conjunto de mosaicos (de raywenderlich)
Para obtener la imagen, haga clic en Explorar y navegue hasta su propia carpeta TileGame/Resources/TileGameResources, luego seleccione el archivo tmw_desert_spacing.png que descargó anteriormente de Resource Zip y agréguelo a su proyecto. Automáticamente completará el nombre según el nombre del archivo.
Puedes establecer el ancho y el alto en 32×32 ya que ese es también el tamaño de los ladrillos. Para bordes y espaciado:
Los bordes representan cuántos píxeles (incluidos el ancho y el alto) se deben omitir para el ladrillo actual antes de que Tiled comience a buscar píxeles de ladrillo reales.
El intervalo es cuántos píxeles (incluidos el ancho y el alto) debe avanzar el mosaico después de determinar los píxeles reales del mosaico y pasar a los datos del siguiente mosaico.
Si observas tmw_desert_spacing.png, verás que cada ladrillo está rodeado por un borde negro de 1 píxel, lo que también explica la configuración de borde y espaciado de 1.
Mosaicos (de raywenderlich)
Cuando hagas clic en Aceptar, verás los mosaicos representados en la ventana Conjuntos de mosaicos. Ahora puedes empezar a dibujar. Haz clic en el ícono Sello
Pincel en la barra de herramientas, luego haz clic en cualquier parte del mapa para colocar un ladrillo.
conjunto de mosaicos (de raywenderlich)
Así que sigue dibujando mapas y ¡sé lo más creativo posible! Asegúrate de agregar al menos algunos edificios al mapa, ya que necesitarás contenido de colisión más adelante.
conjunto de mosaicos (de raywenderlich)
Para facilitar el dibujo de contenido, puedes consultar algunos métodos de acceso directo. Estos son algunos de los métodos más utilizados:
Puedes arrastrar un cuadro alrededor de una serie de mosaicos en el selector de Conjunto de mosaicos y soltar varios mosaicos adyacentes al mismo tiempo.
Puedes acercar y alejar mediante Ver\Acercar y Ver\Alejar.
La tecla z girará al editar el mapa según la herramienta Pincel de sello.
Es posible que notes el minimapa entre algunas funciones nuevas. ¡Esta es una gran característica que te permite ver un mini mapa! Centrándome en mi pobre intento en el laberinto en la parte inferior del minimapa. El cuadro rojo representa el área que ve en la ventana de edición principal.
conjunto de mosaicos (de raywenderlich)
Tenga en cuenta esta vista de minimapa mientras se desplaza por la siguiente área.
Es importante tener en cuenta que los recursos para este tutorial aparecen delante del mapa, por lo que si eres perezoso puedes usarlos. Si haces esto, debes abrir el mapa en Tiled y descubrir cómo está configurado.
Cuando termines de dibujar el mapa, haz doble clic en la
Capa Mosaico en la vista Capas y cambia el nombre a Fondo. Luego haga clic en Archivo\Guardar y guarde el archivo en TileGame
\Resources\TileGameResources en el proyecto TileGame, asigne al archivo el nombre TileMap.tmx y sobrescriba el archivo existente.
Usarás Tiled para otras cosas más adelante, pero por ahora ¡incorporemos este mapa al juego!
Agregue el mapa Tiled a la escena Cocos2D-X
Abra HelloWorldScene.h y agregue el siguiente contenido después de #include "cocos2d.h":
usando ? namespace?cocos2d;
Esto le indica al editor que use el espacio de nombres cocos2d, por lo que no es necesario anteponer todo con cocos2d.
Luego agregue lo siguiente a la definición de clase, después de las llaves:
private:?CCTMXTiledMap?*_tileMap;?CCTMXLayer?*_background;
Esto crea una variable de instancia para rastrear el mapa de mosaicos en sí y otra variable de instancia para rastrear la capa de fondo del mapa. Aprenderás más sobre los niveles del mapa de mosaicos más adelante.
A continuación, reemplace HelloWorldScene.cpp con el siguiente contenido:
CCTMXObjectGroup?*objectGroup?=?_tileMap->objectGroupNamed("Objects");?if(objectGroup?== ? NULL){?CCLog(“tile?map?has?no?objects?object?layer”);?return?false;?}?CCDictionary?*spawnPoint?=?objectGroup->objectNamed(“SpawnPoint”);? ?x?=?((CCString)*spawnPoint->valueForKey(“x”)).intValue();?int?y?=?((CCString)*spawnPoint->valueForKey(“y”)).intValue ( );?_player?=?new?CCSprite();?_player->initWithFile(“Player.png”);?_player->setPosition(ccp(x,y));?this->addChild(_player); this->setViewPointCenter(_player->getPosition());
Hay un indicio de esto en la última línea, pero no te preocupes, lo llegarás pronto.
Hagamos una pausa por un momento y expliquemos los niveles y grupos de objetos. Primero tenga en cuenta que está recuperando la capa del objeto a través del método objectGroupNamed en el objeto CCTMXTiledMap (no LayerNamed). Devuelve un objeto CCTMXObjectGroup especial.
Luego, objectGroup llama al método objectNamed para obtener un CCDictionary y contiene información útil sobre el objeto, como los ejes xey, ancho y alto. En esta parte del tutorial, lo único que debes preocuparte son los ejes x e y, configurándolos en la posición del sprite del jugador.
Al final del bloque de código, configuras la vista para identificar la posición del jugador.
Así que ahora agregue el siguiente contenido a HelloWorldScene.h:
//?In?the?public?section?void?setViewPointCenter(CCPoint?position);
Y agregue un nuevo método Vaya a HelloWorldScene.cpp (mejor al final del archivo):
void?HelloWorld::setViewPointCenter(CCPoint?position)?{?CCSize?winSize?=?CCDirector::sharedDirector()-> getWinSize ();?int?x?=?MAX(position.x,?winSize.width/2);?int?y?=?MAX(position.y,?winSize.height/2);?x?= ? MIN(x,?(_tileMap->getMapSize().width?*?this->_tileMap->getTileSize().width)?–?winSize.width?/?2);?y?=?MIN(y , ?(_tileMap->getMapSize().height?*?_tileMap->getTileSize().height)?–?winSize.height/2);?CCPoint?actualPosition?=?ccp(x,?y);?CCPoint ? centerOfView?=?ccp(winSize.width/2,?winSize.height/2);?CCPoint?viewPoint?=?ccpSub(centerOfView,?actualPosition);?this->setPosition(viewPoint);?}
Esta es una explicación de los ladrillos. Imagine que esta función establece la posición central de la cámara. Permite al usuario ir a cualquier parte del eje x,y del mapa, pero es posible que no desee mostrar ciertos puntos; por ejemplo, es posible que no desee que la pantalla vaya más allá del borde del mapa (entonces solo mostrará un ¡borde negro!).