Tutorial desenvolvendo games com Stencyl

Embed Size (px)

DESCRIPTION

Tutorial desenvolvendo games com Stencyl

Citation preview

  • 1

    Crash Course 2: Invaders - Parte 1

    Bem-vindo ao Stencyl Crash Course 2. O primeiro Crash Course o ajudou a

    aprender o bsico, e dando prosseguimento essa lio dar uma breve introduo ao

    Modo Designer do Stencyl e mostraremos como construir um jogo simples.

    O game que voc ir construir uma verso simplificada do game clssico

    Space Invaders, onde o jogador controla uma nave espacial e atira em inimigos que

    esto flutuando no topo da tela.

    Criando um novo Game.

    Passo 1: clique no retngulo pontilhado que diz Cl ick here to create a new

    Game.

    Passo 2: Selecione a opo Blank Game da lista de k its disponveis e clique

    em Next.

    Voc vai ter uma caixa de dilogo que permite que voc nomeie o seu jogo e definir a

    Largura e Altura da tela do jogo

  • 2

    Nomeie seu game como Invaders e defina a largura com 640 pixels e a altura

    com 480 pixels.

    Em seguida iniciaremos a importao dos assets.

    Criando tipos Atores

    Agora que temos um jogo em branco, hora de criar os nossos tipos de atores.

    Vamos comear com a nossa nave espacial, que o joga dor ir controlar. Clique no

    boto Actor Type no menu do painel esquerda

    Em seguida, clique na caixa grande no lado direito para criar o seu primeiro tipo

    de ator

  • 3

    Voc ver a caixa de dilogo mostrada abaixo

    Agora que ns temos um tipo de ator precisamos impo rtar imagens para

    animao, os grficos para o nosso tipo de ator que veremos na tela. Clique no

    quadrado pontilhado grande a direita da tela.

    Se o fizer trar o editor de animao, onde voc pode importar grficos em

    uma base para animaes.

    A caixa de dilogo mostrada na figura abaixo ir aparecer. Clique em Choose

    Image e selecione a imagem para sua animao, para isso localize a pasta que

    armazenou as imagens do projeto.

  • 4

    A imagem que ser usada tem quatro quadros (frames) que quando tocadas

    em ordem vo fazer a animao de voo. Uma vez que v oc tenha selecionado a

    imagem mude o valor no campo Columns para 4. Isto ir dividir a nossa imagem

    uniformemente em quatro quadros, como mostrado abaixo

    Agora que temos sua animao nica, precisamos escolher a configurao

    correta da fsica do ator nave. Clique em Physics como mostrado na figura abaixo:

    A primeira pagina que ir aparecer as configuraes gerais sobre a fsica do

    objeto

  • 5

    Em What kind of Actor Type? selecione a opo norma l.

    Em Can Rotate? selecione a opo No.

    Em Affected by Gravity? selecione a opo No.

    Agora precisamos configurar o Grupo de coliso que o nosso tipo de ator

    pertence. Isto ir determinar com o que a nossa nave pode colidir e o que no pode.

    Clique no boto Properties como mostrado abaixo

    Configure o Group para Players como mostrado. Se voc precisar criar mais

    grupos, clique no boto Edit Groups a direita de Gr oup

  • 6

    Salve seu ator nave e seu game clicando em file e depois em save game.

    ou use o atalho Ctrl+S

    Ns temos o nosso ator nave configurado agora, hora de seguir em frente

    para determinar como nossa nave e outros tipos atores que vamos criar, podem colidir

    um com os outros.

    Colises de atores

    Temos um tipo de ator at agora, mas antes de continuarmos, precisamos

    organizar nossos Tipos de Atores no que so chamado s Grupos de coliso.

    O Grupo coliso que um ator pertence, determina com quais outros atores que

    podem (ou no podem) colidir. Para comear clique n o boto Settings na parte

    superior da interface do Stencyl.

    A nova caixa de dilogo pop-up que mostra os grupos em seu jogo. (Note na

    imagem que j criou os inimigos(Enemies) e balas (Bullets) como grupos - vamos

    mostrar como criar um grupo nas etapas seguintes).

  • 7

    Clique no boto verde Create New na parte superior da janela Game Setting

    Quando a caixa de dialogo aparece no campo Name digite Enemies e clique no

    boto Create.

    Em seguida clique no boto verde Create New e crie outro grupo chamado

    Bullets.

    Agora precisamos definir o que pode colidir com o que. Clique o boto Enemies

    no grupo Bullets, como mostrado abaixo. Deixe todos os outros botes cinza. Isto

    significa qualquer tipo de Ator que pertencem ao Grupo Bullets s ser capaz de colidir

    com tipos de Ator no Grupo Inimigos

  • 8

    Agora que temos nossos grupos de coliso criados no ssos Bullets iro colidir

    somente com algum ator que pertena ao grupo Enemie s. E hora de criar dois novos

    tipos de atores: o Bullets e Enemy Ship

    Criando novos tipos de Atores e importando um Background

    Agora que temos nosso novo Grupo de Coliso, precis amos criar nosso tipo de

    ator Enemy Ship. Utilize os mesmos passos que usou para criar o ator tipo Nave para

    criar o ator tipo Enemy Ship.

    Aqui est uma breve recapitulao dos passos envolvidos:

    1. Clique na aba Dashboard

    2. Clique em Actor Types

    3. Clique no retngulo quadriculado para criar novo Tipo de Ator

    4. Em Name coloque Enemy Ship

    5. Clique no retngulo quadriculado para adicionar uma animao

    selecionando o grfico Alien Grabber.png

    6. Em Properties no campo Name coloque Normal.

  • 9

    Ns criamos nosso tipo de ator Enemy Ship e acresce ntamos animao,

    precisamos configurar o item Physics

    Para isso clique no boto Physics como mostrado aba ixo:

    Na opo What kind of Actor Type? selecione: Cannot be pushed (ns no

    queremos que nossa nave inimiga v para fora da tela quando colide com uma bala

    Verificar )

    Em Can Rotate? selecione: No

    J Affected by Gravity? ser desativado quando escolhemos a opo Cannot

    be pushed.

    Escolha seu Grupo Coliso clicando na guia Properti es e definindo seu Grupo

    para Enemies, como mostrado abaixo.

  • 10

    Em seguida o tipo de ator Bullet seguindo os mesmo passos utilizados para

    criar o Enemy Ship. Quando importar o grfico para a animao configure o valor de

    Columns para 3 como mostrado

    Use as mesmas configurao de Physics utilizadas em Nave e Enemy Ship

    para o Bullet

    Na opo What kind of Actor Type? selecione: Cannot be pushed

    Em Can Rotate? selecione: No

    J Affected by Gravity? ser desativado quando escolhemos a opo Cannot

    be pushed.

    Com nossos tipos de atores criados, precisamos importar a imagem de

    Background que ser usada no cenrio que criaremos mais tarde. Clique na aba

    Dashboard e depois em Backgrounds

  • 11

    Clique no retngulo quadriculado no centro da Stenc yl

    Na caixa de dilogo que ser mostrada no campo Name digite Stars e clique no

    boto Create.

    Clique no retngulo de linha pontilhada esquerda, ento em Choose Image

    selecione a imagem Space Background.png que esta na pasta do tutorial.

  • 12

    Importando sons

    Agora hora de importar nossas msicas e arquivos de sons. Desta vez vamos

    mostrar a voc um caminho diferente para importar assets, atravs de arrastar e soltar

    os arquivos. Primeiro clique na aba Dashboard e selecione a opo Sounds

    Com os arquivos de som em seu desktop (General Space Shooter Spacey

    Level.png and Explosion.png), selecione um dos arquivos e arraste sobre o retngulo

    pontilhado mostrado na figura abaixo:

    Note que os arquivos. Png com os nomes mencionados acima na pasta de

    assets zipada realmente contm os dados de som, e quando voc arrasta a imagem

    sobre a caixa mostrada na figura acima, acontecer o upload do som em seu game.

    Se isso no funcionar voc pode tambm baixar os sons do StencylForge. Eles tm os

    mesmos nomes na StencylForge.

  • 13

    Agora temos dois sons. Certifique-se de cada som est definido para o tipo

    correto, como mostrado (msica deve ser definida como msica, efeitos sonoros

    definidos para Sound Effect).

    Com todos os nossos assets no lugar, hora de configurar a cena que

    funcionar como nosso nvel principal.

  • 14

    Criando uma cena

    Clique na aba Dashboard e selecione a opo Scenes e clique no retngulo

    quadriculado para criar uma nova cena.

    Depois que voc pressionar o boto ser mostrado uma caixa de dilogo que

    permitira definir alguns parmetros bsicos para sua cena. Note que voc pode

    escolher o tamanho da sua cena usando pixel ou tiles (tanto na largura como na altura

    como mostra a figura abaixo). Neste caso estamos usando Tiles e vai usar os valores

    padro, como mostrado.

  • 15

    Aqui est a nossa cena.

    Para manter as coisas simples, vamos apenas adicionar a imagem de fundo

    que importamos anteriormente, em vez de adicionar qualquer Tiles. Clique na guia

    Background para escolher um.

    Agora clique no cone + a esquerda como mostrado abaixo

  • 16

    Selecione a imagem de fundo disponvel na caixa de dilogo que aparece, e

    pressione o boto OK.

  • 17

    Clique o boto Scene na barra superior do Stencyl p ressione o boto mostrar

    background no canto superior direito do editor, como mostrado. Voc ver a imagem

    de fundo aparecer no editor.

    Nota: Se o background no for mostrado quando voc clicar o boto tente

    salvar o game

    Ns temos a nossa Cena, ento vamos test-lo. Pressione o boto verde

    Testar cena e voc deve ver sua cena aparecem em um navegador.

    Boto mostrar background

  • 18

    Se a cena for exibida, tudo est funcionando, e voc pode seguir em frente. Se

    no, voc pode obter ajuda clicando no boto Need Help em seguida, escolher

    uma opo na caixa de dilogo que aparece.

  • 19

    Clique na aba Actors no editor de cenas na Paleta direita. Voc ver os trs

    tipos Atores que criou anteriormente.

    Agora ns queremos colocar atores individuais na ce na. Voc deve usar a ferramenta

    Pencil ( esquerda, como mostrado) para colocar Ato res.

    Com a nave selecionada, mova o cursor para o fundo da cena e clique esquerdo do

    mouse. A nave ir aparecer. Voc s quer uma nave para o jogador controlar.

  • 20

    Dica: Para colocar atores em intervalos regulares, mantenha pressionada a tecla Shift,

    que ir alinhar um ator com a grade de Tile. Voc pode fazer a grade aparecer

    pressionando o boto Show Grid.

    Em seguida, selecione a nave inimiga e coloque algumas na cena, como mostrado.

    Usamos a tecla Shift para espao de modo uniforme.

  • 21

    Dica: Se qualquer um dos seus atores no aparecerem na tela, mesmo o que voc

    colocou na cena, verifique as definies da janela do jogo (do visor). A sua largura

    deve ser de 640 e altura deve ser 480. Clique em Settings

    E modifique as medidas do parmetro screen size e c lique no boto ok

  • 22

    Se voc colocar um ator fora dos limites da janela de visualizao, voc no vai ver os

    atores que voc colocou em sua cena. Alm disso, observe que voc pode fazer uma

    cena que maior do que o visor do jogo.

    Agora, temos uma cena bsica completa. Verifique se est tudo certo utilizando o

    boto Test Game

  • 23

    Voc dever ver sua nave na base da cena e os cinco naves inimigas flutuando perto

    do topo.

    Temos nossos atores e cenas configurados, ento ago ra hora de comear a

    aprender a usar o Modo Design Stencyl. Para comear , vamos adicionar msica de

    fundo para a nossa cena.

    Adicionando uma musica de fundo para a cena

    Precisamos adicionar msica de fundo. Selecione a aba Nvel Um e clique no boto

    Events na parte superior do Stencyl

  • 24

    Isso abrira o modo estrutura do Stencyl onde podemos programar a lgica do game.

    Neste caso criaremos um evento diretamente ao invs de criar um comportamento

    modular.

    Nota Importante: Geralmente, voc quer criar comportamentos, porque voc pode

    adicion-los a qualquer tipo de ator ou cenas que voc deseja. Comportamentos so

    feitos de eventos, por isso pense um comportamento como um recipiente de eventos

    porttil. Estamos adicionando eventos diretamente aqui, porque no reutilizaremos

    qualquer coisa que estamos fazendo aqui - o evento movimento para o nossa nave

    no se aplicam aos Atores nave inimiga, por exemplo .

  • 25

    Clique no boto + Add Event no painel Events no lad o esquerdo da tela mova o mouse

    sobre Basics option e depois clique sobre When Creating.

    O seguinte elemento deve aparecer:

  • 26

    Na paleta Design Mode que esta localizada no lado direito da tela clique no boto

    sound

    Em seguida selecione o bloco Play Sound e o arraste para a rea central da

    interface prximo do elemento criado anteriormente quando a barra banca aparece

    este componente se encaixara automaticamente

    Clique em sound para exibir a caixa de dilogo que ira permitir que selecione o som

    que deseja

  • 27

    Clique na opo Choose Sound e selecione a msica que importou anteriormente.

    O bloco vai mudar para mostrar a msica que vai tocar.

    Salve seu game (pressione Ctrl + S) em seguida clique no boto verde Test Scene. Se

    tudo estiver certo a musica ser executada de fundo.

    Fazendo a nave mover

    Clique na aba Dashboard depois em Actor Types e de dois cliques no ator nave

  • 28

    Agora que estamos na rea de edio da nave clique no boto Events que se encontra

    na parte superior da interface

    Esta ao abrir o modo design. Vamos criar um evento que nos permitir mover

    nosso Ator nave na cena da esquerda para a direita, pressionando as teclas do

    teclado. Para fazer isso, preciso especificar o que acontece quando o jogador

    pressiona determinadas teclas do teclado e o que acontece quando o jogador no est

    pressionando nada.

    Para comear clique no boto + Add Event no painel Events no lado esquerdo da

    interface selecione Basics e depois escolha When Updating

  • 29

    O bloco seguinte aparecer na rea de trabalho:

    Desta vez, em vez de arrastar um bloco da Paleta, vamos usar o seletor de bloco.

    Clique com boto direito do mouse em qualquer lugar na rea de trabalho, clique na

    opo Place a Block Flow Conditions if

    Esse bloco ser exibido na rea de trabalho.

    Encaixe o bloco if no bloco Always

    Clique no smbolo dentro do bloco if

  • 30

  • 31

    Clique em Input e depois na forma hexagonal que ser exibida na diviso keyboard

    (esta forma sempre para um booleano, ou seja, um valor que pode ser verdadeira ou

    falsa, em Stencyl).

    O bloco control aparecer dentro do bloco if como mostrado abaixo

    O bloco Always checa o que est acontecendo a cada quadro, enquanto o jogo

    est sendo executado. O bloco if de dentro checa (usando um teste booleano) se algo

    est acontecendo e o bloco Control is down testa se uma tecla foi pressionada. Agora

    precisamos selecionar qual tecla ser checada. Clique no retngulo Control e

    selecione a opo Choose Control.

  • 32

    A caixa de dilogo abaixo ser mostrada

    Selecione a opo right. Novamente, o bloco ser alterado para refletir esta escolha.

    Em seguida selecione o actor categoria e selecione o bloco Set X Speed to [0]

    Este bloco ir controlar a velocidade do movimento horizontal do ator nave

  • 33

    Agora precisamos criar um atributo que podemos usar para ajustar o valor de x-speed.

    Ao fazer isso, no ser necessrio alterar o valor da velocidade diretamente no bloco

    em nosso evento cada vez que desejarmos faz-lo. Clique no boto Attributes na

    Paleta, em seguida, clique no boto Create an Attri bute.

    Na caixa de dilogo mostrada, selecione Number para o tipo de atributo, e em name

    coloque VelocidadeNave, e clique no boto OK.

    Agora voc tem um bloco azul para o atributo VelocidadeNave que pode ser ajustado

    para valores diferentes. Ns vamos mostrar-lhe como definir o seu valor quando

    completarmos este evento.

  • 34

    Clique no campo X do bloco set x-speed to selecione Attributes no menu pop-

    up e escolha o atributo que acabamos de criar

    O bloco ir aparecer no campo como esperado.

    Em seguida selecione Flow Conditional e arraste o bloco otherwise if para a

    rea de programao.

  • 35

  • 36

    Encaixe o bloco embaixo do bloco if dentro do bloco Always como mostrado abaixo

    Agora precisamos configurar o que acontece quando o usurio pressiona a

    seta esquerda. Pegue um outro bloco de controle, defina-o para a esquerda e adicione

    um bloco negate selecionando Numbers & Text Math para o campo onde

    VelocidadeNave iria, em seguida, adicione VelocidadeNave dentro do bloco negate.

  • 37

    Ao aplicar o negate em VelocidadeNave, a nave vai se mover na direo x

    negativo, o que significa para a esquerda.

    Agora sua nave pode se mover, mas no vai parar qua ndo o jogador solta uma

    tecla. Precisamos garantir que isso acontea para i sso arraste e encaixe outro bloco

    otherwise if abaixo do otherwise if anterior e depois adicione um bloco and, para isso

    selecione Flow Conditional

  • 38

    Agora clique no do lado esquerdo do bloco and selecione o item Comparison

    e depois o bloco not

    Efetue a mesma operao para o do lado direito, o resultado ser o como

    mostrado abaixo:

    Adicione os blocos [right] [is down] e [left] [is down] em cada um dos not

    adicionados anteriormente.

    Pegue agora um bloco set x-speed to [ ] for [Self] e o encaixe na parte inferior

    do bloco otherwise if e coloque o valor 0 em to como mostrado na figura abaixo

  • 39

    A ltima coisa que precisamos fazer definir o valor de velocidade da nave.

    Clique na aba Attributes na parte inferior da paleta.

    Coloque o valor 20 no campo Default Value

  • 40

    Teste o game para garantir que a nave esta se movendo para esquerda quando

    pressiona a seta esquerda, para a direita quando pressiona a seta direita e para

    quando nenhuma das duas esto pressionadas. Agora q ue voc est mais

    familiarizado com Design Mode hora se seguir em frente e desenvolver mais

    eventos. Nossa nave pode se mover para esquerda e direita, mas no existe um

    evento que evite que a nave desaparea para fora da rea de jogo. A prxima tarefa

    restringir o movimento da nave a rea do jogo.

    Mantendo a nave na tela

    Para limitar o movimento da nave para que ela no d esaparea da tela, para isso

    inicialmente adicionaremos um novo evento.

    Em seguida adicione um bloco if e um otherwise if como mostrado na figura abaixo

  • 41

    Agora temos que verificar se a posio da nave no est alm da borda esquerda,

    para isso faremos o seguinte:

    Na aba Conditional no item Equality selecione o bloco menor que

    O resultado mostrado na figura abaixo

  • 42

    Agora selecione a aba actor position x of self e arraste um bloco x of self para o

    quadro direito do bloco menor que e configure o parmetro para x (on Screen), no

    quadro esquerdo digite o valor 0.

    O resultado final apresentado na figura abaixo

  • 43

    No bloco otherwise if verificar se a nave atingiu a borda direita da tela do jogo, para

    isso na aba Conditional no item Equality selecione o bloco maior que

    O resultado ser o visualizado na figura abaixo

    Agora no lado esquerdo do bloco deve ser inserido um bloco x of Self e configurado o

    valor x(on screen)

  • 44

    J no lado direito devemos inserir um bloco subtrao, para isso selecione Number &

    Text Math bloco subtrao

    No bloco subtrao colocaremos a largura da tela me nos a largura da nave, para isso

    no lado esquerdo do bloco subtrao ser inserido o bloco screen width, devemos

    selecionar a aba Scene View como mostrado na figura abaixo

    J no lado direito do bloco subtrao colocaremos um bloco width of self, para isso

    selecionaremos a aba actor Properties Size width of Self

  • 45

    Explicando o cdigo:

    No primeiro bloco if verifica-se se a posio da na ve menor do que 0 sabendo que o

    inicio do plano cartesiano em Stencyl no topo a esquerda da tela, essa condio nos

    diz se a nave esta no final da tela do lado direito.

    J no bloco otherwise if verifica-se se a posio da nave maior que o tamanho da

    tela que obtido pelo bloco screen width subtraindo o prprio tamanho da nave. Se

    no for efetuada essa subtrao a nave estar fora da tela quando a condio for

    atendida.

    Dando prosseguimento devemos redefinir a posio da nave quando cada uma das

    condies for atendia a nave deve ser reposicionada na borda da tela que atingiu

    dando a impresso que a nave esta presa dentro da rea do jogo.

    No bloco if ser inserido um bloco set x to[] for self e deve ser configurado o valor 1

    para atualizao da posio da nave. Aps este proc edimento a programao dever

    ficar como visto na figura abaixo:

  • 46

    J no bloco otherwise if ser inserido um bloco set x to[] for self e deve ser com dois

    blocos subtrao como mostrado abaixo

    No prximo passo necessrio inserir no quadro branco esquerdo do bloco subtrao

    um bloco screen width que esta localizado na aba Scene item View

    No quadro branco ao centro deve-se inserir um bloco width of self localizado em Actor

    properties Size. O resultado final ser o apresentado na figura abaixo.

    E finalmente no quadro branco a direita configure com o valor 1.

    Fazendo a nave atirar

    O prximo evento criar um Ator Bala e que ser colocado em movimento quando o

    jogador pressionar uma tecla. Clique em + Add Event localizado no lado esquerdo do

    Stencyl, selecione o item Input e o elemento Keyboard como demostrado na figura

    abaixo.

  • 47

    No bloco que aparece, defina no controle action 1, como mostrado.

    Agora precisamos inserir dois blocos, um que cria o Ator bala e outro que cria sua

    movimentao.

    Para inserir o primeiro bloco deve-se selecionar o boto Scene Actor Create

    Actor create actor type como exibido na figura abaixo:

  • 48

    Clique sobre actor type e ser exibida uma caixa de dilogo onde deve-se selecionar o

    actor bullet

    O segundo bloco esta localizado em actor Motion Force push Self como mostra a

    figura abaixo

  • 49

    No parmetro Self configure o valor Last Created Ac tor como exibido na figura abaixo

    J no parmetro gently mude-o para sharply como exibido abaixo

    Agora deve-se definir onde a bala ser criada e a direo do movimento da mesma

    para isso devemos selecionar Actor Position x of Self

    No segundo bloco inserido troque o paramento de x para y como na figura abaixo

  • 50

    A partir daqui ser definida a direo de movimento e a fora do Ator bala, para isso

    ser configurado o parmetro xDir para 0, yDir para -1 e Force para 40 esses

    parmetros esto no bloco push Last Created Actor c onforme exibido na figura abaixo

    Teste o jogo novamente (pressione a tecla z para atirar).

    Destruindo as balas

    Abra o Actor Bullet para isso selecione a aba Dashboard e clique em Actor Type e

    selecione Bullet e pressione enter

    No prximo passo selecione a aba Events +Add Event Collisions Actor of

    Type como demonstrado na figura abaixo

  • 51

    Agora necessrio configurar o evento inserido, clique parmetro actor type e na

    opo choose actor type no mostra a figura abaixo

    Selecione o ator Enemy Ship e clique em OK

    Agora necessrio inserir o bloco kill self para destruir a nave inimiga, para isso

    selecione a aba actor properties kill self

    Agora cada ator bala ser destrudo quando colidir com a nave inimiga.

    Em seguida para garantir que as balas sero destru das quando sarem da tela

    preciso adicionar um evento para quando um ator entra ou sai da tela.

    Para isso clique em Add Event Actor Enters or Leaves the Scene or Screen

    Specific Actor como mostra a figura:

  • 52

    Altere os menus dropdown do bloco de eventos e acrescente um bloco kill acessando

    actor Properties kill [self] como mostra a figura

    Salve o seu jogo e teste-o. Em seguida, hora de configurar o que acontece quando

    as balas colidem com as naves inimigas.

  • 53

    Destruindo as naves inimigas

    Abra o Ator tipo Enemy Ship para isso clique em Dashboard depois em Actor Types e

    depois de um duplo clique em Enemy Ship em seguida clique em + Add Event

    Collision e Actor of Group como mostrado.

    Aqui a lgica bsica que queremos criar: se um ator que um membro do Grupo de

    balas colide com a nave inimigo ("Self", neste caso), subtrair vida. Se a nave inimiga

    no tem vida, ou seja, menor ou igual a 0, matar a nave inimiga.

    Para comear, crie um novo atributo, selecione o ti po numero e o nomeie como

    PontosVida. Para isso clique no boto Attributes e no boto Create an Attributes

  • 54

    Agora crie um evento(clique em + Add Event Basic When Creating) como mostra

    a Figura

    Agora selecione Attributes Setters set PontosVida to [] e configure o valor do

    parmetro para 3 como mostrado na figura

    Em seguida volte para o evento Actor Group config ure Collision Group para balas

    em Collision Event e depois insira um bloco increment localizado em Numbers & Text

    Math category e modifique increment para decrement clicando o menu dropdown do

    bloco como mostra a figura

  • 55

    Por ultimo precisamos adicionar um evento que checa o valor do PontosVida da nave

    inimiga e se o valor for zero a nave ser destruda. Para comear clique no boto +

    Add Event Basic When Updating como mostra a figura

    Agora insira um bloco if no bloco Always para isso selecione Flow Conditional

    Conditionals if como demostrado na figura

  • 56

    Agora adicione um bloco [ ] < = [ ] (Flow Conditional Equality) como visto na

    figura

    Insira o Atributo PontosVida no bloco []

  • 57

    Para o som ser executado precisamos inserir um bloco play sound. Devemos

    selecionar o item Sound Playback Play Sound como demonstrado na figura

    abaixo

    O parmetro Sound deve ser modificada Explosion par a isso clique em Sound

    Choose Sound como visto na figura

    Na caixa de dialogo exibida selecione Explosion e clique em ok como mostra a figura

    Lembre-se que a execuo dos cdigos do Stencyl aco ntece de maneira sequencial

    ento aps a execuo do som, devermos inserir o bl oco kill self como podemos

    visualizar na figura abaixo

  • 58

    Precisamos adicionar um efeito no Ator Inimigo para mostra ao jogador quando o

    inimigo atingido. Na lista de Eventos selecione o Actor-Group anteriormente criado

    Agora selecione o item Actor Effects bloco apply effect

    J no parmetro apply effect devemos inserir um bloco make negative para isso

    selecione Actor Effects Other bloco make negative como demostra a figura

    Agora necessrio inserir um bloco do after para isso selecione Flow Time

    Delayed como visto na figura abaixo

  • 59

    Configure o parmetro do bloco do after para o valo r .1 e para finalizar insira um bloco

    com remove all effects from para isso acesse Actor Effects Add / Remove como

    mostra a figura

    Devemos configurar o bloco when Self no parmetro A ctor Group com o Bullets para

    isso clique sobre Actor Group Choose Group Bullets

    Agora teste o jogo.

    Criando uma fonte

    Antes de mostrar um texto na tela necessrio configurar uma fonte padro para o

    jogo. Selecione Dashboard Font e clique no retngulo pontilhado que mostrado no

    centro da interface como pode ser visto na figura

  • 60

    Na caixa de dilogo que ser exibida configure o parmetro name como FontePadrao

    conforme a figura

    Altere as configuraes para os mostrados na imagem a seguir (tamanho 32, branco

    para a cor, Sans Serif para a fonte, um estilo de Normal, Sim para Suavizao) e salve

    o trabalho.

  • 61

    Agora precisamos criar um evento que ir verificar quantas naves inimigas esto na

    tela e se no houver nenhuma ir mostrar uma mensagem de vitria usando a fonte

    que foi criada.

    Ganhando o Game

    Agora precisamos criar um evento na cena que permitir o jogador vencer. Ele ir

    verificar quantas naves inimigas existem na tela e se o jogador destruiu todas elas, o

    evento mostra uma mensagem.

    Para comear selecione Dashboard Scene e selecione a cena NivelUm como

    mostrado na figura

    Depois de aberta a cena selecione o boto Events e adicione um evento clicando em + Add Event Actor Member of Group como mostra a figura

  • 62

    Depois configure os parmetros Actor Group e create d para Enemies e Killed como

    mostrado na figura

    Em seguida um atributo do tipo number chamado ContaVitoria para isso clique em

    Attributes Getters Create an Attributes como mostra a figura

    Agora insira um bloco Increment acessando Number & Text Math Increment /

    Decrement

    Configure o parmetro by com o valor 1

  • 63

    Crie um evento When Updated acessando + Add Event Basic When Updated

    Agora adicione um bloco if acessando Flow Conditional Conditionals como pode ser visto na figura

  • 64

    Adicione um bloco equals para isso acesse Flow Conditional Equality como

    mostra a figura

    Configure o parmetro a esquerda com o atributo Con taVitoria acessando Attributes

    Getters e configure o parmetro a direita com o val or 5 como pode ser visto na figura

    Agora precisamos criar outro atributo que ser usado para acionar o texto que ser

    exibido quando o jogador mata todas as naves inimigas. Devemos seguir os passos

    abaixo:

    1. Criar um novo atributo do tipo boolean chamado vencer

  • 65

    2. Insira um set Vencer to acessando Attributes Setters Boolean como visto na

    figura

    3. Coloque um bloco true no parmetro do bloco set Vencer to como demonstra a

    figura

    Por ltimo precisamos adicionar um Evento When Drawing acessando + Add Event Basic como pode ser visto na Figura

  • 66

    Acesse a categoria Drawing Styles Color and Font e selecione um bloco set

    current font to como visto na figura

    Configure o parmetro font para isso clique sobre f ont e sobre choose font e na caixa

    de dilogo que ser exibida selecine FontePadrao e clique em OK como mostra a

    figura

    Coloque agora um bloco if logo abaixo do set current font to para isso acesse Flow

    Conditional Conditionals como pode ser visto na figura

  • 67

    Configure o parmetro do bloco if com o atributo Ve ncer como demostrado na figura

    Insira um bloco draw text acessando Drawing Drawing Basic como pode ser visto

    na figura

    Configure o parmetro text com: Voc Venceu! ; o parmetro x com o valor: 300; e y

    com: 240 como mostra a figura.

    Tenha em mente que estamos definindo coordenadas exatas para onde o texto deve

    aparecer. Se voc alterar o tamanho da janela do jogo (viewports) para um tamanho

    diferente de uma largura de 640 e uma altura de 480, ter que ajustar os valores X e Y

    para que o texto seja centralizado.

  • 68

    Publicando seu game

    Agora que voc j testou o seu jogo e tudo funciona, hora de export-lo para o seu

    desktop como um arquivo SWF. Deste modo voc pode abrir o arquivo em qualquer

    browser para jogar o game! Clique no boto Publish na parte superior direita da tela

    como demostra a figura

    Selecione a opo Flash para publicao. Esta opo criar um arquivo swf e pedir o

    local onde ser salvo o arquivo.