Anda di halaman 1dari 48

Jogos em HTML5: Criando um jogo passo a passo com Construct2

Jogos em HTML5: Criando um jogo


passo a passo com Construct2

O HTML5 uma alternativa para desenvolvedores de games, principalmente para o

mundo mbile, pois tem como enorme vantagem criar jogos multiplataforma, ou mais

precisamente, sem plataforma. Com ele voc pode criar jogos de RPG, simulao,

tabuleiro e por a vai, quase que sem restries. Mas para os leigos em HTML5 e em

linguagens de programao, o Construct 2 seria a soluo dos problemas.

O Construct 2

A IDE foi desenvolvida pelo grupo Scirra e recomendado para o desenvolvimento de

jogos em 2D, porm, nada o impede de experimentar outros estilos de games.

O Construct 2 possui como nica desvantagem a sua execuo somente no sistema

operacional Windows.

O programa atualmente possui as verses paga e free. Na verso free possvel criar

apenas quatro camadas (layers) no mximo, j na verso paga no h limites.

perceptvel que a verso free no fica to atrs da verso paga.

A IDE e seu funcionamento

1
Jogos em HTML5: Criando um jogo passo a passo com Construct2

O manuseio do programa algo muito simples. Pessoas sem qualquer experincia em

criao de jogos conseguem utilizar a IDE sem problemas. interessante que pessoas

que desejam comear a desenvolver jogos e no gostam tanto da parte de programao

utilizam este tipo de ferramenta, pois no exige tanto do desenvolvedor a programao

e deixa-o bem prximo da realidade do processo de desenvolvimento de um game.

O primordial ter em mos as imagens, sons, efeitos sonoros, enfim, toda a parte visual

e udio do seu jogo. Os eventos e iteraes de teclado, mouse, touchscreen e outros

fica por parte do Construt 2.

O desenvolvedor do game adiciona os cdigos, mas de uma maneira indireta, de forma

que qualquer desenvolvedor com apenas a lgica da programao consiga desenvolver

seus jogos sem dificuldades. Para ser mais especifico os cdigos que o desenvolvedor

precisa entender bem semelhante ao famoso pseudocdigo ou ento "portugol".

Particularidades do programa

Acompanhe abaixo algumas das diversas caractersticas do programa.

- Existe uma lista chamada Event Sheet e nela que voc acrescenta seu cdigo de

maneira intuitiva e simples. Com apenas alguns clicks possvel acrescentar um bloco

de cdigo inteiro, ou ento, criar funes que manualmente demoraria o triplo ou quem

sabe cinco vezes mais do que utilizando a Folha de Eventos.

- Existe um mini editor de imagens integrado, sem a necessidade de utilizar um plugin.

No editor voc pode cortar, girar, inverter a imagem, alterar a cor, criar uma animao

com uma sequncia de imagens.

2
Jogos em HTML5: Criando um jogo passo a passo com Construct2

- Outra particularidade do programa que no pode ser isolada o painel "Layers", onde

possvel posicionar os objetos em camadas diferentes, semelhante ao Photoshop da

Adobe. A partir dessas camadas possvel atribuir comportamentos diferentes para

cada uma, organizando bastante o trabalho do desenvolvedor.

-O Contruct 2 tambm possui uma janela para exportar o projeto, em formato para web,

mobile, PC, formato Scirra Arcade (site onde ficam os jogos criados por usurios do

site), Chrome Web Store, Kongregate, Windows 8 Metro app e outros.

Exemplo e aplicao

Acompanhe abaixo o passo a passo de como criar um simples jogo.

Antes de tudo voc precisa fazer o download do programa em

http://www.scirra.com/construct2/releases/new. Este link direciona sempre para a verso

mais recente do programa.

Neste exemplo vamos utilizar uma imagem para o background, foreground, player,

inimigos, e itens.

No arquivo disponvel para download voc vai encontrar as seguintes imagens:

bg.png - Background.

fg.png - Foreground.

player01.png - Player andando.

player02.png - Player caindo.

player03.png - Player parado.

inimigo01.png - Inimigo.

3
Jogos em HTML5: Criando um jogo passo a passo com Construct2

inimigo02.png - Inimigo.

inimigo03.png - Inimigo.

item01.png - Item.

item02.png - Item.

