Diseñando tu juego con Cocos Studio y Cocos2dx

Ya hace más de un año que en Manduka decidimos utilizar el game engine Cocos2dx para nuestros juegos, y os explicábamos aquí el por qué. Con el vertiginoso crecimiento de la plataforma en todos sus aspectos, hemos ido adoptando nuevas herramientas que los creadores han puesto a nuestra disposición, como es Cocos Studio.

img_blog_cocos

¿Qué es Cocos Studio?

Cocos Studio es una herramienta que nos permite crear animaciones, UI y escenas para nuestro juego de forma fácil y rápida. Con la versión 2.0, publicada el 28 de octubre de 2014, los chicos de Chukong Technologies dieron un paso de gigante en el conjunto de herramientas disponibles para la creación de juegos para dispositivos móviles. Tras conocer su publicación, en Manduka enseguida nos pusimos a trabajar con Cocos Studio y lo introdujimos en nuestros proyectos. Ahora os traemos una pequeña muestra de qué se puede hacer con Cocos Studio y Cocos2dx.

Cómo crear tu juego con Cocos Studio y Cocos2dx

La forma más sencilla de comenzar a crear juegos con Cocos Studio y Cocos2dx es descargar el bundle que se encuentra a nuestra disposición en cocos.com. Una vez descargado, tendremos el siguiente directorio de carpetas:

Captura de pantalla 2015-01-16 a las 11.14.41

 

 

 

 

Como podéis observar, disponemos del ejecutable Cocos Studio 2 y otro que es Cocos. Éste último nos permitirá crear nuestros proyectos con todos los ficheros necesarios y las estructuras de carpetas. Ejecutamos pues el programa Cocos y vemos una pantalla como la que sigue:

Captura de pantalla 2015-01-16 a las 11.17.53

 

Podremos crear un proyecto nuevo o explorar los ejemplos para conocer más a fondo todas las posibilidades que nos ofrecen Cocos Studio y Cocos2dx.

Captura de pantalla 2015-01-16 a las 11.19.43

Hay múltiples ejemplos que nos ayudarán a entender como crear una pantalla de inventario, una pantalla de login, una pantalla de resultados o una selección de nivel. En nuestro caso, vamos a abrir el ejemplo LevelSelection, que es uno de mis favoritos y un elemento que casi todos los juegos de hoy en día poseen.

Una vez creado el proyecto en la carpeta que hayamos seleccionado, sólo nos queda diseñar nuestra pantalla de niveles en Cocos Studio.

 Diseñando la selección de nivel de un juego con Cocos Studio y Cocos2dx

Al crear el proyecto, se abrirá el programa Cocos Studio.

Captura de pantalla 2015-01-16 a las 11.27.17

En ésta pantalla podemos ver diferentes paneles. En el panel superior izquierdo encontraremos los componentes gráficos que podemos utilizar (sprites, nodos, labels, barras de progreso, partículas, etc…). Debajo de éste panel tenemos los recursos que utilizaremos en nuestra interfaz, es decir, imágenes creadas por los artistas y diseñadores y nuestras escenas.

En el centro de la pantalla tenemos un preview de cómo quedará nuestra escena, y en la zona inferior un timeline con la jerarquía de vistas y las animaciones de las mismas (en éste ejemplo no hay animaciones, pero Cocos Studio trae varios ejemplos de animaciones de personajes y escenas).

Por último, el panel derecho muestra las propiedades del componente que tenemos seleccionado en ése momento, como por ejemplo el anchor point, la posición, escalado, etc…

Para probar vuestra interfaz, sólo tenéis que ejecutar el proyecto a través del botón de Play que hay arriba a la izquierda, y se mostrará una ventana nueva con la previsualización de vuestra interfaz. Además, ésta previsualización será interactuable en la medida que Cocos Studio lo permita, por ejemplo, haciendo scroll lateral, o cambiando el estado de los botones cuando lo pulsamos. Obviamente, los elementos gráficos no están ligados a ningún código fuente, por lo que no ejecutarán ninguna acción.

level_select

 

Una vez tengáis lista vuestra interfaz y vuestras animaciones, únicamente tenéis que Publicar vuestro proyecto, lo que os generará una carpeta con los recursos que podréis utilizar en vuestro juego.

¡Así de fácil es crear un selector de niveles para nuestros juegos! A partir de aquí sólo queda personalizarlo con nuestras imágenes y lanzarlo al mercado. Os dejamos algunos consejos de uso que nos hemos ido topando a lo largo de nuestra andadura por Cocos Studio.

Consejos y tips sobre Cocos Studio

Tip #1

Para cargar un fichero .csb en vuestra escena de cocos únicamente tenéis que escribir las siguientes líneas (aseguraos de incluir “cocostudio/CocosStudio.h” en vuestra cabecera):
Captura de pantalla 2015-01-16 a las 12.14.56

 

Tip #2

Para obtener una referencia a los objetos creados en Cocos Studio, tenéis que asignarles un nombre y buscarlo en el código. Podéis obtener tanto objetos tipo Node como Sprite, Text, etc…
Captura de pantalla 2015-01-16 a las 12.19.26

 

Tip #3

Al asignar la posición a los elementos en Cocos Studio, es importante que lo hagáis en “% relativo al padre”, ya que así os aseguraréis que se muestre correctamente en todas las pantallas móviles.

  • Captura de pantalla 2015-01-16 a las 12.25.27

 

 

 

 

 

 

 

 

Cocos Studio acaba de nacer como herramienta estrella para la creación de interfaces en Cocos2dx, así que esperaremos una gran evolución del mismo modo que el game engine, por lo que nos esperan grandes funcionalidades que explorar en un futuro no muy lejano.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>