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

info@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.

info@jonsegador.com