Criando o arquivo a partir do zero.

Vamos comear criando o arquivo fonte que guardar nosso jogo. Depois de instalar o

Construct2 em sua mquina, abra-o e clique em File (No canto superior esquerdo) -

>New. Abrir uma caixa com duas opes.

Para projetos simples de um nico arquivo a primeira opo a ideal. Mas se for um

projeto grande, a segunda opo lhe atender melhor criando umas pasta com seus

arquivos. Como estamos em um pequeno exemplo, ficaremos com a primeira opo.

Deixe selecionado a opo Store project in single file (.capx). E clique em Create project.

Painis e Janelas.

1. Guias.

Depois de ter criado o arquivo principal, abrir duas guias "Layout 1" e "Event sheet 1".

A guia "Layout 1" onde ficar o layout do jogo, ou seja, suas imagens e objetos. J na

guia "Event sheet 1" sero adicionados os cdigos do jogo (chamados

de events (eventos) no Contruct 2).

Na guia Home, logo acima das guias "Layout 1" e "Event sheet 1", voc encontrar dois

botes que sero bastante utilizados: o primeiro o Run layout, usando para visualizar o

4
Jogos em HTML5: Criando um jogo passo a passo com Construct2

jogo no navegador; e o outro boto o Export Project que exportar o projeto. Nele voc

encontrar as opes de exportao para Chrome Web Store, arquivo HTML,

PhoneGap, Scirra Arcade, Kongregate, e outros formatos.

2. Painel Properties.

Ser um dos painis mais utilizados, pois ele mostrar as propriedades de cada item e

objeto do seu jogo.

3. Painel Projects.

Este servir para voc visualizar todos os itens do seu jogo, como folha de eventos,

layouts, imagens, sons e musicas, e objetos externos (teclado, mouse, touchscreen).

4. Painel Layers.

Este painel semelhante ao painel layers do Photoshop. neste que voc montar seu

projeto em camadas, organizando seus itens a sua preferncia. possvel obter alguns

efeitos no jogo atravs das camadas.

5 . Painel Objects.

onde ficar organizado seus objetos do jogo, como player, inimigos, cenrios,

imagens em geral e texto.

Layout e formato

Comearemos o desenvolvimento delimitando o tamanho da fase e da tela.

5
Jogos em HTML5: Criando um jogo passo a passo com Construct2

V at o painel projects, selecione a pasta com o nome "New project". Repare que as

propriedades do painel properties foram alteradas. E que agora ele apresenta as

propriedades do jogo. Neste painel voc poder alterar o nome do seu projeto, colocar o

autor do jogo, uma descrio, e a verso do game.

Vamos alterar apenas alguns parmetros: em Name, Author, Description, Version, sinta-

se a vontade para colocar o que desejar.

O objetivo neste painel delimitar o tamanho da tela do jogador. Para este exemplo

queremos que a tela fique um pouco maior horizontalmente e menor verticalmente. Para

isso, altere as propriedades do campo Windows Size para "600, 300".

O resultado das alteraes voc encontra na Figura 1.

Figura 1 Painel Properties com as propriedades do jogo.

6
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Agora vamos alterar o tamanho do layout do jogo (ou tamanho da fase). Para isso, deixe

selecionada a guia "Layout 1"e d um click dentro do espao em branco.

Observe que as propriedades do painel properties foram modificadas novamente. Para

alterar o tamanho do layout do jogo v at o campo Layout Size e altere seus valores

para "1200, 300". Este valor interpretado em pixels.

Criando o cenrio

Vamos comear inserindo o background ao jogo. Para isto, vamos criar uma camada

especialmente para o background para adicionar um efeito a esta camada, fazendo com

que o background parea estar distante do foreground.

Comearemos renomeando a camada do background. No painel Layers, clique com o

boto direito do mouse sobre a nica camada, com o nome de "Layer 0". Em seguida

selecione Rename e renomeie a camada com o nome "background".

Para adicionar a imagem de plano de fundo v a Layout 1 e d um duplo clique no

espao em branco do layout do jogo. Se abrir uma janela chamada Insert New Object.

Vamos utilizar o objetoTiled background para inserir imagens, porm as mesmas

quando esticadas no perdem a qualidade, ao invs disto elas se repetem.

Selecione a opo Tiled background, na janela que se abriu. Repare que o cursor de

seu mouse foi alterado, pois o programa apenas est pedindo para voc escolher o local

onde a imagem vai ser inserida.

Selecione o local onde est imagem a ser adicionada. Para abrir uma imagem no editor

de imagem, basta clicar no local indicado, conforme a Figura 2.

7
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 2-Como abrir uma imagem no editor de imagens.

Agora vamos recortar utilizando a ferramenta Crop que recorta as partes transparentes

onde no h nenhum tipo de contedo visual (ou seja, totalmente transparente).

Na Figura 3 temos o lugar indicado que voc deve clicar para ativar a ferramenta Crop.

8
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 3 Selecionando a ferramenta Crop.

Agora iremos posicionar e redimensionar a imagem. Para isso, clique sobre a imagem

que acabamos de criar. Observe o painel properties e veja que as propriedades foram

alteradas. EmName d o nome de "background", mas voc pode dar o nome que

desejar em seus projetos, pois no interfere no resultado (dar nome aos objetos muito

til na hora de inserir eventos ao jogo, alm de deixar os objetos organizados). Neste

painel vamos alterar o campo position (posio do objeto no layout) para: "0, 0"

e size (largura e altura do objeto) para "1020, 300" (pixels).

Vamos agora inserir o cho com uma nova camada para. Para isto, clique no boto

destacado na Figura 4.

9
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 4. Adicionando novas layers.

Agora clique com o boto direito sobre a nova camada e em seguida selecione Rename.

D o nome de "foreground". Em seguida, clique com o boto direito do mouse sobre o

layout do jogo e selecioneInsert new object. Escolha o item Tiled background para

indicar o local onde o cho vai ser adicionado.

Ao abrir o editor de imagens, selecione a imagem "fg.png". Em seguida aplique a

ferramenta Crop. Feche o editor de imagens clicando no "X".

Veja que a imagem se repetiu, graas ao objeto Tiled background que ns utilizamos

para inserir a imagem. Para redimension-la, ainda com o objeto cho selecionado, v

ao painel properties e altere o campo Name para "ground". No campo position coloque o

valor "0, 240" e no campo size (largura e altura da imagem) insira "1200, 60" (pixels).

Por ltimo vamos adicionar o comportamento de slido. Clique sobre o objeto que

criamos para o cho (Ground), v at o painel properties e altere o campo Behaviors.

Para isso, clique em Add / edit. Na prxima janela clique no "sinal de mais", conforme

a Figura 5.

10
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 5 Adicionando comportamentos aos objetos.

Em seguida, selecione o comportamento Solid (slido) e aperte Add. Por fim feche a

janelaBehaviors.

Seu layout deve estar semelhante ao da Figura 6.

11
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 6 Layout do jogo.

Criando o player

Vamos ento comear inserindo a imagem do player. Mas antes de inserir, certifique-se

de que a camada foreground est selecionada, s ento prossiga.

Em seguida, clique com o boto direito do mouse sobre o layout do jogo, em seguida

selecione Insert new object, conforme a Figura 7.

Figura 7 Inserindo um novo objeto.

Ao abrir a janela Insert New Object, escolha a opo Sprite. Esta opo, diferente da

opo Tiled background, no repete a imagem. Ao invs disto ela distorce e

redimensiona a imagem.

12
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Aps selecionar a opo Sprite, escolha o local onde a imagem ser inserida no layout.

No editor de imagens clique em Load an image from a file e escolha a imagem

"player03.png". Aplique a ferramenta Crop.

Para posicionar e redimensionar o player, clique sobre o player e v at o

painel properties. Altere o campo Name para "player", o campo Position para "30, 45"

(pixels), e o campo Size para "26, 41" (pixels).

Vamos adicionar algumas animaes ao player. Comece dando um clique duplo sobre

ele. O editor de imagem se abre.

Repare que h uma janela chamada Animation frames e outra janela

chamada Animations. Estas duas janelas vo nos auxiliar a criar animaes com

imagens.

Para comear vamos adicionar uma nova animao no painel Animations. Para isso,

clique com o boto direito do mouse sobre essa janela e em seguida selecione Add

animation, e por fim renomeie para "Correndo".

