Inicio

A lo largo de este tutorial harás tu primer juego en HTML5. Vamos a crear el demo del juego 'Ghost Shooter'. Puedes probarlo aquí para saber a lo que estamos apuntando: un jugador que mira hacia donde está el puntero del ratón, se mueve con las teclas de flecha, y dispara a los monstruos con el botón izquierdo del ratón. Aprenderás todo lo que necesitas saber para hacer un juego simple - desde usar capas (layers) hasta el sistema de eventos!

Tutoriales Alternativos

Otra "Guía del principiantes" alternativa es: How to make a platform game, la cual apunta a los clásicos juegos de plataformas (Sonic, Mario) en vez de a un top-down shooter (juegos de disparos vistos desde arriba, como el viejo GTA 2). Puedes comenzar con cualquiera de los dos tutoriales, pero te recomendamos que completes ambos para conseguir una buena idea de cómo hacer los dos tipos de juegos!

También puedes ver Asteroid clone in less than 100 events por Kyatric que es un tutorial un poco más avanzado, pero también muy detallado.

Instalando Construct 2

Si aún no lo has hecho, puedes obtener una copia de la última versión de Construct 2 aquí. El editor Construct 2 es sólo para Windows, pero los juegos que hagas pueden ejecutarse también en otros dispositivos, como Mac, Linux o iPad. E incluso es portátil, así que puedes instalarlo en una memoria USB por ejemplo, y llevarlo con vos!

Comienzo

Una vez instalado el programa, inicia Construct 2. Haz clic en el botón "Archivo" (File) y selecciona "Nuevo" (New).

En el diálogo "Nuevo Proyecto" (New Project), no es necesario cambiar nada. Simplemente haz clic en "Crear proyecto" (Create Project). Construct 2 mantendrá todo el proyecto en un archivo ".capx". Ahora verás un plano (layout) vacío - que es la vista de diseño donde se pueden crear y colocar los objetos del juego. Piensa en el plano (layout) - como un nivel del juego o una pantalla de menú. En otras herramientas, recibe también los nombres de "habitación" (room), "escena" (scene) o "cuadro" (frame).

Insertando objetos

Fondo de Mosaicos (Tiles)

Lo primero que necesitamos es un fondo (Background) compuesto de un mosaico (Tile) que se repite. El objeto "Fondo de mosaicos" (Tiled Background) realiza esta función para nuestro juego. Para empezar, aquí tienes tu textura de fondo - haz clic derecho en él y guárdalo en alguna carpeta de tu ordenador:

Ahora, haz clic doble en un espacio cualquiera del "plano" (layout) para insertar un nuevo objeto. Más tarde, si estuviera lleno de objetos, también puedes hacer clic derecho y seleccionar "Insertar nuevo objeto" (Insert New Object). Una vez que aparece el cuadro de diálogo de "Insertar nuevo objeto", haz clic doble en el objeto "fondo de mosaicos" (Tiled background) para insertarlo.

Una cruz aparecerá para que puedas indicar dónde colocar el objeto. Haz clic en algún lugar cerca del centro del "plano"(layout). El editor de texturas (texture editor) se abre automáticamente, para que puedas ingresar la textura/imagen del mosaico (tile). Vamos a importar la imagen de mosaico que has guardado anteriormente. Haz clic en el icono de carpeta para cargar una textura desde el disco, selecciona la carpeta donde descargaste el archivo y selecciónalo.

Cierra el editor de texturas haciendo clic en la X en la parte superior derecha. Si se le solicita, haz "save"! Ahora verás a tu objeto de "fondo de mosaicos" en el plano (layout). Vamos a cambiar su tamaño para que lo cubra por completo. Asegúrate de que el objeto está seleccionado. En la "barra de propiedades" (Properties Bar) de la izquierda deben mostrase todos los ajustes para el objeto, incluyendo su tamaño y posición. Establece su posición en 0, 0 (la parte superior izquierda del plano, y su tamaño en 1280, 1024.

Examinemos nuestro trabajo. Mantén apretado "control" (Ctrl) y haz rodar la ruedita del ratón hacia abajo para alejar la vista (hacer un zoom out) o haz clic en Vista (View) -> Zoom Out un par de veces. También puedes mantener apretada la barra espaciadora o el botón del medio del ratón para hacer una panorámica. Tu fondo de mosaicos debería ahora cubrir todo el layout:

Presiona "Control" (Ctrl) + 0 ó haz click en "zoom to 100%" para regresar a una vista 1:1

(Si eres impaciente como yo, haz clic en el icono de "play/run" -el triángulo que apunta a la derecha- en la barra de título de la ventana - ¡y se abrirá una ventana de navegador mostrando el diseño de mosaicos!)