Continuando um pouco mais sobre o estilo de jogo point-and-click, existe uma serie na web bastante conhecida já o "submachine escape" pelo qual você deve fugir de um subsidio muito louco, que mais parece um labirinto, cheio de puzzles para resolver. Esse jogo é um grande jogo de point-and-click de tantos outros perdidos pela internet. Mas esse é viciante.

submachine escape 1

   Visto que o vício do jogo é alto recriei de maneira curta e bem simplificada do jogo. para jogar basta clicar na imagem que esta logo abaixo:

   Vamos falar sobre uma modalidade de jogo conhecida, não tão conhecida hoje chamada de "point-and-click".

   Agora porque o nome ser esse. Vou lhe explicar agora a modalidade do jogo como o nome já sugere é apontar e clicar. Você aponta com o mouse e clica para o objeto e interage com o jogo. Geralmente são bem simples de se jogar, o que o torna viciante.

   Veja agora um pequeno exemplo de jogo logo abaixo que existe para snes nessa modalidade:

   Essa serie faz tanto sucesso que existem alguns designers que comumente fazem fanarts do game, como essa aqui abaixo:

   Atualmente existe um mais sofisticado baseado na famosa serie de zumbis o "the walking dead" que saiu para varias plataformas atuais. Veja logo abaixo:

   E vendo a volta dessa modalidade de jogo, temos uma versão feita em flash usando alguns botões (usei um botão baseado no flashbuttons.com um site ate bom porem cuidado para não fazer um botão muito exagerado, dependendo da ocasião não será uma boa escolha), sendo apenas uma homenagem, bem curtinho. Clique na imagem abaixo para desfrutar:

   Caros leitores, existe um pequeno instrumento musical, bastante peculiar chamado teremin. Aí você se pergunta "tere... o que?" . Calma vou lhes explicar de uma maneira rápida e simples.

   Teremin é um dos primeiros instrumentos musicais completamente eletrônicos, controlado sem qualquer contato físico pelo músico. O nome foi dado em homenagem ao físico russo que o inventou o Léon Theremin em 1928. O instrumento é controlado por duas antenas de metal, que percebem as mãos do musico e controlam ociladores de frequência com uma das mãos, e com a outra a amplitude, e os sinais são enviados para o autofalante.

Este é o teremin.

  Para saber um pouquinho mais dele veja esse pequeno vídeo abaixo que explica como ele funciona:

   O teremin não é um instrumento tão fácil de se utilizar porem pode ser bastante interessante quando sabe usar. Tem algumas bandas que já utilizaram/utilizam o instrumento uma delas é o pato fu confira um pouco de um videoclipe deles com o instrumento:

   Existem muitas pessoas que usam ele para fazer musicas aleatorias ate de jogo veja mais um exemplo:

   Agora que você leitor já entende mais sobre o instrumento, no dia 25/07/13 ocorreu uma exposição na UFC (Universidade Federal do Ceará) chamada de "video +" onde teve um pequeno teremin feito com arduíno. Agora você fica se perguntando como fazer um?

   Utilizando alguns componentes como um sensor de ultrassom, um de luminosidade  e um buzzer, pode-se criar um pequeno teremin, e nele é capaz de tocar que nem o teremin tradicional.

Teremin apresentado na video 

  

sensor de luminosidade 

 

     buzzer 

