Crie Jogos 2D com Tiniest2D
Sprites e Animação
Lesson 3 of 11 • 10 XP
Keep your place in this quest
Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.
Criando Ativos
Ativos são as peças que seu jogo usa: imagens, cenas, sons e objetos. No Tiniest2D, você cria a maior parte dos ativos escrevendo uma variável no script. O editor percebe construtores como Sprite() e permite que você edite o ativo visualmente.

Sprites
Sprites são imagens em pixel-art. Elas são usadas para personagens, paredes, moedas, botões, balas, fundos e qualquer outra coisa que precise ser desenhada. Um sprite pode ser uma única imagem ou uma pequena animação feita de múltiplos quadros.
Para criar um sprite, declare uma variável com o construtor Sprite():
var playerSprite = Sprite(16, 16)
var coin = Sprite(8, 8)
var wall = Sprite(32, 32)
Os números são largura e altura em pixels. Após salvar, você verá o nome da variável envolto em uma caixa escura - isso indica que é um ativo sprite.
Para editar um sprite:
- Ctrl+Click no nome da variável do sprite
- O Editor de Sprite abre
Controles do Editor de Sprite

O Editor de Sprite é onde você desenha a imagem pixel por pixel. Se você é novo em pixel art, comece pequeno: sprites de 8x8 ou 16x16 são mais fáceis de ler, editar e animar.
| Controle | Ação |
|---|---|
| Clique esquerdo | Pintar pixel com a cor atual |
| Clique direito | Apagar pixel (transparente) |
| Arrastar do meio do mouse | Panorâmica da visualização |
| Roda do mouse | Zoom in/out |
| Paleta de cores | Clique para selecionar a cor |
| Largura/Altura +/- | Redimensionar o sprite |
| Alternar Colisor | Ativar/desativar limites de colisão |
| Offsets do Colisor | Ajustar inserções de colisão L/T/R/B |
| Mostrar Colisor | Pré-visualizar limites de colisão |
| Espaço | Alternar pré-visualização de animação |
| Setas Esquerda/Direita | Navegar entre os quadros |
| Escape | Retornar ao editor de script |
Painel de Animação
Animação é feita mostrando vários quadros de sprite rapidamente em sequência. Por exemplo, um personagem andando pode ter um quadro com o pé esquerdo à frente e outro com o pé direito à frente.

O painel de Animação (na barra lateral esquerda) permite que você gerencie os quadros do sprite:
| Controle | Ação |
|---|---|
| FPS +/- | Ajustar a velocidade da animação (quadros por segundo) |
| Adicionar Quadro | Adicionar um novo quadro em branco no final |
| Copiar Quadro | Duplicar o quadro atual (inserido após o atual) |
| Deletar Quadro | Deletar o quadro atual (apenas se houver mais de 1 quadro) |
| Tira de Quadro | Clique nas miniaturas na parte inferior para selecionar quadros |
Quando um sprite tem múltiplos quadros, os objetos que o utilizam automaticamente animarão em tempo de execução. Cada objeto rastreia seu próprio estado de animação de forma independente.