Instalando la librería

En esta parte del tutorial vamos a instalar un servidor web de prueba en Windows. Posteriormente vamos a descomprimir la librería en el directorio del servidor, y finalmente probaremos que todo está bien.

Por motivos de tiempo no tengo chance de incluir instrucciones para Linux u OSX. Pero si estás usando alguno de estos dos sistemas operativos, instalar un servidor de pruebas de Apache es muy sencillo y hay amplias instrucciones en otros lados.

Archivos a descargar

Para Windows vamos a emplear WampServer, el cual ya trae un ambiente de desarrollo web. Aparte del servidor web, trae también instalado PHP y el servidor de base de datos MySQL, pero para este tutorial no los usaremos. Descarga en la sección de Downloads la versión que corresponde a tu sistema operativo, 32-bit o 64-bit. La versión de Apache no importa mucho, pero tomemos la 2.2 para este tutorial.

Descarguemos también mientras tanto la versión 2.1.2-beta de cocos2d-html5, en http://cocos2d-x.googlecode.com/files/Cocos2d-html5-v2.1.2-beta.zip. Ten en cuenta que posteriores versiones de cocos2d pueden hacer cambios en el funcionamiento interno y en las funciones que vas a llamar. Para futuras versiones, debes estar dispuesto a actualizar el código que resulte de este tutorial para que se adapte a esa versión. Podrás conseguir versiones posteriores de cocos2d en http://www.cocos2d-x.org.

Instalando WampServer

Una vez hayas descargado el archivo, haz doble click sobre él, y sigue las instrucciones. Prácticamente todo es automático, e instalará las versiones de Apache, MySQL y PHP que pediste.

El directorio por defecto de instalación es c:\wamp\, y el directorio de contenidos es c:\wamp\www.

En la barra del reloj de tu sistema operativo verás el logo de WampServer. Si está en color rojo, es que los servicios están detenidos. Haz click izquierdo sobre el logo, y selecciona “Iniciar todos los servicios”. Si el menú no está en tu idioma, haz click derecho y selecciona Spanish en el menú Language.

Para probar que todo está bien, abre un navegador, y escribe http://localhost. Encontrarás una página de prueba que constatará que la instalación se hizo bien.

Instalando cocos2d-html5

La instalación de cocos2d es simplemente descomprimir los archivos del comprimido .ZIP.

En lo personal, yo encuentro tedioso trabajar sobre el directorio www. Prefiero descomprimir mis archivos en un lugar con más fácil acceso, por ejemplo, Mis Documentos, y así además recuerdo poder respaldar posteriormente el directorio.

Para este caso, WampServer permite crear fácilmente un alias para un directorio. De esta manera, yo puedo crear una dirección, digamos, http://localhost/a, y esta me va a llevar a un directorio que no necesariamente estará dentro de c:\wamp\www. Para esto, haz click izquierdo sobre el logo de WampServer, ve al menu Apache -> Directorios Alias -> Agregar un alias.

Una consola de DOS te pedirá que escribas primero el alias para el URL (yo uso una sola letra, a, b, c, para escribir menos, ya que es mi servidor de pruebas), y luego te pedirá que escribas la dirección del directorio. Con eso, ya habrás creado el alias.

Esta configuración permite también tener un alias por cada versión de cocos2d que tengas. Muy útil tener a mano fácilmente estos directorios cuando va pasando el tiempo y tienes que portear de una versión a otra.

Para fines de este tutorial, descomprime el directorio a donde te sea más cómodo, y vamos a crear un alias llamado “a” a ese directorio.

Probándolo todo

Probemos entrando al URL http://localhost/a. Si todo va bien encontrarás la página principal de la instalación. Aprovecha para probar las demos y juegos de ejemplo que vimos en la sección anterior, pero esta vez se estarán ejecutando desde tu máquina.

En particular, Test Cases te permitirá ver todas las posibilidades que actualmente tiene la librería. Al momento de escribir este tutorial, la librería todavía tiene un trecho que caminar para poder hacer todos los efectos que hace su homólogo en C++, pero la librería está en desarrollo activo, y seguirá teniendo nuevas cosas.

Software adicional

Para el tutorial emplearemos Notepad++ para editar el código, disponible en http://notepad-plus-plus.org/. Pero si ya tienes un editor preferido, úsalo sin ningún problema.

Para una futura sección del tutorial, empaquetaremos sprites en una sola imagen, por lo que necesitamos la herramienta ShoeBox, que es gratuita y servirá para lo que necesitamos. Vas a necesitar instalar Adobe AIR para utilizarlo.

Para la siguiente parte…

En la siguiente parte de este tutorial abriremos el Hello World y le daremos un vistazo por dentro para aprender los conceptos de cocos2d.