Programação com a engine Stencyl

Nesse tutorial: instanciar atores e variável global.

2- Criando atores

Até o momento, quando era preciso adicionar algum ator na cena, escolhíamos o ator e

posicionávamos o ator onde era preciso. Poderíamos até mesmo modificar via código a

posição inicial do ator. Se fosse preciso adicionávamos várias instancias do ator na

cena. Em adição a essa forma “manual” de adicionar atores, esse tutorial mostrará como

fazer a inclusão de atores na cena via código.

2.1- Instanciar um ator

Inicialmente irei mostrar como codificar a instanciação de um ator (inclusão de um ator

na cena). Cada vez que a instrução for adicionada a uma cena, um novo ator será criado.

Mas uma vez utilizarei o ator “Balloon” encontrado na StencylForge.

Para iniciar essa codificação com a Stencyl, crie um novo jogo em branco

(Blank Game) com resolução 640x480. No StencylForge localize o ator “Balloon”.

Figura 1. Ator Balloon encontrado na StencylForge

Após fazer o download do ator retornaremos a edição do jogo e, na opção

Scenes, crie uma nova cena (chamei a minha cena de “cena1”).

Tendo criado a cena é preciso editar os eventos da cena recém criada. Para isso,

entre na cena e depois em Events. Tenha certeza de estar entrando no evento da cena

pois não estamos mais editando os eventos no ator. Adicione um novo evento de

criação: na opção Events, clique em Add Event, depois em Basics, e por fim When

creating. Em seguida vá a Pallete, na opção Scene, e em Actors localize a opção

. A Figura 2 mostra onde estão as opções na Pallete.

Figura 2. Elementos da interface para acessar a criação de ator

Adicione ao bloco do evento básico de criação (when created) a instrução

. Clique na opção Actor Type e selecione o ator

Balloon, para que seja criado um ator do tipo Balloon. A instrução de criação do ator

solicita as coordenadas X e Y do ator. Informe o valor 10 em X e Y. Isso posicionará o

ator no canto superior esquerdo da cena. Observe na Figura 3 como ficou o código.

Figura 3. Código para instanciar o ator quando a cena é criada

Executando o código (clicando em Test Game na parte superior direita da

Stencyl), já é possível ver a aplicação até agora, onde o ator (uma bola) aparece no

canto superior esquerdo da cena (posição 10,10 da cena).

2.2- Instanciando vários atores

Para adicionar vários atores precisaríamos adicionar várias vezes a instrução

. Na Figura 4 é mostrado o código que adiciona 3

instancias do ator na cena. Além de trabalhoso, fazer dessa forma não permite

flexibilidade no jogo onde o número de atores na cena poderia variar conforme o

desempenho do jogador, ou outra variação determinada pelo design do jogo. Sendo

assim, apresento uma nova estrutura para o fluxo do jogo que é a repetição de ações.

Figura 4. Código para instanciar 3 atores quando a cena é criada

São várias as opções de repetição disponíveis na Stencyl (chamadas de

Looping), mas irei mostrar nesse tutorial apenas o bloco que permite repetir certo

número de vezes. Utilizarei essa estrutura de repetição para adicionar 5 atores na cena.

Para isso, adicione um bloco repeat 0 times no evento de criação da cena.

Para criar um repeat 0 times, acesse a Palette (olhar no canto inferior

direito). Altere para a aba Flow e depois clique em Looping. A primeira

opção é a que procuramos. Ela espera um parâmetro que é o número de

vezes que a repetição deve ocorrer. Esse número de vezes irá substituir o

valor zero visualizável. Na Figura 5 é possível visualizar nas áreas

marcada onde está cada item.

Figura 5. Elementos da interface para acessar a estrutura de repetição fixa

Adicione o bloco no evento de criação da cena e informe o valor 5 como

parâmetro. Dentro do bloco do repeat 0 times, adicione a instrução

. Não podemos deixar fixos os valores para X e Y na

instrução, senão os 5 atores serão criados um em cima do outro, então iremos informar

valores aleatórios para as coordenadas dos atores.

Para informar as coordenadas para a criação dos atores, iremos utilizar valores

aleatórios. Para isso, clique na especificação da coordenada X no

, e depois selecione Math e por fim

. A instrução random é que sorteará um número dentro de

um intervalo. Como primeiro valor deve ser fornecido zero e como segundo valor a

largura da cena (já que a coordenada X controla o posicionamento horizontal do ator).

Faça o mesmo com relação ao Y, mas informando zero e a altura da cena (já que a

coordenada Y controla o posicionamento vertical do ator).

Como criei a cena com tamanho 640x480, para a largura deveria ser

especificado 640 e para a altura o valor 480, mas é mais interessante pedir para o

próprio código descobrir qual o valor de largura e altura da cena. Fazemos isso através

da instrução . Quando clicar no segundo parâmetro da instrução

, selecione a opção Scene e nela será visto . A

Figura 6 mostra a codificação que adiciona 5 atores na cena utilizando coordenadas

