Download - Plataforma tutorial
-
8/19/2019 Plataforma tutorial
1/45
Plataforma
Al finalizar la sesión lograrás:
Crear los diferentes tipos de escenarios en Construct 2 Identificar y editar un escenario.
Y podrás conocer acerca de:
Tipos de escenarios Insertar y editar tiles Realizar un juego de plataforma Crear colisiones entre objetos
S e s i ó n
1
-
8/19/2019 Plataforma tutorial
2/45
PRESENTACIÓNEn Construct 2 a modificar, editar y asignar diferentes tipos de videojuegos comoplataformas, acción, arcade, estrategia. Así, de esta manera podrás crear diferentesescenarios por el cual tu personaje podrá desplazarse.Al finalizar esta sesión lograrás 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 continuación:
1. Ingresa a Contruct 2 y luego haz clic en la opción New empty project.
(S1_ 02)
-
8/19/2019 Plataforma tutorial
3/45
2. Vamos a dar clic en nuestra composición y poner los datos que se indican acontinuación en Layout size.
(S1_03)
Para poder ajustar la vista de tu escenario debes mantener presionado la tecla Ctrl + Rueda del ratón (arriba yabajo):Ctrl sin soltar mueves la rueda del r ratón hacia arriba (agranda la vista del escenario)Ctrl sin soltar mueves la rueda del r ratón hacia abajo (disminuye la vista del escenario)
GUARDAR PROYECTO
Ahora recordarás cómo guardar un proyecto en Contruct 2, para ello realiza los siguientespasos:
1. Haz clic en el ícono (S1_04) File, en las opciones que aparece da clic en la
opción (S1_05) Save.
(S1_06)
-
8/19/2019 Plataforma tutorial
4/45
2. En el cuadro que se muestra, creas una carpeta de nombre Proyecto en el Escritorio yen ella guardas el archivo con el mismo nombre Proyecto como se muestra acontinuación:
(S1_07)
3. Finalmente haz clic en el botón Guardar
PLATAFORMA
En esta sesión disponemos de 3 objetos con los cuales podemos crear distintos escenariospor donde podrá desplazarse el personaje. A continuación se describen los objetos:
Tipo Descripción ImagenBackground Es el objeto
que se utilizacomo fondo.
(S1_08)
-
8/19/2019 Plataforma tutorial
5/45
Tiles Con esteobjeto podráarmar elescenario.
(S1_09)Sprites Contiene al
personaje conlos distintosmovimientos(
correr, saltar yquieto)
(S1_10)
Tener en cuenta que Construct 2 no cuenta con objetos, estos se pueden realizar en distintos programas deDiseño.
ADICIONAR UN OBJETO
Para el proyecto aprenderás a adicionar un nuevo objeto, para ello sigue los pasos que semencionan a continuación:
1. Crea el primer objeto, el cual será el fondo y funcionara como azulejo es decir; en lugarde estirarse se repetirá continuamente.
1.1. Haz doble clic en el escenario, a continuación, aparecerá la ventana Insert New
Object donde debes dar doble clic en el icono (S1_11)Tiled Background.
-
8/19/2019 Plataforma tutorial
6/45
(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)
-
8/19/2019 Plataforma tutorial
7/45
1.3. En la ventana Abrir, haz doble clic en la siguiente imagen (T1_01), se encuentra en lacarpeta Alianza educativa, Objetos.
(S1_16)
1.4. Haz clic en el ícono (S1_17) cerrar, en la ventana Edit image.
(S1_18)
-
8/19/2019 Plataforma tutorial
8/45
Para poder ajustar la vista de tu ventana Edit image debes presionar los iconos (S1_19) Zoom in y(S1_20) Zoom out Zoom in (acerca la vista de la ventana)Zoom out (aleja la vista de la ventana)
1.5. Con la ayuda del cursor te ubicas en uno de los cuadrados pequeños alrededor de laimagen seleccionada de color azul y presionas clic sin soltar arrastras para ajustar deltamaño de la composición como se muestra en la imagen (S1_22).
(S1_21)
(s1_22)
-
8/19/2019 Plataforma tutorial
9/45
1.6. Teniendo seleccionada la imagen en Properties, Name puedes cambiar elnombre de la imagen.
(S1_23)
1.7. Haz clic en la pestaña (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.
Debería quedar como la opción que se muestra a continuación.
(S1_27)
2.
Crea el segundo objeto, con el cual armaremos el escenario.
2.1. Haz doble clic en el escenario, a continuación, aparecerá la ventana Insert New
Object donde debes dar doble clic en el icono (S1_28) Sprite.
-
8/19/2019 Plataforma tutorial
10/45
(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 continuación 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 observarás también aparecen otras 2 ventanas máspequeñas de esta forma tendremos los tiles más ordenados.
-
8/19/2019 Plataforma tutorial
11/45
2.3. En la ventana Abrir, haz doble clic en la siguiente imagen (T1_02), se encuentra enla carpeta Alianza educativa, Objetos.
(S1_31)
2.4. Haz clic en el ícono (S1_19) Zoom in y (S1_20) Zoom out para ajustar la vista dela ventana.
(S1_32)
-
8/19/2019 Plataforma tutorial
12/45
2.5. Haz clic en el ícono (S1_33) Rectangle select, selecciona toda la imagen, presionaCTRL + 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 demayor tamaño), clic derecho dentro de esta ventana y en las opciones que aparecen darleclic en Add Frame
(S1_35)
Deberá visualizarse de la siguiente manera:
-
8/19/2019 Plataforma tutorial
13/45
(S1_36)
2.7. Haz clic en la ventana Edit image (es la ventana de mayor tamaño), presionar CTRL + V para pegar la imagen anterior, deselecciona presionando (S1_33) Rectangle select yvuelve a presionar y selecciona esta vez solo la imagen de arriba como se muestra acontinuacion:
(S1_37)
-
8/19/2019 Plataforma tutorial
14/45
2.8. Haz clic en el icono (S1_38) Crop transparent edges, a continuación deberíamostrarse de la siguiente manera:
(S1_39)
2.9. Haz clic en la ventana Animation frames (se encuentra al lado inferior de la ventana demayor tamaño), clic derecho dentro de esta ventana y en las opciones que aparecen darleclic en Add Frame
(S1_40)
En esta ocasión se repite el punto 2.6
-
8/19/2019 Plataforma tutorial
15/45
2.10. Haz clic en la ventana Edit image (es la ventana de mayor tamaño), presionar CTRL + V y en esta ocasión aparecerán 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)
-
8/19/2019 Plataforma tutorial
16/45
2.12. Haz clic en el icono (S1_38) Crop transparent edges, a continuación deberíamostrarse de la siguiente manera:
(S1_43)
2.13. Repetir lo aprendido con las demás imágenes a excepción de la moneda y el postedebido a que estos tendrán un comportamiento distinto. Se debería poder visualizar comoen la imagen.
(S1_44)
-
8/19/2019 Plataforma tutorial
17/45
2.14. Haz clic en la ventana Animation frames (se encuentra al lado inferior de la ventana demayor tamaño), clic en la primera imagen que tiene el número 0 y presionamos SUPR(suprimir). De esta forma debería quedar.
(S1_45)
Borramos la primera imagen debido a que esta contiene a todas juntas la cual ya no la vamos a ne cesitar.
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 opción (S1_49) por ultimo dar clic en el
icono (S1_17) para cerrarla ventana Imagine points.
-
8/19/2019 Plataforma tutorial
18/45
(S1_50)
Esto hará que en las demás imágenes también aparezca el ancla en el centroImportante recodar los números que tiene cada imagen de lo contrario dar doble clic en la imagen pequeña 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 yautomática mente la imagen será cubierta por una capa de color azul.
(S1_52)
-
8/19/2019 Plataforma tutorial
19/45
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 ydando clic derecho sobre este cuadrado amarillo aparecen opciones donde deberás dar clic
en (S1_55) para agregar más 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 acción con las demás imágenes, para que se muestren como a continuación:
Tener en cuenta que la capa azul no debe pasar el borde de las imagenes
Imagen Cuadrados Imagen
0 10 cuadrados
(S1_57)
1 4 cuadrados
(S1_58)
-
8/19/2019 Plataforma tutorial
20/45
2 4 cuadrados
(S1_59)3 4 cuadrados
(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)
-
8/19/2019 Plataforma tutorial
21/45
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)
-
8/19/2019 Plataforma tutorial
22/45
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 (S1_68) Solid y clic en
el icono (S1_17) para cerrar la ventana Tiles: Behaviors.
(S1_69)
-
8/19/2019 Plataforma tutorial
23/45
2.25. Estando la imagen seleccionada haz clic en Initial frame como se muestra en laimagen, 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 elescenario para poder visualizar la imagen. (Podrá repetir el punto anterior y cambiar de 0 a4 para visualizar otro objeto). A continuación se observara de la siguiente manera.
(S1_71)
2.27. Con lo aprendido deberá empezar a crear la plataforma por donde el personaje setrasladara. Ejemplo:
(S1_72)
-
8/19/2019 Plataforma tutorial
24/45
3. Insertar en el escenario el siguiente objeto, el será parte del escenario.
3.1. Haz doble clic en el escenario, a continuación, 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 continuación aparecerá la
ventana Edit image debes dar clic en el icono (S1_14) Load an image from a file.
(S1_30)
-
8/19/2019 Plataforma tutorial
25/45
3.3. En la ventana Abrir, haz doble clic en la siguiente imagen (T1_02), se encuentra enla 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.
-
8/19/2019 Plataforma tutorial
26/45
3.5. Estando la imagen seleccionada presiona CTRL + C para copiar y CTRL + V y clic en elescenario 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 ocasión. Colocar lasmonedas 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 continuación, aparecerá la ventana Insert New
Object donde debes dar doble clic en el icono (S1_28) Sprite.
(S1_29)
-
8/19/2019 Plataforma tutorial
27/45
4.2. Con el icono (S1_13) cursor haz clic en el escenario, a continuación 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 enla carpeta Alianza educativa, Objetos.
(S1_76)
-
8/19/2019 Plataforma tutorial
28/45
4.3. Haz clic en el ícono (S1_33) Rectangle select, selecciona toda la imagen, presionarCTRL + 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 opcionesque aparecen darle clic en Add Frame.
(S1_73)
4.5 En la ventana Edit image, haz clic (S1_78) Rezise, coloca los siguientes valores comoaparece en la imagen y clic en ok.
(S1_79)
-
8/19/2019 Plataforma tutorial
29/45
4.6 En la ventana Edit image, presiona CTRL + V y en el cuadro Paste image selecciona lasegunda opción.
(S1_80)
(S1_81)
-
8/19/2019 Plataforma tutorial
30/45
4.7 Con la ayuda del cursor das clic en la selección y arrastrar hasta ubicar la primeraimagen.
(S1_82)
4.8 Repetir la acción anterior con las 4 primeras imágenes de arriba (esto será la animaciónde 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 demásimágenes.Para cambiar el nombre solo hay que seleccionar la ventana Animations y darle clic derecho en Default, opción
Rename y poner Quieto.
-
8/19/2019 Plataforma tutorial
31/45
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 lasegunda de la imagen. Hasta que quede de la siguiente manera.
(S1_85)
-
8/19/2019 Plataforma tutorial
32/45
4.11 Agregar dos nuevos Add animation y darle el nombre de Saltar y de Caerrespectivamente. Repetir lo aprendido con la segunda de la imagen. Hasta que quede de lasiguiente manera.
Saltar (solo usamos las 2 primeras imágenes de la última fila)
(S1_86)
Caer (solo usamos las 2 últimas imágenes de la última fila)
(S1_87)
-
8/19/2019 Plataforma tutorial
33/45
4.12 Dar los siguientes valores a cada animación
Tipo Imagen
(S1_88)
(S1_89)
(S1_90)
(S1_91)
(S1_92)
(S1_93)
(S1_94)
(S1_95)
-
8/19/2019 Plataforma tutorial
34/45
4.13 Clic en el icono (S1_17) para cerrar la ventana Edit image y ubicamos al personajeal inicio del escenario.
(S1_96)
5. Insertar al escenario el siguiente objeto, un cuadrado.
5.1. Haz doble clic en el escenario, a continuación, aparecerá la ventana Insert New
Object donde debes dar doble clic en el icono (S1_28) Sprite.
(S1_29)
-
8/19/2019 Plataforma tutorial
35/45
-
8/19/2019 Plataforma tutorial
36/45
5.5. Teniendo seleccionado el cuadrado, haz clic en (S1_101) y cambia elvalor a invisible.
(S1_102)
EVENT SHEET
Aquí es donde se colocaran los eventos que realizara el personaje.
1. Clic en la pestaña (S1_103), a continuación clic en (S1_104)
y doble click en el icono (S1_105) System.
(S1_106)
-
8/19/2019 Plataforma tutorial
37/45
1.1 Haz doble clic en la pestaña el icono (S1_107), se visualizará de la siguientemanera.
(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 comoen la imagen y clic en Done
(S1_113)
Finalmente quedara de la siguiente manera
(S1_114)
-
8/19/2019 Plataforma tutorial
38/45
2. Para el Evento 2 debes volver a la pestaña Layout 1, Haz doble clic al escenario y doble
clic en (S1_115).
(S1_116)
2.1. En la pestaña 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
-
8/19/2019 Plataforma tutorial
39/45
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í escomo debe quedar:
(S1_125)
(S1_126)
-
8/19/2019 Plataforma tutorial
40/45
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í escomo 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í escomo debe quedar:
-
8/19/2019 Plataforma tutorial
41/45
(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í escomo debe quedar:
(S1_139)
-
8/19/2019 Plataforma tutorial
42/45
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í escomo 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)
-
8/19/2019 Plataforma tutorial
43/45
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í escomo 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 opción invert.
(S1_151)
-
8/19/2019 Plataforma tutorial
44/45
(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í escomo 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 enDone. Así es como debe quedar:
(S1_156)
-
8/19/2019 Plataforma tutorial
45/45
(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 deberás hacer clic en el icono (S1_161) y se abrirá en tu navegadorpredeterminado.
(S1_162)
Recuerda: Para poder ejecutar tu proyecto guardado en otra computadora, deberás tenerConstruc2 instalado además de tener la aplicación abierta.