Game design - Utilizando Sprites

Postado: na M.Cassab
Estado: falta muito para as 17h30 ?
Escutando: Scorpions - Lady Starlight

Originalmente, esse conteúdo estava inserido no capítulo sobre Movimentando o personagem.

Na verdade, o conteúdo nem estava no site do Tony, eu inclui porque achei que era uma informação importante. Só que, na empolgação, a postagem acabou ficando muito comprida.

Como são dois assuntos diferentes, sendo que um nem está no material original, resolvi separar para facilitar as coisas.

No universo dos jogos, existe um conceito chamado Sprites.

Na vida real, sprites (não confunda com o refrigerante) são fenômenos que ocorrem durante tempestades e dificilmente podem ser vistos do solo, sendo mais observados no espaço. São uma espécie de chafariz de raios disparados por uma reação no topo das nuvens. São incrivelmente rápidos, quase não dá para ver. Na verdade, são como milhares de faiscas.

Os game designers se apropriaram desse conceito para criar um conjunto de imagens que, unidas formam ou dão a impressão de alguma coisa.

É exatamente o mesmo conceito dos Tiles que usamos para formar o cenário. Porém, normalmente um sprite é usado para gerar um efeito de movimento.

O grande segredo é que o movimento não existe, é uma ilusão. São imagens estáticas trocadas com muita velocidade, o suficiente para o olho humano não perceber (como os sprites), dando a impressão de movimento.

Como foi difícil para os meus alunos entenderem isso nas aulas de desenho animado...

Por exemplo, essa é a imagem do Mário parado, utilizada no jogo Super Mario Bros. para o Nintendo 8 bits (NES):


Quando o jogador movia o personagem, o videogame trocava essa imagem por outras três, só que tão rápido que nosso olho não percebia a troca. Na verdade, o personagem andando eram essas três imagens sendo trocadas:

     

Você pode ver outros sprites no site Videogame Sprites.

Conceito básico de animação:
Nossa visão possui uma falha de percepção chamada Persistência da visão. É um atraso do envio das informações captadas por nosso para o cérebro.

Isso faz com que a imagem permaneça na vista por uma fração de segundo, o suficiente para se misturar com outra imagem.

Os primeiros cineastas descobriram isso e descobriram que é possível criar uma ilusão de movimento trocando 16 imagens por segundo. Foi a partir desse estudo que o cinema e a animação evoluíram, pois os dois utilizam o mesmo conceito.

No videogame funciona da mesma forma, a diferença é isso ocorre de uma forma mais simplificada... se bem que hoje o processo é quase o mesmo da animação moderna.

Bem, antigamente, eram utilizadas poucas imagens e isso funcionava muito bem. Tudo depende das restrições do console (que não é nosso caso) ou do tipo de jogo.

Jogos de RPG e estratégia demandam de poucas imagens, pois a diversão está mais ligada a história do que ao visual. Porém, jogos como os de lugar precisam de uma infinidade de sprites pois o impacto visual é um fator muito importante para a diversão.

A evolução dos consoles permitiram que os designers abusassem mais da criação, criando mais sprites para as animações. Além de deixar o jogo visualmente mais bonito, a possibilidade de interação entre o personagem e o contexto da cena é muito maior.

Ao criarmos um PC, por exemplo, precisamos saber quais serão as ações dele: parado, andando, correndo, pulando, caindo, rastejando, pegando fogo, explodindo, ou seja, todos os movimentos que poderão ser realizados pelo jogador.

Depois que definimos as ações, criamos toda a seqüência da animação, imagem por imagem, para compor os sprites que serão utilizados no jogo. Veja esses sprites do Link:


Note que há três blocos de desenho: movimentação sem nada nas mãos; movimentação segurando a espada; movimentação segurando o escudo.

Sendo que em uma linha ele está andando para a direita, na outra está andando para a esquerda, na outra está correndo para a direita, na outra está correndo para a esquerda.

Note que são várias imagens, uma para cada estado de movimento. As imagens de movimento constante são as piores, pois são muito sutis. Dão um trabalho danado para fazer.

Quando falamos de jogos de verdade, é necessário criar uma infinidade de sprites para cada objeto ou personagem.

Só para ter uma pequena idéia, veja esse página com os sprites da Eri, personagem do jogo Metal Slug 1, lançado para o fliperama pela SNK. Acredite, há uns bem piores do que este.

Em alguns casos, usamos a mesma imagem lateral para ambos os lados (direito e esquerdo) do PC. Isso funciona muito bem em jogos do Mário, Sonic, Megaman ou qualquer outro que permita espelhar a imagem de perfil.

Mas alguns personagens podem apresentar diferenças em cada lado, seja uma arma em uma das mãos ou um detalhe na roupa. Quando criar um personagem, pense nisso e tente imaginar quantos sprites serão necessários.

Vamos pegar o Mário como exemplo. No seu primeiro jogo, ele podia:

• ficar parado (sim, isso conta) - 1 imagem


• andar - 3 imagens


• correr - 2 imagens


• pular - 2 imagens


• lançar bolas de fogo - 1 imagem


• dar piruetas - 3 imagens


• nadar - 2 imagens


• escalar e subir - 2 imagens


• entrar em desespero ao morrer - 2 imagens

Porém, há um detalhe, sua imagem mudava quando ele pegava um Cogumelo (crescia), uma Flor de Fogo (mudava de cor) ou uma Estrela do Poder (ficava piscando). Isso quer dizer que são seqüências de imagens diferentes das outras.

Repare que, para um jogo simples, será preciso de um monte de imagem, 72 imagens no total só para o Mário... Nem parece que ele fazia tudo isso. Claro, estou fazendo uma conta por cima.

O Flash é um programa voltado para animação e isso facilita muito a vida de quem faz jogos com ele, pois temos os movieClips para agrupar os sprites.

Comece a "brincadeira" pensando na jogabilidade e questione-se: "o que meu personagem fará no jogo?"

Faça uma lista com as possibilidades. Depois, tente desenhar pelo menos, duas imagens para cada ação. Isso ajudará a se acostumar com a idéia de animação.

Já que citei o Mário, vamos a ele mesmo. Aproveite que coloquei as imagens aqui mesmo e as copie em algum lugar. Vamos utilizá-las para nos divertir um pouco no Flash.

Jogue a imagem dele parado no palco e transforme em um movieClip. Dê o nome de mario_parado e deixe o registro no centro.

Lá em cima, tínhamos três imagens utilizadas para ele andar. Crie um outro movieClip com essas três imagens. Dê o nome de mario_andando e deixe o registro no centro.

Porém, note que as imagens tem alturas diferentes. Para ficar certo, todas as imagens devem ser alinhadas pela base para parecer que ele realmente está andando.

Agora, cada imagem deve ter dois frames, logo, sua timeline terá 3 key frames, sendo 6 frames no total.

Em sua biblioteca, você terá dois movieClips, cada um para uma ação. Se quiser, deixe os dois movieClips e teste o SWF para ver como ficou.

É assim que as coisas começam. No final do processo, você terá movieClip para cada ação, que agruparam os sprites.

Só para lembrar, os sprites não são só usados para os PCs. POdem ser aplicados para qualquer coisa que possua uma animação.

Esse método é muito bom para se trabalhar com imagens. Porém, o Flash é um programa vetorial e permite criar animações com interpolação.

Independente do estilo adotado, o conceito é o mesmo, pois necessitará dos key frames contendo as imagens principais.

O vetor tem uma vantagem de "ocupar menos espaço" na memória, se você não utilizar degrades. Além disso, ele permite criar animações mais elaboradas.

Mas no fim das contas, usar vetor ou imagem acaba dando na mesma. O importante é utilizar o método que mais se adequá ao estilo do game designer.

Não há uma conta exata que nos ajudará a calcular isso. Esse é o tipo de coisa chata que só aprendemos na prática.

Comece aos poucos, pegando alguns sprites de jogos e recortando as imagens para montar os movieClips. Brinque um pouco com seus personagens preferidos.

Quanto mais treinar, mais rápido entenderá como tudo funciona.

Se quiser, volte ao índice para ver a lista completa do conteúdo.

Próximo assunto:
Movimentando o personagem