Sprites para Metroidvanias
Um Metroidvania é um jogo de plataforma com um mapa para explorar e um herói que ganha novos movimentos. Isso significa uma longa lista de ações num só personagem e muitos inimigos que precisam parecer de um mesmo mundo.
| Vista | lateral |
|---|---|
| Tamanho | Personagens de 48–64 px |
| Lados | 1 (espelhado) |
Projeto de exemplo
Personagem de plataforma, de lado: o projeto .pixor e seu modelo da biblioteca (CC0). A folha à esquerda é o que ele renderiza.
Do que um Metroidvania precisa
O herói carrega o jogo. Além de parado, caminhada, corrida, pulo, queda, ataque, dano e morte, um Metroidvania acrescenta movimentos com o tempo: um dash, um deslize na parede, um pulo duplo, um golpe no chão, um agachamento. Cada um é mais uma ação no mesmo personagem.
Depois vêm os inimigos. Cada área traz novos, muitas vezes uma dúzia por zona, além dos chefes. Some portas, alavancas, pontos de salvamento, paredes quebráveis, armadilhas e coletáveis, e a lista de sprites fica longa. Manter tudo isso num só estilo é a maior parte do trabalho.
A câmera
Use uma vista lateral sem inclinação. Uma câmera virada para a direita (Leste) basta para a maioria dos personagens; a engine espelha o sprite para a esquerda. Personagens que não são simétricos podem ter também uma câmera Oeste.
Com 48 a 64 px, o herói tem espaço para poses claras, o que importa quando o jogador precisa distinguir um dash de um pulo em poucos quadros. Chefes podem ser duas ou três vezes mais altos. Tamanhos de sprite passa pelos prós e contras.
Escala e pivô
Mantenha uma só escala de pixels por metro no projeto inteiro. Um chefe é grande porque o modelo dele é grande, e um morcego ao lado dele continua pequeno. O Pixor mantém uma escala por projeto, então isso vale mesmo quando os sprites são feitos com meses de diferença.
Coloque o pivô nos pés. O Pixor fixa o pivô num pixel, então aterrissar, agachar e atacar ficam todos no chão. Renderize os movimentos no lugar e deixe o jogo mover o personagem; se um clipe tiver root motion, mantenha-o no lugar no Inspetor da ação.
Animação
O parado, a caminhada, a corrida, o pulo, o ataque, o dano e a morte da biblioteca de movimentos funcionam em qualquer esqueleto humanoide e cobrem o conjunto básico. Movimentos novos vêm dos seus próprios clipes: glTF ou FBX, com clipes em arquivos separados se quiser. Clipes com o nome do modelo (hero@dash.glb) são encontrados automaticamente; os outros são adicionados com “Clipes de um arquivo…”.
Movimentos rápidos precisam de poucos quadros. No grafo de Asset, o nó Sprites pode manter os extremos das poses (Quadros mantidos), e um nó Reter segura um quadro por mais tempo, como o topo de um pulo. Veja timing de animação.
Paleta
Cada área do mapa costuma ter o seu próprio clima: uma caverna fria, uma forja em chamas, uma biblioteca submersa. Uma paleta por área as mantém distintas, enquanto o herói continua igual. As variantes de paleta podem gravar a mesma folha em outra paleta, ou com um flash de dano. O Pixor tem sete paletas embutidas e lê arquivos .hex e .gpl. Veja paletas limitadas.
Assets grátis da biblioteca que combinam
- Inimigos: esqueleto, morcego, fantasma, aranha e slime.
- Peças de fase: porta, alavanca, spike-trap, wall-torch e estátua.
- Melhorias e coletáveis: power-orb, coração, chave e orb-pedestal.
Configurando no Pixor
- Importe o seu herói ou abra o exemplo de jogo de plataforma.
- Na etapa Cena, clique na câmera “Sul” na Estrutura e defina “Jogo” como um jogo de plataforma.
- Ajuste o Giro dela para a câmera ver o lado direito (Leste). Defina Largura e Altura para 48 a 64 px.
- Na etapa Ação, escolha todas as ações de que o herói precisa.
- Na etapa Estilo, escolha um visual e use o mesmo visual para todos os inimigos.
- Exporte. Para o Godot, a saída SpriteFrames cria uma animação por ação; veja Godot e exportações.
Perguntas
Por que 48 a 64 px em vez de 32?
Um herói de Metroidvania ganha muitos movimentos, e cada um precisa de uma pose legível. A altura extra dá espaço para uma arma, uma capa ou um rastro de dash. Chefes podem ser bem maiores na mesma escala.
Preciso de um lado Oeste?
Normalmente não. Renderize o Leste e deixe a engine espelhar o sprite. Adicione uma câmera Oeste se o herói segura algo numa mão só e o espelhamento fica errado.
Como adiciono um movimento novo no fim do desenvolvimento?
Adicione o clipe ao modelo, escolha-o na etapa Ação e exporte de novo. O projeto gera os mesmos pixels para as ações antigas, então os novos quadros combinam com o resto da folha.
Leia a seguir
Experimente no seu próprio modelo, grátis no navegador, ou adquira a versão completa.
Testar no navegador Comprar o Pixor