Desarrollar un
videojuego móvil
multiplataforma con
Cocos2D-X
Jon Segador
http://jonsegador.comMADRID · NOV 27-28 · 2015
MADRID · NOV 27-28 · 2015
¡HOLA!
Me llamo Jon Segador.
Programador freelance de apps y juegos para móviles.
Desarrollador web Symfony 2.
http://jonsegador.com
@jonseg
MADRID · NOV 27-28 · 2015
Cocos2D-X
- http://www.cocos2d-x.org
- Game engine 2D (y 3D)
- Open Source (http://github.com/cocos2d/cocos2d-x)
- Android, iOS, Windows Phone, escritorio y web.
- C++11
- Mantenido por Chukong Technologies.
MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
BADLAND
MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
Castle Clash
MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
Dragon City
MADRID · NOV 27-28 · 2015
Componentes de un juego
- Escenas (Scene)- Capas (Layer)- Sprites (Sprite)- Textos (Label)- Menús (Menu)- Acciones (Action)
MADRID · NOV 27-28 · 2015
Creación del proyecto
Cocos2D-X cuenta con un comando de consola que nos permite crear de forma sencilla un nuevo proyecto.
MADRID · NOV 27-28 · 2015
La primera escena
- Creamos la primera escena, que utilizaremos para mostrar el menú principal del juego.
- Necesitamos dos archivos (el de cabecera y el de implementación) que debemos crear:
MenuPrincipalScene.h
MenuPrincipalScene.cpp
MADRID · NOV 27-28 · 2015
La primera escenaMenuPrincipalScene.h
MADRID · NOV 27-28 · 2015
La primera escenaMenuPrincipalScene.cpp
MADRID · NOV 27-28 · 2015
MADRID · NOV 27-28 · 2015
Imágenes y sonidos del juego
- Descargamos las imágenes del juego desde esta url:
http://jonsegador.com/wp-content/uploads/2015/11/assets_codemotion.zip
- Lo descomprimimos y copiamos el contenido (carpetas res, fonts y sounds) a la carpeta Resources de nuestro proyecto.
- Configuramos el proyecto para soportar diferentes resoluciones.
MADRID · NOV 27-28 · 2015
El primer Sprite
- Añadimos una imagen de fondo en la escena. Esta imagen de fondo es un Sprite.
MADRID · NOV 27-28 · 2015
Ejecutar el juego- Para iOS, configuramos el juego como portrait y pulsamos “run” en
Xcode.
- En Android, primero tenemos que añadir al archivo Android.mk las escenas que hemos creado.
- Compilamos el proyecto para Android.
- Abrimos el proyecto con Android Studio, en el archivo AndroidManifest.xml configuramos el juego como portrait y lo ejecutamos.
MADRID · NOV 27-28 · 2015
Ejecutar el juego/proj.android-studio/app/jni/Android.mk
Compilamos el proyecto
MADRID · NOV 27-28 · 2015
Título del juego
- Vamos a poner el nombre del juego en la parte superior de la escena del menú principal.
- Creamos un Label del tipo TTF
MADRID · NOV 27-28 · 2015
El menú principal
- Cocos2D-X nos ofrece diferentes opciones para crear los elementos de un menú:
- MenuItemLabel- MenuItemImage- MenuItemFont- MenuItemSprite
MADRID · NOV 27-28 · 2015
El menú principal
- Creamos un MenuItemLabel con el texto “JUGAR”, con la fuente Marker Felt.tff y con un tamaño de 65.
- Creamos un Menu al que añadimos el item creado anteriormente y lo posicionamos en las coordenadas (0,0). Lo importante es donde posicionamos los elementos del menú, no el menú en sí mismo.
MADRID · NOV 27-28 · 2015
El menú principal- En el archivo de cabecera MenuPrincipalScene.h, definimos la función
que será llamada cuando pulsemos sobre el elemento del menú.
- Y en el archivo MenuPrincipalScene.cpp lo implementamos:
MADRID · NOV 27-28 · 2015
Transiciones entre escenas
- replaceScene
- pushScene
- popScene
- TransitionFade
- TransitionFlipX
- TransitionPageTurn
- TransitionMoveInR
- TransitionJumpZoom
- ….
MADRID · NOV 27-28 · 2015
MADRID · NOV 27-28 · 2015
Actions- MoveTo
- JumpTo
- ScaleTo
- RotateTo
- FadeTo
- ….
MADRID · NOV 27-28 · 2015
Sonidos- Incluimos la librería SimpleAudioEngine
- Música de fondo:
- Efectos de sonido:
MADRID · NOV 27-28 · 2015
¡GRACIAS!
- Código fuente disponible en: https://github.com/jonseg/codemotion-2015-cocos2dx
- Dudas, preguntas, ayuda, etc.
Recommended