[Tutorial] Crea tu propio juego de Plataformas paso a paso!

por Laripper10 Lun 09 Dic 2013, 11:56

Bienvenido Invitado !

[Tutorial] Crea tu propio juego de Plataformas paso a paso! UYy1TOF

Bueno, aqui les enseñare a hacer un Juego de plataformas en 2D, con camara, monedas, enemigos,etc. Es muy complejo asi que si te animas puedes intentarlo! Voy a ir subiendo tutoriales por parte en este mismo post asi me van siguiendo los interesados y si tienen algun problema o pregunta solo diganlo

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Platy_zpsdcf87502

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Platy_zpsdcf87502

Parte 1: Diseño del Jugador

Bueno acá vamos a diseñar al jugador y prepararlo para animar, vamos a hacer un metodo que sea sensillo para animar mas adelante pero si queres usar Sprites me dices y te digo como hacerlo Wink

Ok, cuando abrimos el Flash, nos aparecera un menu como este, presionen "Create New... Flash Document"

[Tutorial] Crea tu propio juego de Plataformas paso a paso! GRSu0gy

[Tutorial] Crea tu propio juego de Plataformas paso a paso! GRSu0gy

Ya, tendremos nuestro espacio de trabajo.

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Apmf

Bien, ahora vamos a preparar nuestras propiedades, damos doble-click donde dice "12.0 fps"

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 0pwx

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 0pwx

Bueno, nos apareceran unas opciones por default, cambiaremos el Tamaño de nuestra hoja de trabajo (yo puse 650 x 475 pero pueden poner el que quieran, aunque les recomiendo un tamaño cercano a ese) Y cambiaremos los fotogramas por segundo (FPS) Les pondremos 24. Luego damos a OK

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 9wlo

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 9wlo

Ahora a preparar el personaje, seleccionamos la herramienta rectangulo, elegimos un color de fondo transaparente, y desactivamos el Imán, luego hacemos un rectangulo masomenos del tamaño que quieren a su personaje, les recomiendo no hacerlo muy grande, por que suele haber poco espacio para hacer el piso y eso y si hacen todo muy grande el nivel les quedaria muy corto.

[Tutorial] Crea tu propio juego de Plataformas paso a paso! FN5NpHV

[Tutorial] Crea tu propio juego de Plataformas paso a paso! FN5NpHV

Seleccionamos la Lupa y hacemos zoom para dibujar dentro del rectangulo

[Tutorial] Crea tu propio juego de Plataformas paso a paso! FxWr9Mm

En donde dice "Layer 1" o "Capa 1" Le dan doble click y lo nombran como "limite", luego clickean el puntito debajo del candado para bloquear esa capa, luego añaden una capa con el boton que marco en la imagen, y renombran la segunda capa como "jugador" esta tiene que ir sobre la capa "limite"

[Tutorial] Crea tu propio juego de Plataformas paso a paso! J25r

[Tutorial] Crea tu propio juego de Plataformas paso a paso! J25r

Ahora nos ponemos a dibujar dentro del cuadro, primero hacemos SOLO la cabeza. Yo ya pense mi personaje sera como un Gato Agente o un gato espía xd

Herramientas:

[Tutorial] Crea tu propio juego de Plataformas paso a paso! R9lHw4j

[Tutorial] Crea tu propio juego de Plataformas paso a paso! R9lHw4j

Importante! Cosas que sean de color blanco en su personaje tambien deben ser pintadas, el fondo de la hoja de trabajo es blanco pero cuando le agregemos fondo y todo eso, por ejemplo, los ojos se veran transparentes u otras partes de color blanco, Para asegurarte de que lo hayas pintado, clickea una parte con el cursor normal y si aparece seleccionado con puntitos, esta pintado. [/img]