Faa o mesmo processo para criar mais uma animao com o nome de "Caindo".

Com a animao "Correndo" selecionada, clique com o boto direito do mouse dentro

da janela Animation Frame e escolha a opo "Import sprite strip...". Em seguida

escolha a imagem "player01.png". A Figura 8 mostra a janela que surgiu e veja que ela

pede o nmero de clulas horizontais e o nmero de clulas verticais.

13
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 8 Dividindo uma imagem.

O programa apenas est pedindo para voc informar a quantidade de clulas

horizontais e verticais que a imagem vai ser dividida. Veja tambm que o prprio

programa tenta informar a quantidade de clulas. Na Figura 9 voc entende como

funciona a lgica do programa.

Figura 9 Como o programa divide a imagem em frames.

No nosso caso, preencha nessa janela o valor "4" no campo Number of horizontal cell, e

"1" no campo Number of vertical cells. Por fim d OK.

14
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Na Figura 10 voc confere a diviso dos frames.

Figura 10 Imagem dividida em frames.

Exclua o primeiro frame, pois como ele est em branco. Para excluir clique com o boto

direito do mouse sobre ele e em seguida selecione Delete.

Vamos rodar a animao para ver como ela ficou. Clique com o boto direito do mouse

sobre a animao "Correndo" no painel Animations, em seguida selecione Preview.

Veja que a animao parou, ao invs de dar um loop, perceba tambm que os frames

no esto bem alinhados. Vamos corrigir isto nas linhas abaixo!

Para a animao dar um loop, basta selecion-la (no nosso caso as animaes

"Correndo" e "Caindo") no painel Animations. No painel properties alterar o

campo Loop para "Yes". Veja que h outras propriedades tambm

como Speed (velocidade) e Ping-pong (quando a animao chega ao fim, ao invs da

animao recomear, ela retrocede como se os frames invertessem a ordem). Altere o

campo Loop para "Yes" e o campo Speed para "8".

15
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Para finalizar, vamos alinhar os Image points de todos os frames. O Image point nada

mais do que o ponto central da imagem. Com a animao "Correndo" selecionada, v

at o primeiro frame da animao e selecione-o. No editor de imagens existe um boto

chamado Set origin and image points, conforme a Figura 11.

Figura 11 Identificando o boto Set origin and image points.

Clique sobre o boto Set origin and image points no editor de imagens. Repare que

surgir uma nova janela chamada Image points. Se voc passar com o cursor do mouse

sobre a imagem no editor de imagens, ver que o mesmo foi alterado. Isto aconteceu

porque o programa est pedindo para voc apontar onde o Image point deve ficar.

Agora clique na parte inferior central da imagem, como mostrado na Figura 12.

16
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 12 Posicionando o Image points.

Posicione o Image point de cada frame no mesmo local do exemplo acima.

Divida a imagem "player02.png" em frames para a animao "Caindo", seguindo os

mesmos princpios da animao "Correndo". No se esquea de posicionar os image

points e de aplicar a ferramenta Crop em todos os frames da animao.

Vamos adicionar dois comportamentos ao player, seguindo os mesmos princpios

utilizados para adicionar o comportamento slido (Solid) ao cho (objeto Ground). Para

isso, selecione o objeto player e clique em Add / edit no campo Behaviors do

painel properties. Aperte o boto "+" para adicionar um novo comportamento. Na janela

que se abriu adicione o comportamento Platform. Repita o processo e adicione o

comportamento Scroll To.

17
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Os passos descritos at aqui sero utilizados para adicionar a imagem dos inimigos e

tambm dos itens.

Teste seu jogo clicando no boto Run layout. Perceba que o player j est se

movimentando pela fase, porm ainda est esttico.

Inserindo todas as imagens e animaes.

Neste ndice voc vai utilizar o conhecimento adquirido no ndice "Criando o player" para

adicionar todas as outras animaes. Na Tabela 1 voc encontra o nome das imagens

que voc deve animar e as propriedades que voc deve alterar.

Antes de dar inicio a animao das imagens, certifique-se de que a camada

"foreground" est selecionada.

Mos a obra!

Tabela 1- Demais animaes a configurar.

18
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Adicionando comportamentos.

Aps ter adicionado os objetos (itens e inimigos), vamos adicionar comportamento aos

