Apostila de Construct - Welington Carvalho

Apostila de Construct – Desenvolvimento de jogos
http://welingtonsc.blogspot.com/
1

2
O Construct é um aplicativo simples para quem quer aprender a
programar de forma rápida e fácil, criar pequenos games em 2D, usando
recursos do programa ou mesmo imagens que você pode criar usando por
exemplo Photoshop e Corel Draw.
Vamos iniciar o CONSTRUCT. Essa é a tela inicial do programa:
Vamos fechar essa introdução FREE EDITION e vamos a segunda tela, que nos
permitirá criar um novo projeto, abrir um projeto, e assim sucessivamente:
Ao clicar em NEW PROJECT (Novo Projeto), vamos a uma tela que nos permitirá
um projeto em branco e exemplos que o próprio programa nos dá para
elaborarmos em cima de modelos prontos. Nós vamos criar um projeto em
BRANCO (New Empty Project):

3
Pronto. Ao entrar no programa, teremos a tela abaixo, em branco. Em START
PAGE, é a página inicial do aplicativo. Em LAYOUT 1, a nossa tela em que
iremos criar o design do jogo. Em EVENT SHEETS, é onde iremos adicionar
ações para que o jogo possa funcionar. Ao lado esquerdo, temos propriedades
do LAYOUT, onde iremos alterar o tamanho de tela, nome, versão. Ao lado
direito, ficam os projetos em aberto e os itens, como o Layout, etc.
Vamos fazer a primeira modificação para alterarmos a câmera, para que pegue
apenas uma parte da tela, para depois darmos progresso a continuação e a
câmera acompanhar. Sendo assim, com o NEW PROJECT selecionado ao lado
direito, vamos ao lado esquerdo, em WINDOW SIZE e vamos alterar para 400,
200 (sendo 400 pixels de largura, 200 pixels de altura)

4
Você notará na tela que, pequenos pontilhados irão aparecer. Será a parte em
que a câmera irá pegar de início, aquela pequena área ali. Agora, vamos diminuir
o tamanho do layout, para trabalharmos. Para isso ao lado direito, em
PROJECTS, selecione LAYOUT 1 e vamos novamente ao lado esquerdo e em
LAYOUT SIZE iremos alterar o tamanho para 1024, 200 (1024 de largura e 200
de altura). Isso você pode alterar depois.
Pronto, temos nossa tela definida. Ao Clicar na ABA VIEW, em ZOOM OUT,
podemos diminuir a tela para que fique toda à amostra para trabalharmos melhor:

5
Vamos começar a criar os primeiros objetos. Clicando com o botão direito na
área do layout, podemos ir em INSERT NEW OBJECT:
O primeiro objeto que iremos adicionar chama-se TILED BACKGROUND, que
no caso é o plano de fundo. Ao selecionar ele, irá aparecer uma setinha no layout
para que possamos adicionar:

6
Selecione qualquer área do layout e dê um clique. Irá aparecer a tela abaixo:

7
Aqui você poderá pintar seu plano de fundo, poderá importar através do ícone
abrir, sendo assim podendo importar planos de fundo criados com mais detalhes,
em Photoshop, Corel Draw, assim sucessivamente. Aqui para exemplo vamos
fazer pequenos prédios, para que seja o plano de fundo do nosso joguinho de
exemplo. Para isso, basta clicar e soltar, e a cor você pode usar de sua
preferência, alterando na paleta de cores ao lado esquerdo:
Feito isso, podemos fechar essa janelinha e agora iremos ajustar o TILED
BACKGROUND ao layout!

8
Ao clicar e ajustar com os encaixes, podemos cobrir todo o layout, fazendo assim
uma repetição do plano de fundo:
Agora, nós vamos criar um “chão”, uma parte dele. Pra isso, nós vamos
novamente clicar com o botão direito na área do LAYOUT, dessa vez vamos criar
um SPRITE, que é quase o mesmo que o TILED BACKGROUND, mas é bem
diferente!

9
Prossiga o mesmo passo do TILED BACKGROUND, clicando em uma área do
layout e assim sendo, abrindo novamente a a tela de criação:
Dessa vez nós vamos colorir ele todo (ou, como já disse, você pode importar
uma figura clicando no ícone de abrir). Logo depois, vamos ajustá-lo no layout!

