Tutorial básico de Construct2 - Estou estudando a ferramenta para criação de jogos para ensino de matemática para crianças, este é meu primeiro tutorial e como iniciante coloquei diversas imagens que não caberiam neste então coloquei os links para quem quiser baixar os resultados deste trabalho.
drive.google.com/file/d/0B-m4ZKrE3XJQMVB2WG5Iam9kTkU/view
drive.google.com/file/d/0B-m4ZKrE3XJQMVVOaDYtUFZxUTQ/view
drive.google.com/file/d/0B-m4ZKrE3XJQb2hwek5aWm0zV1U/view
drive.google.com/file/d/0B-m4ZKrE3XJQcjhkSFhCXzdSSEE/view
drive.google.com/file/d/0B-m4ZKrE3XJQMXhsa04tMmVlUE0/view
drive.google.com/file/d/0B-m4ZKrE3XJQVWk0bWdXTFBRd2M/view
PROJETO 1 - Jogo da banheira
1- Para iniciarmos o projeto clicamos na opção File – New
2- O construct têm diversos padrões (templates) para serem escolhidos mas vamos clicar na primeira opção mesmo que é New Empty Project
3- Sua janela deve estar parecida com a figura a seguir
4- O objetivo é criar um jogo onde vamos estourar bolhas de sabão em um cenário onde temos uma banheira, o jogo vai ter um Score – Placar, contador de Vidas- Lives, as bolhas de sabão são os sprites como vemos na figura que iremos adicionar ao projeto a seguir. Para construirmos o jogo vamos até o site: bit.ly/bubblepopassets para baixarmos os arquivos necessários à confecção do nosso jogo, vamos salvar estes mesmos em uma pasta em nosso computador.
5- Para começarmos a construir nosso jogo precisamos adicionar “coisas” nele como personagens, imagens de fundo, balas, inimigos estas “coisas” são os sprites que serão adicionados, para isso podemos dar um clique duplo no projeto ou clicar com o botão direito e clicarmos na opção Insert new object – inserir novo objeto.
6- vai abrir uma janela chamada Insert New Object – Insira um novo objeto, devemos clicar na opção Sprite, a imagem a seguir mostra como é o ícone que representa um Sprite
7- Ao clicarmos no Sprite a janela de inserção de novos objetos se fecha e o cursor do mouse agora apresenta um desenho de um sinal de adição no lugar da “setinha” ta que é o ícone característico que representa o cursor do mouse, basta clicar em alguma área da janela do projeto clicar manter pressionado o mouse e arrastar para que um Sprite seja inserido no projeto
8- O constructo têm embutido em seu código um editor de imagens simples representando pela imagem a seguir, como fizemos o download dos objetos que iremos usar no jogo vamos clicar no ícone da pasta para navegarmos até a pasta onde salvamos nossos arquivos para abrirmos o arquivo chamado bubbles.png que é a imagem da bolha de sabão.
9- Ao abrirmos o arquivo bubbles.png o editor de imagens mostra a figura da bolha de sabão, esse arquivo vem com espaços em branco que iremos recortar usando a ferramenta de corte mostrada a seguir:
10- Os espaços em branco são removidos da imagem da bolha de sabão mas o arquivo é bastante grande o que impede de vermos a bolha como um todo para isso vamos redimensionar o arquivo clicando na ferramenta resize que é exibida abaixo
10.1- Ao clicarmos na ferramenta resize uma janela se abre para que possamos digitar os novos valores para o tamanho da imagem. O tamanho mostrado Width = Largura e Height = Altura, digite 140 para Width e 120 para Heigth. Sua imagem será redimensionada.
11- Sua imagem pode ficar menor do que esse exemplo abaixo, caso deseje a imagem maior basta ir alterando os valores da largura e altura
12 Pontos de colisão são as coordenadas onde um objeto pode ser definido como uma área de contato, a ferramenta para editar / criar pontos de colisão:
13- O construct trabalha com colisões, cada Sprite pode ter diferentes pontos de colisão, para alterarmos estes pontos vamos clicar na imagem da bolha com o botão direito e selecionar Set to bounding box a imagem a seguir ilustra os pontos de colisão antes da aplicação do bounding box
14- A imagem a seguir ilustra depois de aplicado o bounding box
15- Agora iremos adicionar um novo Sprite ao nosso projeto, este será a imagem da banheira para isso vamos clicar com o botão direito na janela do projeto e clicamos em Insert New Object, vai abrir o editor de imagens do construct, vamos clicar no ícone da pasta aberta e navegarmos até a pasta onde salvamos os dados do jogo que fizemos download, lá abrimos o arquivo bathub.png
16- Depois de aberto o nosso Sprite nosso projeto ficará assim
17- Vamos altera agora as propriedades do projeto para uma melhor visualização nos diferentes web browsers, clicamos na imagem da banheira e na esquerda da janela do construct temos as propriedades dos objetos vamos alterar a propriedade size atribuindo 1366 para Width e 768 para Height
18 – Agora vamos alterar as propriedades do layout do projeto, para abrir a janela de propriedades do layout clicamos fora da imagem da banheira e ainda na parte esquerda da janela do construct procuramos pela propriedade layout size, antes desta palavra você vai ver um sinal de adição (+) clique nele e surgirá na tela logo a seguir as propriedades para width e height, também vamos alterá-las respectivamente com 1366 e 768
19- Depois desta etapa concluída agora vamos criar uma nova layer que é como se fosse uma nova camada para o nosso projeto. Para criarmos uma layer devemos verificar se a mesma apresenta visível no projeto, caso ela não esteja você deverá clicar no menu View e escolher a opção Layer bar, isto fará com que a janela de layer apareça. Para criarmos uma nova layer basta clicar no sinal de adição desta janela
20 – A layer zero será a primeira layer do nosso projeto você pode arrastar ela para cima clicando com o botão esquerdo do mouse mantendo apertado e arrastando ela para cima, depois disso troque o nome da layer 1 para background, para renomear a layer basta clicar nela com o botão direito e selecionar a opção rename e atribuir um novo nome. Chamaremos ela de background.
21- Ao fazer isso vemos apenas a banheira na nossa tela, vamos enviar essa imagem para a layer backgrond, com a imagem selecionada clicamos na janela de propriedades do objeto e procuramos pela propriedade layer na frente dessa propriedade podemos clicar e vai aparecer o nome das layers que criamos escolha a layer background
22- Perceba que ainda não somos capazes de enxergar a bolha de sabão para resolvermos esta questão vamos clicar na layer zero na janela layers (direita ) , isso fará com que ela seja selecionada , sendo assim a janela de propriedades da layer irá aparecer na esquerda de sua janela no construct, ali procuramos pela propriedade transparente e a marcamos como sim (yes)
23- Agora o layout de nosso primeiro jogo esta completo, passaremos agora a acrscntar os eventos que farão efetivamente no projeto ganhar “vida”. Quremos usar o mouse para estourar as bolhas de sabão no nosso game, para que o construct pssa permitir o uso do mouse vamos acrescentar um novo objeto que será o Touch.
24- Vamos tratar agora da parte da programação do construct, ela é feita através das Event Sheets, depois de clicarmos no obeto touch esse é adicionado ao nosso projeto, lembrando que ele não fica visível na janela de projetos do construct da mesma forma que o Sprite, este objeto touch nos permitirá criar códigos de programação para que as bolhas sejam destruídas quando clicarmos com o mouse sobre elas. O construct quando inicia um novo projeto sempre criar duas abas uma para o layout que é onde as imagens,desenhos, personagens, inimigos, tiros ficam 9lembrando que o layout pode ter uma ou mais camadas) e a outra parte é a programação que é a Event Sheet, a imagem a seguir mostra estas duas abas
25- Ao clicarmos na guia Event Sheet é exibida uma tela em branco, para adicionarmos um evento ao nosso projeto podemos dar um clique duplo na janela em branco ou mesmo clicarmos com o botão direito e escolhermos a opção add Event ou ainda clicar na palavra Add Event que aparece nesta janela escrita em cinza claro.
26- Iremos adicionar um evento para o objeto chamado de Touch que inserimos pouco tempo atrás, basta posicionar o mouse sobre o referido objeto e dar um clique duplo sobre ele .
27- Para o objeto Touch vamos inserir uma condição chamada on touched object – quando o objeto for tocado, clicado ou pressionado. Afigura a seguir mostra o evento On Touched object, você vai clicar sobre ele
28- Depois de clicar no evento on touched object você deve definir para qual item do seu jogo a ação de clicar com o mouse produzirá um resultado, nesse caso quando clicarmos na bolha de sabão ela se destruirá. Portanto vamos escolher o objeto bubble clicando sobre ele e depois clicando no botão OK ou dando um clique duplo sobre o mesmo.
29- Depois de clicar sobre o evento on touched object e ainda termos escolhido o objeto bubble para receber as ações do clique do mouse sua tela do construct será como a figura a seguir. Uma leitura do código criado até o momento seria assim: Para o Objeto Touch – quando a bolha de sabão receber um clique do mouse ... ou quando clicarmos sobre a bolha de sabão...
30- A ação será sobre a própria bolha de sabão, portanto agora vamos clicar na opção Add Action e escolher novamente o objeto bubble
31- Depois de termos escolhido novamente o objeto bubble vamos agora definir a ação que este sofrerá quando o mouse clicar sobre uma bolha, a ação será a destruir o objeto. A figura a seguir ilustra o que queremos dizer:
32- Se você fez tudo corretamente como listado pelas imagens sua tela do construct neste momento tê essa forma:
33- A partir de agora estaremos adicionando comportamentos (Behaviors) ao projeto do jogo, para isso vamos clicar na guia Layout1 como demonstrado na figura a seguir
34- Depois que clicamos na guia Layout1, a interface do nosso projeto volta a ser exibida, agora vamos selecionar o objeto bolha de sabão clicando sobre ele, depois disso vamos na porção esquerda da janela do construct especificamente nas propriedades dos objetos e vamos procurar pela propriedade Behaviors, devemos clicar na opção Add / edit behaviors
35- Vamos adicionar um behavior (comportamento) de bullet (bala) para nosso jogo
36- O comportamento de bullet faz com que o objeto ganhe movimento, no construct um objeto pode se movimentar para as 4 direções através de atribuição de valores para a propriedade angle. No caso do construct o sistema de valores difere um pouco do convencional porque para ele angle = 0 o objeto se movimentará para a direita, com angle = 180 o objeto se moverá para a esquerda, com angle = 90 o objeto se moverá para baixo e com vangle valendo – 90 o objeto se moverá para cima. O valor negativo no construct farác om que a bolha se movimente de baixo para cima no nosso jogo.
37- Agora vamos criar uma forma de lançarmos as bolhas de mais de um local do nosso jogo, para isso vamos criar um Sprite em forma de retângulo e pintaremos ele de uma cor qualquer. Este objeto será criado e copiado 5 vezes em nosso projeto ou seja criaremos 5 meios diferentes de lançarmos as bolhas de sabão. Para criar um Sprite dê um clique duplo n a janela de seu projeto o editor de imagens do construct será aberto criaremos um retângulo e o pinteremos com uma cor qualquer e definiremos os pontos de colisão como na figura a seguir:
38- Depois de criado o Sprite vamos chama-lo de spawner e vamos clicar sobre ele – copiar e colar e assim teremos a seguinte forma no nosso projeto
39- Lembrando que para os spawers poderem lançar as bolhas de baixo para cima vamos definir cada propriedade angle de cada um dos 5 spawners como sendo angle = -90, para isso clicamos em um dos 5 objetos e no painel a esquerda das propriedades do objeto alteramos a propriedade angle atribuindo o valor -90, repetiremos essa ação para os outros 4 sprites restantes.
40- Pronto, agora vamos clicar na aba Event Sheet 1 para adicionarmos um evento novo, clique duplo para adicionarmos um evento System
41- Este evento system terá uma condição a cada x segundos
42- Vamos definir um tempo para que o jogo crie uma nova bolha de sabão, este tempo ser de 1 segundo, depois bata clicar no botão Done.
43- Agora iremos criar uma ação neste evento system criado, a ação será uma ação também de system – create object que será responsável por criar um outro objeto bolha de sabão em um dos 5 sprites que chamamos de spawners.
44- Agora efetivamente vamos estar criando o objeto bolha de sabão na posição dos spawners, X representa a horizontal e y a vertical, neste caso estaemos criando um objeto bolha de sabão na posição Spawner.x e Spawner.y isso fará com que a bolha seja lançada por um dos 5 sprites Spawners criados anteriormente.
45- Se você executar o jogo neste momento ele terá uma forma parecida com a imagem a seguir, você percebe que as bolhas estão saindo apenas de um dos spawners e não de todos como foi mencionado que iria acontecer para corrigir este problema veremos nas próximas imagens a seguir
46-No construct podemos definir mais de uma condição a um evento, neste caso estaremos fazendo isso para gerar as bolhas de sabão de forma aleatória em um dos 5 spawners presentes. Para criar uma nova condição a um evento primeiro selecionamos o evento que queremos clicando sobre ele com o botão direito depois posicionamos o mouse na opção add e no submenu que se abriu clicamos em Add another condiction – Adicione uma nova condição ou usamos a tecla de atalho (Letra C) depois de selecionar o evento desejado. A figura a seguir ilustra o que queremos dizer:
47- Essa nova condição que será criada será uma system – pick random instance – escolha uma nova instância. Uma instância é uma variação ou cópia de um objeto que esta na tela, cada um dos 4 spawners é uma cópia do primeiro que foi criado mas cada um deles é uma nova instância.
48- A cada 1 segundo será escolhido uma nova instância dos spawners criados para lançar uma nova bolha de sabão, na propriedade pick another instance vamos escolher o objeto spawner como ilusta a figura a seguir:
49- Agora precisamos tornar os spanwers invisíveis durante a execução do jogo, para isso vamos clicar em cada um deles e alterar a propriedade Initial visibility para false.
50- Adicionando pontuação – Score ao jogo, para isso teremos de adicionar um objeto texto ao nosso projeto, clique com botão direito e selecione a opçã Insert new Object, insira um novo objeto, este será um objeto texto como ilustra a imagem a seguir
51- Vamos chamar este objeto texto de placar, vamos alterar a propriedade color para branco, negrito e o tamanho da fonte para 24 px
52- Caso você execute seu jogo agora sua tela será parecida com a imagem a seguir:
53- Para exibir a pontuação alcançada pelo jogador vamos estar criando agora uma variável global, para isso com a event sheet 1 aberta vamos clicar com o botão direito e selecionar add global variable – adicione variável global.
54- Essa variável global será chamada de score – pontuação, depois de digitar o nome basta clicar no botão ok
55- Depois de criarmos a variável score – pontuação, nada vai acontecer com seu jogo porque ainda não definimos um evento que irá atualizar o objeto de texto que criamos para exibir quantos pontos o jogador fez, para fazer isso vamos criar um novo evento system com uma condição igual a every tick – a cada segundo
56- Agora dentro deste evento system – every tick vamos criar uma ação para o objeto texto que chamamos de placar
57- A ação a ser criada para o objeto texto placar é chamada de set text – atribuir texto - nela vamos digitar: “Placar:” & score - isso fará que o objeto texto chamado de pontuação receba o conteúdo que esta sendo armazenado na variável score a cada segundo.
58 – A digitação do texto para exibição no objeto texto criado é ilustrado na figura abaixo:
59- No caso da imagem abaixo o texto Score traduzido para o português seria algo como pontuação, o nome Placar foi uma idéia para demonstrar que os nomes dos objetos e das variáveis no construct podem ser diferentes dos que você vê nos manuais que for ler. Lembrando que quando você muda um nome de uma variável ou de um objeto você DEVE SEMPRE SE REFERIR A ELE(A) DA MANEIRA QUE FOI DECLARADA EM SEU PROJETO!!!
60- Vamos agora atribuir uma pontuação a cada clique que seja sobre uma bolha de sabão, para isso vamos criar uma ação no evento Touch que será a de atribuir por exemplo 10 pontos a variável pontuação, para fazer isso vamos criar uma ação system – add to e escolher a variável pontuação e atribuir a ela o valor 10
61- Similar ao objeto de texto pontuação vamnos criar um outro objeto para guardar agora as vidas do nosso jogador, vamos estabelecer que o jogo se inicia com 3 e cada vez que uma bolha de sabão consegue atingir o topo da janela do navegador uma vida se perderá e ao final o jogo exibirá em um outro objeto de texto a palavra Game Over. Para fazer isso vamos iniciar inserindo um outro objeto de texto e vamos chamá-lo de lives. Ele terá as mesma configurações do objeto de texto pontuação que são fonte cor branca, tamanho 24 px
62- Depois de criarmos o objeto de texto vamos agora definir no evento Every Tick uma condição para exibir o numero de vidas que o jogador possui, para isso, criaremos uma condição set text – atribuir texto e nela faremos que a cada segundo seja exibido as vidas do jogador no objeto de texto lives. O Texto que será exibido será “Vidas:” &vidas, na imagem abaixo temos como o Manual em inglês apresenta o texto “Lives: “ & lives
63 – Nessa figura temos o texto que pode ser traduzido, o que esta entre aspas é o texto que será exibido pelo construct no objeto de texto e o resto &life será o nome da sua variável o & comercial serve para concatenar o texto com o conteúdo da variável , imagine que você começou a jogas e tem 3 vidas, a tela do jogo exibirá no objeto texto lives a segunte informação: Vidas: 3.
64- Para perder uma vida vamos determinar se a bolha de sabão saiu fora do layout do jogo, para isso vamos inserir um novo evento e vamos selecionar a bolha de sabão
65- Esse evento terá como ação is outside layout – está fora do layout, este é o evento que fará com que uma vida do jogador seja subtraída da variável global life definida para guardar a quantidade de vidas do jogador
66- Para o evento Bubble is outside of layout – a bolha de sabão saiu do layout do jogo, vamos acrescentar duas ações uma será destruir a bolha de sabão, para isso vamos acrescentar uma ação para o objeto bubble e escolheremos a ação destroy. Para retirarmos uma vida do jogador vamos acrescentar uma ação system – subtract from – e vamos escolher a variável life e atribuir o valor 1 isso fará que quando a bolha de sabão saia do layout do jogo o jogador perca uma vida
67- Caso você execute o jogo agora você perceberá que temos um placar que vai sendo acrescido a cada bolha que estouramos e quando uma consegue sair da tela do jogo perdemos uma vida mas posso ir jogando e perdendo as bolhas que a vida passa a exibir números negativos para consertar isso vamos fazer o seguinte, criaremos uma variável global chamada gameover e um outro objeto de texto que não terá o seu texto alterado dinamicamente conforme temos os objetos Placar e vidas, este objeto de texto conterá a palavra Game Over.
Para criar uma variável global basta clicar na event sheet 1e com um clique do botão dirteito do mouse posicionar o mouse sobre a opção add e no submenu que se abriu selecionar a opção add global variable.
68- Para o objeto de texto gameover vamos alterar suas propriedades , fonte tamanho 24px, cor da fonte branca e para que ele não fique sendo exibido a todo momento durante o jogo vamos atribuir a propriedade Inital visible como false.
69- Vamos criar um evento system que verifique o valor da variável life, se ele for menor ou igual a 0 vamos atribuir um valor igual a 1 a variável gameover
70- A variável life é menor ou igual a 0
71- Vamos criar uma ação system para atribuir o valor 1 a variável gameover, portanto criaremos uma ação system - set value
72- No caso da variável gameover tiver o valor igual a 1 não queremos que os spawners lancem mais bolhas de sabão, também queremos ocultar o placar e a quantidade de vidas e ainda exibir o texto game over na tela, para isso vamos criar uma outra condição no evento Every 1.0 seconds vamos inserir uma outra condição que verifica se a variável gameover é igual a 0 ou seja o jogo ainda não terminou
73- A mesma condição de verificação do valor da variável gameover igual a 0 deve ser inserida no evento bubble – is outside layout
74 – Vamos copiar essa mesma condição para o evento touch para fazer com que as bolhas de sabão só sejam lançadas quando a variável gameover for igual a 0
75- Vamos criar um evento agora para verificar se a variável game0ver for igual a 1, nesse caso vamos ocultar o placar e a quantidade de vidas e exibir o objeto de texto game over . Este será um evento system – compare variable
76- Nesse evento faremos realmente a exibição do game over e ocultaremos o placar e as vidas, teremos uma ação para o objeto de texto lives com a propriedade set visible sendo alterada para false, o mesmo para o objeto Score e para o objeto de texto gameover temos que definir a propriedade set vísible como tue.
77- Como se trata do final do projeto ainda temos mais ações para adicionar ao evento que compara o valor da variável gameover se ele é igual a 1, vamos adicionar mais um evento system
78- selecionamos a propriedade wait
79 definimos para o jogo esperar 2 segundos
80- acrescentamos uma outra condição system e agora vamos trabalhar com a propriedade restart layout
81- e para finalizar vamos resetar nossas variáveis globais para isso vamos acrescentar uma nova condição system e trabalhar com a propriedade reset global variable
82 – depois de pronto este evento que compara se a variável gameover é igual a 1 fica assim