Workshop impartido en Codemotion 2015 donde aprenderemos a crear un videojuego tipo "Space Invaders" para Android y iPhone desde cero. Empezaremos por el menú principal, desde el cual accederemos a la pantalla de juego. Allí añadiremos nuestra nave principal y la daremos la capacidad de moverse por pantalla y disparar. También mostraremos unos asteroides a los que deberemos disparar para superar el juego. Para terminar, añadiremos música de fondo y efectos de sonido a los disparos de nuestra nave. Pasos para realizar la instalación inicial: http://jonsegador.com/2015/11/workshop-codemotion-desarrollar-videojuego-movil-multiplataforma-cocos2d-x/ El código fuente está disponible en: https://github.com/jonseg/codemotion-2015-cocos2dx

1. Desarrollar un
videojuego móvil
multiplataforma con
Cocos2D-X
Jon Segador
http://jonsegador.comMADRID · NOV 27-28 · 2015

2. 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
info@jonsegador.com
@jonseg

3. 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.

4. MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
BADLAND

5. MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
Castle Clash

6. MADRID · NOV 27-28 · 2015
Juegos hechos con Cocos2D-X
Dragon City

7. MADRID · NOV 27-28 · 2015
Componentes de un juego
- Escenas (Scene)
- Capas (Layer)
- Sprites (Sprite)
- Textos (Label)
- Menús (Menu)
- Acciones (Action)

8. 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.

9. 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

10. MADRID · NOV 27-28 · 2015
La primera escena
MenuPrincipalScene.h

11. MADRID · NOV 27-28 · 2015
La primera escena
MenuPrincipalScene.cpp

12. MADRID · NOV 27-28 · 2015

13. 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.

14. MADRID · NOV 27-28 · 2015
El primer Sprite
- Añadimos una imagen de fondo en la escena. Esta imagen de fondo es
un Sprite.

15. 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.

16. MADRID · NOV 27-28 · 2015
Ejecutar el juego
/proj.android-studio/app/jni/Android.mk
Compilamos el proyecto

17. 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

18. 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

19. 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.

20. 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:

21. MADRID · NOV 27-28 · 2015
Transiciones entre escenas
- replaceScene
- pushScene
- popScene
- TransitionFade
- TransitionFlipX
- TransitionPageTurn
- TransitionMoveInR
- TransitionJumpZoom
- ….

22. MADRID · NOV 27-28 · 2015

23. MADRID · NOV 27-28 · 2015
Actions
- MoveTo
- JumpTo
- ScaleTo
- RotateTo
- FadeTo
- ….

24. MADRID · NOV 27-28 · 2015
Sonidos
- Incluimos la librería SimpleAudioEngine
- Música de fondo:
- Efectos de sonido:

25. MADRID · NOV 27-28 · 2015
¡GRACIAS!
- Código fuente disponible en: https://github.com/jonseg/codemotion-
2015-cocos2dx
- Dudas, preguntas, ayuda, etc.
info@jonsegador.com