Gua paso a paso para el desarrollo

de aplicacin de Penales
FUNDACIN OMAR DENGO
03/04/2014

Introduccin

Esta gua paso a paso le guiara y explicara cmo desarrollar aplicaciones que funcionen
bajo el sistema operativo de Android, utilizando el software de Construct 2 como principal medio
de desarrollo (Entorno de Desarrollo Integrado (IDE)).
No hay que asustarse si nunca antes se ha programado o no se est familiarizado con el
mundo de la informtica y el desarrollo de aplicaciones para dispositivos mviles, ya que en esta
gua se pretende dar una explicacin detallada paso a paso de cmo desarrollar tu propia
aplicacin siguiendo los simples pasos y consejos que aqu se van a ir describiendo conforme se va
avanzando.

Contenido
Introduccin ........................................................................................................................................ 2
Aclaraciones del software utilizado .................................................................................................... 5
Requerimientos ................................................................................................................................... 6
Computadora: ............................................................................................................................. 6
Dispositivo mvil: ........................................................................................................................ 6
Construct 2: ................................................................................................................................. 6
Acceso a internet:........................................................................................................................ 6
Paquete de imgenes: ................................................................................................................. 6
Generalidades antes de iniciar ............................................................................................................ 7
Condiciones de programacin ........................................................................................................ 7
And (y): ............................................................................................................................................ 7
Or (o): .............................................................................................................................................. 7
Not (inverso): .................................................................................................................................. 7
Iniciando un nuevo proyecto .............................................................................................................. 8
Estructura del juego .......................................................................................................................... 10
Creando los backgrounds de los Layouts .......................................................................................... 11
Crear la precarga ............................................................................................................................... 12
Crear men........................................................................................................................................ 15
Seleccin de equipos ......................................................................................................................... 18
Seleccin de Portero ......................................................................................................................... 21
Pantalla de Juego .............................................................................................................................. 23
Para mostrar el escudo del equipo realizamos lo siguiente: ........................................................ 27
Para los tiros vamos a realizar lo siguiente: .................................................................................. 28
Mostrar el portero en el marco: ................................................................................................... 29
Lanzada del portero: ..................................................................................................................... 30
Gol: ................................................................................................................................................ 32
Eventos de los Fallos: .................................................................................................................... 33
Reiniciar el layout para volver a tirar ............................................................................................ 34
Marcador ....................................................................................................................................... 35
Guardar Puntuaciones:.................................................................................................................. 36
Eventos repetitivos y que se ejecutan al iniciar el juego: ............................................................. 37
3

Mostrando pantalla de Gano o Perdi .......................................................................................... 38

Instrucciones ..................................................................................................................................... 40
Gan .................................................................................................................................................. 41
Perdi ................................................................................................................................................ 43
Salir del juego .................................................................................................................................... 44
Pruebas finales de funcionamiento................................................................................................... 45
Compilacin de la aplicacin ............................................................................................................. 45
Conclusiones ..................................................................................................................................... 50

Aclaraciones del software utilizado

Antes de iniciar este tutorial para
crear una aplicacin de Moda
utilizando el software Construct2, es
importante tomar en cuenta que la
versin utilizada para el desarrollo de
esta gua fue la versin 163 y puede
diferir ligeramente en la actual
versin que usted este utilizando en
este momento.
Hay que destacar que este software
no est diseado para crear
aplicaciones, fue creado para el
desarrollo de juegos, sin embargo
esto no es un impedimento para
crear la aplicacin ac planteada.

Requerimientos
Los requerimientos necesarios para seguir esta gua de paso a paso para el desarrollo de
aplicaciones son los siguientes:
Computadora: Es necesario contar con una computadora de escritorio, ya que es aqu
donde se va a crear y desarrollar la totalidad de la aplicacin.
Dispositivo mvil: Es fundamental contar con un dispositivo mvil que ejecute alguna
versin del sistema operativo Android, puede ser un telfono celular o tambin puede ser una
tableta, adems se recomienda tener una versin de Android mayor a la 2.3+ por motivos de
compatibilidad.
Construct 2: Tener instalado el software de Construct 2, preferiblemente la ltima
versin el cual se puede descargar de gratuitamente desde la pgina www.scirra.com y que al
instalar pedir que actualice los controladores de su tarjeta de video o grficos integrados del
procesador de su computadora para un mejor funcionamiento del mismo. Construct 2 es un
poderoso e innovador diseador de HTML5, creador de aplicaciones diseadas especficamente
para los juegos 2D. Permite a cualquiera crear juegos sin necesidad de saber programar porque
Construct 2 no requiere codificacin, ya se utiliza un mtodo orientado a eventos muy fcil e
intuitivo de entender. Con la utilizacin de este software, se va a crear la mayor parte de las
aplicaciones de esta gua. Nota: cuando en esta gua se menciona la palabra C2 se hace referencia
a las iniciales de Construct 2.
Acceso a internet: Para el desarrollo de la aplicacin es necesario contar con acceso a
internet para compilar los archivos generados con el Construct 2, el sitio web que se va a utilizar es
cocoonjsservice.ludei.com el cual se encarga de generar los archivos con extensin .apk que sern
los que se instalen en el dispositivo mvil que ejecute Android.
Paquete de imgenes: Para seguir esta gua es necesario contar con el paquete de
imgenes el cual es proporcionado junto con la gua y contiene todos los archivos que se van a
utilizar para montar la aplicacin como son las imgenes, iconos, fondos, sonidos, etc

Generalidades antes de iniciar

Antes de iniciar es necesario tener en claro unas generalidades que aunque no se vayan a tocar
directamente en esta gua es necesario comprenderlas para poder entender mejor el
funcionamiento de la aplicacin y la forma en cmo se va a construir.

Condiciones de programacin
Gracias a la utilizacin del software de Construct 2, no es necesario escribir ni una sola lnea de
programacin ya que este funciona de una manera que es orientada a eventos, pero es necesario
aclarar que son las condiciones de programacin antes de iniciar con el desarrollo de la aplicacin.

And (y): Es una condicin de programacin que se va a ejecutar siempre y cuando se cumplan
todas las condiciones.

Or (o): Es una condicin de programacin que se va a ejecutar siempre y cuando una de las
condiciones se cumpla.

Not (inverso): Es una condicin de programacin que va a invertir el estado de una sentencia.

No preocupis si no entiendes muy bien lo anterior ya que esto no se va a utilizar directamente en

el desarrollo de la aplicacin pero si es importante saber y tener una idea de cmo funciona para
entender mejor la aplicacin, posteriormente se vera de una forma grfica la utilizacin de las
anteriores sentencias.

Iniciando un nuevo proyecto

En este tutorial ya hemos preparado con antelacin las imgenes y sonidos que utilizaremos,
tambin damos por hecho que has ledo el documento Visin General de Construct 2 donde se
explica cada parte del software.
Pues bien, empezamos, vamos a File -> New, seleccionamos la opcin New CocoonJS project

Pantalla de creacin de nuevo proyecto

*Seleccionamos esta opcin para poder exportar los juegos utilizando la pgina web ludei.com
para poder compilar el juego con una mayor optimizacin y simplificar los pasos para exportar
nuestros juegos.
Ahora configuramos nuestro proyecto, cambiamos los tamaos y le indicamos la orientacin en el
dispositivo.

Vamos a explicar las propiedades ms importantes:

Name: El nombre del proyecto.

Version: Versin de la revisin del proyecto.
Description: Descripcin rpida del contenido del
proyecto.
ID: Es el identificador del paquete, esto no es
necesario ya que ms adelante veremos a la hora de
exportar.
Author: Autor del proyecto.
Email: correo electrnico.
Website: Sitio web del autor.
First layout: El layout inicial.
Use loader layout: Lo establecemos en Yes ya que
lo necesitamos para precargar los sonidos que ya
veremos ms adelante.
Windows Size: Dimensiones del proyecto, vamos a
establecerlos con los siguientes parmetros.
o Width (Ancho): 720.
o Height (Alto): 1280.
Orientations: Orientacin, lo establecemos en
Portrait (Vertical).
Full Screen in browser: Nos adapta el proyecto al
Propiedades generales del proyecto
tamao de la ventana, es importante dejarlo en
Scale Outer ya que el complemento que
utilizamos para exportar el proyecto final lo requiere as.
Physics Engine: Motor de fsica, es importante cambiarlo a CocoonJS native ya que es el
motor que nos va a ayudar a optimizar los movimientos en los distintos dispositivos
mviles ya que el renderizado realizado por los navegadores de los celulares dan muchos
problemas al no estar estandarizado en su mayora.

Estructura del juego

Procedemos a crear varios layouts con sus respectivas hojas de eventos que llamaremos:

PreCarga
Menu
Instrucciones
Puntuacin
SeleccionEquipo
SeleccionPortero
Juego
Gano
Perdio

Las dimensiones de los layouts deben ser:

Ancho (Width):1280.
Alto (Height): 1280.
Un consejo para poder ubicar fcilmente a cual Layout pertenece cada hoja de eventos es
renombrarlas con el nombre del layout; por ejemplo la hoja de eventos del layout Precarga se
llama Event Sheet 1, cambiaremos el nombre a Eventos Precarga, repetimos este paso con
cada una de las hojas de eventos.
Importamos las imgenes a nuestro proyecto, para ello podemos realizarlo de dos maneras:
1. Arrastrarlas hasta el layout.
2. Creando un objeto nuevo llamado Sprite o Tiled Background.
La diferencia entre el Sprite y el Tiled Background es la cantidad de memoria que consume, en el
caso del Tiled Background consume menos al ser imgenes estticas que al estirar mantienen su
tamao pero se repite, el Sprite podemos crear animaciones y tener mltiples imgenes en una
sola adems de modificar el tamao a conveniencia, esto lo veremos ms adelante.
Es por esto que sugerimos utilizar Tiled Backgrounds para los fondos.
Para los sonidos y msica hay que posicionarnos en la carpeta Sounds o Music, le damos click
derecho, luego Import Sounds o Import Music. Observamos que una vez que importamos los
archivos de audio nos los convierte a 2 formatos adicionales, ogg y m4a, esto es as para que sea
compatible con la mayora de los dispositivos.

10

Creando los backgrounds de los Layouts

