O que é parallax scrolling nos jogos?
Há muito tempo presente na indústria gaming, o parallax scrolling é uma importante técnica de animação que traz uma sensação mais apurada de profundidade em diversos jogos. Através de múltiplas camadas de imagens, que são reproduzidas em velocidades diferentes, o público tem uma imersão maior em termos visuais, aprimorando até mesmo o gameplay.
Ele começou a ser usado nos games ainda nos anos 1980, mas se tornou extremamente popular na década seguinte. Até hoje marca presença em várias experiências recentes, como em Bloodstained: Ritual of the Night, Mega Man 11, Hollow Knight e até em RPGs como Eiyuden Chronicle: Hundred Heroes e Bravely Default 2. Um fato é inegável: o recurso tem uma grande importância no processo de desenvolvimento.
Porém, você já notou a presença do parallax scrolling em jogos assim? Ou sabe de onde ele surgiu? Nascido de uma ilusão de óptica, a tecnologia foi introduzida inicialmente em animações tradicionais (como da Disney, Hanna-Barbera, Warner Bros. e outros estúdios) utilizando câmeras multiplano e se expandiu para os videogames. E nós vamos falar mais dela neste “O que é”.
–
Entre no Canal do WhatsApp do Canaltech e fique por dentro das últimas notícias sobre tecnologia, lançamentos, dicas e tutoriais incríveis.
–
O que é o parallax scrolling?
O conceito do parallax scrolling, também conhecido como efeito paralaxe ou rolagem paralaxe, é simples: trazer imagens em movimento, com quadros que alteram rapidamente e geram uma sensação de que os personagens estão caminhando, comendo, brigando e exercendo diversas ações. Porém, o mundo nunca foi algo bidimensional e diferentes objetos ou até mesmo o ambiente ao fundo se movem em velocidades distintas.
A partir disso, em 1930, os estúdios de animação trouxeram à tona a técnica do parallax scrolling. Através de displays que tinham suporte a múltiplas camadas de visualização, os profissionais passaram a trabalhar com o método de criar diferentes níveis para cada imagem.
Imagine um desenho animado da Disney, onde o Mickey e o Pateta caminham pela rua em um dia ensolarado. Ambos os personagens estão em primeiro plano (mais à frente). As lojas e casas ao fundo, estão em segundo plano. O sol e nuvens, ainda mais distantes, ficam em um terceiro plano.
Conforme eles andam, você vê seus pés se mexendo, expressões faciais e movimentos do corpo em uma velocidade. As lojas e casas, que são uma segunda imagem, passam atrás deles em outro ritmo. Já as nuvens e o sol, seguem em cena e parecem se mover ainda mais lentamente. Isso é o parallax scrolling, união de duas ou mais camadas de imagens que se movimentam em velocidades diferentes durante a reprodução.
E de onde surgiu esse efeito de imersão? Justamente da ilusão de óptica que a técnica causa. No mundo real, sabemos que tudo age conforme suas próprias normas de física e velocidade: ao caminhar pelas ruas, por exemplo, nossa visão acompanha carros e motos passando na frente de prédios e lojas, enquanto as nuvens se movem na direção do vento. As animações reproduzem isso via tecnologia de múltiplas camadas.
Também é importante a distância física destes objetos. Quanto mais longe algo está da tela, mais lento parece se mover em comparação àquilo que se apresenta de forma próxima aos personagens. Caso você faça viagens de carro, trem ou outros meios de transporte, é ainda mais notável essa diferença em estradas, praias ou o que estiver no caminho. O que o parallax scrolling faz é trazer essa sensação para animações.
História do parallax scrolling nos jogos
Nos jogos, o parallax scrolling passou a ser visto a partir dos anos 1980. Os primeiros títulos que trouxeram a técnica para o público foram Jump Bug (1981), Moon Patrol (1982) e Jungle King (1982). Em Jump Bug foi aplicado um modelo com duas imagens: com a noite estrelada se movendo lentamente de fundo, enquanto nos outros dois já foram aplicadas três imagens simultâneas e trouxeram uma maior imersão.
Já nos consoles e portáteis, a geração 8-bit usava certos artifícios ao seu favor. Um deles era os gráficos raster, linhas de pixel em uma imagem que eram compostos e atualizados de cima para baixo (com um curto atraso entre elas). Isso significa que os títulos desenvolvidos para estes chipsets, mesmo que trabalhassem com apenas uma camada, podiam criar a ilusão de utilizar múltiplas através deste recurso.
Quando falamos dos principais sistemas 8-bit, são relevantes os consoles Commodore 64, Nintendo Entertainment System (o famoso Nintendinho ou NES), Master System, PC Engine/TurboGrafx-16 e o primeiro modelo de Game Boy. Os jogos que faziam uso da técnica que simula o parallax scrolling dividiam as camadas em tiras horizontais, com cada uma seguindo posições e taxa de rolamento diferentes.
Com isso, os games mostravam a tela na seguinte estrutura: o topo geralmente era um “espaço em branco” e podia representar objetos e cenários mais distantes do próprio gameplay. Outros apresentavam informações gerais (como barra de HP, posição em uma corrida etc.).
O sistema, então, deixa este espaço “vazio” em espera e altera a posição de rolagem da camada, instantes antes do sistema de exibição começar a desenhar cada linha disponível. Chamado de “efeito raster”, ele também auxiliava a mudar a paleta de cores para trazer um fundo em escala gradiente.
Cada companhia apresentava isso ao seu próprio modo. No Nintendinho e alguns outros, por exemplo, há um código de ciclos por tempo que é escrito especialmente para ser apresentado simultaneamente às linhas desenhadas pelo chip. Em alguns casos, há temporizadores nos cartuchos que geram interrupções ao notar uma quantidade pré-determinada de linhas desenhadas.
Esse tipo de técnica alcançou resultados que encantaram toda uma geração, como em jogos como Teenage Mutant Ninja Turtles II: The Arcade Game (que simula até três camadas) e em Vice: Project Doom, ambos lançados no NES e processa as imagens em taxas distintas para emular as camadas do que é apresentado ao jogador.
Já na geração 16-bit (representada pelo Mega Drive, Super Nintendo, Game Boy Advance, Nintendo DS e outros), o parallax scrolling atua de forma mais refinada. Eles foram produzidos para trazer uma interrupção horizontal em branco, o que define automaticamente os registros de forma independente daquilo que segue no restante do software.
Isso permitia técnicas de raster que produziam efeitos aprimorados em comparação à geração anterior. Para citar alguns jogos que trouxeram isso de forma impressionante na época, temos Street Fighter II, Super Mario World, Sonic the Hedgehog 2, ActRaiser e até Pole Position e NBA Jam: estes que criam um certo efeito tridimensional no sistema 2D.
Também é importante mencionar que sistemas como o SNES permitem rotação e mudança de tamanho nas camadas de imagem: um efeito que é conhecido como Mode 7. Desta forma, títulos como F-Zero, Super Mario Kart, Chrono Trigger, Final Fantasy VI, Pilotwings, Super Castlevania IV e diversos outros criavam uma imersão maior para os jogadores e efeitos que se mostravam muito interessantes.
Como funciona o parallax scrolling?
De forma técnica, quem programa jogos ou está aprendendo a desenvolver pode usar diferentes métodos para aplicar o efeito de paralaxe em seus projetos 2D ou 2.5D. O mais básico é através de diferentes camadas de imagens, que se movem de forma distinta assim como é visto em animações comuns.
Também é possível criar este efeito através dos sprites. Assim como podem organizar diferentes camadas com imagens, você também pode trabalhar com a possibilidade de mostrar os sprites de personagens ou do ambiente em diferentes escalas.
Apesar de ser mais trabalhoso, o efeito que isso produz pode trazer cenários e até interações mais ricas para o visual dos jogos. Um exemplo disto pode ser visto em determinadas experiências 2.5D, que trazem uma riqueza maior de detalhes. Em cenários mais “controlados”, como RPG de turno e táticos, eles também são possíveis. Unicorn Overlord, lançado pela Atlus em 2024, é um grande exemplo disto:
Centrado neste exemplo, vamos nos aprofundar um pouco no trabalho do estúdio Vanillaware com o parallax scrolling via sprites. Como se pode notar em cenas de batalha, temos os sprites dos personagens em diferentes camadas dentro de uma mesma cena, assim como os efeitos de ataque. O fundo, que também está em movimento, é uma outra que contém sprites da vegetação. A interface de vitória também é.
Porém, as construções ao fundo e as nuvens passando estão se movendo de forma estática: o que leva à conclusão de que elas foram produzidas como imagens que estão apenas rolando ao fundo. O mesmo vale para a exploração do mapa, vista de cima: personagens, casas, estandartes, interface interativa são diversos sprites em camadas próprias dentro da experiência.
Já em títulos 2.5D, como é o caso de Bravely Default 2 e Octopath Traveler por exemplo, também vemos diferentes camadas de sprites sendo conduzidas simultaneamente. Abaixo você pode ver como o jogo The Whispered World cria este tipo de ambientes através de diversos tipos diferentes de imagens e sprites:
Em motores gráficos como a Unity, Unreal Engine, GameMaker e diversos outros, os desenvolvedores podem trabalhar o parallax scrolling através da posição das texturas através do campo UV (que compreende o cenário horizontal e vertical de uma imagem).
Desta forma, poderá posicionar sprites e imagens dentro do eixo X e Y através de coordenadas. Em alguns motores, como a Unreal Engine 5, há uma ferramenta própria para isso: o “parallax occlusion mapping node”, que facilita bastante o processo de ajustar manualmente cada um dos fatores, reduzindo o tempo para criar camadas, determinar a distância entre elas e incluir o que deseja em cada uma delas.
Jogos icônicos com parallax scrolling
Confira alguns jogos clássicos e icônicos que utilizam de forma notável este recurso.
4. Super Mario World
É impossível falar em exemplos icônicos de parallax scrolling sem citar um dos jogos mais famosos da Nintendo: Super Mario World. É notável como a ferramenta foi utilizada dentro do projeto e dá para perceber diversos pontos em que ela foi utilizada.
Na primeira camada, temos Mario, inimigos, estruturas interativas (blocos destrutíveis, power-ups, moedas, plataformas, canos etc.). Na segunda, o fundo do cenário que se move para trás (em contraste ao personagem que está se movendo adiante).
Vale se atentar que há uma terceira camada e quarta camadas: uma que se torna visível em cavernas e ambientes fechados: com sprites brilhando ou velas. A outra é o próprio chão. Quando enfrenta chefões em determinados cenários, percebe-se o sprite de lava vulcânica ou de água se movendo de forma independente.
3. Hollow Knight
Pulando para um exemplo mais recente e do gênero metroidvania, temos Hollow Knight. Como os demais títulos modernos, é difícil de contar quantas camadas de imagens existem enquanto vemos o desempenho do parallax scrolling dentro da experiência.
Como pode notar, há um presente antes do próprio personagem central da aventura. Muitos elementos da tela passam pela sua frente, o que pode ser visto de várias formas no decorrer do gameplay. Temos a do protagonista, as plataformas que ele pisa, seus inimigos aparecem e outros elementos interativos. De fundo, há mais de cinco camadas distintas, que mostram vários objetos do cenário e geram profundidade.
Apesar de, em um primeiro momento, muitos acreditarem que as camadas de fundo de Hollow Knight são formadas apenas por imagens, em determinados momentos podem ser vistos sprites também. O estúdio Team Cherry soube trabalhar isso de uma forma equilibrada e gera efeitos bem interessantes conforme os jogadores avançam na sua trama.
2. Pokémon FireRed & Pokémon LeafGreen
A franquia Pokémon é uma das que mais podemos notar o uso de parallax scrolling em RPGs de turnos. E nada mais justo do que irmos até sua “Era de Ouro” no Game Boy Advance, não é mesmo? Nela os elementos visuais eram muito bem estabelecidos e aparentam trazer uma facilidade maior, mas ao analisar como o efeito pode ser concebido percebe-se como sua estrutura pode ser complexa.
Quando visto de cima, temos sprites de personagens, estruturas, vegetação e outros elementos funcionando em primeiro plano. Já onde pisa está se movendo no fundo, para acompanhar o caminho que seu protagonista segue dentro do mapa. Há outra camada quando o personagem passa pela água: mostrando um reflexo dele no momento em que está próximo. Isso sem falar nos sprites que formam pegadas na areia e balançam o mato alto quando você os atravessa.
Nos combates, também não é um sistema tão simples: temos a interface de comandos, os personagens e seus Pokémon que atuam através de sprites e o HUD com informações como nível, HP e outras informações. O fundo atua na segunda camada, que é estático. No entanto, quando executa qualquer ataque, suas imagens e até velocidade de movimento mudam para causar mais impactos visuais.
1. Octopath Traveler II
Um dos maiores RPGs 2.5D das gerações atuais, Octopath Traveler II da Square Enix cria diversos efeitos interessantes através do parallax scrolling. Misturando sprites, imagens estáticas, imagens em movimento e até sombreamento, eles mostram que esse ambiente permite diversas aplicações desta técnica sem prejudicar o gameplay.
Temos sprites para os personagens, monstros e alguns elementos do mapa em diferentes eixos. Imagem estática em outra camada, ao fundo, para mostrar o solo que estão pisando, o que há atrás deles e o céu. O Mode 7 também se faz presente, girando e alterando o tamanho dependendo do movimento que é executado na tela. Isso sem contar a modelagem 3D, que permite até que o cenário gire em torno deles para algumas ações específicas.
O mesmo pode ser visto na exploração do mapa. Sprites em diferentes camadas, imagens em movimento que podem ser alternadas com outros sprites em determinados trechos, camadas desfocadas, outra para mostrar que mostra a estrutura de escalabilidade de imóveis e do ambiente no geral, entre diversas outras. Títulos como ele e Bravely Default II têm um grau de parallax scrolling complexidade altíssimo, tanto que dificilmente são replicados com o mesmo nível de qualidade.
Vantagens e desvantagens do efeito paralaxe
Confira algumas vantagens e desvantagens ao usar o parallax scrolling no desenvolvimento de jogos, assim como as formas que ele pode afetar positivamente (ou não) diversos projetos.
Vantagens
- Imersão: ao usar diferentes camadas, aumenta a sensação de profundidade e dá um nível mais elevado de realismo
- Estética: com cenários mais interessantes e dinâmicos, há chances maiores de atrair e manter os jogadores na experiência
- Jogabilidade: em alguns casos, como em Sonic the Hedgehog, pode ser usado como elemento de design para indicar a velocidade, padrões e outros recursos visuais que destacam a ação dentro do jogo
Desvantagens
- Desempenho: é importante notar que, quanto mais camadas de imagens (e sprites) forem utilizadas, mais recursos do hardware serão consumidos. Em dispositivos mais antigos, isso pode gerar problemas
- Distração: em alguns casos, o uso do parallax scrolling de forma mal implementada pode desviar a atenção do jogador e causar o efeito contrário da imersão almejada
- Náusea: apesar de serem casos mais raros, jogadores sensíveis podem sentir enjoo ou grande desconforto durante a movimentação das camadas
Parallax scrolling em outras mídias
Como dito inicialmente, o parallax scrolling nasceu no universo das animações e passou a ser aplicado em diversas outras experiências. Ainda que nosso foco seja relacionado aos games, também é interessante notar como a técnica se expandiu às demais áreas.
Uma das que mais se destacam é no ambiente de web design. Vários sites utilizam esta ferramenta para apresentar ambientes interativos para seus usuários, atraindo visualmente os visitantes e mantendo a atenção para aquilo que mais interessa: as informações apresentadas.
Além de gerar uma experiência mais imersiva, pode criar vários tipos de ferramentas que o público acaba se encantando (e retornando posteriormente para ver outras). Apesar de ser possível ver em diversas frentes, é notável que algumas companhias tech e grandes fabricantes costumam trazer este tipo de estrutura com mais frequência.
Vamos apresentar como exemplo o site da ASUS, que traz em sua linha ROG a placa de vídeo Astral GeForce RTX 5080. Para apresentar o produto ao público, ela mostra um sprite da GPU em funcionamento e girando na sua capa, enquanto o fundo está em outra camada.
Preste atenção no parallax scrolling
Como pode notar, o parallax scrolling é uma técnica muito interessante de animação e que possui uma ampla aplicação: animações, jogos eletrônicos, websites e diversas outras frentes. O intuito, lógico, é oferecer ao seu público uma imersão visual maior com o conteúdo e criar efeitos que surpreendem pela quantidade de detalhes.
Este recurso tem uma importância muito grande no desenvolvimento de jogos, tanto na sua história como nas experiências icônicas que trouxe ao público desde os anos 1980. Antes dos games 3D, eram estas que definiam como um título se apresentaria ao público visualmente e são utilizadas até hoje para criar uma profundidade maior em jogos retrô ou inspirados em franquias e gêneros mais antigos (como metroidvanias, RPGs de turno etc.).
Levando em consideração a sua contínua evolução e até a ascensão do parallax scrolling com os jogos 2.5D, vale ressaltar que ela pode se expandir e trazer experiências cada vez mais diferenciadas no futuro. Claro, isto depende muito dos artistas e estúdios que desenvolvem jogos, mas há grandes chances de vê-la sendo aplicada de formas mais criativas nos próximos anos. Porém, como devs independentes prezam pela inovação, isso pode ocorrer em questão de anos ou meses. Basta olhar para outras direções.
Leia mais no Canaltech:
- 10 jogos icônicos lançados em 1990
- Com 35 anos, Super Nintendo está mais rápido que no lançamento; entenda por quê
- Mais de 40 códigos e cheats para usar em Minecraft
Leia a matéria no Canaltech.