Tip si queres hacer sombreado: clickea el color al que le quieras agregar sombra (si son mas de uno usa "SHIFT" y selecciona "Paint selection", Elegi un color mas oscuro y pinta por la zona. LUEGO DE SOMBREAR, vuelve a seleccionar Paint normal, asi podes seguir dibujando mas adelante[/b]

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Ykipf3Z

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Ykipf3Z

[Tutorial] Crea tu propio juego de Plataformas paso a paso! B78w

[Tutorial] Crea tu propio juego de Plataformas paso a paso! S6faPVi

Acordate si queres deshacer el ultimo movimiento que hiciste, CTRL+Z es la solucion

Una vez que termines de hacer la cabeza, la seleccionamos toda (manten clickeado con el cursor normal desde una esquina y haz un cuadrado para que cubra lo que quieras seleccionar o sino usa shift y anda clickeando los colores y trazos)

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 35ZXwJd

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 35ZXwJd

Ahora hacemos click derecho sobre lo seleccionado -> Convertir a simbolo/Convert to symbol, Lo nombramos como "cabeza_jd" le ponemos REGISTRO AL MEDIO (IMPORTANTE) y Tipo Movie clip. Luego OK

[Tutorial] Crea tu propio juego de Plataformas paso a paso! X2M9nrv

[Tutorial] Crea tu propio juego de Plataformas paso a paso! X2M9nrv

Ahora hacemos una capa entre medio de Limite y jugador, no hace falta renombrarla, Bloqueamos la capa de Jugador y seleccionamos la Capa sin nombre y nos ponemos a dibujar un brazo

[Tutorial] Crea tu propio juego de Plataformas paso a paso! H9DLSA9

[Tutorial] Crea tu propio juego de Plataformas paso a paso! H9DLSA9

TIP: Si te molesta la cabeza, clickea el cuadrado de color al lado de la capa de jugador y solo veras las lineas y podras dibujar guiandote tambien

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Z9nTZnN

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Z9nTZnN

Cuando termines de dibujar el brazo, lo conviertes a simbolo, con las mismas propiedades que antes solo que le pones de nombre "mano_jd"

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 237zpwU

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 237zpwU

Ahora lo seleccionamos con la herramienta de transformacion libre, vieron que hay como una bolita blanca en el medio? la movemos a la esquina superior derecha

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Nv1t

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Nv1t

Ahora damos click derecho sobre la mano -> copiar, lo borramos, vamos a la capa del jugador, la desbloqueamos, Click derecho en cualquier parte -> Paste in place / Pegar in Situ luego le damos click derecho -> Arrange/organizar -> Send to Back/Enviar al fondo.

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Mt57

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Mt57

Bloqueamos la capa del jugador, volvemos a la capa sin nombre y ahora dibujamos el cuerpo/pansa, una vez que este listo lo convertimos a simbolo, de nombre "pansa_jd", y repetimos el proceso anterior: Copiar, cortar, ir a la capa del jugador, desbloquearla, pegar, enviar al fondo.

[Tutorial] Crea tu propio juego de Plataformas paso a paso! C2TXNoW

[Tutorial] Crea tu propio juego de Plataformas paso a paso! C2TXNoW

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Nv56

Ahora bloqueamos la capa del jugador, vamos a la capa sin nombre y dibujamos la otra mano, la seleccionamos y la convertimos a simbolo, de nombre: mano2_jd.

[Tutorial] Crea tu propio juego de Plataformas paso a paso! X1YQAsO

[Tutorial] Crea tu propio juego de Plataformas paso a paso! X1YQAsO

Ahora como hicimos con la primer mano, movemos el redondel blanco hacia la ESQUINA SUPERIOR IZQUIERDA. y Repetimos el proceso anterior: Copiar, cortar, ir a la capa del jugador, desbloquearla, pegar, enviar al fondo.

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Ivhw

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Ivhw

Ahora seguimos con las Piernas y hacemos lo mismo, no se olviden de mover el redondel blanco a la esquina que corresponda, De nombre: pie_jd y al otro pie2_jd. Cuando terminemos el jugador se vera algo asi

[Tutorial] Crea tu propio juego de Plataformas paso a paso! DOMVEaB

[Tutorial] Crea tu propio juego de Plataformas paso a paso! DOMVEaB

Ahora borramos las capas limite y la capa sin nombre

[Tutorial] Crea tu propio juego de Plataformas paso a paso! 1hs7

Ahora veremos como quedaria nuestro personaje, quizas paresca chico pero cuando se agrege la camara se agrandara un poco. Damos CTRL + ENTER para probar la pelicula

[Tutorial] Crea tu propio juego de Plataformas paso a paso! VgSW0VT

[Tutorial] Crea tu propio juego de Plataformas paso a paso! VgSW0VT

Ahora seleccionamos a toooodo el jugador, y lo convertimos a simbolo, de nombre: "one"

[Tutorial] Crea tu propio juego de Plataformas paso a paso! OUZGafr

[Tutorial] Crea tu propio juego de Plataformas paso a paso! OUZGafr

Ahora de nombre de instancia le ponemos "one" (se ubica en el menu desplegable "propiedades")

[Tutorial] Crea tu propio juego de Plataformas paso a paso! S70d95h

[Tutorial] Crea tu propio juego de Plataformas paso a paso! S70d95h

Volvemos a seleccionarlo, lo convertimos a simbolo: "jugador". Una vez convertido, de ahora en adelante NUNCA cambiar el tamaño al jugador, Por que se deformara y los scripts funcionaran mal

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Ygm5

[Tutorial] Crea tu propio juego de Plataformas paso a paso! Ygm5

Le ponemos de nombre de instancia "jugador"

[Tutorial] Crea tu propio juego de Plataformas paso a paso! R49aHY6

FIN DE LA PARTE 1

En la siguiente parte modificaremos una parte del terreno donde se movera el jugador. Ojala les halla gustado!
Salsu2!

por Razor Lun 09 Dic 2013, 12:42

Siempre he querido hacer un plataformero en flash. Mi problema, por supuesto, ha sido siempre el diseño de los personajes, la interfaz y los escenarios, aunque nunca esta de más intentarlo, muchas gracias por el tuto Lari! Será hora de desempolvar un poco el flash,a ver si me acuerdo algo Ejem...

por zilla8844 Lun 09 Dic 2013, 13:25

Genial,siempre quise hacer un juego con parecido a este,que tambien es en 2D
[Tutorial] Crea tu propio juego de Plataformas paso a paso! Rayman_Origins_Box_Art