Fórmula de Jogos ::: Desenvolvimento de Jogos - 2015 / 2016 / 2017 / 2018

Como criar um jogo - Parte 1

September 27, 2015

 

 

 

E aí galera !!! Hoje nós vamos desenvolver o nosso primeiro jogo. 

 

Para isso vamos utilizar o programa Multimedia Fusion 2.5 da ClickTeam. 


Você pode baixar o programa de demonstração através deste link

  

Para começar nós podemos visualizar a tela de abertura do programa onde podemos ver os principais comandos do software de Edição. 

 

 

    A área a esquerda é dividida em duas. A workspace toolbar onde o conteúdo do jogo é mostrado e a Propertiers toolbar onde vamos visualizar as propriedades de cada objeto inserido no jogo. Logo abaixo existe uma barra chamada Library toolbar nela nos encontramos os objetos (actions) que vamos inserir no jogo. 

  

    Dica: Caso não seja possível visualizar as janelas de edição basta selecionar na barra de menu a opção view e posteriormente toolbars dentre desta opção vamos encontrar todas as janelas que fazem parte do menu de edição. 

 

 

Agora nós vamos realmente criar o nosso primeiro jogo. Para isso vamos clicar no botão "new". 

 

A partir deste momento criamos o nosso primeiro frame. Este frame contém o primeiro nível do nosso jogo. 

 

A janela que foi aberta junto com o frame chama-se "Story Board Editor" que é representa uma das janelas de edição do Multimedia Fusion 2.5 (Posteriormente nós vamos falar um pouco mais sobre ela). 

  

Agora nós vamos para o próximo passo.


 

02 - O Editor de Frames


A janela que nós vemos agora chamasse Story Board Editor. Ela se parece com uma tabela organizada em pequenas telas, que nos vamos chamar de Frames. Os frames vão representar as telas do nosso jogo ou mesmo os níveis de um jogo. Os frames também podem ser utilizados como "Slides" de uma apresentação semelhante ao power point.

Vamos agora colocar a mão na massa.

Localize o botão escrito número 1 que esta próximo a primeira janela do Story Board.

Ao clicar nele nos vamos abrir o Frame Editor (Editor de Frames) ele será utilizado para editar o nosso primeiro frame. Devemos sempre lembrar que um jogo é uma aplicação e desta forma estamos criando o primeiro nível de nosso jogo.


 


Agora nos vemos o Editor de Frames que é a área em branco central onde nos podemos inserir diversos elementos (Actions). Este é o espaço de edição onde  todos os objetos podem ser adicionados para que o jogo possa ser executado.

 

03 - Adicionando os Objetos (Actions)

 


OK. Agora nos vamos criar um jogo ao estilo Breakout, aquele jogo em que um bolinha destroi os tijolos. Os principais elementos do jogo são: uma bola, um bastão e alguns tijolos. Com este tutorial vamos criar um super jogo de  Breakout com gráficos semelhantes ao 3D. 

 

Primeiro nos vamos procurar os gráficos para inserir no jogo. Você não precisa desenhar objetos para inserir na tela.
 

Diversos gráficos são instalados junto com o programa, bastando apenas procura janela de Bliotecas (Library Toolbar) que representa nossa biblioteca de gráficos. As bibliotecas possuem objetos prontos para serem utilizados no jogo, isto facilita bastante a vida de quem pretende desenvolver protótipos com um boa rapidez. 

 

Onde podemos encontrar esta janela. É Fácil !!! 

 

Ela fica disponível na barra inferior do programa. Podemos visualizar as pastas com os mais diversos elementos e projetos. Vamos clicar na pasta chamada "Tutorial" e posteriormente localizar o item chamado "Chocobreak Tutorial" e abri-lo com dois cliques.
 


Como vocês podem ver a biblioteca possui um coleção de itens que são os nossos objetos. 

 

Você pode até adivinhar o futuro da utilização dos objetos e de seus nomes. Uma exemplo é o objeto chamado "BallGolden - Bola Dourada" que será a bolinha utilizada para quebrar os tijolos de nosso jogo de brekout. 

 

Ok. Vamos inserir alguns objetos. Primeiro vamos inserir o objeto chamado "SugarVertical1" carinhosamente chamada de barra de açucar vertical.

Clique nele e arraste para a área de edição do programa. Agora, podemos ver o objeto em seu tamanho natural. Clique novamente no objeto para arrastá-lo até a posição correta. 

 

Proceda da mesma maneira para os outros objetos (SugarHorizontal e SugarVertical 2) até formar a imagem abaixo. 

 

 

Perceba que objetos animados também podem ser inseridos em nosso editor, desta forma poderemos criar jogos muitas mais animados. 


Para ver a animação nos devemos lançar nossa aplicação. Para fazer isso devemos clicar no ícone "Run Frame" que realiza a execução de nosso jogo.


 


Uma janela aparece com a visualização em tempo real do jogo. Notamos que unicamente a área branca de nosso jogo é demonstrada. 

 

Agora podemos ver os nossos objetos animados. 

 

Após a visualização de nossa primeira aplicação podemos fechar a janela clicando no botão padrão de fechamento de janela do windows. 

Depois disso vamos voltar ao "Frame Editor - Editor de Frames".


04 - A Bola


Para a criação de nosso jogo precisamos de uma bola. Agora vamos conhecer como criamos e inserimos os objetos.  
 
Para isso, vamos aprender a inserir um objeto em nossa área de jogo. 
 
Localize o objeto chamado "Ballgolden" na biblioteca. Vamos arrastar este objeto para a janela de edição e alinhá-lo no centro. 
 
Se clicarmos no botão "Run Frame" vamos perceber que a bola não se move. Ela esta estática. Por quê ela não se move ? Simples, ela só irá se mover quando ensinarmos a ação que deve realizar.  
 
Em outras palavras, nos vamos determinar uma "propriedade de movimento" para nossa bola e devemos definir que tipo de movimento vamos dar.    
 
Cada objeto tem um número de propriedades que definem um comportamento durante o jogo. Isto é. Como ele se move, como ele é mostrado e suas  Animações. Para mostrar as propriedades de um objeto, nos precisamos acessar as propriedades do objeto através da janela de propriedades.  
 
Para isso basta clicar em um objeto na área de edição. 
 
As propriedades são organizadas por gênero, dividias em pequenas abas  em cima de nossa janela. Vamos agora localizar a aba chamada "Movement" e clique nela.

 

Vamos clicar na palavra "Type" e poderemos ver os diversos tipos de movimento que o programa disponibiliza. Devemos selecionar "Bouncing Ball".
 

Agora nos temos que escolher um efeito chamado bola saltitante  "Bouncing Ball" para o nosso objeto. Assim como podemos ver temos outros tipos de movimento disponíveis. Uma vez escolhido os movimentos temos as informações na janela de propriedades.
 


Se explorarmos todas as diferentes propriedades, veremos a propriedade "Speed". Por padrão ela esta configurada para 60, que é um pouco rápida para o nosso jogo. Vamos definir para 45 e visualizar o movimento através do botão "Try movement" para ver a velocidade da bola na tela.   
 
Vamos agora aprender algumas das propriedades importantes para o desenvolvimento de nosso jogo. 
 
Deceleration (Desaceleração) - Faz com que objeto diminua sua velocidade aos poucos, semelhante a uma bola de futebol. Vamos deixar esta propriedade em zero. 
 
Moving at start (Mover do começo) - Vamos habilitar esta propriedade. Ela faz com que a bola comece a se movimentar a partir do início. 
 
Numbers of angles  (Número de Ângulos) - Indica para quantos ângulos a bola pode se movimentar. Vamos deixar em 32. Isto, vai fazer com que nossa movimentação fique mais interessante. 
 
A propriedade "Randomizer - Randômico" cria alguns movimento de salto randômicos que são aleatórios. Algumas vezes a nossa bola pode não saltar corretamente se configuramos nossas variáveis com números altos. Devemos realizar alguns teste com números menores. 
 
A propriedade "Security" é usada para prevenir que a bola bata em um determinado lugar e repita a ação ficando no mesmo lugar (Causando um efeito chamado loop). 
  
Vamos agora clicar na propriedade "Initial Direction". Esta ação define a direção da bola no inicio de nosso jogo. Por padrão a bola começa no lado direito da tela. Precisamos modificar  para que a bola venha em direção a nós. Ou melhor em direção aos tijolos e ao atingi-los pular em direção ao nosso personagem.  
 
Com o nosso mouse vamos selecionar as direções. 
 
 
Quando mais de uma direção é selecionada o Multimidia Fusion 2.5 vai escolher um de forma randômica (aleatória). 
 
Legal... Conseguimos chegar até aqui. Vamos agora as partes mais interessantes e desafiadoras de nosso tutorial.



05 - Fazendo a bola saltar


 

Nos já definimos o movimento de bola para o nosso objeto. Vamos executar a opção "Run Frame" agora. Esta função serve para executar apenas um frame e não o jogo todo. Você deve ver a bola se mover e desaparecer para fora da área de jogo.  

 

Precisamos fazer com que a bola não saia. Nós podemos ver que a bola não esta saltando ao esbarrar no objeto que representa a barra de doces. Nós teremos que instruir o Multimedia Fusion a fazer com que a bola salte ao esbarrar no objeto. Para fazer isso vamos entrar no "Event Editor - Editor de Eventos". 

 

Para isso vamos  clicar no ícone representado abaixo que se encontra na barra de ferramentas.

 

 

Vamos pensar um pouco a respeito do gameplay de nosso jogo. Nós desejamos que a bola pule quando colidir com as barras verticais e horizontais. Vamos utilizar a seguinte sentença. "Quando o objeto BallGolden colidir com o objeto SugarVertical1 então BallGolden deve saltar". 
 
Esta sentença está dividida em duas partes. A primeira parte é chamada condição (Condition). Uma condição é simplesmente um meio de determinar que alguma coisa aconteceu.  
 
Um exemplo para entendermos melhor o enunciado e se a condição for "Agora é meu aniversário" a ação pode ser "Comemorar" 
 
Devemos criar um sentença de condição/ação semelhante a que aprendemos ao utilizar os objetos SugarVertical e SugarOrizontal. 
   
Agora vamos entrar no Frame Editor e clicar na palavra "New condition".

 

 

A janela de "New Condition" abrirá apresentando as condições que podem ser aplicadas em nosso jogo.

 


O conteúdo desta janela é simples. Ela mostra os objetos que nos estamos usando no jogo e alguns objetos padrões que sempre estarão disponíveis. Entre os objetos podemos ver alguns que já foram inseridos no jogo através do frame editor.  

 

Alguns destes objetos nos vamos ver mais tarde. Agora vamos nos concentrar no objeto BallGolden.   

 

Vamos clicar no objeto com o lado direito do mouse. Isto abre um menu chamado "conditions menu" com as condições possíveis para o objeto.
 

 

 

Quando formos analisá-lo devemos encontrar diversas opções: Este menu contém todas as condições disponíveis para o objeto BallGolden. Por exemplo, podemos testar a posição do objeto na tela, sua direção, contar o número de bolas na tela, etc... Lembrando que nos queremos testar a colisão de nossa bola com a barra "SugarVertical1". Então abra o submenu "Collisions" e selecione a opção "Another Object". Imediatamente nos vamos ver outra caixa de diálogo.
 


Agora, vamos testar a colisão do objeto "BallGolden" como outro objeto. O programa vai nos perguntar que outro objeto é esse. De acordo com nossa sentença anterior vamos escolher o objeto "SugarVertical1" realizando um duplo clique nele.  


A caixa de diálogo irá desaparecer e o editor de eventos deve mostrar a definição de um evento em suas linhas.
 

Nós temos que definir uma nova condição ! Assim como visto acima. A condição deverá ser verdadeira se o objeto BallGolden colidir com SugarVertical1. Agora devemos definir a ação que deve ser executada quando a ação for realizada. 

 

Cuidadosamente vamos inspecionar a barra do topo do editor de eventos. Ela contém alguns objetos que vimos na caixa de diálogo das condições.  

 

Ok. Vamos agora fazer com que o objeto BallGolden salte. Esta é a nossa ação. A primeira coisa a fazer é encontrar o objeto BallGolden na barra.  

 

Então devemos mover o mouse até o quadrado vazio logo abaixo e clicar com o botão direito do mouse. 

 

Neste instante vemos o Actions Menu (Menu de ação) do objeto BallGolden.
 

 

Definimos agora o nosso primeiro evento: Uma condição (condição) mais uma ação (action). 

 

Nós ainda precisamos definir o mesmo tipo de evento para quando a bola colidir com o objeto SugarHorizontal1 e o Sugar Vertical2. 

 

Clique na linha "New Condition" e abra a janela de diálogo das novas condições. Localiza o objeto BallGolden e clique com o botão direito do mouse para o menu da novas condições. Localize a entrada "Colission" / "Another Object" faça a seleção. Na próxima janela escolha o objeto SugarHorizontal e pressione Ok.  

 

Uma nova linha deve aparecer no editor de eventos. 

 

Agora vamos para a ação.  

 

Localize o objeto BallGolden na barra superior e leve o seu mouse até a área vazia logo abaixo no mesmo nível da condição. 
 

 

Clique com o botão do lado direito do mouse para abrir o menu de ação e selecione a opção "Bounce". Acabamos de definir o nosso segundo evento. Fácil. Até agora ainda não utilizamos nenhuma linha de programação. 

 

Agora para inserir o terceiro objeto vamos escolher a barra SugarHorizontal2 e realizar o mesmo processo que fizemos antes. Com um pouquinho que pratica vamos ver que este tipo de criação de eventos é bastante prática e intuitiva. A maioria das criações no Multimídia Fusion consistem de passos simples como este. Uma vez que todos os eventos forem adicionados o nosso editor deve estar semelhante a imagem abaixo.

 

 

Vamos executar o jogo agora: Quando ele correr poderemos ver que a bola saltando, batendo e voltando entre as barras 
 

O problema é que ela desaparece quando chega até a parte debaixo da tela. 

 

Legal !!! chegamos ao fim de nosso primeiro tutorial, em nossa próxima aula vamos aprender mais um pouco sobre a produção de jogos. Não deixe de conferir.

 

 

 

Please reload