1 – C4 – Jogos 2D

Jogos 2D

Para darmos inicio a produção de um jogo 2D, vamos primeiro iniciar a Unreal.

Aqui estamos utilizando a versão 4.18, então basta clicar no botão inicializar.

image001

 

Escolha o template SideScroller2D

 

image003

 

Assim que o projeto for iniciado, você precisa esquecer muito do que sabe sobre a montagem de cenário, aqui no Side Scroller 2D, as coisas são um pouco diferentes, então tente encarar como um software novo.

 

image005

 

Além do Unreal, vamos precisar também do Adobe Photoshop para a criação de “Sprites”.

 

image007

 

Encare as Sprites como se fossem os Assets dos games 3D.

Vamos primeiro criar uma Sprite básica para servir de plataforma, primeiro vá até ao site Pixabay.com ou algum outro de sua preferência, e pesquise por imagens que possam servir para este propósito. Estou recomendando o pixabay, pois a grande maioria das imagens que poderemos encontrar nele são liberadas para uso comercial.

image009

 

Note que na lateral direita logo após clicar em uma imagem, recebo a informação de que a mesma esta liberada para uso comercial, sendo assim basta efetuar o download.

Dentro do Photoshop aperte CTRL + N para iniciar um documento novo nas seguintes configurações

 

image011

 

Crie uma nova camada utilizando as teclas CTRL + SHIFT + N, e no canto superior esquerdo clique em ARQUIVO > COLOCAR INCORPORADO

 

image013

 

Ajuste o tamanho da imagem deixando uma pequena borda em cima e em baixo, lembre-se de utilizar a tecla SHIFT enquanto você puxa a imagem pela diagonal, assim ela mantém a proporção, terminado clique no sinal de OK.

 

image015

 

Baixe o maior numero de imagens que deseja usar e faça o mesmo processo, e reserve-as.

Aula 2: Criando Sprites.

Dando continuidade a nossa Sprite, vamos agora deixar o fundo da imagem em preto, para isso selecione a camada plano de fundo.

 

image017

 

Agora com a ferramenta Lata de Tinta (Utilize a tecla G como atalho), aplique a cor Preta.

 

image019

 

Salve esta imagem no formato PNG, para isto basta ir em ARQUIVO > SALVAR COMO ou utilizar o atalho SHIFT + CTRL + S.

 

image021

 

Lembre-se de salvar no formato PNG.

Agora selecione a camada da imagem.

 

image023

 

Vamos agora ativar a Varinha Mágica, você pode tanto pressionar a tecla W ou clicar no local indicado.

 

image025

 

Clique com ela na cor preta, e você verá que ela fará este tipo de seleção

 

image027

 

Clique então com as teclas CTRL + SHIFT + I para que a seleção seja invertida.

 

image027

 

Agora novamente vamos utilizar ferramenta Lata de tinta, mas desta vez vamos aplicar a cor Branca no controle.

 

image031

 

Salve a imagem em PNG. E repita o processo com todas as imagens que possuírem a necessidade de serem recortadas.

 

Aula 3: Criando Sprite pt2

Dentro da Unreal, clique no botão Import e realize a importação das imagens que você editou.

 

image033

 

Agora com o botão direito clique em Material.

 

image035

 

Dentro do Material adicione as 2 imagens.

 

image037

 

Clique no Input do material e nas opções de Blend Mode localizado a esquerda mude de OPAQUE para MASKED.

 

image039

 

Agora ligue a imagem que possui cor em Base Color, e a que esta com branco em Opacity Mask.

 

image041

 

Você ira notar que na preview do material que agora a imagem esta com o recorte, bom este era o efeito que queríamos.

Voltando ao Content clique com o botão direito e selecione PAPER2D > SPRITE.

 

image043

 

Abra a Sprite e arraste o material para Default Material e a imagem com cor em Source Texture.

 

image045

 

Agora basta salvar e colocar no mapa.

 

image047

 

Repita o processo com todos os seus sprites.

Para dar um pouco mais de fidelidade ao objeto, você pode editar a colisão, basta clicar em “ EDIT COLISION ” e ir ajustando conforme a necessidade de seu objeto.

 

image049

 

Lembrando que, caso sua imagem seja quadrada, você não precisa nem editar a colisão e nem criar um material, pode apenas adicioná-la em Source Texture.

 

Aula 4: Blueprint

 

Vamos fazer agora plataformas moveis para isto eu criei mais um sprite.

 

image051

 

Então clique com o botão direito no Content e depois em Blueprint Class

 

image053

 

Agora clique em ACTOR

 

image055

 

Dentro do Blueprint Actor, clique em Add Component e pesquise por Paper Sprite.

 

image057

 

Selecione o PaperSprite e adicione pela coluna da direita a Sprite desejada.

 

image059

 

Clique agora na Aba Event Graph

 

image061

 

Dentro do Event Graph aperte o Botão direito e pesquise por Event Begin Play

 

image063

 

Agora no canto esquerdo Vamos criar uma variável de tipo Vector, chame a mesma de LocationPlat.

 

image065

 

Adicione a variável como SET e ligue no Event Begin Play.

 

image067

 

Do pino que alimenta os valores da variável Location Plat, adicione o Get Actor Location.

 

image069

 

Coloque também um Delay após a variável Location.

 

image071

 

Clique no pino Duration e puxe, feito isso clique em Promote to Variable e renomeie para StartMove.

 

image073

 

Torne a variável publica clicando no olho na coluna da esquerda.

 

image075

 

Vamos criar uma nova variável de nome Start, porém desta vez o tipo será boolean, adicione ela como Set logo após o Delay.

 

image077

 

Marque a caixa para que ela fique ligada.

 

image079

 

Agora adicione um Event Tick

 

image081

 

Adicione também um Branch saindo do event tick e ligue a variável Start no pino condition

 

image083

 

Do pino True vamos colocar o Sequence

 

image085

 

Saindo do pino THEN 0 adicione o TIME LINE.

 

image087

 

Abra o TIME LINE com um duplo clique

 

image089

 

Vamos adicionar uma Vector Track para que nosso Sprite possa se movimentar, sendo assim basta clicar no local indicado.

 

image091

 

Retire um pouco do zoom com o scroll do mouse e trave a curva de X e Y clicando nos cadeados.

 

image093

 

 

Agora no ponto cruzamento das linhas, clique com o botão direito e adicione uma Key

 

image095

 

Vamos agora zerar os valores da Key

 

image097

 

Adicione uma nova Key quando a linha do tempo estiver em 2.5

 

image091

 

Selecione a nova key e altere o valor de Time para 2.5 e o Value para 50

 

image101

 

Vamos adicionar uma nova key, porém vamos deixar o valor de time em 5 e o value 0.

 

image103

 

Marque a opção de Loop para que o ciclo se repita e a plataforma possa se mover o tempo todo.

 

 

image105

 

Volte ao Event Graph e adicione a Variável LocationPlat junto a um Vector + Vector.

 

image107

 

Ligue o pino Vector do Time Line no A do Vector + Vector.

 

image109

 

Já saindo de Update vamos adicionar o SetActorLocation.

 

image111

 

Faça sua ligação assim como mostrado acima.

 

Basta compilar e salvar, por fim resta o teste.

 

image113

 

Caso você ache que esta com pouca movimentação, ou que esta muito lento, basta alterar o Value para um valor maior como 200 ou 400. Por exemplo, se eu mudo para 400 e mantenho o tempo para 2.5 ele vai se mover bem mais rápido. Sendo assim caso ache que esta muito rápido aumente para 3 ou 3.5 o valor de Time.

 

image115

 

 

 

Questões