Como lidar com folhas de sprite com dimensões de sprite não uniformes?


14

Para uma planilha com dimensões de sprite não uniformes , como posso obter os retângulos delimitadores cada sprite individual (por exemplo, as caixas azuis na imagem a seguir / apenas alguns exemplos)?

O que eu gostaria de determinar são: offset_x, offset_y, width, height

insira a descrição da imagem aqui

Até agora, usei apenas planilhas em que todos os sprites têm dimensões idênticas . Nesse caso, basta especificar o deslocamento x e y para obter um sprite específico. No entanto, para planilhas de dimensões não uniformes, isso não funciona.

EDIT: Depois de ler os comentários e as respostas, reformulei minha pergunta para torná-la mais abrangente. o processo real de usar uma planilha em um jogo. Anteriormente, a pergunta continha os pontos por que as pessoas produzem planilhas de dimensões não uniformes e como eu posso lidar com isso.


1
Parece-me que todos eles têm tamanhos idênticos, o espaço que não está sendo preenchido por cor é apenas pixels com o alfa definido como zero.
Derek

Respostas:


8

A maioria das folhas de sprite de dimensões não idênticas geralmente possui algum tipo de metadado com a localização da âncora do sprite. Existem muitas ferramentas que fazem coisas como remover pixels alfa completos e fornecer os dados necessários para que esses dados não sejam gerados manualmente.

Se você não possui esses metadados, é necessário que você mesmo os crie. A maneira mais precisa é a que você disse na sua pergunta, que é apenas fazê-lo manualmente. Pode demorar um pouco, mas provavelmente é mais rápido do que fazer novos sprites.


Embora as abordagens baseadas na detecção automática tenham seus usos, na prática elas são complicadas e propensas a erros. Você já precisa de metadados para a origem do Sprite (seus sprites fazer ter uma origem, certo?), Para que os dados extra é quase demasiado de um fardo. O artista sempre deve saber melhor que seu aplicativo qual é o tamanho de sprites individuais.
Steven Stadnicki

+1. O fornecimento de metadados com os sprites é garantido para resolvê-lo de maneira saudável .
Bartek Banachewicz

5

Você pode executar uma análise na imagem para localizar os retângulos delimitadores de cada sprite, classificá-los (talvez aumentando X mínimo e depois Y) e terá um conjunto de regiões delimitadoras que correspondem aos quadros da folha de sprite.

Como esse processo pode ser relativamente caro, você provavelmente desejará fazer isso offline, por exemplo, como parte do processo de compilação do seu jogo. Em seguida, você pode serializar as informações da região delimitadora em um arquivo armazenado com a imagem da folha de sprite correspondente. No tempo de execução, você carrega a imagem e o arquivo de definição de limite e possui as informações necessárias para acessar cada sprite individual.

Isso é mais fácil dizer do que fazer, no entanto. Essencialmente, você desejará fazer a detecção de recursos e especificamente os blob, que são problemas de visão de máquina. Você também pode limitar a imagem (para preto e branco) e usar uma técnica de detecção de borda . A matemática relevante por trás dessas técnicas é explicada muito melhor nesses links do que eu poderia e, no caso de você não querer implementar essa matemática, existem algumas bibliotecas disponíveis que podem ajudá-lo. O seguinte conjunto de links parecia o mais promissor para mim:


1
+1. Concordo que vai exigir algumas habilidades de percepção do computador / manipulação de imagem para encontrar os limites corretos do sprite. Às vezes pode até ser impossível, por exemplo, se você olhar a tartaruga para descascar a animação. Vai ser difícil determinar a posição correta para aquela em relação aos outros quadros de animação. E quanto ao porquê : é mais provável por causa do uso ideal do espaço da textura. E, geralmente, um arquivo com as coordenadas deve ser fornecido com uma planilha, mas se você simplesmente o pegar na pesquisa de imagens do Google, poderá não ter essas informações.
bummzack

Você levanta um bom argumento: minha resposta não aborda a questão das origens dos sprites; apenas levaria a encontrar retângulos delimitadores e, para uma folha com sprites não uniformes, saber a origem de cada quadro é bastante importante. Isso seria difícil de fazer automaticamente, a menos que você fizesse algumas suposições (provavelmente específicas do domínio), por exemplo, que a origem sempre seria (largura / 2, máximo Y) ou algo assim.

4

Fiz minha própria ferramenta para esse tipo de planilha não uniforme. Permite editar deslocamentos, etc. Aqui está uma captura de tela para você ter uma ideia:

insira a descrição da imagem aqui


Parece que você criou uma planilha uniforme contendo apenas uma animação da não uniforme? Ou estou interpretando mal isso?
Ben

não, abro uma planilha não uniforme e desenho um retângulo ao redor dos sprites (que diminui automaticamente para o tamanho correto). Uma vez eu criei uma animação repetindo que eu posso reproduzir cada animação e ajustar o deslocamento de acordo com minhas necessidades.
Anonymouse

Parece uma ferramenta muito elegante que você criou lá. Se importa de compartilhar a ferramenta?
precisa saber é o seguinte

@eckyputrady, desculpe, mas está longe de ser completo, mas eu recomendo outra ferramenta (que basicamente me inspirou). Você pode encontrá-lo aqui: colourclash.com/sprite_buddy/sprite_buddy.html
Anonymouse

0

Confira o texturepacker

http://www.texturepacker.com/

Ele gera um arquivo como este (dependendo das configurações preferidas)

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

Usando esses dados, você pode facilmente pegar os retângulos separados da imagem.


Esta não é uma tecnologia que usar pergunta. Basta responder com um link para uma ferramenta e um exemplo de sua saída não é suficiente na minha opinião.
MichaelHouse

-1

spritebuddy.com funcionou muito bem para mim. Não foi possível encontrar nenhuma ajuda no próprio site, mas esta postagem dos Grupos do Google explica muito bem. Adivinha automaticamente os limites dos seus sprites, permite ajustá-los e organiza-os em sequências de animação. Em seguida, ele lança um arquivo de metadados para tudo isso em JSON ou XML. Então tudo o que você precisa fazer é analisar esse arquivo de dados no seu jogo para obter os retângulos delimitadores corretos.


1
Esta não é uma tecnologia que usar pergunta. Além disso, essa ferramenta já foi sugerida em um dos comentários.
MichaelHouse

Atualizei minha resposta, mas discordo que ela não responde à pergunta do OP: "O que eu gostaria de determinar são: offset_x, offset_y, largura, altura". Se isso deve ou não ocorrer no tempo de execução do jogo (o que seria extremamente insatisfatório) ou antes, não está especificado. Quanto ao "EDIT: [...] reformulei minha pergunta para torná-la mais inclusiva no processo real de usar uma planilha em um jogo", este é o meu processo. Gero o arquivo JSON apropriado usando o spritebuddy e o analiso no meu jogo para obter os dados necessários.
CletusW

1
@CletusW: boas respostas explicariam por que essa ferramenta funciona tão bem para o seu processo, o que faz e como isso ajuda etc. Eu deveria poder ler sua resposta e saber como selecionar uma ferramenta ou escrever a minha. Se você criar um link para o seu exemplo favorito, isso é apenas um bônus, não a carne da resposta.
Sean Middleditch
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.