Pulsamos sobre la pestaa Layers, luego en el cono de la cruz (+) para agregar una nueva capa.
Ahora nos toca establecer la imagen de fondo en este caso creamos un nuevo objeto (dando click
derecho) del tipo Tiled Background, luego presionamos sobre el cono de la carpeta, buscamos la
imagen presionamos el botn aceptar, luego cerramos la ventana.

Pasos para agregar objetos al proyecto

Seleccionamos la capa y le damos el tamao y ubicacin en el cuadro de propiedades al lado

izquierdo.
Realizamos el mismo procedimiento en cada uno de los distintos Layouts para cargar los fondos
de cada pantalla.

11

Crear la precarga
La precarga es importante ya que evita que se den errores en el juego.
Seleccionamos el Layout Precarga.
Insertamos un nuevo objeto tipo Sprite buscamos la imagen con el texto Cargando, lo
renombramos a TituloCargando.

Acciones para agregar un Behavior.

A este objeto le agregamos un Behavior tipo flash.

12

Ahora vamos a la hoja de eventos de Precarga.

Acciones de la precarga al iniciar el layout.

Bien, ya que la tenemos ubicada procedemos a agregar un evento System -> On layout start.
Dentro de este evento agregamos las siguientes acciones:

Agregamos la accin Audio -> Preload.

-Seleccionamos el audio a realizar la precarga, hacemos esto con todos los audios.
Al objeto TituloCargando agregamos la accin Flash con la siguiente configuracin:
o On time: 1
o Off time: 0.6.
o Duration: 30seg.

Ventana de la accin Flash

Esto va a hacer que el texto Cargando aparezca y desaparezca mientras se realiza la carga del
juego.

13

Ahora necesitamos establecer las puntuaciones, para esto utilizamos el objeto WebStorage ->
Local Key exists.

Acciones para establecer los valores por defecto de las puntuaciones.

Como vemos en la imagen creamos 4 eventos solamente que con distintos variables (Alemania,
Brasil, CR, Espaa). Para invertir el evento le damos click derecho sobre el mismo y pulsamos
Invert, ahora nos mostrara el evento con una X roja. Esto significa, por ejemplo con Alemania:
Si no existe la variable local Alemania, crearla y asignarle el valor 0.
Por ltimo agregamos otro evento, System -> On loader layout complete.

Agregamos una accin wait y seteamos el valor en 3. Esto nos da una pausa antes de
continuar hacia el layout Men.
Agregamos la accin System -> Go to layout
Seleccionamos Menu

Con esto logramos hacer que despus de cargar los audios automticamente nos enve al layout
Men.
Una vez realizado esto nos devolvemos a las propiedades del proyecto y cambiamos los siguientes
parmetros:

Ventana de propiedades del proyecto.

14

Al final la hoja de enventos de la precarga nos debe quedar de esta manera:

Lista de eventos de precarga.

Crear men
Una vez puesto el background en los layouts vamos a proceder a crear el men principal y sus
submens.
Pulsamos sobre la pestaa Layers que ahora la llamaremos capas.
Las capas nos sirven para ubicar los elementos de una manera ordenada, por ejemplo si ocupamos
colocar elementos uno sobre otro pero necesitamos solamente mover uno de los dos si los
mantenemos en la misma capa posiblemente se muevan los dos pero si los separamos en distintas
capas, basta con bloquear pulsando el candado de la capa que no queremos que se mueva.

15

Renombramos la capa layer 0 a fondo para una fcil identificacin, adems pulsamos sobre el
candado y la bloqueamos para evitar moverla cuando insertemos ms objetos.
Ahora creamos dos nuevas capas, las llamaremos botones y salir.

Ventana de capas.
Para crear capas pulsamos sobre el botn de +, para borrarlas pulsamos sobre el basurero.
Es importante tambin renombrarlas para que sea ms fcil ubicar los elementos.
Insertamos dentro de la capa botones un nuevo objeto tipo Sprite, realizamos el mismo
procedimiento de cargar imgenes (damos click sobre la carpeta y buscamos la imagen de dicha
opcin). Es importante cambiarle el nombre al Sprite por el nombre de la imagen. Repetimos
este paso cada vez que necesitemos insertar una nueva imagen al proyecto.

16

Layout del men.

Si ya hemos importado todas las imgenes y las hemos ubicado en su respectiva posicin vamos a
comenzar a darle vida a nuestro juego, para eso utilizaremos los Event Sheets donde le
programamos las funcionalidades a nuestro juego.
Seleccionamos la hoja de eventos correspondiente al men.
Agregamos la opcin System -> On start Layout. Ahora agregamos dos acciones dentro de este
evento:

Stop All Audio

Play Audio -> Seleccionamos la msica de fondo en este caso se llama Party, en la opcin
loop mode ponemos looping para repetir la cancin.

Agregamos adems los eventos touch para cada uno de los botones.

Agregamos la accin System -> Go to layout.

17

Acciones para ir a los distintos layouts.

Ejemplo: Para cuando toca el objeto botonJugar lo enviar a seleccionar equipo
Repetimos el procedimiento como en la imagen para asignar la accin correspondiente.

Seleccin de equipos
Creamos una nueva capa y la llamamos botones, bloqueamos la del fondo para no moverla.
Ahora en esta capa, utilizando la misma lgica para los botones, crearemos los objetos que
ocupamos (escudos, uniformes, botn de atrs y seleccionar). En la hoja de eventos creamos
eventos touch como los del men pero necesitaremos agregarles ms opciones.

18

Pantalla Seleccin de Equipo.

Ubicamos los objetos en las posiciones basados en la imagen anterior.
Nos posicionamos sobre el escudo de Brasil, bajamos la opacidad(opacity) a 40, como vern se
volvi semitransparente, este efecto lo utilizaremos para los dems escudos, salvo Alemania que
va a quedar con opacidad (opacity) 100 para dejarlo seleccionado por defecto.
Nos vamos a la hoja de eventos de la seleccin de equipos, realizamos los siguientes pasos:

Men contextual de las hojas de eventos, la opcin resaltada nos permite agregar variables
globales.
19

Pulsamos click derecho y agregamos una variable global que se llamara equipo y le
establecemos el valor 1, as asignamos por defecto el equipo seleccionado (1 = Alemania,
2= Brasil, 3 = Costa Rica, 4 = Espaa).
Agregamos eventos Touch -> on touch object para cada uno de los escudos.
o En estos eventos establecemos las siguientes acciones:
Audio: Play Click, not looping.
Establecemos la opacidad del escudo seleccionado en 100.
Establecemos la opacidad de los dems escudos en 40.
Establecemos el valor de la variable global Equipo segn el equipo
seleccionado como lo mencionamos anteriormente.
Ahora nos devolvemos al layout del equipo y nos posicionamos sobre cada
uno de los jugadores, ac nos tenemos que fijar en la posicin de cada
uno, si se fijan en la imagen anterior, el jugador de Alemania ya est
ubicado en la posicin correcta, esta posicin se la debemos dar a los
otros jugadores cada vez que los seleccionamos, mientras a los que no
estn seleccionados los debemos sacar del layout para que no se vean en
la escena.

Pantalla Seleccin de Equipo.

Lo que se encuentra encerrado en el crculo es la posicin que le debemos dar a los jugadores
cuando se toque la bandera correspondiente para centrarlo en la pantalla.

20

Eventos que se ejecutan al seleccionar el escudo de Alemania.

Eventos que se ejecutan al tocar el escudo de Brasil.

Solamente vamos a dar el ejemplo con Brasil y Alemania ya que tambin las mismas acciones se
repiten con el resto de pases.

Seleccin de Portero
Igual que en paso anterior creamos los objetos, seteamos el valor de opacidad a 40 para los
porteros.
Creamos una variable global llamada portero en la hoja de eventos correspondiente con valor
por defecto 1 (1 = Hombre, 2 = Mujer).
Utilizamos los mismos pasos del layout de seleccin de equipo.

21

Layout de seleccin de equipo.

La hoja de eventos quedara as:

Eventos seleccin de equipos.

Como podrn notar segn el portero que seleccionamos afecta al otro bajando la opacidad y
estableciendo la variable global en 1 o 2 segn corresponda, adems habilita el botn jugar para
poder pasar a la pantalla de juego.
22

Pantalla de Juego

Postes

PisoMarco
MayaMarco

Baln Pequeo
Layout de Juego.
Primeramente insertamos todos los objetos necesarios (Porteros, marcadores, balones, Texto de
Fallo y Gol, Equipos).
Asignamos el efecto Grayscale igual a 100 a las capas Botones y Fondo.
Ahora creamos una nueva capa llamada Postes, en esta capa creamos un nuevo Sprite, como
ven en la imagen de arriba los pintamos de color amarillo para poderlos ubicar, solamente
creamos un objeto y luego lo copiamos y rotamos para ubicarlo sobre los postes. Agregamos un
Behaviors (comportamiento) a este objeto tipo Physics, establecemos la opcin Inamovible
en Yes y la opcin Visible en Invisible. Agregamos otro behavior tipo Solid.
Agregamos otro Sprite lo llamamos PisoMarco, a este le tenemos que agregar el behavior Solid
solo que en la opcin Initial State la cambiamos a Disabled.
Creamos tambin otro Sprite y lo colocamos dentro del marco, este objeto ser el que identifique
cuando el baln choque con l se marcar el gol. Este sprite es el que vemos de color gris en la
imagen.
Bien, ahora colocamos los balones si notan en la imagen hay un baln ms pequeo fuera de la
escena, este baln es el que se va a mostrar cuando se lance el disparo. Este baln tiene que ser
un objeto distinto a los 3 balones que se van a mostrar en pantalla.

23

Los 3 balones que se encuentran en el centro son un mismo Sprite, solo que estn ubicados con un
ngulo distinto.

Balones Centrales que detonan los tiros.

Al baln pequeo hay que asignarle un behavior tipo solid y bullet con los siguientes
valores:

Ventana de propiedades de los Behaviors.

24

Creamos la animacin del baln dando doble click sobre el mismo, en esta imagen ya hemos
realizado los pasos:

Rotar imagen

Duplica la imagen

Ventana de edicin de Sprites.

Para agregar un frame le damos click derecho en la ventana Animation frames, la forma ms
sencilla es darle click derecho sobre el frame 0, luego en duplicar. Una vez duplicado nada ms
pulsamos sobre el cono de rotar, aplicamos las veces que creamos necesario.
Tambin debemos crear el sprite con las animaciones de las lanzadas del portero que debemos
colocar en una capa distinta a la capa de fondo, adems hay que agregarle el behavior solid:

25

Puntos de origen
Click derecho en
esta ventana para
agregar una
animacin

Polgono de colisin

Se arrastran los puntos

rojos para modificar el
polgono de colisin

Ventana de edicin del portero.

Creamos varias animaciones como se muestra en la imagen, click derecho en la ventana
animations luego pulsamos add animation. Para cada una cargamos las imgenes que
tenemos guardadas de las lanzadas.

26

Como vemos en las imgenes anteriores del portero, hay una figura azul rodeado de puntos rojos,
este cuadro se llama polgono de colisin y nos determina en qu punto de la figura puede
colisionar con otro objeto, en otras palabras nos indica en que partes del cuerpo del portero
puede parar el baln.
Tambin hay que tomar en cuenta los puntos de origen de las imgenes, ya que de este punto se
referencia la posicin en pantalla, en este ejemplo nosotros tomamos los puntos de origen desde
el centro de la figura, ac un ejemplo:

Repetimos este paso con la portera.

Ahora nos vamos a la hoja de eventos del juego, creamos las siguientes variables globales:

Variables globales utilizadas en el juego.

Para mostrar el escudo del equipo realizamos lo siguiente:

Evento para mostrar el escudo segn el equipo seleccionado.

Utilizamos la funcin de comparar valor de una variable, segn se estableci a la hora de escoger
el equipo as nos va a mostrar la bandera.

27

Para los tiros vamos a realizar lo siguiente:

Acciones que se ejecutarn para realizar los tiros.

Vamos a explicar esto:

Primero creamos el evento On touched y seleccionamos el BotonBalon.

o Creamos una accin Audio->Play y seleccionamos el sonido Chutando not
looping.
o Creamos un sub-evento comparando la variable Estado que tiene que ser igual a
0, dentro de este evento creamos las siguientes acciones:
Asignamos el valor a la variable Estado a 1 para evitar que se lancen ms
penales sin no se han completado las acciones que nos indican si es o no
gol.
Creamos una accin tipo Spawn utilizando el BotonBalon, asignamos los
valores Layer = 1, Image point = 1, esto quiere decir que cuando
pulsamos el BotonBalon, nos va crear el objeto Balon, que se basa en el
ngulo en el que los establecimos previamente.
Agregamos la accin al objeto Balon -> Set Animation Speed = 10,
esto hace que se reproduzca el movimiento del baln a 10 fps.
Ahora asignamos el valor de la variable global LanzadaDePortero
utilizando la funcin de sistema int y random:

El int convierte el valor que genera el random en un nmero entero, el

28

random genera un nmero aleatorio entre 1 y 3, pero lo ejecuta 99 veces

para evitar que sea predecible.
Por ltimo creamos un sub-evento utilizando System -> for que se repita 24
veces para repetir la accin
Dentro de este evento creamos una accin Wait con una duracin de
0.3.

Por ltimo le cambiamos el tamao al baln utilizando la funcin Set Size,

asignamos estos valores:

Esto har que el balon se haga ms pequeo cuando se acerque a la

portera.

Mostrar el portero en el marco:

Acciones para mostrar el portero seleccionado.

Creamos un evento System->On start of layout, luego un sub-evento comprobando la variable
Portero, luego hay que crear las acciones que se encargaran de mover y colocar el portero en el
centro del marco. Esto lo hacemos creando la accin utilizando el PorteroHombre o
PorteroMujer en su respectiva posicin.
29

Lanzada del portero:

Acciones que realizan las lanzadas del portero.

Estos mismos parmetros los utilizaremos para el portero mujer, cambiamos el objeto
PorteroHombre por PorteroMujer, tambin la variable global Portero por 2.
Bien, entendido esto vamos a explicar slo los eventos / acciones del PorteroHombre.
Como podrn observar, los eventos son comparaciones de la variable LanzadaDePortero que se
establecen anteriormente cuando explicamos los eventos del tiro (1-Izquierda, 2-Centro, 3Derecha).
Las acciones que crearemos para el evento lanzada izquierda (LanzadaDePortero = 1) son:

30

Agregamos una accin de objeto PorteroHombre, buscamos la opcin Set Animation y

escribimos Izquierda.

SombraLanzadaPortero: Utilizamos el Set Position, utilizamos la posicin del eje

horizontal del portero (X) y le restamos 100px para que se ajuste al vuelo del portero, al
eje vertical (y) lo colocamos en 675:

Hacemos que desaparezca sombraPortero que es la que se muestra al inicio en el

centro.
Creamos un Wait de 0.4 segundos para simular cuando el portero toque el suelo.
Cambiamos la animacin de PorteroHombre y colocamos la animacin en
izquierdaAbajo.
Asignamos la posicin PorteroHombre con Set Position -> X = 150 Y = 635.
Por ltimo establecemos la variable global LanzadaPortero en 0 para que el portero
vuelva a su posicin original.

Como observarn en la imagen de arriba, se hace lo mismo para la derecha, solo que cambiando
los parmetros.
Lo mismo aplica para el portero mujer.

31

Gol:

Acciones para determinar que el tiro result en gol.

Para que se marque el gol el objeto baln debe colisionar con el objeto MayaMarco y la variable
gol debe estar en 0, esto por si el portero la detiene no efectuara dicho evento.
Agregamos las acciones:

Audio -> Play seleccionamos el sonido de gol, not looping.

PisoMarco: Set-> Solid: Enable. Esto para que el baln se mantenga dentro del marco.
Agregamos la accin al baln pequeo Set bullet gravity igual a 1000.
Agregamos la accin al baln pequeo Set bullet acceleration igual a -500.
o Los dos puntos anteriores hacen que el baln se mantenga dentro del marco y
rebote.
Enviamos el baln al fondo de la capa con la accin Move to bottom of layer.
Deshabilitamos las colisiones con los porteros para evitar que nos marque como fallo
mientras el baln se encuentra dentro del marco.
Habilitamos la sombra del baln.
Movemos el ttulo de gol al centro de la pantalla.
Les sumamos 1 a las variables ContadorDeGoles y ContadorDetiros.
Aumentamos en 10 la variable Puntuacin.
Asignamos el valor del Gol igual a 1.

32

Eventos de los Fallos:

Acciones para determinar que el portero detuvo el tiro.

Como indicamos anteriormente para que no haya gol el baln debe pegar en el portero, para ello
utilizamos el evento On Collission with, para crear un or damos click derecho sobre el evento y
seleccionamos Make or block. Este paso lo debemos realizar antes de poder agregar la otra
condicin.
Agregamos las siguientes acciones:

Agregamos una accin Audio->Play seleccionamos el sonido fallo not looping.

Movemos el ttulo de fallo al centro de la pantalla.
Al Baln asignamos la aceleracin en -500 para baje la velocidad.
Sumamos 1 a la variable ContadorDeTiros.
Establecemos la variable Gol en 2 para indicar que fall.

Agregamos un sub-evento que se repita 20 veces, esto nos va a dar el efecto de que el baln crece
al acercarse a la pantalla.

Agregamos la accin wait en 0.1.

Le damos tamao al baln utilizando la accin Set Size, utilizando el tamao del baln le
sumamos 2px.

33

Reiniciar el layout para volver a tirar

Acciones para reiniciar el layout

Para poder efectuar otro tiro es necesario reubicar los elementos y algunas variables ponerlas por
defecto, para esto vamos a reiniciar el layout.
Para esto necesitamos asignarle el behavior llamado timer al objeto BotonBalon, una vez
hecho vamos a realizar la programacin de la siguiente manera:

Agregamos el evento Touch sobre el objeto BotonBalon, luego le asignamos la accin

[BotonBalon -> Start Timer] le asignamos un nombre a este timer, en este caso lo
llamaremos tiro.
Agregamos otro evento utilizando el objeto BotonBalon -> On Timer, en el campo de
nombre escribimos el que le pusimos anteriormente, en este caso es tiro. Ahora
asignamos estas acciones:
o Asignamos el valor de las variables globales Estado, LanzadaPortero y Gol en
0.
Para poder agregar otra condicin, pulsamos click derecho sobre este bloque y lo
convertimos en un -or- pulsamos click derecho sobre el mismo y pulsamos sobre Make
or block.
Agregamos un par de condiciones tipo Touch a los objetos TituloGol y TituloFallo.

Acciones para volver un bloque a Or.

34

Marcador

Acciones para mostrar el marcador

35

Anteriormente hablamos de la variable Gol ac es donde vemos su funcionamiento.

Estos eventos son comparaciones de variables, por ejemplo el primero nos indica si el
ContadorDeTiros es igual a 1 y la variable Gol es igual a 2, entonces establecemos que la variable
tiro1 es igual a 2 por consiguiente fall el tiro.
Vemos ms abajo si tiro1 es igual a 1 entonces movemos el objeto MarcadorRojo1 a la
posicin del primer tiro.

Guardar Puntuaciones:

Acciones para salvar las puntuaciones

Para guardar las puntuaciones vamos a utilizar el objeto function que debemos agregar desde el
men Insert new object.

Acciones para agregar un objeto.

36

Ahora vamos a crear el evento [Function ->On Function] y vamos a darle el nombre
"SalvaPuntuacion".
Dentro de esta funcin creamos varios eventos que nos comprobarn con cual equipo estamos
jugado.

Luego asignamos el valor a travs de [WebStorage -> Set Local Value].

En el campo Key escribimos el nombre del equipo al cual le vamos a asignar la nueva
puntuacin con respecto a las que escribimos al inicio de este tutorial.
En el campo Value escribimos: Puntuacion+int(WebStorage.LocalValue(xxxx)).
o xxxx hace referencia al equipo que le vamos a sumar el puntaje, int es una
funcin del sistema que nos permite convertir el valor que guardamos en esta
variable como un valor entero para as poderla sumar.

Acciones para almacenar el puntaje.

Eventos repetitivos y que se ejecutan al iniciar el juego:

Eventos que se ejecutaran siempre en el layout.

El primero Every tick nos indica que siempre va a ejecutar estas acciones, acompaado de la
comprobacin Estado = 1 para comprobar si se ejecut el tiro. Esto nos va a mover la sombra
debajo de la posicin del baln.

37

El segundo Every 1.5 seconds repetir la accin cada 1.5 segundos, adicionalmente realizamos
una comprobacin si no se ha realizado el tiro (Estado = 0).