sensor de ultrassom

   Depois dessas imagens vamos ver como ficou o resultado do experimento utilizando-se do arduíno para reproduzir um teremin:

   Hoje vamos brincar com animações, e sempre é bom vermos algumas animações para ganhar inspiração. Por mais que fique extremamente parecido com o original, ele sempre tem suas diferenças, pois a maquina reproduz o que você fez, então sempre vai ser diferente pelo fato de cada designer faz de sua maneira.

   Eu tive a brilhante idéia de reproduzir uma das várias animações do Rogério Doki. Com ela fica mais simples e prático usar apenas o flash para desenhar todos os detalhes e a animação em si.
   Iniciamos fazendo os olhos, cujo é o mais simples e prático. Desenhando em um "movieclip" faça o olho fechado, e logo apos, na linha do tempo em alguns frames depois (fica ao seu dispor quanto ao tempo que vai durar para ele piscar os olhos) faça o olho fechado. Depois ainda coloque mais alguns para ele ficar dando algumas piscadas de olho. E no final deiche mais alguns frames para dar um tempo a mais para ele picar novamente (caso contrario ocorrerá uma loucura com os olhos, ele ficará piscando o olho direto sem parar).

   Logo mais a frente faça outro "movieclip" para a cabeça, nesse você fará todo o desenho da cabeça, quando terminar o desenho da cabeça, pegue toda a cabeça dentro da "timeline" do "movieclip" e crie outro "movieclip" e nesse outro não mecha nada, apenas coloque os olhos. No Seu "movieclip" em que transformou em outro "movieclip", ou seja aonde você criou todo o desenho da cabeça, mecha na timeline dele fazendo a cabeça balançar um pouco, e para parecer algo mais interessante use o "ease" para dar atraso no movimento da cabeça.

   E analogamente faça o mesmo com o rabo. Com todas essas partes prontas crie outro "movieclip" para o corpo, e quando terminar o corpo, coloque a cabeça e o rabo nesse "movieclip".

   Agora você terá já todo o porco pronto. Falta apenas criar o "movieclip" da bolha, que usaremos em forma de elipse e sem preenchimento, e depois cria uma imagem em "movieclip" e nesse você usa o efeito de "blur" em pequenos niveis e o coloque em posições estratégicas dando uma impressão da refração da luz que contem em bolhas (bastam duas, uma do tamanho da metade da bolha, e outra bem pequena no canto superior).

   Agora é com vocês colocarem os objetos na timeline, e criar a animação do jeito que quiserem, o fundo fica a criterio de vocês também.

 Agora Veja como ficou o resultado final clicando na imagem abaixo:

    Em uma época dessas onde o nosso queridinho pássaro azul perde espaço para um 'f' também em azul, decidi fazer uma pequena homenagem com o queridinho Larry. Isso mesmo o nome do nosso passarinho é Larry.

    Vamos aqui explicar um pouco a respeito da nossa ave. Esse nome surgiu devido a um grande ex-jogador de basketball do Boston Celtics, o Larry Bird, time da cidade natal do co-fundador do microblog. Então devido a circunstancia do sobrenome do ex-jogador ser "Bird" eles homenagearam-no colocando o seu nome na ave.

    A ave já sofreu alguns redesenhos porem hoje ele tem uma imagem bem interessante. Basta olharmos o antigo para o atual desenho da ave.

logo antiga

logo atual

     Então vamos falar sobre a homenagem, e para isso eu entrei em um site de um animador muito bom por sinal que utiliza-se de flash para animar suas obras. Para ver o site clique aqui

    Eu vi uma animação cujo havia uma ave que voava pelos céus e passava por cidades morros, entre outros. Com isso eu vetorizei algumas das imagens dele pelo flash ou pelo illustrator, logo apos comecei a anima-lo no flash. E a obra você pode ver clicando na imagem logo abaixo:

     Para fazer download do editavel basta clicar aqui

   Bem hoje vamos fazer uma pequena animação com uma musica infantil bastante famosa chamada "meu pintinho amarelinho". 

   Essa animação sera feita toda em flash e photoshop, mas também podemos utilizar de illustrator, pois o mesmo é ótimo para vetorização. Começamos fazendo o fundo, depois do fundo vamos criar a ave, e na ave faremos parte a parte para pôr movimentação no mesmo.

     Mais a frente faremos os detalhes.

O resultado encontra-se logo abaixo:

     Agora vamos fazer uma animação em flash com espaçonave, porem já temos um script pré-definido, e vamos ter que segui-lo. Segue o roteiro abaixo o nosso famoso stroyboard.

    Como se dará a animação é por conta de você caro leitor, mas tem que seguir o roteiro, com os detalhes de cenário e deve existir sonoplastia para as ações. 

   Eu irei fazer a animação com pixel art, e essa animação cada parte será feita com photoshop, desde a nave, a cidade e o céu. Depois de feito, transfiro para o flash e os transformo em "movieclip" e coloco-os na biblioteca do flash.

     Depois de colocado, o resto é animar o video. A sonoplastia capturei o audio por videos do "youtube", mas você pode pegar de qualquer outro lugar, isso cabe ao critério de cada um.

      O resultado você confere logo abaixo:

    Bem pessoal hoje vamos fazer uma animação utilizando uma técnica muito famosa chamada mickeymousing.

      Agora você se pergunta "o que raios é mickeymousing?", vamos fazer uma explicação bem simples. Mickeymousing é uma técnica de composição para a imagem que se originou, como o nome sugere, em desenhos animados, mais especificamente nas produções de estúdios americanos do final dos anos 1920, utilizando o som como guia da animação.

        Vamos utilizar dessa técnica para criar uma abertura de três porquinhos, com um áudio da narrativa e uma imagem de uns desenhos, como mostra a imagem abaixo:

       Com essa imagem, vamos recorta-las no photoshop, parecendo como se fossem recortes de criança, deixando um pouco de espaçamento branco nas bordas. Assim a animação vai ficar com cara meio de stopmotion.

             Logo apos isso, vamos pegar o áudio que vai se combinar com as imagens fazendo a animação. Som da animação.

          Com todas as ferramentas você já tem "a faca e o queijo na mão" e já pode fazer a animação com o flash e depois veja o resultado.      

              Então agora vamos ver como ficou o resultado final dessa animação com o vídeo logo abaixo:

     Bem dessa vez vamos brincar um pouco com arduíno, e juntamente nessa experiência vamos precisar dos seguintes componentes:

• Um Arduíno;
• Uma protoboard;
• Um resistor (90 ohm);
• Um led;
• Um controle remoto de infra-vermelho (IR);
• Um receptor de IR;
• Alguns fios.

arduino

controle remoto

sensor IR

protoboard

led

   Com esses componentes precisaremos montar todo o equipamento, para isso segue essa pequena ilustração logo abaixo como dica de montagem. 

esquema de conexão

    Nessa experiência faremos um jogo bem simples, onde você apertará um botão do controle, e na tela mostrará 4 quadrados, e a cada clique um dos quadrados acenderá como um toque de magica, porem quando apertado o mesmo botão novamente outro quadrado poderá acender no lugar do primeiro. Algo relativamente simples, porem foi muito trabalhosa.

        Agora vamos aos códigos tanto do processing quanto do arduíno.

Código do Processing

import cc.arduino.*;

import processing.serial.*;



//#define R1 FF28CF
//#define G2 FF10E7
//#define B3 FF7285
//#define Y4 FF08EF

Serial myPort;
int val;

//variáveis das cores
float r = 0;
float g = 0;
float b = 0;
boolean button = false;
boolean flashred = false;
boolean flashgreen = false;
boolean flashblue = false;
boolean flashyellow = false;
boolean redpress = false;
boolean greenpress = false;
boolean bluepress = false;
boolean yellowpress = false;

//variáveis do sorteio;


int R1 = 54;
int G2 = 50;
int B3 = 57;
int Y4 = 53;

//int R1 = 16724175;
//int G2 = 16718055;
//int B3 = 16743045;
//int Y4 = 16716015;
//int [] cor = { R1, G2, B3, Y4 };


//int [4] cor = { R1, G2, B3, Y4};

//int [] sequencia = new int [100];

//int rodada_atual = 0;

//int passo_atual = 0;

//int perdeu = false;

void setup(){

  size (700, 700);
  frameRate (120);
 //background
   
  //select port
  println(Serial.list());
 
  myPort = new Serial(this, Serial.list()[1], 9600);
  myPort.bufferUntil('\n');
  
  
  }


void draw(){
    
 println(val);
  
 
  //fundo
  background (r, g, b);
  fill(255,150,150);
  rect(0, 0, width/2, height/2);
  fill(150,255,150);
  rect(width/2, 0, width/2, height/2);
  fill(150,150,255);
  rect(0, height/2, width/2, height/2);
  fill(255,255,150);
  rect(width/2, height/2, width/2, height/2);
     
     
     //recebe os valores da serial e armazena na variável. Se ficar posicionado nessa parte do código, as cores apenas piscam.
   //if( myPort.available() > 0) {
  //val = myPort.read();
  //}
   //Compara o valor das variáveis

  if ( val == R1 ){
  flashred = true;
  redpress = true;
  }
  
  else if ( val == G2 ){
  flashgreen = true;
  greenpress = true;
  }
  
  else if ( val == B3 ){
  flashblue = true;
  bluepress = true;
  }
  
  else if ( val == Y4 ){
  flashyellow = true;
  yellowpress = true;
  }

  //muda a cor dos quadrados
if (flashgreen) {
    fill(0,255,0);
  rect(width/2, 0, width/2, height/2);
 
  flashgreen = false;
      }

else if (flashred) {
   fill(255,0,0);
  rect(0, 0, width/2, height/2);
   
  flashred = false;
   }

else if (flashblue) {
   fill(0,0,255);
  rect(0, height/2, width/2, height/2);
 
  flashblue = false;
     
}

else if (flashyellow) {
  
  fill(255,255,0);
  rect(width/2, height/2, width/2, height/2);
  
  flashyellow = false;
 }
}

void serialEvent (Serial myPort){
  
  //recebe os valores e armazena na variável. Se ficar nessa parte do código, pode ocorrer da cor só mudar quando um botão for pressionado, como também pode piscar uma cor e outra ficar fixa.
  
 if( myPort.available() > 0) {
  val = myPort.read();
  }
  
} 

Alguns detalhes do código do processing:

1. Linha 61. Ele começa a ler a porta serial do arduíno. Resumindo, ele se prepara para receber os dados que o arduíno vai mandar para ele;
2. Linha 93. Começa a fazer comparativos, para iniciar a piscar ou não se apertar o botão;
3. Linha 114. Muda a cor dos quadrados;
4. Linha 145. Recebendo os valores e armazenando para deixar aceso o quadrado ou não do joguinho.

Código do Arduíno

int RECV_PIN = 2;
IRrecv irrecv(RECV_PIN);
decode_results results;

void setup()
{
  Serial.begin(9600);
  irrecv.enableIRIn(); // Start the receiver
}

void loop() {
  if (irrecv.decode(&results)) {
    Serial.println(results.value, DEC);
    irrecv.resume(); // Receive the next value
  }
}

Detalhes do código arduíno

1.  Linha 5. Recebe os dados do botão apertado de decodifica para computar os valores referente ao botão do controle; 
2.  Linha 12. Inicia o recebimento de dados do receptor IR;
3.  Linha 17. Decodifica para decimal o código hexadecimal formado;
4.  Linha 18. Deixa pronto para receber os próximos valores.

Uma breve conclusão do que esta acontecendo: 

    O processing ficou responsável por rodar o jogo em si, desde de criar os quadrado e acendê-los, agora o arduíno fica responsável por decodificar os códigos e mandar para o processing decodificado. 

 Um pequeno vídeo demonstração:

     Pegando uma imagem do patrick estrela em esboço para pode praticar um pouco. A que esta logo abaixo:

     Na qual iremos escolher umas das poses do patrick e ir para o photoshop escurecer a imagem, e cortar com  deixando apenas a desejada. Como na imagem abaixo:

       Com essa imagem vetorizei no illustrator e peguei o vetor e pus novamente no photoshop, para finalizar a imagem.

        No caso a imagem ficou da seguinte maneira na ordem:

    Esse sprite surgirá de um pequeno vídeo infantil da galinha pintadinha, a dos elefantinhos. Caso não conheça o video assista no link "Galinha pintadinha"
     usei o 5º elefante e não fiz o desenho dele detalhado, apenas representei seu movimento principal em 8 sprites. Ficou assim, como mostra a figura abaixo:

      Para esse resultado usei o flash combinado com o photoshop.

    Vamos agora fazer uma reconstrução de imagem e colorir depois. Para isso vamos pegar uma imagem qualquer da internet para poder brincar.

    Bem eu peguei essa:

     Começando a tratar a imagem, algo bastante trabalhoso, que requer bastante atenção, e nessa imagem necessita bastante para o nariz.

       Depois de restaurar ela fica mais ou menos assim:

    

      Apos a restauração é hora para pintar a imagem, pintamos parte a parte. Existem vários métodos, porem eu preferi usar o "hue/saturation" para pintar. E ficou assim:

     Também chamada de Paralax é uma técnica muito usada em comerciais de televisão. A técnica consiste de vários modos, mas o paralax é feito de um modo bem simples, e vamos usar o modo de diminuir e aumentar a imagem, e também de mudar o posicionamento.
      Para isso vamos pegar duas imagens de ótima qualidade para poder distorcer sem perder qualidade gráfica. Procure uma para background, e outra para ser alguem ou algo que vai ficar no cenário mas mudando separado dele.
      Depois de pegue a imagem, abra o flash, e importe as imagens, depois de importadas no cenário tranforme-as em simbolos do tipo "movieclip" e faça as alterações que deseja. Após as alterações iniciais, mude para algum frame distante qualquer faça-o ter um "keyframe" mude novamente como deseja, e faça o "shape tween". 

       Veja como o meu ficou:

   Comece procurando uma imagem de plantações (folhas em geral) como essa por exemplo:

Com essa imagem você vai fazer um contorno de uma folha usando a caneta, e transforma em brush, mais ou menos assim:

    Com a mesma imagem de plantação você cria um texto e mescla o texto com a imagem deixando o texto como mascara da imagem.

     Depois altere as caracteristicas do brush para ficar aleatorio entre outras coisas ao seu desejo, e pinte nas bordas do texto que deseja (meu caso foi o nome Green). Após tudo isso coloque sombra para dar realismo na imagem, e tbm coloque alguns animais para deixar algo mais belo de se ver, mas tome cuidado com o que e quantos colocar para não deixar uma coisa forçada e poluido de enxergar (eu coloquei uma joaninha e uma flor).

     O resultado final foi esse logo abaixo: 

Green PACCE®

   Vetorizaremos novamente com o flash, mas dessa vez pegaremos uma imagem finalizada e dessa vez será o personagem de um desenho famoso (que eu não conheço, não assisto esse desenho) o Gir na sua roupa de cão e vamos pegar a imagem perdida pela internet, uma qualquer dele 

     Para tal fim vamos abrir o flash e importar a imagem acima e começar a fazer caminhos com a caneta por cima contornando. Separe as partes por camadas mais ou menos assim:

e depois de fazer pedaço a pedaço, vai ser a hora de colorir o boneco feito

ficando a copia dessa maneira:

Não esqueça de fazer a sombra dele, para dar um realismo maior.

  Bem vamos hoje vetorizar um carrinho antigo que eu possuo apenas o "concept art" dele.

Que no caso é essa belezura aí em cima

   Essa minha vetorização vai ser um pouco diferente pois eu usarei o flash para vetorizar. No caso é bem pratico, mas não é o convencional para se vetorizar.

    

    Para tal fim é bom criar no minimo 3 camadas para na hora que estiver desenhando os caminhos(paths) não se unam, ficando mais ou menos assim.

Depois de tudo o desenho final o carro ficará assim.

Que tal dar umas voltinhas nele agora.