Animator

Um editor de animação de sprites para criar animações quadro a quadro, movimento baseado em tween e tracks de eventos.

Visão geral

O animator permite construir animações de sprites para personagens, objetos e efeitos do jogo. O editor é organizado em quatro áreas:

Barra lateral esquerda

Lista de animações e spritesheets

Visualização

Visualização ao vivo da animação selecionada

Timeline

Tracks e keyframes em uma régua de tempo

Propriedades

Edite a animação, track ou keyframe selecionado

Todas as alterações são salvas automaticamente com suporte completo a desfazer/refazer (Cmd/Ctrl+Z / Cmd/Ctrl+Shift+Z).

Animações

Uma animação é uma sequência nomeada contendo uma ou mais tracks. Cada uma tem sua própria duração, configuração de loop e timeline.

Crie uma clicando em + no topo da lista de animações. Selecione uma animação para vê-la na visualização e suas tracks na timeline.

Configuração	Descrição
Nome	Renomeie no painel de propriedades.
Duração	Comprimento total em segundos, definido pela barra de ferramentas.
Loop	Alterne a repetição com o botão de loop na barra de ferramentas.
Ajustar à grade	Alinhe keyframes a um intervalo regular.
Tamanho da grade	Intervalo de ajuste em segundos (visível quando o ajuste está ativado).

Duplique uma animação com o ícone de cópia. Exclua com Delete.

Tracks

Tracks são camadas dentro de uma animação. Cada uma contém keyframes de um tipo específico. Existem três tipos de track:

Sprite

Exibe um quadro de sprite de um spritesheet em cada keyframe. Use para animação quadro a quadro.

Tween

Interpola entre keyframes ao longo de uma duração com uma função de easing. Use para movimento suave, fades ou escala.

Evento

Dispara um evento nomeado em um momento específico. Use para acionar sons, efeitos ou lógica de jogo.

Adicione uma track com + Track na barra de ferramentas da timeline e escolha o tipo. Tracks podem ser renomeadas nas propriedades, reordenadas arrastando e excluídas com Delete.

Keyframes

Keyframes definem o que acontece em um momento específico em uma track. Clique duas vezes em uma faixa de track para adicionar um, ou use Próximo Quadro para adicionar no próximo passo da grade com um índice de quadro incrementado.

Clique para selecionar, Shift+clique para seleção múltipla, Cmd+A para selecionar todos. Arraste para reposicionar. Redimensione keyframes de tween arrastando sua borda.

Propriedades do keyframe de sprite

Propriedade	Descrição
Tempo	Posição em segundos.
Sprite	Clique para abrir o seletor de quadros e escolher um quadro de um spritesheet.
Quadro X / Y	Coluna e linha do quadro selecionado na grade do spritesheet.
Deslocamento X / Y	Deslocamento em pixels para ajuste fino da posição.
Espelhar	Espelhe horizontalmente, verticalmente ou ambos.

Propriedades do keyframe de tween

Propriedade	Descrição
Tempo	Posição em segundos.
Duração	Comprimento em segundos.
Easing	Curva de interpolação: Linear, Step, Ease In/Out/In-Out, Bounce In/Out/In-Out, Exponential In/Out/In-Out, Parabolic.

Spritesheets

Um spritesheet é uma imagem com múltiplos quadros de animação em uma grade. Faça upload de spritesheets e referencie quadros individuais dos keyframes de track de sprite.

Mude para a aba de spritesheets na barra lateral esquerda e clique em + para fazer upload. Clique em um nome para abrir o editor onde você pode:

•Definir largura e altura do tile para definir a grade de quadros
•Visualizar dimensões da imagem, tamanho da grade e contagem de quadros
•Substituir a imagem ou excluir o spritesheet

Seletor de quadros

Ao editar um keyframe de sprite, clique em Sprite nas propriedades para abrir o seletor de quadros. Ele mostra spritesheets à esquerda e uma grade de quadros clicável à direita. Clique em qualquer quadro para atribuí-lo. Com múltiplos keyframes selecionados, o seletor permite alterar o spritesheet para todos de uma vez.

Visualização e reprodução

O painel de visualização mostra uma renderização ao vivo da animação selecionada na posição atual do cursor de reprodução.

Controle	Descrição
Reproduzir / Pausar	Iniciar ou pausar. Também Space.
Parar	Parar e redefinir para o início.
Avançar/retroceder	Mover um passo da grade (ou 0,01s se o ajuste estiver desativado).
Ir para o início	Ir para o tempo zero.

Com loop ativado, a reprodução reinicia no final. Com loop desativado, para automaticamente.

Atalhos de teclado

Atalho	Ação
`Space`	Reproduzir / pausar
`Delete`	Excluir keyframe, track ou animação selecionada
`Escape`	Desselecionar ou fechar modal
`Cmd/Ctrl+Z`	Desfazer
`Cmd/Ctrl+Shift+Z`	Refazer
`Cmd/Ctrl+A`	Selecionar todos os keyframes

Formato de exportação

Exportar um projeto produz um arquivo .zip contendo arquivos JSON de animação e imagens de spritesheet. Use estes arquivos para reproduzir animações em qualquer motor de jogo.

Estrutura do ZIP

project.zip ├── index.json # Manifesto ├── animations/ │ └── Walk.lostanim # Dados de animação por arquivo └── resources/ └── hero_sheet.png # Imagens de spritesheet

index.json (Manifesto)

O arquivo raiz que lista todos os arquivos de animação e recursos de spritesheet.

{ "name": "My Animations", "hash": "a1b2c3...", "animationFiles": [ { "name": "Hero", "path": "animations/Hero.lostanim" } ], "resources": [ { "id": "uuid", "name": "hero_sheet", "path": "resources/hero_sheet.png", "tileWidth": 32, "tileHeight": 32, "imageWidth": 256, "imageHeight": 256 } ] }

.lostanim (Arquivo de animação)

Cada arquivo contém uma ou mais animações com suas tracks e keyframes.

{ "name": "Hero", "animations": [ { "id": "uuid", "name": "Walk", "duration": 0.8, "loop": true, "snapToGrid": true, "gridSize": 100, "tracks": [...] } ] }

Campo	Descrição
duration	Comprimento total em segundos (float).
gridSize	Intervalo de ajuste em milissegundos.
tracks[].type	"sprite", "tween" ou "event".

Keyframe de sprite

{ "id": "uuid", "time": 0.0, "frame": { "x": 0, "y": 0 }, "offset": { "x": 0.0, "y": 0.0 }, "flipX": false, "flipY": false, "spritesheetId": "uuid", "anchors": { "hand": { "x": 10.5, "y": 20.3 } } }

Campo	Descrição
frame.x / y	Coordenadas da grade de tiles (coluna e linha no spritesheet).
spritesheetId	Referencia um id de recurso do index.json. Omitido quando nulo.
anchors	Pontos de âncora nomeados com posições {x, y}.

Keyframe de tween

{ "id": "uuid", "time": 0.2, "duration": 0.3, "easing": "EaseInOut", "anchors": { "hand": { "x": 15.0, "y": 25.0 } } }

Valores de easing válidos:

•Linear, Step, Parabolic
•EaseIn, EaseOut, EaseInOut
•BounceIn, BounceOut, BounceInOut
•ExponentialIn, ExponentialOut, ExponentialInOut

Keyframe de evento

{ "id": "uuid", "time": 0.5, "anchors": {} }

Keyframes de evento marcam um ponto no tempo. O nome da track serve como identificador do evento no seu motor de jogo.

Documentação