Chapitre 21 — Coordonnées, Canvas et dessin 2D

Nivel: intermedio Duración estimada: 7 h Requisitos previos: capítulo 19 (Flutter acelerado, CustomPainter) y capítulo 20 (bucle de juego, Ticker, delta time) Lo que sabrás hacer al final: dibujar cualquier escena 2D a mano con Canvas y Paint, posicionarla al píxel en el sistema de coordenadas de la pantalla, transformarla (traslación, rotación, escala) y animarla con el dt del bucle de juego.

21.0 — Objetivos del capítulo

Al final de este capítulo serás capaz de:

• explicar por qué el eje Y de la pantalla está orientado hacia abajo, a diferencia del sistema de coordenadas matemático;
• situar el origen (0, 0) de una zona de dibujo y razonar en coordenadas locales;
• distinguir un píxel lógico de un píxel físico y utilizar devicePixelRatio;
• leer el tamaño de la zona de dibujo que se transmite a paint() y adaptarte a él;
• manipular Offset, Rect y Size, los tres tipos básicos de la geometría de Flutter;
• anticipar la diferencia entre Vector2 (Flame) y Offset (Flutter);
• escribir un CustomPainter limpio, con un shouldRepaint() correcto;
• configurar un objeto Paint: color, estilo, grosor del trazo;
• dibujar rectángulos, círculos, líneas, elipses, rectángulos redondeados, trazados y puntos;
• dibujar texto en un Canvas con TextPainter;
• construir colores en ARGB y aplicar transparencia;
• aplicar un degradado lineal o radial a una forma;
• explicar y aprovechar el orden de dibujo («algoritmo del pintor»);
• utilizar save() / restore() sin desequilibrar nunca la pila;
• aplicar translate(), rotate() y scale(), y entender por qué importa su orden;
• dibujar una forma alrededor de su centro en lugar de su esquina (noción de ancla);
• limitar el dibujo a una zona con clipRect();
• explicar el doble búfer y por qué la pantalla no parpadea;
• identificar lo que resulta costoso en paint() y evitarlo;
• dibujar una cuadrícula de mazmorra y un personaje íntegramente con formas geométricas;
• animar un dibujo con el dt del capítulo 20.