inimigos. Para isto, clique sobre o objeto "inimigo01", v at o painel properties e no

campo Behaviors, clique em Add / Edit. Clique no "+" para adicionar um novo

comportamento. Por fim escolha o comportamento Sine. Feche a janela Behaviors.

Note que no campo Behaviors do painel properties h um comportamento adicionado

chamado Sine, e logo abaixo voc encontra suas propriedades, conforme a Figura 13.

19
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 13 Comportamento Sine e suas propriedades.

No sero explicadas todas as propriedades, mas veremos como visualizar a descrio

de cada uma. Basta clicar sobre a propriedade desejada do comportamento e olhar logo

abaixo no painel properties, desta forma voc vai conseguir visualizar uma pequena

descrio da propriedade, conforme a Figura 14.

Figura 14 Visualizando a descrio da propriedade.

Vamos alterar apenas as propriedades Period e Magnitude. Insira os valores abaixo:

20
Jogos em HTML5: Criando um jogo passo a passo com Construct2

-Period = 18;

-Magnitude = 200;

Adicione o comportamento Sine para os outros dois inimigos ("inimigo02" e "inimigo03"),

insira os valores nas propriedades de cada inimigo, de acordo com Tabela 2.

Tabela 2 Configurao dos inimigos.

Seu layout deve estar semelhante ao da Figura 15.

21
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 15 Layout do jogo.

Inserindo eventos

Vamos agora inserir o mecanismo do jogo events. Para isso preciso que voc abra a

aba "Event sheet 1".

Note que quando executamos o jogo, o personagem ainda no executa as animaes

que nos inserimos anteriormente ("Correndo" e "Caindo"). Para que essas animaes

entrem em funcionamento basta inserir alguns eventos.

Vamos mostrar o passo a passo de um dos eventos. Os demais sero inseridos sem

ajuda.

Para comear a inserir o evento, clique em Add event, conforme a Figura 16.

22
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 16 Adicionando eventos.

Voc vai escolher o objeto em questo e na sequncia escolher a ocorrncia que deve

acontecer.

Para que o player utilize a animao "Caindo" quando ele estiver caindo, vamos dizer o

seguinte para o programa: Se o objeto "player" estiver caindo... Ento execute a

animao "Caindo, conforme a Figura 17.

Figura 17 Exemplificando a sintaxe dos eventos no Construt 2.

Depois de selecionar o objeto "player", clique em Next. Em Platform: Animation

triggers selecione On fall e aperte Done.

23
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Pronto! Adicionamos o evento, mas est faltando a ao. A ao nada mais do que os

parmetros que devem ser seguidos se a ocorrncia for verdadeira. Veja como adicionar

uma ao na Figura 18.

Figura 18 Adicionando aes.

Ao clicar sobre Add action escolha o objeto "player". Em seguida, escolha Set

animation e d Next. Na janela que se abrir, no campo Animation, digite entre aspas

("") o nome da animao que ser executada (neste caso, "Caindo"), e no

campo From deixe o valor Beginning. Para finalizar clique em Done. Observe a Figura

19.

Figura 19 Escolhendo uma animao.

Utilizando as setas do teclado para interagir com o

player.

24
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Agora vamos fazer com que o player vire conforme ele movimentado para a direita e

para a esquerda. Para isso precisamos adicionar o objeto teclado ao jogo. V a guia do

layout do jogo, clique com o boto direito do mouse, e em seguida selecione Insert new

object. Em Input escolha Keyboard, e clique em Insert. Com o teclado adicionado volte

para a guia "Event sheet".

Vamos dizer o seguinte para o programa: Se a tecla "seta para a direita" for

pressionada... Ento a imagem do objeto "player" deve ficar espelhada.

Para mostrar isso ao Construct2, clique em Add event e d um duplo clique sobre o

objeto "Keyboard". Selecione On key pressed e aperte Next. Aparecer a mesma tela

da Figura 20.

Figura 20 Janela On key pressed.

Ao clicar em <click to choose>, abrir uma janela conforme a Figura 21.

25
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 21 Janela Choose a key.

Est janela est pedindo para voc apertar a tecla em questo para o evento. No nosso

caso a tecla "seta para a direita". Aps aperta a tecla, note que o valor do

campo Press a key ser alterado, conforme a Figura 22.

Figura 22 Janela Choose a key com o valor do campo Press a key alterado.

D "OK" na janela Choose a key e Done na janela On key pressed.

Vamos adicionar agora a ao que ir acontecer caso est ocorrncia seja verdadeira.

Para isto, clique em Add action e d um clique duplo sobre o objeto "player".

Em Appearance selecione a opo Set mirrored para que a imagem que forma o objeto

26
Jogos em HTML5: Criando um jogo passo a passo com Construct2

seja espelhada, ou seja, inverte a imagem original. Na janela que se abre, no

campo State selecione Mirrored (espelhado). E aperte Done.

Agora faa a situao reversa. Para o evento contrrio vamos dizer o seguinte:

-Se a tecla "seta para a esquerda" for pressionado... Ento a imagem do objeto "player"

ficar no espelhada.

Inserindo uma condio contrria "else".

Para adicionar uma condio contrria (else) vamos usar a animao "Correndo.

Primeiramente vamos dizer ao programa: Se o objeto "player" estiver parado... Ento a

animao "Default" ser executada; Caso contrrio (else)... A animao "Correndo"

ser executada;

Para dizer isso ao programa, clique em Add event, d um duplo clique sobre o objeto

"player" e selecione Compare speed -> Next. Ser aberta uma janela com dois campos:

o primeiro Comparison pede para escolher a comparao que deseja fazer, e o segundo

campo Speed pede o valor que deseja comparar com a velocidade do objeto "player".

Segue abaixo como os dois campos devem ser preenchidos:

Comparison = "= Equal to"

Speed = "0"

Aps preencher aperte Done.

Para adicionar a ao clique em Add action, d um duplo clique sobre o objeto "player" e

escolha a opo Set animation. Abrir uma janela com dois campos: no

27
Jogos em HTML5: Criando um jogo passo a passo com Construct2

campo Animation insira o nome da animao que iremos utilizar entre aspas ("Default"),

e no campo From vamos inserir "Beginning". Aperte Done.

A animao "Default" contm a imagem do personagem parado. Basta clicar duas vezes

sobre o objeto "player" para ver as animaes contidas nele.

Agora temos que inserir a condio contrria (else). Veja na Figura 23 como inserir.

Figura 23 Inserindo a condio contrria (else).

Ateno! Clique com o boto direito do mouse sobre o local destacado na imagem

acima, para abrir as opes corretas.

O resultado vai ser igual ao da Figura 24.

28
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 24 "else" adicionado.

Agora clique em Add action e selecione o objeto "player". Depois clique duas vezes

sobre Set Animation e escolha a animao "Correndo".

O resultado deve ser igual ao da Figura 25.

Figura 25 Adicionando uma ao ao "else".

Inserindo uma varivel.

Vamos agora inserir um campo de texto que marcar a pontuao do personagem. Para

isso, crie uma nova camada chamada "pontuao". No painel properties altere o

campo Parallax para "0, 0".

29
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Com a camada "pontuao" selecionada, clique com o boto direito do mouse sobre o

layout do jogo e selecione a opo Insert new object. Em seguida, clique duas vezes

sobre o objeto Text e escolha o local onde adicion-lo.

Selecione o objeto de texto que acabamos de criar e ento v at o painel properties e

d o nome de "pontos" no campo Name. E no campo Text insira o valor "0" (zero).

Abaixo do campo Text voc encontrar campos para alterar o tamanho, estilo, fonte, e

cor do texto- altere como desejar. Altere o campo Positon para "430, 10" e o

campo Size para "160, 35".

Ainda no painel properties, note que h um campo chamado Intance variables. neste

campo que tem tambm um boto chamado Add / edit. Ao clicar nele ser aberta a

janela da Figura 26.

Figura 26 Janela para instanciar variveis.

Esta janela tem a funo de instanciar variveis para o sistema.

Para criar uma varivel clique no "+", como na Figura 27.

30
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 27 Instanciando variveis.

Surgir a seguinte janela da Figura 28.

Figura 28 Janela New instance variable.

No campo Name d o nome de "pontos" para a varivel. O campo Type pede o tipo da

varivel (lgico, nmero ou texto), deixe a opo Number selecionada. O campo Inital

value solicita um valor inicial para a varivel, no nosso caso "0" (zero).

Em Description solicitado uma pequena descrio da varivel (no obrigatrio), em

nosso caso no iremos inserir nada.

31
Jogos em HTML5: Criando um jogo passo a passo com Construct2

O resultado deve ficar igual ao da Figura 29.

Figura 29 Janela New instance variable, com seus campos preenchidos.

D "OK" e feche a janela Intance variables.

Vamos inserir um evento para alterar o valor desta varivel quando pegarmos um objeto

ou matarmos um inimigo. Para isso, v at a guia Event sheet.

Vamos dizer ao programa o seguinte: Se o objeto "player" se colidir com o objeto

"item01"... Ento a varivel "pontos" ser incrementada em mais 100.

Passaremos isto para o programa da seguinte forma: clique em Add event e escolha o

objeto "player". Em seguida, clique duas vezes sobre On collision with another object,

conforme a Figura 30.

32
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 30 Escolhendo a opo On collison with another object.

Surgir uma janela com um campo chamado object. Clique em "<click to choose>" e

aparecer uma tela conforme a Figura 31.

Figura 31 Escolhendo um objeto.

33
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Escolha o objeto "item01" e d Done. Vamos ento adicionar uma ao para esta

condio, clicando em Add action. Escolha o objeto de texto que demos o nome de

"pontos" e clique em Add to. Aparecer uma tela conforme a Figura 32.

Figura 32 Escolhendo Add to.

Est opo Add to tem o objetivo de acrescentar um valor a determinada varivel.

No campo Intance variable deixe selecionada a varivel "pontos" que instanciamos e em

value insira "100". Esta ser a quantidade de pontos que o player ganhar quando se

colidir com o item. Por fim pressione Done.

34
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Mas temos que fazer este valor aparecer na caixa de texto que inserimos no layout do

jogo, e para concluir o item dever sumir quando o player se colidir com ele. Para

resolver isso, clique novamente em Add action, conforme a Figura 33.

Figura 33 Adicionando uma nova ao.

Escolha o campo de texto com o nome de "pontos" de novo. E em seguida d um duplo

click sobreSet text, conforme a Figura 34.

35
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 34 Selecionando a opo Set text.

Est opo tem como objetivo inserir um texto no campo de texto. Vamos inserir a

varivel "pontos", conforme a Figura 35. Apague todo o contedo do campo Text. E

insira o seguinte: "pontos.pontos".

Figura 35 Como escrever o valor da varivel no campo de texto.

36
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Iremos por ltimo destruir o objeto que se colidiu com o player. Para isso, clique em Add

action para adicionar uma nova ao. Em seguida selecione o objeto "item01"e d um

duplo clique em Destroy. Observe a Figura 36.

Figura 36 Opo Destroy, para destruir o objeto.

Faa o mesmo com o objeto "item02".

Ok! Agora o personagem conseguir adquirir pontos tambm. D um Run layout em seu

jogo e veja o efeito no navegador.

Fazendo o player interagir com os inimigos.

37
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Neste jogo o player s vai conseguir matar o inimigo se ele for atingido por cima. Caso o

player atinja o inimigo por baixo ou pelos lados, o player morrer.

Antes de comearmos a inserir os eventos, peo que voc adicione mais um objeto de

texto com as seguintes propriedades presentes na Figura 37.

Figura 37 Propriedades do objeto de texto "vidas".

Repare que existe uma varivel instanciada chamada "vidas", do tipo Number e com o

valor inicial de 5, conforme a Figura 38.

38
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 38 Propriedades da varivel "vidas".

Aps criar o objeto abra a guia Event sheet.

Vamos dizer o seguinte para o programa: Se o objeto "player" se colidir com o objeto

"inimigo01". Ese o objeto "inimigo01" estiver abaixo do objeto "player"... Ento destrua o

objeto "inimigo01"; Caso contrrio (else)... Decremente 1 da varivel "vidas".

Passando isto para o programa, clique em Add event e selecione o objeto "player".

Selecione novamente a opo On collision with another object. Na janela que se abrir

selecione o objeto "inimigo01".

Agora vamos criar um sub-event. O sub-event simplesmente um evento dentro de

outro evento, ou seja, uma condio dentro de outra condio. Para isto, clique com o

