* INDISPENSABLE programa Macromedia Flash
* RECOMENDABLE ojear el tutorial de funcionamiento

CARACTERÍSTICAS GENERALES DEL JUEGO
>Tamaño pantalla 400 x 550
>Scroll vertical
>35 fotogramas/segundo
>Sonido Stero

LOS PASOS QUE DAREMOS
- 1: Confeccionar los decorados e imagenes.
- 2: Insertar nave principal y que se mueva con las teclas.
- 3: Añadir enemigos móbiles.
- 4: Implementar disparos que hagan explotar las naves enemigas.
- 5: Meter un decorado de fondo que se mueva.
- 6: Detectar cuando hay colisión entre nave principal y enemigos.
- 7: Añadir efectos de sonido.
- 8: Perfilar mejoras.

En este post iré colgando los archivos .fla de Flash, correspondientes a cada paso.

PASO 1: DISEÑO DE LAS IMAG
PASO 2: INSERTAR NAVE QUE SE MUEVA CON LAS TECLAS
Tutorial_paso2.rar (6,9 Kb)

Pues al final, como véis, y debido a que me han comentado en diversas ocasiones que sería interesante que explicase como se hace un jueguecito de naves, me pongo en el asunto. Espero que sirva para alguien.

Empecemos;

Paso 1: DISEÑO DE LAS IMAG

Teniendo en cuenta que el tamaño de pantalla que utilizaremos es de 400 x 550 (y que el srcoll de movimiento será vertical), quiero indicaros que además, la parte superior del decorado debe encajar con la inferior en cuanto a su dibujo y continuidad (ya que iremos repitiendo la misma imag de fondo en un bucle).
La nave principal, enemigos, disparos, y explosión, deberán ser gif (y de fondo transparente).

Había pensado que podríamos colgar en este hilo decorados y diseños de los objetos, y elegir entre todos cuáles queréis que sean los que utilice en el tuto. Así personalizamos un juego entre todos y evidentemente luego cada uno puede cambiar lo que quiera a su gusto (y además así no tendré que ponerme a diseñar objetos, sip!).

Venga, a animarse que es diver!

A ver que nos sale JEJEJEJE!
Ya me he descargado el tutorial de funcionamiento, espero que sea sencillo.Buena idea que vayas colgando los archivos de flash a medida que avancemos

Esto tiene buena pinta...
Aporto también este otro decorado de fondo que me parece, quedará mejor;

OH SI queda mejor.¿Porqué no cuelgas como quedará el ejercicio?Puede que así la gente se anime a participar

Paso 2: INSERTAR NAVE Y QUE SE MUEVA CON LAS TECLAS


1- Abrimos el Flash
2- Cambiamos la velocidad de reproducción ya que el valor por defecto da como resultado una animación muy lenta. Para ello; Menu MODIFICAR/ Documento..., y velocidad de fotogramas; 35 fps. Y de paso, cambiamos el color de fondo (yo lo he puesto negro).
3- Insertamos la nave; Menu ARCHIVO / Importar a escenario. Seleccionamos el gif de la nave y ABRIR. Con esto ya tenemos nuestra nave en el flash, pero se trata de un gif y lo que nos interesa es convertirla en un clip de pelicula para poder meterle códigos de programación. Seleccionamos el gif mediante un click, luego vamos al menu MODIFICAR, convertir en símbolo (tipo; clip de película). Y antes de ACEPTAR, le ponemos el nombre "nave".
4- Ahora ya podemos programar ese clip. Lo seleccionamos mediante un único click (si haces doble click, entras en el modo de edición del clip, y ahora esto no nos interesa). En caso de sufrir parkinson y haber entrado dentro del clip, presionar ESCENARIO (y volvemos al clip de película principal). Ok. Una vez seleccionado el clip "nave", abrimos la ventana ACCIONES (por si no está abierta). Se encuentra en menu principal VENTANA / Acciones. Si todo va bien, estamos viendo una ventana titulada Acciones-clip de película. En su interior no hay nada, así que metemos el siguiente código;

Código:

onClipEvent (load) {    var velocitdadx = 8;    var velocidady = 8; } onClipEvent (enterFrame) {    if (explotando == false) {       if (Key.isDown(Key.RIGHT) == true) {          if (_x<385) {             _x = _x+velocitdadx;          }       } else {          if (Key.isDown(Key.LEFT) == true) {             if (_x>25) {                _x = _x-velocitdadx;             }          }       }       if (Key.isDown(Key.DOWN) == true) {          if (_y<525) {             _y = _y+velocidady;          }       } else {          if (Key.isDown(Key.UP) == true) {             if (_y>35) {                _y = _y-velocidady;             }          }       }    } }

5- En estos momentos tenemos un clip principal, y dentro, el clip de película titulado nave. Entramos mediante un doble clik en el clip que hemos llamado nave. En este caso, la diferencia es muy sutil, pero hemos entrado dentro del clip para editarlo. Aquí irían todas las animaciones de la nave y más códigos si procede, pero de momento, no vamos a complicar el tema. Sencillamente hacemos clik en el primer (y único en este caso) fotograma que contiene el clip nave y en la ventana aciones (titulada acciones-fotograma), escribimos;

Código:

explotando=false

Y luego explicaré porqué.

Y ya está! Con esto la nave se mueve mediante las teclas de dirección.

El código puede parece complicado por los IF anidados que contiene. Para verlo mas claro, la estructura de un IF es;
if(condición){haz esto}
En este caso también se utiliza ELSE. Es decir, si se cumple tal condición haz esto, en caso contrario haz lo otro;
if(condición){haz esto} else {haz esto otro}

Podemos observar además, dos bloques claramente diferenciados:
onClipEvent (load) {contiene la información de las variables que se leen al cargar el clip}
Y por otro lado;
onClipEvent (enterFrame){contiene todas las acciones que quiero que permanentemente se actualizen y ejecuten}

En el onClipEvent (load) {} , hemos indicado el valor de las dos variables de movimiento para la nave; var velocitdadx = 8, y var velocitdady = 8.
Estos valores pueden cambiarse dependiendo de la velocidad que deseemos otorgarle a la nave.
Y en onClipEvent (enterFrame) {} ;
-Primero hemos condiciano todas las acciones de la nave (en nuestro caso de simple movimiento), mediante un IF que comprueva si la nave está explotando (ya que si explota, no deseamos que responda a las teclas de movimiento). Por eso metimos esa varible explotando=false, en el fotograma 1 del clip nave. Cuando añadamos la explosión, al inicio de la misma pondremos explotando=true.
- Luego hemos ido metiendo IFs de comprovación para ver que tecla se está presionando. Y dentro de cada comprovación de tecla, hemos delimitado unos "topes" de posición, mediante más condicionantes IF, para que la nave no se salga de la pantalla. Es decir, que mientras se cumpla que; x>25, x<385, y<525, y>35, la nave responderá a las teclas. Y en caso contrario, ignorará la orden de sumar velocidadx y velocidady al apretar teclas.

Tutorial_paso2.rar (6,9 Kb)

Lo abres, pulsas F12 y observas lo que hace...

_________________

Me dijiste que esto seria sencillito

El archivo me funciona, pero me lio completamente para seguir esos pasos.

muy buen tutoria l master sigue haci


me resgistre solo para agradecer el tuto y espero que sigas

Gracias fulgore.
A veces pienso que este tuto no interesa a nadie...