En este evento animaremos el portero para que realice el achique antes de que realice
el tiro, utilizamos la accin Set animation y la establecemos en achicando.
Realizamos este proceso con los dos porteros.

Acciones al iniciar el layout

Agregamos un evento On system start layout.

Desactivamos el efecto Grayscale a los layers 0 y 1.

Asignamos las puntuaciones almacenadas en las variables globales a las variables
localStorage. Esto para que no se pierdan al salir del juego.

Agregamos otro sub-evento que chequeara si el audio background est sonando, si no es as

reproduce el audio Soccer, repetimos esta accin con el efecto estado.

Mostrando pantalla de Gano o Perdi

Funcin para reiniciar las variables del juego.

Cuando se terminen todos los tiros debemos reiniciar las variables que registran los marcadores,
tiros, para esto crearemos otro evento con el objeto Function.
38

Este evento lo llamaremos fin y dentro del mismo crearemos las acciones Set value para cada
una de las variables que vemos en la imagen anterior.

Acciones cuando el jugador alcanza los 5 tiros.

Tambin realizamos comprobacin de variables, si se efectuaron los 5 tiros y se hicieron 3 o ms
goles, entonces nos enva a la pantalla de Gan y nos reproduce el sonido de aplausos. Si al
contrario llego hasta los 5 tiros y realizo menos de 3 goles nos mostrar la pantalla de perdi y
reproducimos el sonido de abucheo.
Adems agregamos dos acciones ms con el objeto [Function -> Call Function].

Ventana de la accin Call Function

Lo que realizamos es un llamado a las funciones que anteriormente hemos creado, esto nos ayuda
a simplificar pasos que son repetitivos.

39

Instrucciones

Como podemos ver nuestro juego es muy intuitivo, pero siempre es

importante facilitar a los usuarios una gua sencilla para aclarar cualquier
duda que pueda surgir al comenzar a interactuar con los elementos del
juego.
Para cumplir con dicho propsito, procederemos a agregar un nuevo layout
que llamaremos Instrucciones.
Ahora vamos agregar un fondo y los elementos necesarios para ilustrar el
funcionamiento de nuestra aplicacin de la misma manera que los hemos
hecho en los dems layout:
1. Insertamos un nuevo objeto TiledBackground al que le vamos a cambiar el nombre por
el de FondoInstrucciones.
2. Ahora insertamos tres objetos Sprite los cuales representan los tres balones con sus
respectivas direcciones. A cada Sprite vamos cambiar el nombre por el de baln 1 , 2 y 3
respectivamente.
3. El texto de las instrucciones se inserta de igual manera pero con un objeto Text que
llamaremos txtInstrucciones .
4. Por ultimo insertamos nuevamente un Sprite que tendr el nombre de
BotonInicioInicioInstruciones. El mismo nos servir para regresar al men principal.

Eventos
La pantalla de instrucciones cuenta con pocos eventos:

Eventos del layout Instrucciones.

1. Un evento Touch->On Touched que lo ligaremos a el objeto
BotonInicioInicioInstruciones y le asignamos las acciones estndares de nuestros dems

40

botones teniendo como variante la de Go to layout que nos tiene que llevar la pantalla
de menu.
2. Por ultimo al iniciar nuestra pantalla deshabilitamos el efecto que por defecto tienen
asignados nuestros botones.

Gan
La pantalla que aparecer cuando ganamos cuenta con cuatro elementos que nos permitir
visualizar el marcado y un dos botones que nos darn la posibilidad de regresar al men principal o
de revisar los puntos obtenidos con cada equipo que hemos jugado.

Layout Gan
Para este layout necesitaremos:
1. Insertar un nuevo objeto TiledBackground al que le vamos a cambiar el nombre por el
de FondoGano.
2. Dos objetos Text :
a. Uno que nos indicar que hemos ganado.
b. Y otro que va a reflejar el valor de la variable que contiene la cantidad de goles
anotados.
3. Tambin tenemos que insertar dos Sprite :
a. Al primero lo llamaremos BotonInicioGano. El mismo nos servir para regresar
al men principal.
41

b. Y un segundo objeto con el nombre BotonPuntuacionGanador el cual nos

llevara a la pantalla con los puntos que hemos acumulado en el juego.

Eventos
Nuestra hoja de eventos en este caso necesita tres condiciones como nos muestra la siguiente
imagen:

1. En primer lugar el evento touch que hemos venido utilizando en nuestras dems
pantallas. El cual cuenta con las mismas acciones de sonido, tiempos de espera, efectos y
el principal que nos traslada al men principal por medio de la funcin Go to Menu. En
este caso el evento se lo asignamos a el objeto con el nombre de BotonInicioGano.
2. En la condicin On start of layout se encuentran las actividades principales de esta
pantalla donde mediante la funcin Set Text mostraremos en pantalla el marcador
conseguido al concatenar la variable ContadorDeGoles .
3. Para completar las funciones que componen nuestro layout de Gan tenemos que
agregar las acciones que ejecutara el objeto BotonPuntuacionGanador, que en realidad
no trae nada nuevo para nosotros con respecto al botn que nos regresa al men
principal. Solo tendramos que cambiar el nombre de la pantalla a la cual nos vamos a
desplazar, en este caso sera Puntuacion.

42

