![Page 1: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/1.jpg)
Desarrollar un
videojuego móvil
multiplataforma con
Cocos2D-X
Jon Segador
http://jonsegador.comMADRID · NOV 27-28 · 2015
![Page 2: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/2.jpg)
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
![Page 3: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/3.jpg)
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.
![Page 4: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/4.jpg)
MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
BADLAND
![Page 5: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/5.jpg)
MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
Castle Clash
![Page 6: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/6.jpg)
MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
Dragon City
![Page 7: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/7.jpg)
MADRID · NOV 27-28 · 2015
Componentes de un juego
- Escenas (Scene)- Capas (Layer)- Sprites (Sprite)- Textos (Label)- Menús (Menu)- Acciones (Action)
![Page 8: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/8.jpg)
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.
![Page 9: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/9.jpg)
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
![Page 10: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/10.jpg)
MADRID · NOV 27-28 · 2015
La primera escenaMenuPrincipalScene.h
![Page 11: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/11.jpg)
MADRID · NOV 27-28 · 2015
La primera escenaMenuPrincipalScene.cpp
![Page 12: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/12.jpg)
MADRID · NOV 27-28 · 2015
![Page 13: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/13.jpg)
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.
![Page 14: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/14.jpg)
MADRID · NOV 27-28 · 2015
El primer Sprite
- Añadimos una imagen de fondo en la escena. Esta imagen de fondo es un Sprite.
![Page 15: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/15.jpg)
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.
![Page 16: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/16.jpg)
MADRID · NOV 27-28 · 2015
Ejecutar el juego/proj.android-studio/app/jni/Android.mk
Compilamos el proyecto
![Page 17: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/17.jpg)
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
![Page 18: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/18.jpg)
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
![Page 19: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/19.jpg)
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.
![Page 20: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/20.jpg)
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:
![Page 21: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/21.jpg)
MADRID · NOV 27-28 · 2015
Transiciones entre escenas
- replaceScene
- pushScene
- popScene
- TransitionFade
- TransitionFlipX
- TransitionPageTurn
- TransitionMoveInR
- TransitionJumpZoom
- ….
![Page 22: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/22.jpg)
MADRID · NOV 27-28 · 2015
![Page 23: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/23.jpg)
MADRID · NOV 27-28 · 2015
Actions- MoveTo
- JumpTo
- ScaleTo
- RotateTo
- FadeTo
- ….
![Page 24: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/24.jpg)
MADRID · NOV 27-28 · 2015
Sonidos- Incluimos la librería SimpleAudioEngine
- Música de fondo:
- Efectos de sonido:
![Page 25: Codemotion 2015: Desarrollar un videojuego móvil multiplataforma con Cocos2D-X](https://reader031.vdocuments.site/reader031/viewer/2022021415/58a717a11a28ab02678b5c1d/html5/thumbnails/25.jpg)
MADRID · NOV 27-28 · 2015
¡GRACIAS!
- Código fuente disponible en: https://github.com/jonseg/codemotion-2015-cocos2dx
- Dudas, preguntas, ayuda, etc.