Processing - Interagindo com o usuário

Veja como seu programa pode interagir com o usuário por meio do mouse ou teclado. Vamos expandir nosso conhecimento sobre Processing, permitindo a construção de programas mais complexos.

[ Hits: 8.806 ]

Por: Juliao Junior em 19/01/2015


Seu primeiro game / Passos seguintes



Seu primeiro game

Copie o código abaixo para o IDE do Processing. Compile/rode e vejamos o que está acontecendo.

char c;
int x = 1;
int ABERTURA = 1;
int JOGANDO = 2;
int state = ABERTURA;

void setup() {
  size(600,380);
  background(230,0,0);
  smooth();

}

void draw(){

  if (state==ABERTURA){
    drawAbertura();
  }
  else if (state==JOGANDO){
    drawLetra();
  }

}

void drawAbertura(){
  textAlign(CENTER);
  fill(255);
  textSize(28);
  text("Clique um botão do mouse para começar\n \n \n",width/2,height*0.3);
  textSize(22);
  text("Para jogar,\n digite a letra que aparece na tela",width/2,height*0.6);
}

void drawLetra(){
  if (x==1){
  background(0);
  c=(char)(int)(random(97,122));
  textAlign(CENTER);
  textSize(48);
  fill(255);
  text(c,width/2,height/2);
  println(c);
  x = 2;
  }
}

void keyTyped(){

  if (c==key){
    x = 1;
  }
}

void mousePressed(){
  if (state==ABERTURA){
    state=JOGANDO;
  }
}

Como sempre, começamos com algumas variáveis que usaremos no código. As variáveis ABERTURA e JOGANDO serão utilizadas para determinar o óbvio: o programa mostra a tela de abertura ou o jogo em si. A função "setup()" contém as definições já explicadas anteriormente.

Na função "draw()", note algo muito importante. Temos apenas um "if...else". Serve apenas para definir o que será mostrado. Dependendo do valor da variável "state", é chamada uma entre duas funções: "drawAbertura" (responsável pela tela que surge logo no início da execução do programa) e "drawLetra" (o jogo em si).

Em seguida, temos quatro funções que definem a dinâmica do programa. Primeiro, nossas duas funções. A "drawAbertura" apenas escreve na tela a mensagem de instrução para o usuário. Para escrever texto na tela é bem simples, apenas escrevemos o texto e damos as coordenadas do texto. O funcionamento é praticamente auto-explicativo.

A função "drawLetra" é um pouco mais complexa. Mas apenas um pouco mais. Nós verificamos a variável x para garantir a execução dos comandos. Se a variável indicar que os comandos devem ser executados, mudamos a cor do background e escolhemos uma letra aleatoriamente.

Em seguida, escrevemos a letra sorteada na tela, e mudamos o valor da variável. Dessa forma, os comandos de "drawLetra" não são executados até a variável ser alterada. Isso garante que não escolheremos outra letra até 'algo' acontecer.

Por último, as duas funções próprias do Processing que utilizaremos para interagir com o usuário. A função "keyTyped()" é executada toda vez que o usuário teclar uma letra.

O que nós queremos neste 'game'? Verificar se a letra que foi mostrada na tela (pela função "drawLetra") foi corretamente teclada pelo usuário. Portanto, dentro da função "keyTyped" fazemos essa verificação dentro de um "if".

A condição é "c==key". O motivo: "c" é a variável que estamos utilizando para guardar as letras que sorteamos e mostramos na tela, enquanto a variável "key" é própria da linguagem e sempre tem como valor a última tecla utilizada pelo usuário.

Estamos comparando se a tecla que o usuário utilizou corresponde à letra que mostramos na tela. Se for, alteramos o valor da variável x para 1. Desta forma, quando a função "drawLetra" for executada, ela terá todo o seu código executado e outra letra é escolhida e mostrada na tela.

Por último, a função "mousePressed()" é executada sempre que um botão do mouse for usado. Dentro dela, também colocamos apenas um "if". Se a variável "state" tiver o valor ABERTURA, quando um botão do mouse for pressionado, esse valor muda para JOGANDO.

Qual o objetivo aqui? Relembre a função "draw()". Ela verifica o estado da variável "state". Da forma que escrevemos, o programa começa com a váriavel state com o valor ABERTURA. E assim a função drawAbertura é executada. Quando o usuário clicar no mouse, state muda para JOGANDO, e a função "drawLetra" entra em execução. Daí por diante o jogo continua.

É isso, seu primeiro jogo. Simples demais, mas é funcional.

Passos seguintes

Neste artigo você aprendeu a lógica simples de interação com o usuário via Processing. Diversas funções estão disponíveis no Processing. Seu desafio agora é pesquisar essas funções e inserí-las em seus próprios códigos.

Mas a lógica é sempre a mesma vista aqui. Estude o que mostramos, tente entender bem como funciona. Utilizar todas as outra formas de interação passa a ser bem simples.

Nos próximos artigos, nós veremos formas diversas de interação com o usuário, além de lidar com dados. Trabalhar com dados é algo vital para programas mais avançados.

Fica a curiosidade. Até o próximo.

Página anterior    

Páginas do artigo
   1. Bibliotecas / Interação
   2. Seu primeiro game / Passos seguintes
Outros artigos deste autor

APTonCD - Seu repositório portátil

Instalação do sidux

Guia introdutório do Linux IV

Inkscape - Introdução (Parte 3)

Real Football 2012 - Futebol de qualidade no Android

Leitura recomendada

Como Modificar a Tela do Bootloader do Android

Introdução ao Heimdall

Python com SL4A - A camada de script do Android

Como fazer root em aparelhos Samsung

Ambiente de Desenvolvimento para Android

  
Comentários
[1] Comentário enviado por fabio em 20/01/2015 - 01:54h

Uma dúvida Cícero, não sei se você chegou a abordar em algum outro artigo. Como se faz pra exportar a aplicação para formato apk (aplicativo para Android)? Ele é compatível com quais plataformas? Android, Windows Phone, iOS?

Um abraço.

[2] Comentário enviado por juliaojunior em 20/01/2015 - 17:29h


[1] Comentário enviado por fabio em 20/01/2015 - 01:54h

Uma dúvida Cícero, não sei se você chegou a abordar em algum outro artigo. Como se faz pra exportar a aplicação para formato apk (aplicativo para Android)? Ele é compatível com quais plataformas? Android, Windows Phone, iOS?

Um abraço.


Ainda não abordei essa tarefa. Será tema de um próximo artigo. Esse é o segundo dessa série que estou escrevendo. Trarei um terceiro, ainda sobre interação com o usuário e escrita/leitura de dados. No quarto artigo, aí sim eu provavelmente tratarei sobre a exportação do programa para apk, além de mostrar como preparar o programa para publicação na Play Google.

Com o mesmo código, podemos compilar para o Windows, Android, web e IOS. Muda alguns detalhes, mas apenas para controles característicos do sistema. Por exemplo, se você tem um aplicativo rodando em desktop, você usa o teclado/mouse para controle, enquanto no Android você pode usar o acelerômetro etc. Mas é bem simples.

Você pode se adiantar no aprendizado visitando www.processing.org.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts