Capítulo 22 — Sprites, sprite sheets e animação

Nível: intermediário Duração estimada: 6 h Pré-requisitos: capítulo 19 (Flutter acelerado), capítulo 20 (game loop e delta time), capítulo 21 (coordenadas e desenho com Canvas) O que você saberá fazer ao final: carregar uma imagem, dividi-la em frames e exibir um personagem animado cuja velocidade de animação não depende do framerate — com ou sem arquivo de imagem no disco.

22.0 — Objetivos do capítulo

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

• explicar o que é um sprite e em que ele difere de uma forma desenhada à mão;
• escolher entre pixel art e ilustração, e tirar daí as consequências técnicas;
• explicar por que um sprite é um PNG e nunca um JPEG;
• encontrar sprites livres de direitos autorais e ler uma licença sem se enganar;
• declarar uma pasta assets/ no pubspec.yaml com a indentação correta;
• carregar uma imagem com rootBundle.load e decodeImageFromList;
• explicar por que esse carregamento é assíncrono e o que isso implica;
• pré-carregar todas as imagens antes de iniciar o game loop;
• desenhar uma imagem com canvas.drawImage();
• desenhar uma parte de uma imagem com canvas.drawImageRect();
• redimensionar um sprite sem deformá-lo;
• manter o pixel art perfeitamente nítido graças a FilterQuality.none;
• espelhar um sprite horizontalmente com scale(-1, 1);
• ler uma sprite sheet e calcular o Rect de origem de qualquer frame;
• converter um índice de frame em um par (linha, coluna);
• escrever uma classe SpriteSheet reutilizável;
• escrever uma classe de animação que avança com o delta time;
• gerenciar animações sem repetição (morte, ataque);
• organizar várias animações por personagem em uma máquina de estados;
• trocar de animação sem causar um salto visual;
• reconhecer e corrigir o texture bleeding;
• ler um atlas e seu arquivo de descrição;
• gerar você mesmo seus frames em código, sem baixar nenhum arquivo;
• criar um personagem animado que anda e para.