10
Agora, vamos criar um personagem. Podemos criar todo no Construct como já
fizemos o chão e o tiled background, ou podemos importar. Aqui no caso, iremos
importar para você testar pela primeira vez a importação. Botão direito no layout,
INSERT NEW OBJECT, SPRITE (como já fizemos). Logo depois, vamos no
botão LOAD A IMAGEM FROM A FILE:

11
Aqui no exemplo, vamos usar o Mário 8 Bits, mas você pode desenvolver seu
personagem e pode importar, ou mesmo fazê-lo no construct, com paciência e
dedicação.
Acima como mostra a figura, ela está em alta resolução, mas quando fecharmos
e jogarmos pro layout, poderemos diminuir!

12
Agora, nós vamos aplicar um COMPORTAMENTO ao nosso personagem,
fazendo com que ele se mova, ao jogarmos com as setinhas do teclado. Vamos
adicionar também comportamento no chão, após ele. Para isso, ao lado
esquerdo, vamos em BEHAVIORS (comportamentos) e vamos clicar no sinal de
+ para adicionarmos um comportamento!
Após clicar no sinal de +, vamos selecionar 2 comportamentos: o PLATAFORM
e o SCROLL TO. O que eles farão? O PLATAFORM será para dar vida ao
personagem, para que possamos movimentar ele, jogando. O SCROLL TO, será
para fazer a câmera (tela) acompanhar os movimentos do personagem, fazendo
assim ele andar a tela!

13
Abaixo, na figura, os dois BEHAVIORS selecionados para o SPRITE, que é no
caso nosso personagem super mário.
Vamos agora adicionar um BEHAVIOR ao chão que criamos. Vamos deixar ele
sólido. Para isso, selecione o chão, vamos em BEHAVIORS e selecionamos o
SOLID.

14
Os BEHAVIORS não são visíveis, só iremos vê-los funcionando ao testar o
game, é o que vamos fazer agora! Vamos na ABA HOME, depois em RUN
LAYOUT:
Use as setinhas do seu teclado para cima, baixo, lados e teste seu jogo!

15
Vamos agora adicionar novas plataformas no joguinho, para ele ficar
interessante, até chegar no final da fase! Para isso, botão direito do Mouse,
INSERT NEW OBJECT, SPRITE, vamos colorir de vermelho e deixa-lo do
tamanho como mostra a figura abaixo:
Agora, vamos adicionar um comportamento (BEHAVIORS) nesse Sprite, para
que ele fique andando de um lado e de outro, movimentando, para ficar ainda
mais interessante. Para isso, mais uma vez, selecione este Sprite, vamos à
propriedade do lado esquerdo, clique em BEHAVIORS, clique na SETINHA de +
para adicionar um novo BEHAVIOR e vamos selecionar a opção SINE:

16
Clique em ADD, feche a janelinha de BEHAVIORS. Você vai notar que nas
propriedades do lado esquerdo aparecerá opções desse BEHAVIOR, como
SPEED, que é a velocidade da nossa plataforma. Você pode alterá-la, deixando-
a mais rápida ou devagar!
Clique em HOME e em RUN LAYOUT para testar mais uma vez:
A plataforma deverá estar se movimentando:

17
Só que nós teremos um detalhe: ao você andar com o personagem e pular sobre
a plataforma, você verá que o personagem irá cair direto, passando pela nossa
plataforma. Para isso, iremos adicionar um novo BEHAVIOR, o mesmo que
aplicamos no chão, que será o SOLID. Selecione a plataforma, vamos em
BEHAVIORS, clique em + para adicionar e selecione SOLID:
Vamos criar cópias dessa plataforma e no final adicionar um novo chão. Como
você já deverá saber criar, não precisarei repetir os passos aqui. Nas
propriedades da plataforma ao lado esquerdo, no BEHAVIOR SINE, você poderá
alterar se ele movimentará também na HORIZONTAL ou VERTICAL. Use a
criatividade para fazer mais dificuldade do joguinho:

18
Seu jogo já começará a ficar interessante até esse ponto!
Vamos agora trabalhar com a primeira variável. Isso fará com que possamos
adicionar event / action no personagem, o que faremos agora é falar pro
programa sobre a vida do personagem, para que possamos criar um processo
no qual, ao personagem cair no buraco, o jogo se reinicie. Selecione o
personagem e vamos em INSTANCE VARIABLES nas propriedades do lado
esquerdo. Vai aparecer uma caixinha tipo dos BEHAVIORS, vamos em + e
colocar as informações:
Vamos colocar em NAME: Vida; em TYPE: Number; INITIAL VALUE: 1;
DESCRIPTION: Vida do Personagem. Clica em OK!

19
Vamos agora colocar um SPRITE preto, colocar do início do buraco ao fim, como
mostra a figura. Nós vamos com esse buraco adicionar informações de event e
action para que, ao personagem colidir com esse buraco, ele irá morrer e assim
o jogo reiniciar, preste bastante atenção:
Vamos agora em EVENT SHEET, clique com o botão direito, ADD EVENT,
selecione o SPRITE PERSONAGEM:

20
Vamos clicar em NEXT e vamos na opção ON COLLISION WITH ANOTHER
OBJECT:
Em OBJECT, CLICK TO CHOOISE e vamos selecionar o SPRITE preto:

21
Vamos agora colocar uma ação. Quero informar ao programa que ao
personagem encostar nesse objeto preto, sua vida será transformada em zero.
Para isso, do lado do event, vamos em ADD ACTION, selecione o
PERSONAGEM e vamos em SET VALUE:

22
Agora, teremos de informar ao programa que, ao personagem morrer, o jogo irá
reiniciar. Para isso, ADD EVENT, selecione o SPRITE PERSONAGEM:
Vamos clicar em NEXT e selecionar a opção COMPARE INSTANCE VARIABLE.

23
Vamos deixar a opção de zero:
Agora, clique do lado direito em ADD ACTION, e vamos informar ao programa
que ao objeto personagem encostar no chão preto, ele irá reiniciar o game:
ADD ACTION / SYSTEM

24
RESTART LAYOUT

25
Pronto. Vá em HOME / RUN TO LAYOUT e faça o teste.
Vamos tornar o buraco preto invisível na tela do jogo, para que não fique
estranho. Para isso, selecione o objeto, vá nas propriedades ao lado esquerdo,
vamos em PROPERTIES, INITIAL VISIBILITY: coloque INVISIBLE

26
Para darmos mais vida ainda ao joguinho, vamos adicionar moedas, para que o
personagem colete essas moedas. Para isso, botão direito, INSERT NEW
OBJECT, SPRITE e vamos usar a cor amarela e a ferramenta de ELIPSE:
Depois de adicionar e ajustar a moeda, vamos em EVENT SHEET, ADD EVENT,
selecione o SPRITE MOEDA, que você criou, vamos em ON COLLISION WITH
ANOTHER OBJECT, selecione o SPRITE PERSONAGEM:

27

28
Depois, ADD ACTION, SPRITE MOEDA, selecione a opção DESTROY.
Feito isso, faça cópias dessas moedas, espalhe-as na fase. Depois, é só exportar
o seu jogo em HTML 5 para algum site ou plataforma, ou mesmo ANDROID.
Explore mais o programa, adicione sons, adicione textos, indicando quantidade
de vidas, moedas e assim sucessivamente. Essa apostila foi apenas uma base
para você trabalhar com programação, matemática e inglês! Como sugestão,
baixe minha apostila de ADOBE PHOTOSHOP em meu blog e do COREL
DRAW, crie personagens em pinturas, crie cenários dos games nos programas
e exporte-as para o programa, use bem a criatividade e boa diversão!

29
Meu blog http://welingtonsc.blogspot.com/
Encomende trabalhos como logos, sites, montagens e outros em meu blog. Meu
e-mail welingtonsilvacarvalho@hotmail.com

Apostila de Construct - Welington Carvalho

Mais conteúdo relacionado

Semelhante a Apostila de Construct - Welington Carvalho

Mais de Welington Carvalho

Apostila de Construct - Welington Carvalho