Cómo hacer un juego de plataformas

Favourite 534 favourites
Tutorial written by AshleyOriginally published on 26th, January 2012 - 10 revisions

Translation Team:

26 total revisions

Con Construct 2 puedes hacer toda clase de juegos 2D. En este tutorial vamos a ir desde lo más básico para hacer un juego de plataformas. Si eres nuevo en Construct2 y prefieres hacer un juego al estilo shooter, mira esta alternativa en la Guía para Principiantes. ¿Listo para hacer un juego de plataformas? Vamos a ello...

Nota: Por favor, no pidas ayuda en la sección de comentarios. Ve a nuestro forum para tener la mejor respuesta a tus inquietudes.

Este tutorial usa los sprites de Jungle Platformer del paquete que te dan cuando compras Construct 2. (El enlace se debería haber enviado por correo electrónico.) Si estás utilizando la versión gratuita, puedes sustituir con tus propios gráficos, o intentar en la [Guía del principiante alternativa] en [1], que proporciona todos los sprites que necesitas.

Instalando Construct 2

Si no lo has hecho todavía, baja una copia de la última versión de Construct 2 aquí. Construct 2 es sólo para Windows, pero los juegos que puedes hacer corren en cualquier plataforma, ya sea Mac, Linux o iPad. Construct 2 puede también ser instalado en cuentas de usuario limitadas. También es portátil, así que puedes instalarlo por ejemplo en una memoria USB y llevarlo contigo a donde quieras.

Comenzando

Una vez listo, abre Construct 2. Haz click en File y selecciona New.
File/New
En el cuadro de diálogo New Project (Nuevo proyecto) no necesitas cambiar nada. Sólo haz click en Create project (Crear proyecto). Construct 2 nos conservará el proyecto completo en un único archivo .capx. Ahora te aparecerá un layout (lienzo) vacío –la vista de diseño donde crearás y posicionarás los objetos. Piensa en este lienzo como si fuera el nivel de un juego, o una pantalla de menú inicial. En otros programas, éste puede ser llamado “cuarto”, “escena” o “cuadro” (room, scene or frame)

Tamaño del lienzo

Ante todo necesitamos que este lienzo sea un poco más grande que lo normal. Click izquierdo en cualquier lugar del lienzo y en la “barra de propiedades” (Properties Bar) aparecerán las “propiedades del lienzo” (Layout Properties). Cambie el tamaño a 4000 x 2048.

Estableciendo el tamaño del lienzo.
Vamos a colocar una imagen azulejada en el fondo del lienzo. Doble-click en cualquier lugar del lienzo. Nos aparece la opción Insert Object. Doble click en el objeto Tiled Background para insertarlo.

Añadiendo un fondo azulejado.
El Mouse se vuelve una cruz. No importa donde lo coloques inicialmente, solo le das click izquierdo en algún lugar del lienzo. Se abre entonces el “Editor de imagen” Image editor de tal forma que puedas colocar la imagen. Vamos entonces a importar el archivo Background Image\Background.png desde el paquete de sprites. Click en Open para importar una imagen.

Importando un archive de imagen.
Selecciona el archivo Background Image\Background.png y cierra el editor de imagen. Ahora verás parte de la imagen de fondo en el lienzo.

Necesitamos cubrir todo el fondo. Comprueba que está seleccionado (click izquierdo en el lienzo) y sus propiedades aparecerán en la Properties Bar. Para cubrir el lienzo completo, coloca su posición (Position) a 0, 0 y su tamaño (Size) to 4000, 2048 (el mismo tamaño que el lienzo).

Cubriendo el lienzo con los azulejos.
La imagen del fondo es bastante grande, así que es difícil verla toda de una vez. Vamos a hacer zoom out para mirarla más. Presiona Control y dale a la ruda del mouse para atrás para alejar la vista. Alternativamente, presiona View - Zoom out un par de veces. Podrás entonces ver el lienzo completo, algo así:

El lienzo completamente azulejado.
Fíjate que el contorno de trazos en la parte superior izquierda, es el tamaño de la ventana en comparación con el resto de la disposición. Presiona Ctrl 0 para hacer zoom back a 100%, or View - Zoom to 100% en el menú. Probablemente has hecho zoom en el medio del lienzo. Use las barras de desplazamiento para navegar desde la parte superior hasta la esquina izquierda del lienzo. También puedes hacer click y arrastrar el botón medio del mouse, para panear alrededor del lienzo. O presiona la barra espaciadora para conseguir lo mismo si no tienes un mouse con botón en el centro.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

1
korogisio 2,527 rep

Muy bueno, lastima q no esté todo traducido.

Sunday, May 12, 2013 at 7:09:30 PM
3
webpagemx 569 rep

Excelente muy comprensible todo. gracias

Tuesday, January 21, 2014 at 5:18:24 PM
2
webpagemx 569 rep

Esta Buenisimo. Alguien tiene que pueda compartir el archivo Tiles.png y la parte de la explicacion 4 aun no me queda claro alguien sabe de otro complemento para completar y entender bien el tutorial. gracias

Wednesday, January 29, 2014 at 5:38:42 AM
5
Arlys 1,067 rep

Estoy traduciendo lo que faltaba del tutorial poco a poco, voy por la página dos, cuando esté al 100% dejaré un comentario.
Un saludo

Monday, March 24, 2014 at 9:10:26 AM
2
Violahuesos13 339 rep

Estoy esperando que lo terminen, gracias <3

Monday, March 31, 2014 at 7:50:46 AM
0
bubajope 479 rep

Al poner el fondo, en vez de estirar la imagen, la repite muchas veces para llenar el espacio de 4000x2048. ¿alguien sabe como solucionarlo?

Sunday, August 07, 2016 at 10:11:12 PM
1
MrCatRamom 207 rep

#SomosNGL na mentira estubo muy bueno me gusto

Tuesday, October 18, 2016 at 2:14:22 AM
0
RubiuhVenAMi 235 rep
#SomosNGL na mentira estubo muy bueno me gusto
quoted from MrCatRamom

Al fin un Negrolemico :V:V:V

Friday, February 10, 2017 at 5:57:05 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.