4 - Representando imagens no computador

Então, um dos seus maiores dilemas da vida será decidir em que tipo de gráfico você vai gerar o seu jogo…

Atualmente, a maioria dos profissionais escolhe o 3D. Isso acontece porque:

• Todo mundo faz em 3D;
• Os motores trabalham facilmente com 3D e, às vezes, o 2D é uma gambiarra feita em cima do 3D.

Quer dizer que o 2D vai morrer? Nunca! Até porque, mesmo em jogos com gráficos 3D, vários elementos são e sempre serão representados em 2D.

Mas voltando ao assunto: como podemos representar os gráficos no nosso jogo? O primeiro passo é entender como representamos os gráficos na nossa tela! Afinal, se for 2D ou 3D, a menos que você já esteja usando VR (realidade virtual, óculos rift e afins), seu monitor é puramente 2D! Uma tela, plana e achatada. E como os gráficos são representados nela?

Lá em matemática básica, você estudou um negócio chamado matriz, lembra? Ninguém avisou que era importante para você, né? Acontece jovem, acontece...

Pois bem, pense que sua tela é na verdade uma matriz de pequenos pontos coloridos que compõem as imagens vistas. Sério. E que cada pontinho colorido desse se chama pixel (termo originário de Picture Element). Logo, um pixel é o menor pontinho de sua tela que você consegue controlar (isto é, dar uma cor para ele). As imagens representadas dessa forma são chamadas de Raster ou mapa de bits!

Imagine qualquer imagem recortada em pedacinhos. Cada pedacinho representa uma parte da imagem e, normalmente, tem uma cor. Quando você junta esses pedacinhos, você compõe a imagem maior.

Quanto mais pedacinhos você puder utilizar para representar uma imagem, mais refinada ela fica. Sabe aquela história de resolução? 800x600, 640x480, 1920x1080? Isso seria o tamanho da sua tela em pixels! Ou seja:

800x600 = 800 pixels na horizontal com 600 pixels na vertical

1920x1080 = 1920 pixels na horizontal com 1080 na vertical

“E por que a imagem fica melhor quando eu tenho mais pixels para representá-la?” Imagine que você tem uma imagem bem colorida:

Agora vamos recortá-la usando quadrados grandes:

“Nossa, professor! Que feio, tu nem soube botar um grid na imagem…” Mas isso não importa, vamos continuar com o exemplo! Assumindo que nossa tela fosse assim, cada pixel só poderia ter uma cor! Então a imagem representada na resolução acima (12x7, por curiosidade) ficaria assim:

Eu sei, eu sei, não usei as mesmas cores. Estou tratando desse exemplo rapidamente, só para vocês entenderem bem a noção de pixel e de resolução. Então relevem e aceitem essas cores aproximadas, ok? Bom, dá para perceber que não ficou muito bonito, não dá nem para notar que é uma flor!

Agora vamos aumentar o número de quadradinhos no nosso grid:

Agora nosso grid é 22x12. Fazendo a mesma pintura do anterior, teríamos:

Ainda está estranha, mas a forma da imagem já começou a melhorar. Deu para entender por que usar mais pixels melhora a qualidade e reduz as distorções da imagem? Só por curiosidade, aqui está a imagem original dividida em grid. O tamanho dela é 1920x1080.

Esses quadrados são pequenos mesmo…

Essa imagem, retratada como um mapa de pixels, é utilizada para representar gráficos no computador, porque ela é fácil de trabalhar no que diz respeito ao âmbito computacional. Cada ponto da tela é mapeado para um ponto fixo que pode ser alterado facilmente por quem estiver manipulando a imagem. O problema dessa representação é que... cada ponto da imagem representa um ponto fixo. Logo, se você quiser aumentar ou diminuir a imagem, você não conseguirá manter a mesma qualidade.

Isso ocorre porque, quando você aumenta uma imagem pixelada, você está aumentando, também, o tamanho do pixel (ou criando novos pixels que não existiam), de modo a ressaltar ainda mais a aparência de “bloco” da imagem, bem lego-style. Se você diminui, está removendo pixels e pode eventualmente perder a representação de alguns detalhes da imagem. Uma solução para tanto seria criar várias imagens, uma para cada tamanho desejado. E, então, começar a pensar sobre o espaço: você precisa ter memória suficiente para carregar os mapas de imagens que rodarão na plataforma, seja ela videogame, celular ou computador.

Aí você deve estar pensando: “Mas tem coisas com as quais eu não posso deixar isso acontecer!”. Texto, por exemplo. Se o seu texto perder muito a qualidade da resolução, ele pode ficar ilegível! Figuras complexas seriam outro exemplo. À medida que as formas fossem manipuladas, elas perderiam as nuances dos detalhes e poderiam se tornar blocos irreconhecíveis! E agora, quem poderá nos resgatar?

O Chapolim Colorado! Quer dizer, Gráficos Vetoriais!

Gráficos vetoriais são gráficos definidos a partir de vetores! Ou seja, eles são definidos matematicamente, e não através de um mapa de pontos. Você diz, por exemplo, que uma parede é composta por uma reta que vai de X até Y. Você não precisa armazenar cada ponto dessa reta em uma posição específica de um mapa de imagem: o computador faz a conta e desenha os pontos.

Qual a maior vantagem disso? Uma imagem vetorizada é totalmente escalável.

“Massa… O que é escalável?” Significa que você pode alterar o tamanho dela sem perder as propriedades da imagem. Agora o limite não é mais a representação computacional da figura, mas o quanto o seu olho consegue ver! Esses gráficos foram usados nos primeiros jogos, no entanto, como eles demandam mais processamento, foram substituídos pelos gráficos com mapas de pixels. Eles voltaram a ser usados à medida que os artistas começaram a precisar de assets mais flexíveis: era uma perda de tempo desenhar 10 imagens de tamanhos diferentes para a mesma coisa, além do mais, ainda havia a questão do espaço de armazenamento!

Por meio dos gráficos vetoriais e das retas, curvas e formas geométricas básicas, pode-se formar qualquer imagem

O interessante dessa discussão é que existe algo similar para a modelagem 3D também: usar NURBS (representação matemática) ou Polígonos (representação com blocos) no processo de modelagem, qual é melhor? Para decidir, você deverá pensar sempre em uma solução de compromisso entre desempenho de processamento vs armazenamento e tamanho da representação.

Mas isso será discutido posteriormente. A ideia aqui era só dar exemplos básicos acerca de como imagens são representadas no computador! Para concluir os tópicos da semana, falaremos um pouco sobre os estilos visuais que encontramos em jogos!