TFT_eSPI #02 - Imagem em camadas

Iniciando do artigo T-Display S3 com TFT_eSPI, iniciaremos uma série de artigos com a biblioteca TFT_eSPI, para fazermos animação e, a posteriori, jogos. Nesse artigo veremos como compor imagem em camadas, e espero conseguir explicar bem o conceito.

TFT_eSPI

A biblioteca TFT_eSPI é uma biblioteca para displays TFT, sendo provavelmente a melhor disponível. O que essa biblioteca faz é impressionante, mas se não usá-la adequadamente, os resultados podem não ser bons.

Se "manja dos ingleis", recomendo o canal do Volos, que é "de fato" um especialista. Tomarei alguns caminhos baseados nos vídeos dele, porque gosto de algumas das práticas, fora que os projetos dele são bastante elaborados - mas nem tudo é um pomposo tutorial por lá, então espere algumas "lixas mais grossas que as minhas".

Configuração inicial

Quando instalamos a biblioteca TFT_eSPI, ela não está pronta para uso. Precisamos entrar no diretório Arduino/libraries e dentro do diretório TFT_eSPI haverá um arquivo chamado User_setup.h. Esse arquivo precisa ser editado e os parâmetros relacionados a seu display precisam ser descomentados. Se você é iniciante, "descomentar" um código significa que é necessário tirar o caracter que define se uma linha é código ou se é um texto:

//isso é um comentário em C
/*
esse é um comentário multi-linha.
Quando terminar, fecha-se.
*/

void setup(){
    //int j += 1;
    int j += 2;
}

No exemplo acima, o "j += 1" foi comentado e substituído pelo "int j += 2".

Na biblioteca TFT_eSPI os códigos que servirão como parâmetros de configuração estão comentados. Para que tenham efeito, remova os comentários e acerte os pinos conforme sua placa.

T-Display S3

Porém, os tutoriais sobre a biblioteca farão uso do T-Display S3 da LilyGo, que você encontra na CurtoCircuito. Meu ilustre, essa é a melhor placa e o melhor ESP32 que eu já peguei nas mãos! O display é um ST7789, mas com barramento paralelo de 8 bits! Oito canais de dados! Logicamente, isso a torna significativamente mais rápida do que qualquer outra placa com ST7789 p que é um display RGB565. E não se engane, achando que todos os pinos foram gastos com o display: O S3 tem um monte de GPIOs disponíveis!

Para facilitar bastante, o melhor a se fazer é utilizar a biblioteca TFT_eSPI já configurada pela LilyGo. Eu fiz um clone do repositório, porque quando pego algo que funciona, procuro manter uma cópia funcional, caso atualizações tragam bugs. Para que eu não escreva tudo novamente, o procedimento para instalar a biblioteca configurada pela LilyGo está nesse artigo. É fácil, só não quero ficar repetindo texto. Quero evitar a fadiga.

EasyMaker - prepare suas imagens

Após ler o artigo relacionado à instalação da biblioteca, dê uma olhada nesse vídeo tutorial 01. Nele, mostro como é simples e rápido utilizar o EasyMaker para preparar uma imagem para qualquer display. O vídeo tem 2:55, é rápido "mesmo".

O EasyMaker só está disponível para Windows no momento, mas prometo que em breve compilarei para Linux também. O que está atrasando é a preguiça de fazer o instalador, porque o processo é diferente do Windows.

Imagem em camadas

Vou minimizar as informações, mas no vídeo estará claro os efeitos de cada composição. Então, o mais importante aqui acredito que seja explicar o conceito.

Vamos pensar que o display deva exibir uma imagem. Posteriormente, exibimos um outro objeto sobre a imagem de fundo. Para o display serão duas operações, independente do tamanho da imagem A e imagem B. O display tem capacidade para muito mais do que isso, porém, desse modo parecerá um "flick", porque mal uma imagem é carregada, a outra é carregada em cima, daí a anterior novamente e assim sucessivamente. Então, o ideal é que quando formos exibir uma imagem, que seja uma só. Mas, como então faremos uma animação no display? - Usando imagem em camadas!

A biblioteca oferece um recurso que compõe uma imagem em camadas, cuja técnica é chamada "sprite". É como pegar uma imagem e colar sobre a outra, formando apenas uma image. Na hora de exibir, é como se estivéssemos colocando apenas 1 imagem no display, e assim a atualização fica consistente, além de mais leve.

Utilizando o mesmo código do vídeo anterior, vamos ver agora uma animação utilizando sprites.

#include "Arduino.h"
#include "TFT_eSPI.h" /* Please use the TFT library provided in the library. */
#include "Wire.h"
#include "pin_config.h"
#include "img2dsp.h"
#include "emoji.h"

//Instância do TFT
TFT_eSPI tft = TFT_eSPI();

//Criando sprites, que serão aplicados na instância do TFT
TFT_eSprite emoji      = TFT_eSprite(&tft); //Aqui passamos o endereço (&) da instância
TFT_eSprite bg_sprite  = TFT_eSprite(&tft); //Aqui passamos o endereço (&) da instância
TFT_eSprite txt_sprite = TFT_eSprite(&tft); //Aqui passamos o endereço (&) da instância

int emoji_x_position = 30; //Uma posição inicial em X

void setup() {
  Serial.begin(115200);
  //inicia o objeto
  tft.init();
  //RGB para GBR, que é o formato utilizado
  tft.setSwapBytes(true); 
  tft.setRotation(0); //Usando EasyMaker, 0. Senão, 3

  //Criando uma área de sprite para o emoji
  emoji.createSprite(64,64); 
  //no vídeo explico porque está comentado
  //emoji.setSwapBytes(true);  

  //Agora criamos o sprite do background
  bg_sprite.createSprite(170,320);
  ////RGB para GBR, que é o formato utilizado
  bg_sprite.setSwapBytes(true);
  //Exibe a imagem da maneira tradicional. Ok, quando não tiver animação
  tft.pushImage(0,0,170,320,img2display); 

  //Coloca a imagem no sprite
  emoji.pushImage(0,0,64,64,emoji_img); 
  //Exibe a imagem, removendo a cor preta, dando transparência
  emoji.pushSprite(40,40,TFT_BLACK); 
}

void shiftEmoji(){
  //invés de colocar a imagem normal, usamos o sprite agora
  //tft.pushImage(0,0,170,320,img2display);
  //Usando EasyMaker, é ALTURA x LARGURA
  bg_sprite.pushImage(0,0,170,320,img2display);

  //Coloca o emoji no sprite
  emoji.pushImage(0,0,64,64,emoji_img);
  //"Cola" o emoji na imagem de fundo
  emoji.pushToSprite(&bg_sprite, 40, emoji_x_position, TFT_BLACK);

  bg_sprite.pushSprite(0,0); //Agora exibe a imagem de fundo, com o emoji colado
  //movimenta o eixo X, que será alterado no próximo loop
  emoji_x_position = emoji_x_position > 300 ? -100 : emoji_x_position+1;
}

void loop(){
  shiftEmoji();
}

A imagem de fundo está no arquivo img2dsp.h, onde colei o array gerado no EasyMaker. O emoji está no arquivo emoji.h, também preparado no EasyMaker. Os arquivos devemos criar juntamente com o sketch.

Obviamente não é possível visualizar os efeitos apenas lendo o artigo e o código, mas basta acompanhar no canal @dobitaobyte no youtube. Se não é inscrito, inscreva-se e clique no sininho para receber notificações. Devo publicar o vídeo com um certo atraso, pois estou em meio a diversos eventos no momento.

O programa EasyMaker é gratuito e criei para a comunidade maker, para facilitar e agilizar o processo de geração de imagens que, confesso, eu não utilizava por preguiça. E a preguiça me motivou a fazer o programa. Espero que gostem e sugiram implementações.

Inscreva-se no nosso canal Manual do Maker no YouTube.

Também estamos no Instagram.