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: 10.862 ]

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

PORTAGE - Gerenciamento de pacotes no Gentoo Linux

manDVD - Produza DVD-vídeo rápido e fácil

Inkscape - Introdução (parte 2)

Guia (nem tanto) Introdutório do Linux

Usando variáveis de ambiente

Leitura recomendada

Android Things - Aplicativos IoT padronizado para Indústria 4.0

ARCore: SDK para realidade aumentada da Google

Introdução ao Heimdall

Assumindo o controle do teu Android com ADB

Segurança no 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

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts