Construct 5 - VideoGame VideoJuegos Desarrollo aplicaciones

1. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
Informe Técnico
Principales Elementos de Construct2
LABORATORIO OPENSYSTEM
Mauricio Westemeyer
David Biava
Bastián Barrientos
Víctor Aravena
varavena@ufro.cl
27 de Diciembre del 2012
Resumen
El presente reporte consiste en la descripción, aprendizaje, análisis y conclusiones del uso de la
herramienta para crear aplicaciones y video juegos Construct2.
Introducción
Los video juegos casuales, día a día toman más terreno a la hora de generar ingresos, personas
de todo el mundo pasan muchas de sus horas de ocio en portales dedicados a video juegos en
la red, esto genera un nicho importante de desarrollo orientado a satisfacer esta demanda de
entretención.
En este informe se abordará una de estas herramienta para el desarrollo de video juegos
llamada Contruct2 y hecha por la empresa Scirra.
Construct 2 es un programa desarrollado en conjunción de JavaScript y html5, es de código
cerrado y se utiliza para crear distintos tipo de juegos y aplicaciones, tiene una interfaz
amigable, y no es necesario conocimientos en programación para su utilización.
Al crear juegos en html5 estos se pueden ejecutar en cualquier navegador web que lo soporte,
lo que amplía el horizonte de los juegos creados a distintos sistemas operativos, teléfonos
móviles y tablets.
1

2. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2-Funcionalidades
2.1.0 Estructura de un proyecto.
Inferimos de la imagen 1
1. La primera pantalla a modo menú principal, te permite crear un nuevo proyecto o abrir
uno ya existente entre otras utilidades intuitivas.
2. Esto contiene un árbol de todos los elementos de nuestro proyecto a modo resumen.
3. Se abre esta pantalla cuando se inicia el programa, en esta se puede acceder
rápidamente a algunas utilidades como crear un proyecto o abrir uno existente, acceder
a ejemplos o a links útiles.
4. A medida avanzamos en nuestro proyecto podemos “hacerlo correr” e ir viendo de
manera instantánea como va evolucionando.
2

3. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2.1.1 La barra de herramientas.
La pestaña home tiene las funcionalidades básicas comunes, como deshacer, cortar, pegar.
La sección View le permite visualizar su proyecto, ocultar barras, elegir temas entre
otras opciones.
La sección de eventos solo se aplica a la vista “eventos” de nuestro proyecto y sirve para
añadir de manera rápida eventos, condiciones, acciones, grupos de eventos, variables globales,
etc.
3

4. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2.1.2 Layers
Aquí se gestionan los objetos, los menús en pantalla, todo tipo de textos, sprites, fondos y otros
diseños que irán en nuestro proyecto. Estos constan de múltiples capas, para organizar los
objetos en el proyecto y para mejorar el trabajo.
2.1.3 Event Sheets
Aquí se define la lógica del juego, se define qué pasará si ocurre cierta situación. Es la
alternativa a la programación.
Como podemos ver en el evento de la figura anterior, si el objeto Bala colisiona con el objeto
Monstruo entonces; Monstruo y Bala son destruidos.
4

5. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2.1.4 Object Types
Definen las propiedades de un objeto, por ejemplo un Sprite llamado “monstruo”, tiene
cierto diseño, animación, imágenes y comportamientos y este podrá ser reproducido y utilizado
a lo largo del juego.
2.1.5 Object instances
Son los objetos “reales” que se ven en un juego por ejemplo 2 objetos tipo “monstruo”
que acechan al protagonista.
5

6. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2.1.6 Barra de propiedades, Vista de diseño
Barra de propiedades: Muestra una lista de todos los valores que se pueden cambiar para un
elemento seleccionado. En la imagen que se presenta a continuación corresponde al área de
indicada con el número 1.
Vista de diseño: Es un diseñador visual para los objetos. Permite crear un diseño preestablecido
de objetos también los niveles de juego, el menú o la pantalla de título. En otras herramientas,
los diseños pueden ser referidos como escenas, salas, marcos o etapas. . En la imagen que se
presenta a continuación corresponde al área de indicada con el número 2.
6

7. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2.1.7 Editor de imágenes
Se utiliza para editar imágenes y crear animaciones.
2.1.8 Behavior reference
Esto nos permite ver las opciones de conductas o comportamientos de un objeto, los
comportamientos se agregan o quitan a través de la barra de propiedades.
7

8. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2.1.9 System object
Proporciona funciones para acceder al motor del juego, y a los servicios que son útiles
para la mayoría de los juegos. Como comparar valores, variables globales, generar un loop,
comparar el tiempo entre otras cosas.
El evento de la imagen 12 indica que, cada 3 segundos el Sistema creará un monstruo.
2.2.0 Sonido y música
Los sonidos y la música deben ingresarse en las carpetas correspondientes, los sonidos
se caracterizan por ser de corta duración como disparos, colisiones, etc. Mientras que la música
es una pista que acompañara etapas del juego. Es importante organizar estos archivos
correctamente, por funcionalidad, la música solo se carga una sola vez, mientras que los
sonidos se van cargando cada vez que se utilizan.
Tanto la música como el sonido deben estar en formato Ogg Vorbis (.ogg) y MPG-4 ACC (.m4a)
esto para que funcione en todos los navegadores con HTML5.
2.2.1 Unidades
Valores
Posición
Tamaño
Ángulos
Tiempos
Velocidad
Aceleración
Medidas
Pixeles
Pixeles
Grados
Segundos
Pixeles * Segundos
Pixeles * Segundos^2
8

9. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2.2.2 Sobre las tecnologías utilizadas
HTML5: En particular la etiqueta <canvas> que crea una superficie rectangular en una página
web donde cualquier imagen o contenido puede ser dibujado.
JavaScript: Que es el lenguaje estándar para la web.
2.2.3 Sobre el soporte de juegos
Tipo de juegos que se pueden crear:
1. De plataforma,
2. Arcade,
3. Juegos de carrera,
4. Juegos casuales.
2.2.4 Sobre la Versión
La versión se encuentra en estado beta. Pero con actualizaciones periódicas y
recibiendo aportes de la comunidad en foros y redes sociales.
2.2.5 Sobre las licencias
Hay tres tipos de licencias, Free edición, Estándar edición, Business Edición. Los detalles
se pueden ver en la página de los autores.
2.2.6 Sobre la integridad con Smartphone
Se utiliza el servicio en línea de Phonegap para la creación de aplicaciones, esto permite
exportar a iOS, Android, Symbian, BlackBerry, las creaciones en contruct2.
Esta característica está en modo de prueba y a la fecha aún presenta inconvenientes,
sean estos de sonido, integridad con el movimiento del Smartphone u otros por resolver.
9

10. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
2.2.7 Exportar el proyecto
Existen varias opciones para exportar.
1. HTML5: Esto permite que puedas dejar tu juego, en tu página web, que puedas
“colgarlo” a un servidor, o dejarlo en tu dropbox público, para que otros puedan jugarlo.
2. Chrome Web Store: Si quieres “vender” tu juego atreves de Chrome Web Store.
3. Phonegap: Permite que tu proyecto pueda ser exportado a iOS, Android, Blackberry,
webOS, symbian.
4. Scirra Arcade: Es para dejar tu juego en la página web de scirra.
5. Kongregate: Es una página de juegos en Flash, pero que también permite algunos juegos
en HTML5, esta opción te permite configurar tu juego para esta página.
10

11. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
Sobre PhoneGap
Phonegap es un framework open source, lo cual nos permitirá exportar nuestros juegos a
múltiples plataformas incluyendo Android, Windows phone, entre otros. Para ello tendremos
que crearnos una cuenta de adobe.
En la página http://phonegap.com/ acudiremos al siguiente enlace.
Para luego
11

12. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
Registrarse usando email valido
Una vez registrados podremos utilizarlo para crear nuestros juegos móviles, para crear una
nueva aplicación utilizaremos la opción new App.
Luego seleccionamos la fuente esta puede ser desde un repositorio o bien desde un archivo, en
nuestro caso elegiremos desde archivo, debido a que para poder trabajar con phonegap, antes
debemos exportar nuestro juego como html5 y la carpeta resultante comprimirla en formato
zip, este archivo zip es el que subiremos a phonegap.
12

13. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
Una vez exportado nuestro juego tomara un breve periodo de tiempo para que quede
disponible para distintas plataformas, en el ejemplo las plataformas pintadas en rojo no están
disponibles, esto puede deberse a problemas con los nombres de archivo, hasta que sea
necesaria una key desarrollador en los casos de los productos Apple.
13

14. Centro de Estudios de Ingeniería de Software
LABORATORIO OPENSYSTEM
Conclusiones
Construct2 resulta ser una herramienta potente y fácil de utilizar a la hora de crear juegos
casuales, además estos juegos se pueden integrar a plataformas sociales como Facebook, o
incluso a Smartphone, esto último sí, con algunas falencias, pero el tema está en constante
evolución y recibe aportes de la comunidad en foros y Facebook lo que la hace confiable..
También mencionar que con la versión gratuita se pueden probar todas las utilidades lo que es
un plus a la hora de elegir un Framework para la creación de video juegos.
Bibliografía
http://www.scirra.com/
http://www.scirra.com/manual/1/construct-2
http://www.scirra.com/forum/
14