boto direito do mouse (no local indicado na Figura 39) sobre a condio que criamos

anteriormente. Em seguida posicione o mouse sobre Add, e por ltimo clique na

opo Add sub-event.

39
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 39 Criando um sub-event.

Na janela que se abrir selecione o player novamente e d um duplo clique

em Compare Y, conforme a Figura 40.

40
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 40 Escolhendo o objeto Compare Y.

Depois de selecionar a opo Compare Y, a janela da Figura 41 se abrir. Adicione os

mesmos valores.

Figura 41 Entendendo os campos e os valores da janela Compare Y.

41
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Dizemos o seguinte para o programa: Se o objeto "inimigo01" estiver abaixo do objeto

"player"... Veja que no terminamos de explicar tudo para o programa. Note que est

faltando explicar as aes. Para adicionar, clique em Add action, conforme a Figura 42.

Figura 42 Adicionando novas aes.

Aps selecionar o objeto "inimigo01" (o objeto que vai ser destrudo se a condio for

verdadeira), d um duplo clique sobre a opo Destroy, conforme a Figura 43.

42
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 43 Destruindo o objeto "inimigo01".

Vamos adicionar a condio contrria (else), seguindo os passos a seguir.

Clique com o boto direito do mouse no local indicado na Figura 44.

43
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 44 Inserindo o else.

Depois de ter adicionado o else, clique em Add action, logo a frente do else. Selecione o

campo de texto que criamos chamado "vidas". Em Instance variables selecione a

opo Substract from, conforme a Figura 45.

44
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 45 Selecionando a opo Substract from.

Na janela que se abrir, em Instance variable, selecione a varivel que criamos

chamada "vidas". No campo Value digite "1" (1 a quantidade de vidas que o player

perder se ele encostar por baixo ou pelos lados no objeto). Por fim pressione Done.

Vamos fazer o valor ser escrito na tela do jogador, clicando novamente em Add action,

aps selecione o campo de texto "vidas". Em seguida d um duplo clique em Set text,

conforme a Figura 46.

45
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 46 Selecionando a opo Set text.

Esta etapa semelhante ao que fizemos para a varivel "pontos" no campo de texto

"pontos". Ento na janela que se abrir (Figura 47) insira o seguinte valor:

Figura 47 Apontando a varivel "vidas" para o campo Text da janela Set text.

Para finalizar pressione Done.

46
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Faa o mesmo com os outros dois inimigos ("inimigo02" e "inimigo03").

Nota: se voc quiser repetir os objetos do jogo (itens, inimigos e at mesmo o cho),

basta selecionar o objeto no layout do jogo, copiar e colar o objeto no local desejado.

Criando efeito para a camada background

Se voc rodar o jogo no navegador, poder notar que o background do jogo se

movimenta junto com o foreground, como se os dois estivessem muito perto um do

outro. Mas no este o efeito que ns queremos. Para fazer com que o background se

mova mais lentamente em relao ao foreground, siga os passos abaixo:

1- Clique sobre a camada "background", v at o painel properties e perceba que h um

campo chamado Parallax. este campo que devemos modificar. Note que esse campo

tem um valor padro de "100, 100". Este valor a taxa de movimentao (em

porcentagem) da camada em relao ao player. Como ns queremos que o background

se movimente mais lentamente em relao ao player, ento colocamos "10, 10" no valor

do campo, ou seja, "10% de movimentao no eixo X, 10% de movimentao no eixo

Y".

Teste seu jogo no navegador e veja como o background parece estar distante do

foreground, conforme a Figura 48.

47
Jogos em HTML5: Criando um jogo passo a passo com Construct2

Figura 48 Visualizando o jogo no navegador.

Pronto! Com este mini tutorial tenho certeza de que voc j conseguir desenvolver algo

bem interessante no Contruct 2. Tudo o que voc precisa de criatividade.

No prprio site da Scirra voc encontra tutoriais que so produzidos por usurios do site.

Acesse este link https://www.scirra.com/tutorials/all para acessar a lista de tutoriais.

No site da Scirra voc tambm encontra jogos criados por usurios do site, produzidos

com o Construct 2. Acesse o link http://www.scirra.com/arcade para jogar alguns deles.

Espero ter ajudado. At o prximo artigo.

48