Projeto Tap to Scape construct 2

Este exercício no Construct servirá como base para aprendermos sua interface por completo em nosso jogo,
assim ensinando sobre adicionar personagens, colisões, toda programação e etc.

O jogo que será feito é o “Tap to Scape”, um jogo Mobile cujo será um
personagem andando ao redor do cenário, e seu objetivo e desviar dos
objetos que caírem do céu, e assim marcando pontuação.

INTRODUÇÃO AO MOTOR E CONSTRUÇÃO DA BASE DO JOGO

Este será um exercício extenso, portanto providencie salvar sempre seu projeto para dar continuidade da
aula seguinte.
Antes de qualquer coisa, vamos criar nosso cenário no construct e preparar as Layers do jogo, segue a
imagem a baixo:

Em seguida, selecione a primeira opção que aparecer para nós:

Finalizando esta etapa, teremos a nossa interface para projetar nosso jogo, vamos tentar entender ela:
 menu de propriedade

este menu vai variar as opções dependendo do que

selecionamos para editar, sua função é mostrar as propriedades
e alterar funções e valores especificamente do objeto
selecionado, seja personagem, cenário, background etc.

aproveite e configure o nome e as informações do seu jogo, o

nome dele será “Tap To Scape”.

Menu projetos

Onde vamos visualizar todos os arquivos e diretórios do

nosso jogo, sendo utilizado para selecionar certos arquivos,
ou diretórios que serão modificados

Layout do cenário

Basicamente o cenário do nosso jogo, ele é formado

por 2 tipo de marcadores, o branco e o traçado que
se encontra dentro dele, sendo assim um fica para o
mapa do game e outro para visualização do jogador.
 Objetos do jogo

Todos os objetos utilizados no Layout marcado, irá aparecer

nesta tela, podendo tanto editar quando clicar e arrastar
para adicionar ao cenário

Junto com o cenário, você pode repara que temos uma linha traçando o cenário, esta linha é a visualização
do jogador, de forma resumida, quando o jogo iniciar, ele só terá foco nesta parte traçada, dê uma olhada
na imagem a baixo:
Configurar o tamanho ou local da visualização é totalmente diferente de configurar o tamanho da tela, nela
você deverá clicar na pasta principal do seu jogo para poder editar este tamanho:

Em Windows Size configure:

Width: 720

Height: 1280

Com isso, nosso cenário está pronto, agora vamos criar as camadas onde vai ficar os objetos do nosso jogo.

Chame o professor para explicar o que aconteceu até aqui

O que são as Layers (camadas)?

assim como certos programas como o Photoshop, Illustrator entre outros, trabalhamos com vários objetos e
elementos na tela, literalmente tudo pode ser modificado e programado, e para não ficarmos confuso ou
selecionando algo indesejado no meio da edição do nosso jogo, criaremos uma camada (Layer) para cada
tipo de objetos, cenários personagens etc.

esta é a tela da Layers:

Clicando em + adicionamos uma nova camada, e para colocar um objeto específico nele, basta clicar em cima
e ele ficará selecionado.

Portanto, crie mais 3 Layers, e renomeie com os nomes a baixo:

O que são cada uma delas:

background = plano de fundo do jogo.

collision = partes solidas do jogo para colisão.
entities = atores, inimigos, personagens etc.
GUI = elementos gráficos como pontos nome entre outros.
Splash Screen

Antes de iniciar a programar o jogo, vamos criar nossa Splash Screen, mas afinal, O que é uma Splash
Screen??? Vamos tentar entender este conceito de splash.

Splash é basicamente a tela de carregamento do programa que ele utiliza ou para preparar os arquivos do
nosso jogo, ou uma pequena apresentação da empresa ou pessoa que criou o jogo, como mostra os exemplos
a baixo.

É muito importante um aplicativo ou jogo possuir esta tela, por questão de padronização e conforto do
jogador, afinal é extremamente desconfortável abrir o aplicativo e o jogo iniciar de imediato.

Vamos configurar o tamanho da nossa página em formato mobile, primeiramente vamos criar uma nova
layer para nossa Splash.

No layout de projeto, clique com o botão direito na pasta “layouts” e selecione a opção “Add layout”
Ele irá perguntar se você deseja criar um event sheet, clique na primeira opção, pois nossa splash também
irá precisar de uma programação.

Após criar, teremos um layout novo e um event sheet novo também, então agora renomeie eles para
Splash screen e o sheet para Splash events. Siga a imagem a baixo:
Feito isso, vamos configurar o tamanho do nosso cenário, em projects, clique em Splash_Screen e no outro
lado na tela em Proprierties vamos alterar o tamanho.

Os tamanhos são:

Width: 720

Height: 1280

Feito isso, teremos que alterar o tamanho do Level_1 também, com as mesmas configurações.

Terminando de editar o tamanho do splash Screen, vamos adicionar também Layers para o layout
do splash, clique na aba layers, localizado ao lado de projects, e assim adicione apenas 1 camada a
mais, e renomeie desta forma:

Feito isso, finalizamos a estrutura que será utilizado no nosso jogo, salve o seu projeto no
pendrive ou chame o professor para salvar para você.
PROGRAMANDO TELA DE SPLASH SCREEN
Nossa tela de Splash terá uma imagem representando a “empresa que criou o jogo”, pegue algo da internet
ou faça o desenho a sua escolha.

Antes de adicionar, abra o Layout do splash Screen na seguinte tela:

Com a imagem em mãos, vamos arrastar do nosso Desktop até a tela do splash no Construct (caso de
dificuldades chame o professor);

Feito isso, ajuste a imagem e reduza ele de forma que ele fique no meio da tela.

Aperte F4 do seu teclado e vamos analisar como está nosso layout, apareceu a tela corretamente? Então
vamos programar a transição da tela!
Em conjunto com a aba do Layout, temos também o chamado Event Sheet, onde que fica toda
programação seja do jogo ou dos objetos do mesmo, cada layout criado terá uma página de evento como
mostrado a imagem a baixo:

O Construct 2 trabalha inteiramente por condições e comparações em sua programação, assemelhando

com ferramentas como SE E SEMPRE que aprendemos anteriormente no Scratch.

programação de exemplo

E graças a programação direcionada do Construct, basta selecionar o objeto, e selecionar uma das várias
opções e condição que o Motor cria para nós, sendo mais fácil que o Scratch e com uma programação mais
precisa e estável, teremos dificuldades em acostumar no início, mas levando a lógica e sempre na prática,
esta ferramenta pode se tornar sua melhor amiga :)
Vamos tentar entender como vamos programar a tela de splash, ele será uma tela cujo irá iniciar no nosso
jogo, e após 2 segundos ele vai passar para a tela seguinte;

Siga a lógica de programação desta tela:

Então vamos programa-lo:

Clique no botão “Add event” e vamos criar a programação dela:

Clicando “Add event” uma caixa irá aparecer perguntando qual objeto você deseja alterar, por padrão
temos o System, que é o sistema (o jogo em si), como não fizemos nenhum personagem ainda, selecione
ele:

Feito isso uma lista de condições irá aparecer para escolher, neste caso, escolhemos a opção “On start of
layout”

Sempre utilize a caixa de pesquisa ao lado

Ao selecionar, criamos uma condição, que o traduzindo fica assim:

Quando a tela do jogo for iniciada faça: .......

Sua condição foi criada, agora no jogo toda vez que a tela for iniciada, ele fará determinada ação, e são elas
que vamos configurar agora.

Clique em add action, e ne tela que aparecer selecione a opção System novamente, e coloque a opção
Wait, e configure 2 segundos.

Feito isso, quando o jogo for iniciado, o sistema irá esperar 2 segundos... e?

Então após esperar devemos adicionar uma programação que faça passar para o layout do Level_01.

Por mais que já adicionamos uma ação, nós adicionar mais um para ser executado na mesma opção, basta
olhar novamente a opção add event que vai aparecer no evento a baixo do evento que criamos
anteriormente.

Selecione System e procure por “Go to next ou previous layout”, feito isso, nossa programação do Splash
Screen estará prontinha. Aperte F4 para testar ela.

Chame o professor para corrigi-la.

CRIANDO O CENÁRIO DO NOSSO JOGO
Vamos agora criar um Sprite referente ao chão do nosso jogo, não iremos nos preocupar com visual bem
elaborados ou desenhos, mas nossa preocupação agora vai ser com a sua programação, mas antes de tudo,
temos que selecionar o Layout referente ao Level_01 e a camada collision para adicionarmos o chão:

Feito isso, na tela em branco que temos logo a frente, dê dois cliques para termos as opções do que iremos
adicionar no jogo, na tela a seguir, procure pela opção Sprite e dê dois cliques nele:

No nome, digite spr_colission, e finalizado esta parte, irá aparecer uma caixa que utilizaremos para
desenhar nosso personagem
Porém como não iremos nos preocupar com sprites por agora, crie apenas um quadrado da cor que
desejar, mas na hora de preencher ele, vamos abaixar a opacidade na opção alfa que será mostrada a
baixo:

Escolha a cor e em seguida apenas clique dentro dele para preencher.

E após criado altere o tamanho e coloque de forma que simule o chão e as paredes, como a imagem a
baixo: (Obs, não crie vários Sprites, basta copiar e colar para fazer a parede).
Note que temos nosso chão do cenário, mas ele ainda não está configurado como sólido, para este tipo de
programação simples, temos as ferramentas prontas no Construct chamada “behaviors” (traduzindo,
“comportamentos”), nela temos várias opções pré programada para nosso personagem, que facilita e evita
perdemos tempo com programando elas, fora isso, é possível fazer um jogo só utilizando Behaviours.

Para usar a ferramenta, clique no objeto criado, e no painel de propriedades localizado ao lado esquerdo,
teremos logo a baixo a opção desejada:

Lembrando que ele só irá funcionar se o objeto estiver selecionado, ao clicar nele, uma caixa em branco se
abrirá, então clicamos no + e selecionamos a opção solid:
Com esta opção, nossos objetos de colisão se tornaram sólidos, agora nenhum objeto poderá ultrapassar
ele ou atravessar. Com nossos objetos prontos de colisão pronto. VAMOS CRIAR O NOSSO PERSONAGEM!

Mas ele também não irá ter um visual, e sim vai ser outro quadrado (finja que está jogando just shapes and beats :p)

E antes de adicionar ele, vamos mudar a camada selecionada, lembra que estamos na camada de collision?
(se não estiver chame o professor urgentemente), essa camada selecionada foi feita apenas para
elementos de colisão (no nosso caso chão e parede), vamos bloquear essa camada e selecionar a camada
entities:

Da mesma forma que fizemos anteriormente com o a colisão, dê dois cliques na tela, e selecione a opção
Sprite, e coloque o nome de spr_player, faça novamente um simples quadradinho e pinte da cor que
desejar:

Assim como aprendemos em plataformas anteriores como Scratch, todo detalhe sobre o personagem deve
ser pensado, detalhes como movimento, gravidade, colisão, entre outros que tomariam nosso tempo.
Mas no construct por meio da programação das Behaviours, podemos ter todas essas opções prontas para
nós, assim como foi feito no spr_colission, faça o mesmo com o spr_player, clique nele, vá em Behaviours e
selecione a opção “plataform”, e assim ele terá todas as características de um personagem de plataforma.

Ótimo!! Nosso personagem já tem comportamento e a programação de plataforma (gravidade, movimento

etc). execute o seu jogo para analisar como está nosso avanço até aqui.

Nossa intenção não é deixar o player andar sozinho neste jogo, mas essa programação nos evita de
configurar certas coisas.

Finalizando esta parte do exercício, chame o professor para analisar o seu progresso e assim salvando o
seu projeto.
PROGRAMAÇÃO DO PLAYER
Como mencionado no início do nosso documento, nosso player deverá andar sozinho pelo mapa
de um lado para o outro, e esse movimento independente deverá ser feito em Event_sheet, ou
seja, programando assim como nós fizemos com nossa tela de Splash Screen.

LEIA COM BASTANTE ATENÇÃO DESSE TÓPICO PRA BAIXO

É muito simples mandar nosso personagem andar fixamente para uma direção, mas o que faremos
para fazer nosso personagem mudar a direção? Como faremos o computador entender que ele
deverá virar de direção ao colidir? Analisando assim, de fato aparenta ser algo extremamente difícil,
mas com apoio do nosso motor gráfico e um pouquinho de paciência, todos detalhes serão simples
de resolver.

Para fazer o computador entender qual lado ele deverá seguir, iremos utilizar uma variável.

Mas afinal o que é uma variável??

