Introdução ao MMF2

 

mainimagemmf2d2-1-w452h311

Conforme falamos anteriormente no Blog, iremos ter algumas matérias relacionada ao Multimedia Fuion 2, essa matéria é original do MMFMakers, um dos maiores portais sobre Multimedia Fusion do Brasil. Nela você vai aprender os conceitos básicos do MMF2, e teremos mais matérias do MMf2 em breve por aqui!


O Multimedia Fusion 2 (MMF2) é sem dúvidas a minha ferramenta de criação de jogos favorita. Por quê? Porque é pura lógica. É como uma linguagem de programação mais simples. Pense nele como um C++ em que você não precisa decorar centenas de linhas de códigos; porque todos os códigos já estão prontos, à sua disposição. Você só precisa adicioná-los no “script” e pronto. Mas, assim como na linguagem de programação, a programação tem que ter Lógica. A lógica, assim como nas linguagens, é o segredo do Multimedia Fusion 2. Normalmente, as pessoas começam com um maker como o Multimedia Fusion 2, e depois vão para as linguagens como o C++. Isso porque esses makers, dão uma introdução à lógica de programação, que é essencial nas linguagens. Repetindo, este tutorial NÃO vai te ensinar a criar um jogo, só vai te dar noções básicas sobre o programa.

Mas o que realmente acontece no Multimedia Fusion 2 é um conjunto de eventos que dá movimento aos objetos. O Multimedia Fusion 2 não é uma linguagem. Foi apenas uma explicação esquemática. A única relação que o Multimedia Fusion 2 tem com C++ é que foi criado nele. E este tutorial não vai te ensinar a fazer um jogo nele. Vai te ajudar a entendê-lo. Não pense que após lê-lo, você vai começar a criar jogos incríveis como GTA; só vai ter uma noção básica do programa, o que é extremamente importante.

ScreenShot
 


Imagem do seu primeiro “jogo” no MMF2 finalizado

Tutorial

A primeira coisa a fazer, é abrir o MMF2. Vamos criar um novo projeto. Vá em File > New. Uma vez que tenha clicado em “New”, seu projeto foi criado. Vamos começar a trabalhar nele. A propósito, preste atenção no ícone do disquete… ele serve para salvar o projeto. É importante que você salve periodicamente, para se der algum problema, não perder tudo.

Assim que criamos um novo projeto, nos deparamos com o Storyboard Editor. É onde organizamos os Frames do nosso jogo. Frame significa Quadro, e nesse tutorial vamos precisar de 3 deles: Menu, Fase e Final.


Esse é o Storyboard Editor, onde organizamos os Frames do jogo

Mas antes de começarmos a fazê-los, precisamos configurar algumas coisas no seu jogo. O menu padrão, o nome da aplicação e a resolução. A primeira coisa que vamos ajeitar é o menu padrão. Por quê? Porque ele é feio, e é a marca registrada do MMF2. Se você deixa aquilo, já entrega em que programa seu jogo foi feito. Eu sempre tiro ele quando vou fazer algo no MMF2, ou então edito. Mas editar, é outra história. Ainda que seja seu primeiro jogo, não se esqueça que esse tutorial serve para te dar uma introdução ao programa, logo, é necessário saber disso.

Clique uma vez sobre o nome Application 1 do lado do Storyboard Editor, para selecioná-lo. Uma vez que você selecione, ele vai ser o objeto mostrado na barra de propriedades. Então, vamos tirar o menu. Entre na aba que tem o ícone de um computador (). Abaixe na janela de propriedades, até ver duas opções, Menu bar e Menu displayed on boot-up. Respectivamente, significam Barra de Menu e Menu Localizado no Topo. Desmarque ambas, e então, retiramos aquele menu feio.


Opções de menu desmarcadas

Agora, vamos mudar o nome do jogo. Ainda nas propriedades, clique na aba que tem um balão de fala amarelo (), e do lado de Name, fica o nome da nossa aplicação. Apague, e escreva “Meu primeiro jogo” (sem aspas).


Nome da nossa aplicação mudado

Agora, a última coisa: a resolução da nossa aplicação. Note que uma coisa é o tamanho da aplicação (janela do Windows), e outra coisa totalmente diferente é o tamanho do Frame. O Frame pode ser bem maior que a resolução da aplicação, o que acontece é que aparecerá apenas uma parte dele. Então, para isso, nós usamos eventos para controlar a câmera do jogo (fazê-la seguir o personagem, por exemplo). Além disso, podemos fixar certos objetos na área visível. Mas essas coisas, veremos lá para frente, nesta aula, vamos trabalhar apenas com Frames do mesmo tamanho da janela.

Na mesma aba que retiramos o menu, você vai encontrar a palavra Size, e, do lado, dois números. O primeiro deles é a largura, e o segundo, a altura. Os números que já estão lá são 640×480 certo? Vamos mudá-los. Clique sobre qualquer um dos dois (ou o 640 ou o 480, não importa) e ele vai exibir uma caixa de texto. Nessa caixa de texto, vamos poder mudar esses números. No lugar de 640 colocaremos 320, e no lugar de 480 colocaremos 240. Trocamos 640×480 por 320×240. Ou seja, diminuímos a resolução da nossa aplicação pela metade. Ele irá perguntar se você deseja diminuir também o tamanho dos Frames para os mesmos da aplicação. Nesta aula, vamos trabalhar com Frames do mesmo tamanho da janela, então, clique em Yes (Sim). Deve ter ficado assim:


Nossa resolução mudada de 640×480 para 320×240

Agora sim, vamos começar a montar nosso “jogo”. Como já falei, precisaremos de três frames. Para criar um novo Frame, basta clicar no número do lado do texto “More…”. Uma vez que tenha 3 frames, vamos começar a trabalhar no nosso “jogo”. Note que sempre que falo do nosso jogo, escrevo a palavra jogo entre aspas. O motivo é que o que vamos criar não pode ser considerado um jogo. Porque ainda é simples demais para ser considerado um jogo. Bem, mas voltando ao assunto, vamos começar a criar nosso menu.


Nossos três Frames criados

Clique uma vez sobre o primeiro Frame, e nas propriedades dele, logo na primeira aba, coloque a Background color como preta. Isso vai fazer com que a cor de fundo dele seja preto. Dê um duplo clique sobre o primeiro Frame para editá-lo. Então, você vai estar no Frame Editor. É nele que editamos os elementos gráficos da nossa aplicação. Esse Frame, é o menu. Vamos adicionar um texto nele, que é o título do nosso jogo, e um botão, que vai nos levar ao jogo em si.

Dê um duplo clique sobre a área em branco (digo, em preto hehe). Vai abrir uma janela com vários elementos. Esses elementos são objetos que podem ser inseridos no Frame. Você pode adicionar novos objetos, as extensões. São funções adicionais, que você baixa e instala. São Plug-ins para aumentar o poder da ferramenta, entende? Voltando ao assunto, procure pelo objeto String. Selecione-o e clique em Ok. Depois, posicione-o em um local de sua preferência no Frame. Dê um duplo clique sobre o texto e escreva “Meu primeiro jogo” (sem aspas). Nas propriedades dele, clique em um ícone com um A () e selecione a opção Bold (negrito). Do lado de Font, clique em Arial, para alterar a fonte. Deixe Arial mesmo, mas mude o tamanho para 18. Depois, clique em Ok. Ainda nas propriedades, do lado de Color, você pode mudar a cor do texto. Escolha amarelo. Se não estiver aparecendo tudo, clique duas vezes sobre o texto (não seguidas) e clique e arraste o quadradinho da direita para a direita.

Novamente, dê um duplo clique sobre a área em branco (digo, preto) e dessa vez escolha o objeto Button. Selecione-o, e logo na primeira aba, clique do lado de Text. Vai exibir uma caixa de texto, apague o que tiver nela, e digite Jogar. Agora, o nosso Frame está pronto. Aperte F8 para ver como istá indo seu jogo. O botão ainda não faz nada: ainda temos que programar para que ele faça alguma coisa.


Menu do nosso jogo

Agora vem a parte mais legal: os eventos. Sim, os eventos. É nele que programamos as coisas do Frame. Para entrar no Event Editor (Editor de Eventos), você deve estar no Frame Editor do Frame desejado, e clicar no botão que tem o ícone de uma tabelinha, parecida com aquelas do Excel ().

A interface do Event Editor, é bem simples, e fácil de entender. Nós adicionamos uma condição, e para cada condição, colocamos ações. Pense no seguinte: Se eu pular do penhasco, eu morro. O “Se eu pular do penhasco…” é a nossa condição, e o “eu morro” é nossa ação. Tudo tem uma consequencia. Se eu soco o ar, o ar desloca. Se eu como batata frita, eu engordo. Se eu bebo água, eu mato a sede. E assim vai. É assim que o Event Editor funciona. Para toda condição, temos uma ação, uma consequencia. Agora que você entendeu como ele funciona, vamos fazer os eventos propriamente ditos.

Clique em New condition. Uma janela vai se abrir. Dê um duplo clique sobre o ícone de um botão, e selecione a opção “Button clicked ?”. Adicionamos nossa condição. Pode ver que o Event Editor criou uma linha, e nela está escrito “Button (Ícone) Clicked” (Se o botão for clicado), e do lado, alguns quadradinhos. Nesses quadradinhos, colocamos a ação. As ações são divididas em classes, para organização. Para adicionar uma ação, você deve clicar com o botão direito do mouse em um dos quadrados correspondentes à condição para que a ação ocorra, de acordo com a classe da ação que você quer. No caso, clique com o botão direito do mouse no quadradinho branco embaixo do ícone do Xadrez, e escolha a opção “Next Frame” (Ir para o próximo Frame). Ou seja, se o botão for clicado, ir para o próximo Frame.


Se o botão for clicado, ir para o próximo nível

Ok, agora, vamos fazer o jogo em si. Volte para o Storyboard Editor () e dê um duplo clique sobre o Frame 2. Uma vez que esteja no Frame Editor, dê um duplo clique sobre a área em branco, e escolha o elemento Active (o nome está abreviado, o correto seria Active Object). Um Active Object é um Objeto Ativo. É um objeto que podemos controlar por eventos. Depois de inserí-lo no Frame, dê um duplo clique sobre ele para editá-lo. Aperte CTRL+A para selecionar tudo, e Delete para deletar o conteúdo. Escolha a Fill tool (Balde de Tinta), clicando nela ou apertando a tecla F, e escolha a cor azul. Então, pinte a área transparente de Azul e clique em Ok. Ele vai ser o nosso personagem.


Editando nosso Active Object

Ok, agora, selecione o nosso Active Object, e clique na aba que tem um carinha azul pulando (). É nela que selecionamos o movimento do nosso personagem. Como pode ver, tem vários, mas nesse, vamos usar o Movimento de Plataforma. Escolha o movimento Platform, e vamos configurá-lo. Abaixe mais um pouco, e você verá várias opções. Speed é velocidade, Acceleration é aceleração, Deceleration é desaceleração, Gravity é gravidade e Strength é a força do pulo. Eu vou colocar 20 em Gravity e 60 em Strength. Esses movimentos são chamados de Movimentos Pré-definidos. Isso porque eles são movimentos já prontos, que você não tem quase trabalho nenhum para fazê-los. O problema é que são extremamente bugados; possuem vários erros. Por isso, quem os usa são os iniciantes (vocês). Mas não se preocupem, com o tempo, aprende-se a fazer Movimentos Personalizados (ou Movimento Custom ou ainda Static Engine), que não tem bugs, e são totalmente feitos por você no Event Editor (nos movimentos personalizados, o normal é deixar como movimento pré-definido, o Static, em que não há nenhum movimento). Em certos casos, os movimentos pré-definidos são úteis. Voltando ao assunto, veja como ficou a nossa configuração:


Configuração do Movimento Pré-Definido de Plataforma

Agora, ponha outro Active Object na tela, e simplesmente dê Ok. Não mude nada nele, deixe do jeito que está. E pronto, acabamos o que tínhamos que fazer no Frame Editor.


Frame Editor do Frame 2 pronto

Vamos novamente pro Event Editor. Clique novamente em New condition, mas dessa vez, dê um duplo clique sobre o nosso quadradinho azul (o Active Object que colocamos o movimento) e vá em Position > Test position of “Active”. Vai abrir uma janela. Nela, selecione todas as setinhas que apontam para fora.


Eu ainda me lembro que o autor da primeira matéria que eu li sobre MMF2, colocou uma imagem igual a essa

Esse evento é “leaves play area”. Ou seja, se o personagem sair da tela. Ele ficou assim, se sair da tela, porque selecionamos todas as setinhas para fora. Se tivéssemos selecionado apenas a setinha para baixo, iria ser válido apenas se ele saísse da tela por baixo. Entendeu?

Bem, agora, vamos fazer a ação. Clique com o botão direito do mouse no quadradinho branco embaixo do quadrado azul (nosso personagem) e vá em Movement > Stop. O que acabamos de fazer foi: Se o personagem sair da tela, parar o movimento dele.

Aperte F8 para testar seu jogo, e veja que agora, além do botão levar para o jogo, como fizemos anteriormente, o personagem se move. Legal né? Mas ainda não está pronto. Feche o jogo e clique novamente em New condition. Novamente, dê um duplo clique sobre o quadradinho, mas dessa vez, vá em Collisions > Another Object. Uma janela vai se abrir, selecione aquele segundo Active Object que criamos (o que nós nem editamos) e clique em Ok (ou simplesmente dê um duplo clique sobre ele). Ele criou uma nova linha não foi? Pois é, criou outra condição. Essa outra condição não tem nada a ver com a que criamos anteriormente. Nessa nova condição, vamos adicionar novamente o “Next level”, que fica embaixo do ícone do Xadrez que colocamos no botão, no Frame 1. O que fizemos? Simples: se o personagem colidir com a estrela verde, ele vai para o próximo nível. Ou seja, passa de fase.


Eventos do “jogo” prontos

Pronto cara. O “jogo” tá quase pronto. Só falta o último Frame, mas nele é baba. Vá no Frame Editor, e novamente adicione um String. Nele, coloque: “Parabéns! Você venceu! Aperte ESC para sair e F2 para recomeçar.” (sem aspas). Quanto ao ESC, vamos ter que programar, mas o F2 não. Porque apertar F2 para reiniciar o jogo é uma função padrão do MMF2. Já vem programado. Isso mesmo, você não precisa configurar nada, que apertando F2, reinicia a aplicação.


Frame final montado

Agora, vamos ao Event Editor. Clique em New condition, e dê um duplo clique sobre o icone do Mouse e do Teclado. Vá em The keyboard > Upon pressing a key. Uma janela vai se abrir, pedindo para que você pressione alguma tecla. Pressione a tecla ESC. Agora, adicione a ação End application, que fica no ícone do Xadrez. Se o jogador pressionar Escape (ESC), vai fechar a aplicação.

Pronto! O jogo está pronto! Agora vá em File > Build > Application e salve o executável!


Imagem do seu primeiro “jogo” no MMF2 finalizado

———————-

Observações
O que você aprendeu lendo essa matéria:
• Como alterar as propriedades de uma aplicação
• Como criar Frames
• Como usar o Storyboard Editor
• Como usar o Frame Editor
• Como usar o Event Editor
• O básico sobre o Multimedia Fusion 2

Fonte: MMFMAKERS!