Capítulo 21 — Coordenadas, Canvas e desenho 2D

Nível: intermediário Duração estimada: 7 h Pré-requisitos: capítulo 19 (Flutter acelerado, CustomPainter) e capítulo 20 (game loop, Ticker, delta time) O que você saberá fazer ao final: desenhar qualquer cena 2D à mão com Canvas e Paint, posicioná-la com precisão de pixel no sistema de coordenadas da tela, transformá-la (translação, rotação, escala) e animá-la com o dt do game loop.

21.0 — Objetivos do capítulo

Ao final deste capítulo, você será capaz de:

• explicar por que o eixo Y da tela é orientado para baixo, ao contrário do plano cartesiano matemático;
• situar a origem (0, 0) de uma área de desenho e raciocinar em coordenadas locais;
• distinguir um pixel lógico de um pixel físico e usar devicePixelRatio;
• ler o tamanho da área de desenho passado para paint() e se adaptar a ele;
• manipular Offset, Rect e Size, os três tipos básicos da geometria do Flutter;
• antecipar a diferença entre Vector2 (Flame) e Offset (Flutter);
• escrever um CustomPainter limpo, com um shouldRepaint() correto;
• configurar um objeto Paint: cor, estilo, espessura do traço;
• desenhar retângulos, círculos, linhas, elipses, retângulos arredondados, caminhos e pontos;
• desenhar texto em um Canvas com TextPainter;
• construir cores em ARGB e aplicar transparência;
• aplicar um gradiente linear ou radial a uma forma;
• explicar e explorar a ordem de desenho («algoritmo do pintor»);
• usar save() / restore() sem nunca desequilibrar a pilha;
• aplicar translate(), rotate() e scale(), e entender por que a ordem importa;
• desenhar uma forma em torno do seu centro, e não do seu canto (noção de âncora);
• limitar o desenho a uma área com clipRect();
• explicar o double buffering e por que a tela não pisca;
• identificar o que é caro em paint() e evitar;
• desenhar uma grade de masmorra e um personagem inteiramente com formas geométricas;
• animar um desenho com o dt do capítulo 20.