Explicando de forma superficial, um programa (seja sistema, jogo etc) necessita fazer dezenas de
cálculos, guardar nomes e números para utilizar futuramente.
E para que o computador grave cada uma delas, utilizamos a variável, ela será um pequeno espaço
na nossa memória que irá armazenar certos tipos de informação que o nosso sistema precisa, e esse
local terá o próprio nome, tipo e função no programa, uma gaveta é um belo exemplo:

Repare que a gaveta nada mais é que uma área para guardar certas coisas específica, para ser
utilizado uma outra hora, mas como isso funciona no computador?
Dê uma olhada no sistema a baixo:

Reparou que temos espaços para preencher certas informações, caso o computador precise guardar
elas e utilizar futuramente cada uma delas será adicionado a uma variável específica para cada
caixinha de informação.
Então nosso valor será armazenado e utilizado a hora que quisermos;

Quantas coisas posso armazenar em uma variável?

Apenas um único valor pode ser armazenado em uma variável, independente do que for, texto,
número, mas sempre um único valor, para múltiplo armazenamento utilizamos o que chamamos de
Vetor.

Os valores ficarão guardadas nela para sempre?

Não, tudo que é guardado em variável é colocada na memória RAM do sistema, ou seja, após fechar
o programa ou desligar o computador tudo é perdido, mas as variáveis não são apagadas do sistema,
apenas zerada. Para realmente guardar valores “para sempre” no nosso sistema, utilizamos bancos
de dados.
Como eu vou saber qual é a minha variável e qual devo utilizar?
Você tem a total liberdade de escolher o nome e a função de sua variável, tendo também a liberdade
de utilizar da forma que desejar, ou precisar.

Qual é o meu limite de variáveis que podem ser utilizadas?

Não há exatamente um limite de variáveis, mas quanto menos utilizarmos melhor, o excesso
absurdo delas podem causar lentidão ao programa.
devo colocar o valor da variável apenas quando entrar no jogo? Ele por padrão vem vazio?
Não, você tem esta opção, mas pode definir um valor fixo a variável, ou pré-definido ao iniciar o
programa, esse é um conceito conhecido como “constante” na programação.

No NOSSO CASO, iremos utilizar uma variável para orientar nosso programa, e este tipo de ação é
geralmente utilizado pelos programadores, irei criar um exemplo:

nome do game: chasm (clássico do flash)

digamos que eu tenho um encanamento de água, e tenho 3 opções do que eu possa fazer com ela:
1ª: passar pelo primeiro caminho;
2ª: passar pelo segundo caminho;
3ª: deixar ambos fechados;

O programa poderá utilizar uma variável para decidir isso, mas como?

Digamos que eu tenho uma variável chamada var_cano, e ela poderá ter 3 tipos de valores
diferentes, 0, 1, 2; (poderia ser também 1,2,3).

Então eu poderei mandar o programa ler isso e interpretar a variável da seguinte maneira:
Caso o valor seja 0 : primeiro caminho;
Caso o valor seja 1 : segundo caminho;
Caso o valor seja 2 : não fazer nada;

E quem irá definir o valor da variável var_cano será o usuário, e tudo que o programa irá fazer é ler
interpretar o que deverá ser feito. Muito simples, não?
Então no nosso jogo iremos criar uma variável para cada direção que nosso player poderá ir, no
caso:
0 = ele vai para esquerda;
1 = ele vai para direita;

E para criar uma variável no construct, vá para o event sheet, e pelo teclado, PRECIONE O BOTÃO
“V”, então uma tela perguntará o nome de sua variável e seu valor pré-definido:
Deixe exatamente como a imagem a baixo:

Criando nossa variável, vamos começar a programar nosso personagem, siga a seguinte lógica:

Em base a este simples exemplo, vamos criar a programação que fará a comparação:
Clique em Add event, selecionando ainda System, procure a opção “compare variable”.

Com a seguinte caixa aberta, configure a variável que você deseja analisar, e com qual valor ele será
comparado:

Finalizando, teremos essa caixa de código em nosso event_sheet:

Okay, comparação feita para caso o valor for 0, clique em Add action para dizer ao programa o que
ele deve fazer quando a variável valer 0;

A ação será fazer o personagem andar fixamente para o lado esquerdo, portanto a ação será para
o spr_player.

A opção que desejamos se chama “simulate control”:

