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


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)


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)


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)


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.


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)


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/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)


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.


Object donde debes dar doble clic en el icono (S1_28) Sprite.


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.


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)


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:


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)


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


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)


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)


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.


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)


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)


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)


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)


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)


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)


24/45

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



(S1_29)

3.2 Con el icono (S1_13) cursor haz clic en el escenario, a continuación aparecerá la


(S1_30)


25/45


(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.


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.



(S1_29)


27/45

4.2. Con el icono (S1_13) cursor haz clic en el escenario, a continuación aparecerá la


(S1_30)


(S1_76)


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)


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)


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.


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)


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)


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)


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.



(S1_29)


35/45


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)


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)


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


39/45

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


(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)


(S1_120), completa el cuadro con los siguientes datos y clic en Done. Así escomo debe quedar:

(S1_125)

(S1_126)


40/45


(S1_128).

(S1_1229)



(S1_131)

(S1_132)


(S1_133).

(S1_134)




41/45

(S1_135)

(S1_136)


(S1_137).

(S1_138)



(S1_139)


42/45


(S1_140).

(S1_141)



(S1_142)

(S1_143)


(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)


43/45



(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)


44/45

(S1_152)



(S1_153)

(S1_154)


(S1_155), completa el cuadro con los siguientes datos y clic enDone. Así es como debe quedar:

(S1_156)


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.

Plataforma tutorial

Documents

Transcript of Plataforma tutorial