Por que você deve se preocupar em otimizar a UI de jogos mobile?

Lições que aprendi trabalhando com desenvolvimento de jogos.

Repare no ranking de downloads de jogos mobile em Janeiro de 2022. Ao olhar o tamanho destes aplicativos, por mais que ele termine de fazer o download e fique maior após a instalação, ao baixar na loja eles possuem tamanhos quase que insignificantes — Ranking por Sensor Tower.

“Se o nosso jogo for de 4 GB, 8 GB ou algo assim, as pessoas terão que pensar duas vezes antes de instalar. Elas precisam excluir alguns aplicativos do telefone e, às vezes, até a capacidade total do telefone pode não ser suficiente. Ainda hoje, uma das prioridades da equipe é tornar o aplicativo o mais leve possível.”

Free Fire: jogo mobile de sucesso publicado pela Garena em Dezembro de 2017.

Ferramentas e técnicas para otimizar sua UI

Então, realmente preciso pensar em otimização?

Papel de parede do Sky Warriors. Um dos jogos da Wildlife Studios, em que trabalhei.

Entendendo as soluções

Os quadrantes destacados não alteram o tamanho, enquanto aqueles sem destaque ajustam conforme necessário. Os quadrantes não destacados da esquerda e da direita crescem verticalmente, os de cima e de baixo horizontalmente e o miolo em ambas direções.
Na esquerda temos o exemplo de 10 ícones utilizados na HUD que foram exportados em branco e na direita o resultado após a aplicação do Tint necessário.
Exemplo de um Sprite Atlas utilizado em um Design System que desenvolvi para protótipos. Aqui podemos ver também que muitos elementos estão em cores neutras para aplicar o Tint e com assets em tamanhos reduzidos para utilizar o 9-slice.
Imagem por Universidade de Maryland.
Exemplo de organização espelhada entre o Figma e a Unity. Essas estruturas são provenientes do Design System citado na seção do Sprite Atlas.
The Infinite 3D Head Scan image above demonstrates different light intensities on a human head model under linear lighting and gamma lighting — from Unity Manual.

Provavelmente o software que o Designer trabalha está exportando os assets no padrão de Gamma. Daí, quando importados em um projeto utilizando Linear, a fidelidade gráfica pode cair muito.

À esquerda, um exemplo de como fica um asset no Figma com muitos gradients indo para o Alpha em Gamma. Já à direita, o exemplo de como fica os mesmos assets sendo renderizados em Linear.
À direita o exemplo de um export do blend rasterizado, ao invés de dois assets diferentes que se vão perder fidelidade durante o cálculo do blend dentro da Unity.

Conclusão

--

--

Visual Designer @ Wildlife Studios | https://StefanoBG.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store