Selecione o lado referente o que queremos (left = esquerda / right = direita); e aperte em okay;

Teste se o seu personagem começará a andar fixamente para esquerda, em quaisquer casos,
chame o professor.

Caso esteja tudo correto, vamos configurar agora para caso a variável for 1, ou seja, mover para
direita, clique novamente em Add Events e:

REPITA O PROCESSO QUE VOCÊ CABOU DE FAZER EM ADD EVENTS, MUDANDO OS VALORES DO
ANTERIOR PARA FAZER O MOVIMENTO OPOSTO.
Esta deverá ser a tela no final das duas programações:

Mas temos um grave problema até aqui!!

Nosso personagem já nasce caindo andando para a direção apontada, e se caso eu queira que ele
comece a andar somente quando estiver tocando no chão?
Na teoria, teríamos que apagar o que fizemos até aqui e repetir, mas vamos aproveitar a
oportunidade de ensinar uma técnica muito utilizada no construct para criar sub eventos.

Primeiro, vamos criar um evento que irá verificar se o personagem está no chão, clique em add
events, e selecione o player, e procure por “is on floor”:

Depois de colocados, vamos arrastar o “is on floor” para o topo e depois, por meio do CTRL,
selecionar os dois eventos que ficaram a baixo e jogarem ele acima como um sub-evento.
Feito isso, vamos arrasta-los de forma que virem sub-eventos, complicado né? Basta seguir o GIF
clicando (segurando CTRL) nessa vaquinha a baixo:
Terminando, esta será a tela pronta para comparar o movimento:

(caso não esteja igual, chame o professor)

Mas afinal o que fará ele mudar de direção?? Em outras palavras, o que fará a variável passar de
0 para 1????

Com isso vamos criar uma programação para que quando tocamos na “tela” (obviamente faremos
isso com o mouse), a variável mudará a direção, mas antes de colocar sua programação, temos
que ativar essa opção de touch no nosso jogo, e isso deverá ser feito no layout, clique novamente
na aba Layout, e dê dois cliques para adicionar um objeto a ele, este objeto deverá este que
mostra na imagem a baixo:

Não é necessário colocar nome ou posicionar ele na nossa layer, ele apenas habilitará o toque no
nosso jogo.

Vamos voltar ao events_Sheet

Clique em “add action” e o objeto que iremos editar será o Touch, dê dois cliques nele e procure a
seguinte condição, “on any touch start”

Traduzindo o que essa comparação diz:

“quando eu tocar em qualquer parte da minha tela, faça ...”
E nesse “faça”, vamos pedir que cada vez que a tela for tocada, a variável seja alterada,
obviamente o programa não consegue alterar de qualquer jeito, falaremos para o computador
fazer o seguinte:
“quando eu tocar na tela e a variável var_direcao for igual a 1, mude para 0”
“caso contrário, var_direcao for igual a 0, mude para 1”

Porque eu estou mudando a variável e não a direção??

Lembrando você que quando mudamos o valor da variável entre 0 e 1 o computador fara a
interpretação e mudará o movimento, graças a programação feita anteriormente

Esse evento funcionará igual ao evento “is on floor”, ele por si mesmo não compara nenhum valor,
teremos que fazer sub-eventos para ele também, quais comparações? A mesma feita
anteriormente, assim como aprendemos com a vaquinha, repita o processo para adicionar o sub
evento.
siga a imagem a baixo:
Uai professor comparando apenas um número??? Cade a segunda comparção??
Neste caso faremos diferente para evitar gastar tempo,
Com sua programação feita desta forma, clique com o botão direito no do
“System var_direcao” e selecione a opção “add else”

O Else trabalha como um “senão”, ou seja, caso for oposto da condição selecionada, basicamente
fará a mesma coisa do evento de movimento acima, então nosso código deverá ficar desse jeito:

Em cada um deles, adicione uma ação que mude a variável para o seu número oposto:

Não se esqueça de selecionar o System

Repita o processo com o else, mas mudando para um valor oposto, (ou seja, alterar para 0), e no
final, esse é o código para o toque do movimento:

Salve o documento e aperte F4 para testar ele.

POR HOJE IREMOS FAZER ATÉ AQUI, SALVE SEU DOCUMENTO E ATÉ A PRÓXIMA AULA :)