Tutorial MF2 / Hacer Juego

No lo hice yo, lo saque de Taringa.

Con imagenes: Ver desde Taringa, Post Full

¡Hola! Seguro muchos quisieron hacer su propio juego hace rato, pero nunca llegaron ni siquiera a imaginar que hacer uno iba a ser tan fácil como lo es con Multimedia Fusion 2.
Hoy les voy a mostrar como pueden hacer un juego con este problema, bien fácil y completo, que les va a poder ayudar a adentrarse bien en las funciones del programa, que son muy variadas y no tan complejas.



Como primer paso, nos vamos a descargar el Multimedia Fusion 2. No paso link porque ya en Taringa lo van a poder encontrar full.
Una vez que lo tengan listo para usar, esto es lo que vamos a hacer:

1) Vamos a abrir la ventana del Multimedia Fusion 2 y vamos a empezar un nuevo proyecto, para eso, vamos a clickear en el ícono que corresponde a New (Nuevo), que sería este: .

2)Una vez que lo tengamos, nos va a aparecer una nueva parte de la ventana con contenido, que sería la Workspace Toolbar, una Barra de Herramientas que organiza nuestro trabajo y lo hace más fácil.


3) Una vez que hayamos localizado esta área, vamos a hacer doble click en Frame 1, que aparece escrito debajo de "Application 1". Esta será nuestra primer parte del juego, el frame principal en el que vamos a desarrollar nuestro juego.
Pero ahora, para hacer todo más fácil y rápido, te voy a mostrar las necesidades básicas que necesitás saber, así se va a ahorrar muchísimo tiempo:


(tamaño completo: acá)

4) Ahora, que ya tenemos todos lo básico del programa asimilado, y todo lo que vamos a usar ahora, vamos a empezar: lo que vamos a hacer es un juego donde el objetivo, es destruir unos ladrillos, haciendo rebotar la pelotita, y que esta destruya los ladrillos. También vamos a hacer un menu principal con imágenes, sistema de puntos, vidas, y una tabla de puntuaciones máximas. Para los vagos, acá dejo unos gráficos que tengo, hechos. Lo único que tienen es que descomprimir la carpeta. Descargalos acá la carpeta con las imágenes que vamos a usar. Si querés podés editar las imágenes y hacer tus propios, pero organizate bien, así no te vas a perder durante el tutorial.

5) Lo primero que vamos a hacer, es insertar el archivo "bola.gif", que sería la pelotita, en el frame y asignarle un movimiento de rebote. Entonces hacemos esto: vamos a "Insert (Insertar)", "New object (Nuevo objetos)", a "Graphics and Animations (Gráficos y Animaciones)" y luego terminamos seleccionando "Active Picture (Imágen activa)", cuando nos pida que aclaremos que imágen queremos agregar, vamos a localizar el archivo "bola.gif" y lo vamos a insertar. Después, vamos a hacer click derecho a la pelotita, y vamos a "Align in frame (Alinear en el frame)" y después "Horz Center (Centro horizontal)", después entramos otra vez en "Align in frame (Alinear en el frame) y ahora clickeamos "Vert Center (Centro vertical), esto va a dejar a nuestra pelotita en el mismísimo centro de la imágen..


Después de eso vamos al editor del frame, y vamos a las propiedades de nuestra pelotita. A las propiedades se entra clickeando una vez en la pelotita. Están al costado, en el cuadro que se explica ántes en la imágen. Después de eso, cuando estamos ahí, clickeamos en el iconito del hombre corriendo, y donde dice Static (estático/sin movimiento), clickeamos y cambiamos a Bouncing Ball (pelota rebotadora).


Después de eso, vamos a tener que configurar la dirección de nuestra pelota, para que no se vaya a ningún lado. Para eso, nos vamos a quedar en donde editamos lo que hace que la pelota rebote. Abajo del tipo de movimiento hay un cuadro que dice Initial Movement (Movimiento Inicial) y clickeamos al lado, donde están los números. Eso lo vamos a editar sacando algunas flechas (se sacan clickeando el cuadrado que le corresponde a cada una). Para terminar las direcciones tienen que quedar establecidas así:



Luego de esto vamos a probar nuestro frame, obviamente la pelota se escapa, asi que vamos a nuestro próximo paso.

6) Como se nos escapa nuestra pelota, lo que vamos a necesitar son obviamente, topes. Vamos a insertar dos nuevas imágenes activas, de la misma forma que ántes: localizá "vertical.png" y "horizontal.png" e insertalas en la imágen, luego, ubicá ambas en los bordes de la imágen, cosa de que quede solo un píxel adentro, que va a ser el que va a detener a la imágen de que se escape.



Bueno, ya tenemos lo básico de estos topes, si querés también podés cambiarles el tamaño para que queden mejor y todo entero sin barras para subir o bajar, es más cómodo. En fín, lo que todavía nos falta es que los topes hagan que la pelotita rebote y que no se vaya de nuestra pantalla. Para eso, vamos a ir al editor de eventos. Después de eso, vamos a clickear en New Condition (Nueva condición) la cual nos va a dejar crear un nuevo evento, para empezar hay que hacer click derecho en lo que quieras que tenga un evento. Nosotros queremos que nuestra pelota rebote al chocar contra vertical y horizontal. Entonces, vamos a hacer esto: En New Condition (Nueva Condición), vamos a hacer click derecho a la pelotita) y vamos a ir a Collisions (Colisiones), y después vamos a Another Object (Otro objeto), donde vamos a seleccionar Vertical. Ahora ya tenemos nuestro primer evento, lo que queremos editar son los acciones. Para hacerlo vamos a hacer esto: ¿Ven que abajo de los objetos que pusimos y las acciones principales, que algunas usamos después, hay cuadrados. Ahí es donde se editan las acciones, abajo de cada objeto y las acciones principales, en esa misma fila, está el cuadrado que le pertenece. Entonces vamos a editar la acción. Recordemos qué queríamos: queríamos que cuando la pelota choque con vertical y horizontal, la pelota rebote. Entonces, ahora vamos al cuadrado que le pertenece a la pelota, hacemos click derecho y hacemos click en Movement (Movimiento) y luego clickeamos Bounce (rebotar). Entonces ya tenemos que cuando la pelota choca con vertical, esta rebota. Ahora añadimos un sonidito. Para eso en el cuadrado que pertenece al amplificador clickeamos Sample (Sonido), y después Play Sample (Reproducir Sonido). Después de eso nos aparece una pantalla, allí vamos a clickear el segundo Browse (Explorar) que pertenece a From a File (de un archivo). Ahí en la carpeta que bajaste localizá "cuandochocaconlapared" y seleccionalo. Después clickeá OK.
Ahora hay que hacer lo mismo pero con horizontal. Entonces, hacemos una nueva condición, que cuando la pelota choque con horizontal rebote. Cuando ya tengas la condición que aclare "Cuando la pelota choca con horizontal", en vez de editar las acciones una por una, si querés que sea más fácil, podés mantener el click izquierdo en las acciones que ya habías puesto para vertical, y arrastrarlas para que se copien también como acciones en horizonta, si no querés complicarte hacelo normal.
Cuando hayas terminado te debería quedar algo así:



Si no te quedó así, fijate los pasos hasta que te quede así. Ahora si lo tenés así, fijate otra vez el frame. Vas a ver que rebota en las paredes, pero se va por abajo. ¿Entonces ahora que vamos a necesitar? Exácto. La plataforma.

7) Ahora para la plataforma, vamos a insertar un nuevo objeto: otra imágen activa. Esta imágen es rebotin.gif. Lo hacemos de la misma forma que con la pelotita. Una vez en el frame, lo organizamos para que quede en el centro horizontal, y después lo bajamos hasta el fondo. Ahora lo que queremos es que el rebotín se mueva cuando el jugador mueve su mouse. Entonces, vamos a Propiedades (Clickeando una vez el objeto), y en vez de Static (estático) lo cambiamos para que quede Mouse Controlled (controlado por el Mouse), ahora obviamente tenemos que editar los límites. Entonces debajo de Player (Jugador) está Edit Movement (editar movimiento). Entonces ponemos Edit y editamos hasta que el rebotín no se vaya de los límites de los costados, y que se quede quieto, es decir, que no se mueva de arriba para abajo. Para eso vamos a ir achicando ese cuadrado que aparece cuando clickeamos el botón Edit (Editar) en Editar Movimiento. Cuando creas que está bien, en la ventana que salió cuando clickeaste Editar, poné Try Movement. Así hasta que veas que no se mueve para abajo ni para arriba, y que no se sale del frame.
El exácto tamaño que tuvo que quedar es así:



Si tenés diferente, no importa, lo único que importa es que no se mueva de sus casillas.

Ahora lo que hay que hacer, es que cuando la pelota colisione con el rebotín, la pelota rebote, y se produzca un sonido. Entonces ahora vamos a nuestro editor de eventos. Creamos una nueva condición, que aclare que cuando la pelota colisione otro objeto, que va a ser el rebotín, (New Condition > Bola (click derecho) > Collisions > Another Object > rebotín) la pelotita rebote. Una vez creado la condición, editamos las acciones. Lo de el rebote de la pelotita lo podemos arrastrar desde arriba, donde tenemos el rebote con vertical y horizontal. Lo que sí vamos a hacer nuevo va a ser la música, porque va a ser otro sonido. Entonces, click derecho en la casilla que corresponde a la música y vamos a Sonidos y Reproducir Sonidos (Sample > Play Sample) cuando nos aparezca la ventana, vamos a Explorar desde un archivo ( From a File > Browse) y seleccionamos el archivo "choqueconrebotin". Después apretamos OK.
Ahora, deberías tener estas trés acciones de esta manera:


Intentá probar el frame ahora, cada vez toma más forma, ¿no?
Pero seguimos teniendo dos problemas: cuando perdemos la pelota, no vuelve, eso lo solucionamos después, porque ahora vamos a hacer los bloques, pero lo que vamos a solucionar ahora, es el hecho de que no podemos cerrar la pantalla si no es clickeando el alt F4. Para eso vamos al editor de eventos. Ponemos una nueva condición, hacemos click derecho al mouse, y clickeamos The Keyboard (El teclado) y después Upon pressing a key (Presionando una tecla), cuando seleccionemos eso, nos va a pedir que tecleemos una tecla. Vamos a teclear el ESC, o la que quieras que sea la que cierre tu aplicación cuando se presione. Entonces ahora que ya tenemos la condición, hay que editar la acción. Vamos a la casilla que le corresponde a Storyboard Controls (Controles principales), y hacemos click derecho, entonces vamos a clickear End the Application (Cerrar la aplicación). Entonces ahora cuando queramos cerrar la aplicación, presionamos ESC. Probá tu aplicación a ver si funciona .
Tus eventos deberían ser estos ahora:


[Tienes que estar registrado y conectado para ver esa imagen] Ahora vamos a hacer los bloques, los puntos, y las vidas. Todo en este paso. Empezemos.
Para los bloques, vamos a insertar una nueva imágen activa, que es bloque2.gif. Vamos a ubicar la primera donde queramos, pero que quede a un espacio del borde horizontal, y a otro espacio de un centímetro y medio del borde vertical. Después de eso, si querés (te conviene para no hartarte de insertar objetos), podes ir copiando y pegando. Por ejemplo, podes pegar de a uno hasta que hagas una fila entera, (hasta ántes de la linea de la pelota)



Después haciendo click izquierdo y arrastrando por todos los bloques, podes seleccionarlos y copiarlos y pegarlos, hasta que tengas todo cubierto.
Te debería quedar así, o como vos lo prefieras tener organizado. No hay problema como los organizes:



Ahora, vamos a insertar dos nuevos objetos: los puntos y las vidas. Para eso vamos a Insert (Insertar) > New Object (Nuevo objeto) > Games (Juegos) y insertamos primero puntos a la izquierda, y después vidas a la derecha.
Nos debería quedar así:


Ahora hacemos una lista de los eventos y acciones que vamos a necesitar:
- Cuando la pelota choque el bloque, el bloque tiene que desaparecer, reproducirse un sonido, la pelota rebotar y se tiene que añadir un punto al jugador.
- Cuando la pelota se vaya del area de juego, que el jugador pierda una vida, que se reproduzca un sonido y que la pelota se respawnee (que vuelva a aparecer) en la dirección que nosotros queramos.
- Cuando las vidas lleguen a cero, que se mueva hacia el próximo frame, (que va a ser en el próximo paso, la tabla de puntuaciones).
- Cuando los puntos sean igual a la totalidad de bloques en el frame (significaría que destruíste todos los bloques y ganaste) ir al próximo frame (tabla de puntuaciones).

Entonces empezamos, vamos a ir al editor de eventos y vamos a crear una nueva condición, que sería que cuando la pelota colisione con otro objeto que sería bloque2.gif, pasen todas esas acciones. Entonces la condición sería: Click derecho en la pelotita > Collisions (Colisiona) > Another Object (Otro Objeto) > Bloque2.gif, y ahora las acciones: vamos en órden de como aparecen las casillas, primero en sonidos, click derecho, Sample (Sonido) > Play Sample (Reproducir Sonido) y vamos a explorar desde un archivo y encontrar "Choque con Bloque". Presionamos OK. Ahora paramos en la casilla de esa fila que le corresponde al Jugador Uno (la casilla con el bloque). Ahí vamos a hacer esta seguidilla: Click derecho > Score (Puntos) > Add to Score (Añadir a puntaje) y donde la ventana nos deja insertar un número, vamos a insertar 1, que serían los puntos que nos daría por destruir el bloque. Luego presionamos OK y ya tenemos lo que sería la música y el puntaje. Falta el que la bola rebote, y el que el bloque se destruya. Para lo de la pelota: Click derecho a la casilla de esa fila que corresponde a la pelota > Movement (Movimiento) > Bounce (Rebotar) y listo. Y por último, que se destruya el bloque: click derecho a la casilla que le corresponde al bloque en esa fila > Destroy (Destruir) y listo, tenemos todas las acciones de esta acción.
Proba tu aplicación y vas a ver que destruye todos los bloques, pero como todavía no editamos lo del respawneo y lo de las vidas, cuando se te escapa la pelota no va a volver. Presioná ESC y sigamos.

Ahora tenemos la condición de "Cuando la pelota se vaya del area de juego..." y las acciones que serían, hacer sonar una música, respawnear la pelota y ponerla en una dirección. Para esto: vamos a Nueva Condición (New Condition) > click derecho en la pelota > Position (Posición) > Test position of "Active Picture 3" (Testear posicion de la "Imágen Activa 3" y después seleccionamos la flecha de más abajo en lo blanco, que representaría nuestro frame. Esa flecha es "Leaves to the Bottom ?" que significaría, "Desaparece por abajo". La clickeamos, clickeamos OK, y listo. Ahora hay que hacer las acciones, nuestra primera parada es el sonido: Sample (Sonido) > New Sample (Nuevo sónido) > From a File Browse (Explorar desde un archivo) > cuandoperdes > OK. Ahora, hay que sustraer una vida del jugador. Vamos a la casilla en esa fila que pertenece al Jugador 1 (Player 1), click derecho > Number of Lives (Número de Vidas) > Substract from Lives (Sustraer de las vidas) > y lo cambiamos a 1. Lo que nos falta es el hecho de que la pelota respawnee y que vaya en una dirección. Para eso vamos a la pelota, y vamos a hacerle hacer DOS acciones. Una sería: Click derecho en la casilla de la fila que corresponde a la pelota > Position (Posición) > Select position (Seleccionar posición) > y movemos el cuadrado con la cruz justo en el lugar que está en el frame sin movimiento, como muestra esta imágen:


Luego presionamos OK y listo. Ahora, en el mismo casillero, el de la pelota vamos a hacer esto: click derecho en la casilla > Direction (Dirección) > Select Direction (Seleccionar Dirección) > y desmarcamos clickeando en el cuadrado la que mira al cero, y marcamos la que mira al ocho), para que la pelota suba y de tiempo al jugador a volver al lugar donde respawnea la pelota (el medio). Presionamos OK, y terminamos con esta condición.

Ahora vamos a hacer una nueva condición: Nueva condición (New Condition) > Jugador 1 (Player 1) > click derecho en este > Compare to player's number of lives > presionamos OK, porque ya está en cero y ahora hacemos la acción: en la casilla que pertenece al Storyboard Controls (Controles Principales), hacemos click derecho en este casillero, y ponemos "Next Frame" (Próximo Frame). Ya vas a entender porqué Next Frame, porque ahora en el próximo frame, vamos a hacer la tabla de puntuaciones, pero para tener esto ya listo y no tener que volver a este frame, lo hacemos ahora.
Y ahora lo mismo, pero comparando con el puntaje. Ántes de este, vamos a contar cuantos bloques tenemos: yo tengo 98, y como puse cada bloque con valor de puntos de uno, mi resultado para esta condición va a tener que ser noventa y ocho. Pero si tuvieras menos o más bloques, y distinto valor de puntos vas a tener que saber cuántos bloques tenés y después multiplicarlos por el puntaje que da cada uno, por ejemplo si tenés 100 y cada uno vale 8, tu valor total va a ser 800. Entonces en esto no insertarías 98, sino que 800, eso para los diferentes puntajes que valga cada bloque y cuántos puntos de cada uno. Entonces esto es lo que vamos a hacer: Nueva Condición (New Condition > Click derecho en Jugador 1 (Player 1) (El joystick) > Compare to Player's Score > y en mi caso pongo 98, pero ustedes hagan su cuenta > OK..
Tus eventos deberían ser estos:


Y listo, ahora ya tenemos todo el frame del juego completo, ahora vamos a hacer la tabla de puntuaciones, y después la página principal.
Ahora deberías probar tu frame, ¡vas a ver que ya es todo un juego!

9)¡Ahora a insertar la tabla de puntuaciones! Para eso, vamos a ir al Storyboard Editor, que está al lado de donde entrás a tu frame, es este ícono: . Una vez ahí vamos a clickear en el 2 al lado del More (Más), y nos va a aparecer un nuevo frame:


Para entrar en el frame 2, hacemos doble click en lo que sería la vista miniatura de este. Una vez ahí, vamos a insertar una nueva imágen activa: "loladrillo!" (Insertar > New Object (Nuevo Objeto) > Graphics and Animations (Gráficos y Animaciones) > Active Picture (Imágen Activa) > y seleccionan Loladrillo!. Una vez hecho eso, lo alinean en el centro horizontal (Click derecho en la imágen > Align in Frame (Alinear en el Frame) > Horz Center (Centro Horizontal), y lo suben hasta arriba. Listo.
Ahora vamos a insertar la tabla de puntuaciones. Para eso vamos a crear otro objeto: Insert (Insertar) > New Object (Nuevo Objeto) > Games > (Juegos) > Hi-Score (Puntuaciones Máximas), la alineamos en el centro y listo. Si quieren, para que les quede más linda, pueden hacerla más grandes haciendo un click en la tabla de puntuaciones, y bajarla dejando solamente tres centímetros de espacio, para el botón. También haciendo un click, van a propiedades, a la A, y ahí pueden editar la fuente y su tamaño. Yo la pongo Verdana, tamaño 12, porque es mi favorita.
Ahora que ya hicieron eso, van a insertar el botón de Volver, que va a resetear la aplicación y va a ir al menú principal que vamos a crear ahora. Para eso hacemos esta seguidilla: Insert (Insertar) > New Object (Nuevo Objeto) > Graphics and Animations (Gráficos y Animaciones) > Active Picture (Imágen Activa) > y seleccionan el archivo "botonvolver.png". Una vez que lo tienen en el frame, lo alinean en el centro horizontal (Click derecho a la imágen > Align in Frame (Alinear en el Frame) > Horz Center (Centro Horizontal). Y lo bajan hasta que esté abajo de la tabla de puntuaciones. Ahora hay que hacer un evento, por lo que vamos al Events Editor (Editor de Eventos) y cremaos una nueva condición con una acción del Storyboard Controls (Controles Principales): New Condition (Nueva Condición) > click derecho en el mouse > The Mouse (El Mouse) > User clicks on an object (El usuario clickea en un objeto) > Cuando les aparezca la ventana directamente apretan OK > Y seleccionan la imágen del botón volver. Y listo, ahora ya tienen su frame preparado. Ya pueden probar la aplicación, pero recuerden que cuando precionen volver, vuelve al frame del juego, porque todavía no creamos el menú.
Así les deberían quedar el frame y los eventos:




10) Ahora por último de todo, hay que crear nuestro menú, para eso vamos al Storyboard Editor (Editor principal) y creamos un frame clickeando en el 3, después entramos en el frame haciendo doble click en su miniatura.


Una vez ahí, vamos a insertar otra vez el objeto Loladrillo, que es una imágen activa: Insertar > New Object (Nuevo Objeto) > Graphics and Animations (Gráficos y Animaciones) > Active Picture (Imágen Activa) > y seleccionan Loladrillo!. Una vez hecho eso, lo alinean en el centro horizontal (Click derecho en la imágen > Align in Frame (Alinear en el Frame) > Horz Center (Centro Horizontal), y lo suben hasta arriba.
Una vez hecho eso, vamos a insertar dos botones de la misma manera que insertamos el botón volver, estos botones son "botonjugar.png" y "botonpuntuacionesmáximas.png", para insertarlos hacemos esto: Insert (Insertar) > New Object (Nuevo Objeto) > Graphics and Animations (Gráficos y Animaciones) > Active Picture (Imágen Activa) > y primero insertamos Jugar y después puntuaciones máximas. Jugar lo vamos a alinear en el centro (click derecho en la imágen> Align in Frame (Alinear en el frame) > Horz Center (Centro Horizontal), debajo del logo de "lo'ladrillo!", y el botón Puntuaciones Máximas debajo del de jugar, alineado también en el centro. Una vez hecho esto, necesitamos añadir los dos eventos, entonces vamos a Events Editor (Editor de Eventos), y hacemos esto: New Condition (Nueva Condición) > Click derecho en el Mouse > The Mouse (El mouse) > User clicks on an object (El usuario clickea en un Objeto) > después apretamos directo OK> y primero hacemos esto para el botón Jugar y después para el botón P.Max (Puntuaciones Máximas) y listo. Ahora vamos a tener que insertarle acciones a ambos, en Jugar la acción va a estar en Storyboard Controls (Controles principales) y en P.Max también: en Jugar hacemos click derecho en la casilla que corresponde a Storyboard Controls (Controles Principales) > y clickeamos Next Frame (Próximo Frame) y para P.Max hacemos click derecho en la casilla que le corresponde a Storyboard Controls (Controles Principales) > y ponemos Jump to Frame (Saltar al Frame...) y seleccionamos el frame de la Tabla de Puntuaciones. Una vez hecho esto solamente nos queda un último paso para terminar el juego.
El menú y sus eventos deberían quedar así:




11) Ahora lo único que nos falta es hacer que el menú, quede como el primer frame en el órden, y no como el segundo. Para lograr eso hacemos esto: Vamos al Storyboard Editor (Editor principal) y arrastramos la vista miniatura en el Frame del Menú (Frame 3) hasta arriba del frame 1, que es el juego. Como muestra la imágen:


Y listo, ahora ya tenés tu aplicación, lo único que también se incluye en este paso, es guardar tu juego con el nombre que quieras, llendo a File (Archivo) > Save As (Guardar) y eligiendo el nombre. También podés crear un Ejecutable y un Setup para tu juego, llendo a File (Archivo) > Build (Construir) > Application (Aplicación). Acordate que para poder crear el Setup, ya tenés que haber creado el Ejecutable, sino cuando quieras crear el Setup, en inglés te va a pedir que primero crees el Ejecutable.
____________________________________________________________________

¡Espero que les haya encantado el tutorial! Y espero también que les sirva, ya que me costó arduo trabajo hacerlo, porque yo traducí lo que hacía falta traducir porque el juego está en inglés, codifiqué el juego, hice las imágenes, configuré las imágenes, hice los gráficos y escribí la guía. Espero que sepan apreciarlo muchachos .

No se olviden que pueden crear cualquier juego que su imaginación alcanze a pensar, también puede ser hasta un juego online descargable, obvio que hay que tener mucha sabiduría para hcerlo. Si quieren gráficos para cualquiera de los juegos que van a hacer, no duden pedírmelos. Con gusto se los hago. [u]

esta bueno el tutorial es para hacer ese jueguito como el pong jaja