1

Sesin

Plataforma

Al finalizar la sesin logrars:

Crear los diferentes tipos de escenarios en Construct 2
Identificar y editar un escenario.

Y podrs conocer acerca de:

Tipos de escenarios
Insertar y editar tiles
Realizar un juego de plataforma
Crear colisiones entre objetos

PRESENTACIN
En Construct 2 a modificar, editar y asignar diferentes tipos de videojuegos como
plataformas, accin, arcade, estrategia. As, de esta manera podrs crear diferentes
escenarios por el cual tu personaje podr desplazarse.
Al finalizar esta sesin logrars terminar tu proyecto de la siguiente manera:

(S1_01)

CREAR PROYECTO
Para iniciar el proyecto debes crear y configurar el escenario como se indica a continuacin:
1.

Ingresa a Contruct 2 y luego haz clic en la opcin New empty project.

(S1_ 02)

2. Vamos a dar clic en nuestra composicin y poner los datos que se indican a
continuacin en Layout size.

(S1_03)
Para poder ajustar la vista de tu escenario debes mantener presionado la tecla Ctrl + Rueda del ratn (arriba y
abajo):
Ctrl sin soltar mueves la rueda del r ratn hacia arriba (agranda la vista del escenario)
Ctrl sin soltar mueves la rueda del r ratn hacia abajo (disminuye la vista del escenario)

GUARDAR PROYECTO
Ahora recordars cmo guardar un proyecto en Contruct 2, para ello realiza los siguientes
pasos:
1.

Haz clic en el cono

opcin

(S1_04) File, en las opciones que aparece da clic en la

(S1_05) Save.

(S1_06)

2.

En el cuadro que se muestra, creas una carpeta de nombre Proyecto en el Escritorio y

en ella guardas el archivo con el mismo nombre Proyecto como se muestra a
continuacin:

(S1_07)
3.

Finalmente haz clic en el botn Guardar

PLATAFORMA
En esta sesin disponemos de 3 objetos con los cuales podemos crear distintos escenarios
por donde podr desplazarse el personaje. A continuacin se describen los objetos:

Tipo
Background

Descripcin
Es el objeto
que se utiliza
como fondo.

Imagen

(S1_08)

Tiles

Con
este
objeto podr
armar
el
escenario.

(S1_09)
Sprites

Contiene
al
personaje con
los
distintos
movimientos(
correr, saltar y
quieto)

(S1_10)

Tener en cuenta que Construct 2 no cuenta con objetos, estos se pueden realizar en distintos programas de
Diseo.

ADICIONAR UN OBJETO
Para el proyecto aprenders a adicionar un nuevo objeto, para ello sigue los pasos que se
mencionan a continuacin:
1.

Crea el primer objeto, el cual ser el fondo y funcionara como azulejo es decir; en lugar
de estirarse se repetir continuamente.
1.1. Haz doble clic en el escenario, a continuacin, aparecer la ventana Insert New
Object donde debes dar doble clic en el icono

(S1_11)Tiled Background.

(S1_12)
Para poder poder movilizarse en esta ventana utilizaras la ayuda de la barra de desplazamiento vertical.

1.2. Con el icono

(S1_13) cursor haz clic en el escenario, en la ventana Edit image que

aparece da clic en el icono

(S1_14) Load an image from a file.

(S1_15)

1.3. En la ventana Abrir, haz doble clic en la siguiente imagen (T1_01), se encuentra en la
carpeta Alianza educativa, Objetos.

(S1_16)
1.4. Haz clic en el cono

(S1_17) cerrar, en la ventana Edit image.

(S1_18)

Para poder ajustar la vista de tu ventana Edit image debes presionar los iconos
(S1_20) Zoom out
Zoom in (acerca la vista de la ventana)
Zoom out (aleja la vista de la ventana)

(S1_19) Zoom in y

1.5. Con la ayuda del cursor te ubicas en uno de los cuadrados pequeos alrededor de la
imagen seleccionada de color azul y presionas clic sin soltar arrastras para ajustar del
tamao de la composicin como se muestra en la imagen (S1_22).

(S1_21)

(s1_22)

1.6. Teniendo seleccionada la imagen en Properties, Name puedes cambiar el

nombre de la imagen.

(S1_23)

1.7. Haz clic en la pestaa

(S1_24), luego haz click en el icono
(S1_25)
Toggle layer locked por ultimo clic en el icono
(S1_26) Add layer at top.
Debera quedar como la opcin que se muestra a continuacin.

(S1_27)

2. Crea el segundo objeto, con el cual armaremos el escenario.

2.1. Haz doble clic en el escenario, a continuacin, aparecer la ventana Insert New
Object donde debes dar doble clic en el icono

(S1_28) Sprite.

(S1_29)
Para poder poder movilizarse en esta ventana utilizaras la ayuda de la barra de desplazamiento vertical.

2.2. Con el icono

(S1_13) cursor haz clic en el escenario, a continuacin aparecer la

ventana Edit image debes dar clic en el icono

(S1_14) Load an image from a file.

(S1_30)
En esta nueva ventana Sprite agregaras el objeto tile, como observars tambin aparecen otras 2 ventanas ms
pequeas de esta forma tendremos los tiles ms ordenados.

2.3. En la ventana Abrir, haz doble clic en la siguiente imagen (T1_02), se encuentra en
la carpeta Alianza educativa, Objetos.

(S1_31)
2.4. Haz clic en el cono
la ventana.

(S1_19) Zoom in y

(S1_20) Zoom out para ajustar la vista de

(S1_32)

2.5. Haz clic en el cono

(S1_33) Rectangle select, selecciona toda la imagen, presiona
CTRL + C para copiar y vuelve a dar clic en el icono
para deseleccionar.

(S1_34)
Tener cuidado al presionar CTRL + C

2.6. Haz clic en la ventana Animation frames (se encuentra al lado inferior de la ventana de
mayor tamao), clic derecho dentro de esta ventana y en las opciones que aparecen darle
clic en Add Frame

(S1_35)

Deber visualizarse de la siguiente manera:

(S1_36)
2.7. Haz clic en la ventana Edit image (es la ventana de mayor tamao), presionar CTRL + V
para pegar la imagen anterior, deselecciona presionando
(S1_33) Rectangle select y
vuelve a presionar
y selecciona esta vez solo la imagen de arriba como se muestra a
continuacion:

(S1_37)

2.8. Haz clic en el icono

(S1_38) Crop transparent edges, a continuacin debera
mostrarse de la siguiente manera:

(S1_39)
2.9. Haz clic en la ventana Animation frames (se encuentra al lado inferior de la ventana de
mayor tamao), clic derecho dentro de esta ventana y en las opciones que aparecen darle
clic en Add Frame

(S1_40)

En esta ocasin se repite el punto 2.6

2.10. Haz clic en la ventana Edit image (es la ventana de mayor tamao), presionar CTRL + V
y en esta ocasin aparecern las siguientes opciones la cual daremos clic en Enlarge canvas:

(S1_41)
2.11. Selecciona esta vez solo la imagen de abajo como se muestra a continuacion:

(S1_42)

2.12. Haz clic en el icono

(S1_38) Crop transparent edges, a continuacin debera
mostrarse de la siguiente manera:

(S1_43)
2.13. Repetir lo aprendido con las dems imgenes a excepcin de la moneda y el poste
debido a que estos tendrn un comportamiento distinto. Se debera poder visualizar como
en la imagen.

(S1_44)

2.14. Haz clic en la ventana Animation frames (se encuentra al lado inferior de la ventana de
mayor tamao), clic en la primera imagen que tiene el nmero 0 y presionamos SUPR
(suprimir). De esta forma debera quedar.

(S1_45)
Borramos la primera imagen debido a que esta contiene a todas juntas la cual ya no la vamos a necesitar.

2.15. Seleccionar la nueva primera imagen de numero 0 y en la ventana Edit image dar clic
en el icono
(S1_46) y ubicar el icono el centro de la imagen.

(S1_47)

2.16. En la nueva ventana que aparece Image points dar clic derecho en
(S1_48), seleccionar la opcin
icono

(S1_17) para cerrarla ventana Imagine points.

(S1_49) por ultimo dar clic en el

(S1_50)
Esto har que en las dems imgenes tambin aparezca el ancla en el centro
Importante recodar los nmeros que tiene cada imagen de lo contrario dar doble clic en la imagen pequea del
lado derecho Sprite.
Dando clic derecho en la imagen Sprite y dando clic en Rename puede cambiar el nombre de la imagen.

2.17. Haz clic en la ventana Edit image, clic en el icono (S1_51) Set collision polygon y
automtica mente la imagen ser cubierta por una capa de color azul.

(S1_52)

2.18. Haz clic en

(S1_53) cuadrado rojo, este cambiara a color amarillo, presionando

sobre
(S1_54) cuadrado amarillo sin soltar puedes mover el cuadrado por la imagen y
dando clic derecho sobre este cuadrado amarillo aparecen opciones donde debers dar clic
en

(S1_55) para agregar ms cuadrados.

Haz uso de lo dicho para que la imagen quede de la siguiente manera.

(S1_56)
Para cambiar de imagen solo le das clic en la ventana Animation frames y das clic en otra imagen.
La parte azul indica por donde nuestro personaje podr moverse.

2.19. Repite la accin con las dems imgenes, para que se muestren como a continuacin:
Tener en cuenta que la capa azul no debe pasar el borde de las imagenes

Imagen
0

Cuadrados
10 cuadrados

4 cuadrados

Imagen

(S1_57)

(S1_58)

4 cuadrados

4 cuadrados

(S1_59)

(S1_60)
4

4cuadrados

(S1_61)

2.20. Haz clic en

(S1_17) para cerrar las ventanas. As es como debe de visualizarse.

(S1_62)

2.21. Haz doble clic en la imagen seleccionada y cambia el valor de Speed a cero

(S1_63)

(S1_64)

2.22. Estando la imagen seleccionada haz clic en Behaviors como se muestra en la imagen.

(S1_65)

2.23. En la ventana Tiles: Behaviors, hacer clic en el icono

(S1_66) Add new

(S1_67)

2.24. En la ventana Add behaviors, hacer doble clic en el icono

el icono

(S1_68) Solid y clic en

(S1_17) para cerrar la ventana Tiles: Behaviors.

(S1_69)

2.25. Estando la imagen seleccionada haz clic en Initial frame como se muestra en la
imagen, podr cambiar el numero de 0 a 4 y de clic en el escenario (Esto har que la
imagen seleccionada cambie a las que guardamos anteriormente).

(S1_70)

2.26. Estando la imagen seleccionada presiona CTRL + C para copiar y CTRL + V y clic en el
escenario para poder visualizar la imagen. (Podr repetir el punto anterior y cambiar de 0 a
4 para visualizar otro objeto). A continuacin se observara de la siguiente manera.

(S1_71)
2.27. Con lo aprendido deber empezar a crear la plataforma por donde el personaje se
trasladara. Ejemplo:

(S1_72)

3. Insertar en el escenario el siguiente objeto, el ser parte del escenario.

3.1. Haz doble clic en el escenario, a continuacin, aparecer la ventana Insert New
Object donde debes dar doble clic en el icono

(S1_28) Sprite.

(S1_29)
3.2 Con el icono

(S1_13) cursor haz clic en el escenario, a continuacin aparecer la

ventana Edit image debes dar clic en el icono

(S1_30)

(S1_14) Load an image from a file.

3.3. En la ventana Abrir, haz doble clic en la siguiente imagen (T1_02), se encuentra en
la carpeta Alianza educativa, Objetos.

(S1_31)

3.4. Haz clic en el cono

(S1_33) Rectangle select, selecciona solo el poste, a

continuacion clic en el icono

(S1_38) Crop transparent edges y dar clic en el icono
(S1_46) y ubicar el icono el centro de la imagen. Se visualizara de la siguiente manera.

(S1_73)
Clic en el icono

(S1_17) para cerrar la ventana Edit image.

3.5. Estando la imagen seleccionada presiona CTRL + C para copiar y CTRL + V y clic en el
escenario para poder visualizar la imagen. Colocar distintos postes en el escenario.

(S1_74)

3.6. Repetir los puntos del 3.1 al 3.5 selecciona la moneda en esta ocasin. Colocar las
monedas en el escenario.

(S1_75)

4. Insertar al escenario el siguiente objeto, el cual ser el personaje.

4.1. Haz doble clic en el escenario, a continuacin, aparecer la ventana Insert New
Object donde debes dar doble clic en el icono

(S1_28) Sprite.

(S1_29)

4.2. Con el icono

(S1_13) cursor haz clic en el escenario, a continuacin aparecer la

ventana Edit image debes dar clic en el icono

(S1_14) Load an image from a file.

(S1_30)

4.3. En la ventana Abrir, haz doble clic en la siguiente imagen (T1_03), se encuentra en
la carpeta Alianza educativa, Objetos.

(S1_76)

4.3. Haz clic en el cono

(S1_33) Rectangle select, selecciona toda la imagen, presionar
CTRL + C para copiar por ultimo volver a darle clic en
.

(S1_77)
4.4. Haz clic en la ventana Animation, clic derecho dentro de esta ventana y en las opciones
que aparecen darle clic en Add Frame.

(S1_73)

4.5 En la ventana Edit image, haz clic

aparece en la imagen y clic en ok.

(S1_78) Rezise, coloca los siguientes valores como

(S1_79)

4.6 En la ventana Edit image, presiona CTRL + V y en el cuadro Paste image selecciona la
segunda opcin.

(S1_80)

(S1_81)

4.7 Con la ayuda del cursor das clic en la seleccin y arrastrar hasta ubicar la primera
imagen.

(S1_82)
4.8 Repetir la accin anterior con las 4 primeras imgenes de arriba (esto ser la animacin
de Stand) deber visualizarse de la siguiente manera.

(S1_83)
Recordar presionar en el icono
(S1_46) y ubicarlo a los pies del personaje y hacer lo mismo con las dems
imgenes.
Para cambiar el nombre solo hay que seleccionar la ventana Animations y darle clic derecho en Default, opcin
Rename y poner Quieto.

4.9 En la ventana Animations dar clic derecho y las opciones escoger Add animation.

(S1_84)
4.10 Cambiar el nombre por Correr y darle doble clic en correr. Repetir lo aprendido con la
segunda de la imagen. Hasta que quede de la siguiente manera.

(S1_85)

4.11 Agregar dos nuevos Add animation y darle el nombre de Saltar y de Caer
respectivamente. Repetir lo aprendido con la segunda de la imagen. Hasta que quede de la
siguiente manera.
Saltar (solo usamos las 2 primeras imgenes de la ltima fila)

(S1_86)

Caer (solo usamos las 2 ltimas imgenes de la ltima fila)

(S1_87)

4.12 Dar los siguientes valores a cada animacin

Tipo
(S1_88)

Imagen

(S1_89)
(S1_90)

(S1_91)

(S1_92)

(S1_93)
(S1_94)

(S1_95)

4.13 Clic en el icono

al inicio del escenario.

(S1_17) para cerrar la ventana Edit image y ubicamos al personaje

(S1_96)

5. Insertar al escenario el siguiente objeto, un cuadrado.

5.1. Haz doble clic en el escenario, a continuacin, aparecer la ventana Insert New
Object donde debes dar doble clic en el icono

(S1_29)

(S1_28) Sprite.

5.2 Con el icono

(S1_13) cursor haz clic en el escenario, a continuacin aparecer la

ventana Edit image, debes dar clic en el icono

rectangular y por ultimo clic en el icono

(S1_85) Fill y dar clic en el rea

(S1_17) para cerrar la ventana Edit image

(S1_97)
5.3 Ajustar el tamao del cuadrado de la siguiente forma encima del personaje.

(S1_98)
5.4 Teniendo seleccionado el cuadrado, haz clic en Behaviors y agrega los siguientes iconos
en la ventana como se muestra en la imagen y clic en cerrar:

(S1_99)

(S1_100)

5.5. Teniendo seleccionado el cuadrado, haz clic en

valor a invisible.

(S1_101) y cambia el

(S1_102)

EVENT SHEET
Aqu es donde se colocaran los eventos que realizara el personaje.
1. Clic en la pestaa
y doble click en el icono

(S1_103), a continuacin clic en

(S1_105) System.

(S1_106)

(S1_104)

1.1 Haz doble clic en la pestaa el icono

manera.

(S1_107), se visualizar de la siguiente

(S1_108)

(S1_109)

1.2. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_112), en la ventana que se muestra cambiar los datos como

en la imagen y clic en Done

(S1_113)
Finalmente quedara de la siguiente manera

(S1_114)

2. Para el Evento 2 debes volver a la pestaa Layout 1, Haz doble clic al escenario y doble

clic en

(S1_115).

(S1_116)

2.1. En la pestaa Event sheet1

Clic en

(S1_104) , doble clic en el icono

(S1_115), doble clic en
(S1_117), completa el cuadro con los siguientes datos y clic en OK

(S1_118)
Se visualizar de la siguiente manera.

(S1_119)
Para activar la ventana Choose a key se tiene hacer clic en <click to choose>

Para qu aparesca Left arrow se tiene que presionar la tecla (flecha izquierda)

2.2. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_120) y clic en Done. As es como debe quedar:

(s1_121)

3. Clic en

(S1_104) , doble clic en el icono

(S1_115), doble clic en
(S1_122), completa el cuadro con los siguientes datos y clic en OK

(S1_123)
Se visualizar de la siguiente manera.

(S1_124)

3.1. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_120), completa el cuadro con los siguientes datos y clic en Done. As es

como debe quedar:

(S1_125)

(S1_126)

4. Clic en

(S1_104) , doble clic en el icono

(S1_127), doble clic en

(S1_128).

(S1_1229)

4.1. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_130), completa el cuadro con los siguientes datos y clic en Done. As es

como debe quedar:

(S1_131)

(S1_132)

5. Clic en

(S1_104) , doble clic en el icono

(S1_127), doble clic en

(S1_133).

(S1_134)

5.1. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_130), completa el cuadro con los siguientes datos y clic en Done. As es

como debe quedar:

(S1_135)

(S1_136)

6. Clic en

(S1_104) , doble clic en el icono

(S1_127), doble clic en

(S1_137).

(S1_138)

6.1. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_130), completa el cuadro con los siguientes datos y clic en Done. As es

como debe quedar:

(S1_139)

7. Clic en

(S1_104) , doble clic en el icono

(S1_127), doble clic en

(S1_140).

(S1_141)

7.1. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_130), completa el cuadro con los siguientes datos y clic en Done. As es

como debe quedar:

(S1_142)

(S1_143)

7. Clic en

(S1_104) , doble clic en el icono

(S1_127), doble clic en

(S1_136).

(S1_144)

7.1. Clic en

(S1_104) , doble clic en el icono

(S1_127), doble clic en

(S1_145). Clic al lado del cuadrado azul y arrastra hacia el evento de arriba.

(S1_146)

7.2. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_130), completa el cuadro con los siguientes datos y clic en Done. As es

como debe quedar:

(S1_147)

(S1_148)

7.3. Clic en

(S1_104) , doble clic en el icono

(S1_127), doble clic en

(S1_149). Clic al lado del cuadrado azul y arrastra hacia el evento de arriba.

(S1_150)
7.4. Clic derecho en Platform in moving y clic en la opcin invert.

(S1_151)

(S1_152)

7.5. Haz clic en

(S1_110), doble clic en

(S1_111) Personaje, doble clic en

(S1_130), completa el cuadro con los siguientes datos y clic en Done. As es

como debe quedar:

(S1_153)

(S1_154)

8. Clic en

(S1_104) , doble clic en el icono

(S1_127), doble clic en
(S1_155), completa el cuadro con los siguientes datos y clic en
Done. As es como debe quedar:

(S1_156)

(S1_157)

8.1. Haz clic en

(S1_110), doble clic en

(S1_158) Moneda, doble clic en

(S1_159), As es como debe quedar:

(S1_160)

Para probar el juego debers hacer clic en el icono

predeterminado.

(S1_161) y se abrir en tu navegador

(S1_162)
Recuerda: Para poder ejecutar tu proyecto guardado en otra computadora, debers tener
Construc2 instalado adems de tener la aplicacin abierta.