Pixelização do jogo

Olá!! Seja bem-vindo ao segundo post do meu blog, neste post estarei mostrando como criar um visual "pixelizado" do seu jogo. Este é um efeito interessante presente em jogos como Celeste, onde o mundo 2D têm um estilo retrô, enquanto que as caixas de diálogos,  menus e outros elementos são com maior definição.

screenshot do jogo Indie "Celeste", pode-se observar que alguns efeitos visuais como aberração cromática são pixelizados enquanto que a caixa de diálogo tem alta definição. Imagem em: http://www.celestegame.com

Este efeito é possível replicar de duas formas (que consegui descobrir no Godot 3.1):

• Utilizando uma resolução pequena nas propriedades do projeto, assim quando o jogo ficar em tela cheia, é "pixelizado" todo o jogo, inclusive elementos como as caixas de diálogos;
• Utilizando um node chamado Viewport, que renderiza apenas a cena que é como filho do Viewport.

O método que irei mostrar será do Viewport, mas antes de continuar, gostaria de esclarecer o que é e como funciona o Viewport no Godot.

Basicamente, o Viewport é responsável por renderizar a cena através da Camera2D atual da cena filha ou posição fixa da camera. Quando é iniciado o jogo, automaticamente toda a cena é filha de um Viewport (pode  verificar se você colocar num script em qualquer node, na função _ready(), "print(get_tree().root)", será mostrado no output algo como "[Viewport: ID]"). É super útil para criar split-screens para multiplayer local. Para mostrar o que está sendo renderizado, é preciso de um Sprite ou TextureRect, que usa um ViewportTexture na propriedade texture.

Para começar, crie uma cena separada com um Control como raiz da cena, adicione um Viewport como filho e a cena que queira ser renderizado como filho do Viewport. Adicione como filho do Control, um TextureRect, vai ser responsável por conter o ViewportTexture. No final, terá uma cena mais ou menos assim:

Verifique se o Control e o TextureRect cobre toda a tela.

No Viewport, altere a propriedade "render_target/v_flip" para true, pois por causa do OpenGL, o Viewport renderiza a cena ao contrário. Mudando a propriedade anterior para true, a imagem fica normal. Depois, no TextureRect, muda a propriedade "texture" para ViewportTexture, abrirá um menu com os nodes da cena, selecione o Viewport para poder mostrar a renderização.

Não será mostrado nada porque o tamanho do Viewport é zero, então se quiser para poder pré-visualizar a cena renderizada, muda a propriedade size do Viewport para a resolução do projeto.

Agora, é preciso colocar um script no Control, com as seguintes linhas:

Quando você voltar no editor, o node Control terá uma nova propriedade chamada "resolution divisor", nele você coloca o quanto você quer que fique pixelizado a cena.

Já poderia terminar o post se não fosse um pequenino mas chato problema: a posição do mouse quando você usa a função get_global_mouse_position() ou get_local_mouse_position() está absurdamente errada, não sei exatamente o porquê, mas é diretamente relacionada ao método de esticar a imagem no Viewport. Sorte que a solução é simples, só chamar get_global_mouse_position() de qualquer outro node que esteja fora do Viewport, por exemplo, get_tree().current_scene retorna o node raíz da cena (filho do Viewport), assim, quando chamar a função get_tree().current_scene.get_global_mouse_position() a posição estará correta.

Agora a cena pixelizada está funcionando perfeitamente, espero ter ajudado quem queria dar um toque retrô nos seus jogos. Então, até o próximo post, adeus!!