Ya con esto completaramos nuestra hoja de eventos y su resultado final nos mostrara un
resultado final como el siguiente:

Perdi
No siempre el usuario va a tener la posibilidad de disfrutar del triunfo por lo que tenemos que
crear una pantalla para las ocasiones en que el usuario llegue a perder contra el portero.
Nuestra pantalla de Perdi sigue los mismos lineamientos de la pantalla de Gan las nicas
nos variantes que podramos apreciar sern:
1. El primer objeto Text tendr como contenido la frase Vuelve a intentarlo.
2. Y en lugar de un botn que nos llevar a ver la puntuacin le daremos la posibilidad al
usuario de volver a jugar. A este objeto le daremos el nombre de BotonVolverJugar.

43

Eventos
En esta hoja de eventos tenemos que copiar prcticamente las mismas condiciones y acciones que
tenemos en los eventos de Gan. Lo nico que tenemos que cambiar es el objeto
BotonPuntuacionGanador por el de BotonVolverJugar y en la accin Go to escribimos el
nombre juego para que nos traslade de nuevo al juego con esto poder reintentarlo.
La siguiente imagen nos ilustrara y guiar en los cambios:

Salir del juego

Creamos un evento On touch al presionar el botn salir.

Reproducimos el sonido Click al tocar el botn.

Habilitamos el efecto GrayScale en los layers 1 y 2.
Mostramos los mensajes de Salir, s y no.
Bajamos el volumen de la msica 15db.

Agregamos un par de eventos, si presionamos sobre Si utilizamos la accin Browser->close de

lo contrario hacemos lo inverso.

44

Pruebas finales de funcionamiento

Una vez llegados a este punto ya se tendr lista la aplicacin con todas sus pantallas creadas,
podemos hacer pruebas para comprobar el correcto funcionamiento de la aplicacin al igual que
hicimos al principio, para ejecutar el proyecto y ver cmo funciona, solo es necesario dar click en
la parte superior donde est el icono del circulo con el tringulo en su interior
de imediato el proyecto correr en una ventana del navegador y
podremos ver como nuestro objeto de la imagen parpadea (efecto flash).

Compilacin de la aplicacin
Para compilar la aplicacin y poder instalarla y ejecutarla en un celular se deber hacer los
siguientes pasos:
Lo primero que se necesita es exportar el archivo utilizando Construct 2, como se muestra en las
imgenes de abajo:

Una vez exportado se creara un archivo comprimido de tipo .zip

como el que se observa en la imagen de abajo:

45

Es importante no descomprimir el archivo, el cual se utilizara para subir a la pgina de CocoonJS

en la cual antes se deber registrar con un correo valido para poder ingresar como
desarrolladores y subir el proyecto comprimido al sitio, la pgina para registrarse es:
https://sso.ludei.com/signup una vez registrado con sus datos personales ya podrs ingresar al
sitio, con su correo y contrasea como se muestra en la siguiente imagen:

Una vez ingresado al sitio se deber empezar a crear un nuevo proyecto, para esto solo hay que
oprimir el botn que dice new project:

De inmediato se desplegar una pantalla como la siguiente:

46

Se debe poner el nombre de la aplicacin Application name, el identificador de la aplicacin, se

recomienda usar este formato com.yourcompany.appname, la versin de la aplicacin, es un
dato numerioco ejemplo versin 1.0 o versin 2.0, la orientacin de la aplicacin Patroit
para que se visualice con el dispositivo en posiscion vertical y por ultimo el mtodo de ajuste
Splash Scale Method se recomienda usar Strech to fill para que el contenido se ajuste a al
pantalla del telfono. Una vez completados todos estos datos se preciona el botn para crear el
proyecto:
Una vez que se presion el botn de Create project se mostrara una pantalla como esta:

47

De aqu solo nos interesan dos opciones, la que dice

Android y compile project. En Android es para
agregar los iconos de la aplicacin siguiendo los
siguientes fomatos de tamaos:
36x36, 48x48, 72x72, 96x96.

Y en la opcin Compile Project

se debe seleccionar la opcin
que dice compilacin del
projecto para Android Google
PlayStore (Android)

48

Por ultimo en la parte donde dice Zip file se debe seleccionar el archivo comprimido que se
genero con el Construct2 para cargarlo a la pagina y compilarlo.

Una vez seleccionado el archivo solo hace falta aceptar las condiciones del uso del sito y oprimir el
botn de compilar para cargar el proyecto:

Y listo, ya est todo completo, ahora solo resta esperar aproximadamente entre tres y cinco
minutos y nos llegara un correo con el enlace para descargar nuestra aplicacin ya compilada en
formato .apk la cual se podr pasar al celular o tableta para instalar y disfrutar de la primera
creacin.

49

Conclusiones

Al concluir esta gua de paso a paso habremos creado nuestra propia aplicacin, ahora nos toca a
nosotros mismos experimentar y crear nuevas aplicaciones basndonos en nuestra propia
imaginacin y creatividad.
Hay que tener claro que esta gua solo proporciona un mtodo o forma de muchas posibles
maneras de poder crear aplicaciones, al final usted decide como desea crear su aplicacin, esta
gua solo pretende darle una introduccin amplia de como poder crear sus aplicaciones utilizando
el software de Construct 2.

50