aleatórias.

Figura 6. Código para instanciar 5 atores quando a cena é criada

Executando várias vezes o código (clicando em Test Game na parte superior

direita do Stencyl) podemos ver que os atores são adicionados em locais diferentes a

cada execução.

3- Escopo das variáveis

No primeiro tutorial foi criada uma variável (que a Stencyl chama de atributo) no ator.

Essa variável se chamava “sentido”. Essa variável foi criada no conceito chamado de

variável local, ou variável de escopo local, que significa que a variável só existe para a

instância do ator. Mas existe como criar uma variável que pode ser compartilhada por

todos os elementos do jogo. Esse tipo de variável é denominada, nos conceitos de

programação, como variável global, já a Stencyl chama de atributo do jogo (game

attribute).

3.1- Criar uma variável local

Para explicar o conceito de variável global, inicialmente codificaremos uma variável de

escopo local para depois perceber a diferença com ela. Faremos um experimento com o

objetivo de contar quantas vezes o ator foi clicado e mostrar esse número de cliques no

ator. Considerando que você já sabe manipular atributos na Stencyl (já que foi abordado

no primeiro tutorial), não serei tão detalhista nesse pedaço do tutorial, mas você pode

acompanhar o pequeno vídeo associado a ele em: http://youtu.be/wZoWOrrt24U.

A codificação deve ser feita nos eventos do ator. Crie um atributo chamado

“click” e no evento básico de criação do ator faça o valor do atributo receber zero (para

iniciar com o número de cliques zerado).

Em seguida faremos com que, a cada vez que o jogador clicar sobre o ator,

aumentaremos o valor no atributo “click” em uma unidade. Para isso, adicione um

evento básico de atualização no ator e depois um bloco if, onde a condição é o input do

mouse com a ação was released on, que fará entrar no bloco if quando o clique do

mouse for liberado. Dentro do bloco if adicione uma instrução para fazer o número de

cliques aumentar. Por fim, adicione um evento básico de desenhar e adicione a instrução

para fazer aparecer o número de cliques em cima do ator. A Figura 7 mostra como fica a

codificação desses elementos.

Figura 7. Código para contar o número de cliques em um ator

Executando o código você verá os 5 atores criados e, em cima deles, o número

de cliques recebidos por cada ator. Clicando em algum dos atores o indicador do

número de cliques (controlados pelo atributo “click”) dele aumenta. Perceba que o valor

do atributo “click” é individual de cada instancia do ator e não de todos os atores.

3.2- Criar uma variável global

Agora será criada uma nova variável que deve controlar quantos cliques já ocorreram no

total, não apenas para cada ator. Para isso precisaremos de uma variável global, que na

Stencyl é chamada de Atributo do jogo. Estando na edição de eventos da cena, crie uma

variável para armazenar o número de cliques total realizados.

Na Pallete, selecione a opção Attributes e em seguida a aba Game Attributes.

Serão mostradas as opções de atributos do jogo onde é possível localizar o botão

Create New Game Attribute (veja os elementos na Figura 8). Em seguida será

exibida a janela ilustrada na Figura 9, onde você deve especificar um nome para

o atributo (chamei de “clicks”), uma categoria (utilizada para classificar os

atributos quando temos muitos, deixei como Default pois somente será criado

um atributo) e o tipo do atributo (que precisa ser numérico para contar o número

de cliques) e por fim o valor inicial que foi deixado em zero.

Figura 8. Elementos da interface para criar um atributo global

Figura 9. Código para instanciar 5 atores quando a cena é criada

Tendo confirmada a criação do atributo, a Pallete exibirá as opções conforme a

Figura 10. Crie um evento básico de desenho na cena e mande mostrar o valor do

atributo do jogo recém criado na coordenada 10,10. A Figura 10 mostra como ficará o

código. Para adicionar a variável global “clicks” na instrução

, é preciso acessar o Game Attributes e arrastar para o texto o nome da variável

encontrado na opção Number Getters (marcado na Figura 11).

Figura 10. Código para mostrar o valor da variável global na cena

Figura 11. Elementos da interface para as variáveis globais

Edite o evento básico de atualização do ator e adicione ao bloco if a instrução

para fazer aumentar o número de cliques do jogo. Isso é feito através da instrução

, que você encontra no Game Attributes (rever Figura 11).

Caso você não veja a instrução no Game Attributes do ator

(conforme a Figura 11) é só uma questão de atualização. Feche a edição

do ator e abra ela de novo.

Após adicionar o ao bloco if, coloque como valor para o atributo

uma soma, onde o primeiro valor da soma será a quantidade atual de cliques e o

segundo valor o número 1.

Figura 12. Código para contabilizar os cliques no ator e para todos os atores

Executando o código é possível ver os 5 atores posicionados aleatoriamente na

cena e seu respectivo número de cliques sobre eles. Além disso, é possível visualizar no

canto superior esquerdo da tela outro contador que mostra o número de cliques

recebidos por todos os atores.