Muito bem, chegamos à quarta parte do tutorial, e agora vamos montar o layout inicial, a primeira fase, para você ter uma ideia de como fazê-lo e construir suas fases posteriormente.

A primeira coisa que vamos fazer é mandar o Construct alinhar os objetos a uma grade. Clique com o botão direito do mouse na guia View, lá em cima da tela, na barra de menus e selecione a opção Minimize the Ribbon. Isso vai expandir o menu e vai garantir que um bug chatinho não ocorra. Deixe sempre o menu aberto desse jeito.

Agora procure o campo Grid Options, e selecione a opção Snap to Grid. Se quiser, pode selecionar também a opção Show Grid, já que essa opção é benéfica para o que faremos agora.

construct2-tutorial03-01

Logo ao lado você pode ver o campo Grid size. Ponha os valores acima de 85 para Grid width e 35 para Grid height. Lembre-se de apertar ENTER no seu teclado sempre que mudar os valores aqui, essa barra é meio temperamental!

Agora arraste algum objeto na tela do jogo e repare que ele “pula” de espaço para espaço. Esse é o efeito do Snap e nos dá uma maior precisão na hora de posicionarmos nossos objetos na tela.

Agora nós iremos multiplicar o tijolo, criando 7 cópias dele. Isso nos dará um total de 8 tijolos. Usaremos 7, e o oitavo será usado depois de ajeitarmos a primeira fileira de tijolos azuis.

Multiplicar o tijolo (na verdade, qualquer objeto) é simples: segure a tecla Ctrl do seu teclado, vá com o ponteiro do mouse em cima do tijolo, clique e segure o botão esquerdo do mouse, e arraste o mouse para longe do tijolo. Repare que você começará a arrastar uma cópia do tijolo! Faça isso mais até você ter 8 tijolos. Deixe como na imagem abaixo:

construct2-tutorial03-02

Maravilha, temos 7 tijolos azuis em cena e 1 fora da cena! Iremos transformar esse tijolo azul fora da cena em um tijolo verde.

Selecione o tijolo fora da cena e repare nas propriedades dele na parte esquerda da tela. Há um campo chamado Properties e, dentro dele, um subitem chamado Animarions. Dentro desse subitem há um campo chamado Initial frame que tem o valor 0. Mude esse valor para 1 e pronto, você agora tem um tijolo verde! Façamos mais uma fileira, agora com 7 tijolos verdes.

construct2-tutorial03-03

Você se lembra que importamos uma figura com vários tijolos? Pois é, cada um deles pode ser acessado por um número no campo Initial frame das propriedades do tijolo! Mas por enquanto ficaremos apenas com o azul e com o verde.

Agora vamos dar uma olhadinha no jogador. Clique duas vezes no objeto jogador dentro da janela Objects. Isso abrirá a janela de edição de Sprite do jogador. Repetiremos algo que já fizemos antes, com o tijolo. Olhe agora para a parte esquerda da tela, nas propriedades do jogador e você verá aquela janelinha já mencionada antes Animation ‘Default’ properties. Ache o campo Speed e mude seu valor de 5 para 0.

Isso fará com que a animação do jogador não corra. Caso esse passo não seja dado, assim que você testar o jogo, seu jogador passará do frame 0 para o frame 1, exibindo aquele jogador com armas que foi importado com o objeto. Nós queremos que as armas sejam exibidas apenas em uma condição especial do jogo, e não quando o jogo começar. Pode fechar a janela de edição de sprites.

Vamos adicionar paredes agora. Clique duas vezes em qualquer lugar vazio do cenário do jogo (a telinha branca) e isso abrirá aquela janelinha para adição de objetos que já vimos antes. Adicione um Sprite, clique com o ponteiro do mouse (que agora é um sinal de mais, ou positivo) em qualquer lugar da área branca e veja que isso abrirá uma edição de sprites em branco. Tudo o que iremos fazer agora é pintar o quadrado dessa janela com alguma cor de preferência sua.

Selecione a ferramenta Fill, representada por um balde meio que caído e despejando líquido e selecione uma cor. Eu usarei um azul claro. Agora clique na área quadrada em branco da janela de edição de sprites e isso fará com que o quadrado fique azul.

construct2-tutorial03-04

Pode fechar essa janela. Repare que agora temos um grande quadrado azul em nossa cena, e esse quadrado será usado como parede para o nosso jogo, para que a bola não escape da área.

Adicione um Behavior para esse Sprite quadrado, mais especificamente o Solid. Nós já vimos como fazer isso, então você não deve ter problema algum nesse ponto.

Você já reparou que, quando você seleciona um Sprite, ele fica rodeado por uma linha azul e fica com vários quadradinhos brancos em vários pontos externos? Esses quadradinhos podem ser usados para que redimensionemos o objeto! É só clicar e arrastar esses quadradinhos! Sabendo disso agora, multiplique esse Sprite azul quadradão que acabamos de criar e deixe tudo mais ou menos como na tela abaixo:

construct2-tutorial03-05

Vamos ao último passo desta parte do tutorial: dar uma mexidinha na bola do jogo. No momento, ela tem o comportamento Bullet, que faz com que essa bola seja “disparada” em uma certa direção assim que o jogo começa. Mas do jeito que está, a bala irá ser disparada para a direita em um movimento reto, e nós não queremos isso.

Selecione a bola e repare que, além da linha azul e dos quadradinhos brancos rodeando ela, há uma linha azul que sai bem do centro da bola, e ela está ligada a mais um quadradinho branco.

construct2-tutorial03-06

Esse quadradinho cuida da rotação dos objetos. Clique nele e o arraste para dar uma mexidinha na rotação da bola, até ela apontar para cima, mas um pouco para a direita, assim definindo a “disparada” inicial da bola em um ângulo “torto”.

construct2-tutorial03-07

Vamos, FINALMENTE, testar o jogo? Dê uma olhadinha lá em cima da tela do Construct2, acima da barra de menus. Vê um ícone que parece um Play de um DVD Player, ou de um media player? Clique nele e seja feliz!

Você vai reparar que a bola vai subir, bater nos tijolos e descer. Além disso você pode controlar a barra azul (o Sprite jogador) com as setas do teclado, mas isso é o máximo que você vai ver de funcionalidades por enquanto.

E com isso, fechamos mais uma parte do tutorial. Até a próxima!

Tutorial Construct 2 – Clonando Breakout / Arkanoid

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *