Postagens

Pseudo3D - Perspectiva

Imagem
Quem se aventurou nos jogos de corrida mais antigos como Top Gear (SNES), Outrun (Arcade), etc.. vai lembrar muito dos resultados que iremos ver nesta postagem. Para muitos, o "3D" antigo é algo ultrapassado e sem graça, más para outros assim como eu, vemos estes gráficos old-school sendo algo muito criativo. Abaixo apresento uma estrada em "3D". O Pseudo3D é chamado assim pois na realidade, não é um 3D real. Não há plano 3D como nos jogos de hoje. O que ocorre nada mais é que uma ilusão, na qual parece algo 3D. O 3D real não era possível antigamente pois os sistemas operacionais, ou hardwares não tinham a capacidade de renderizar milhares polígonos em um tempo agradável, ou seja, na quela época, não havia como criar estes gráficos com a tecnologia que havia.  Se não podemos renderizar polígonos para criar nossos gráficos, como podemos reproduzir algo pseudo 3D? Como vimos nas postagens de Mode7, utilizamos métodos de Raster, ou seja, ilusões com imagem/pix

Mode 7 - Rotation

Imagem
A rotação é algo simples para ser aplicado no Mode 7. Para este efeito, iremos utilizar o método de matriz de rotação onde nada mais é que uma formula para realizar a transformação das coordenadas. Recomendo você dar uma olhada no tutorial iniciar do Mode 7, e no tutorial do Mode 7 de fog, onde foi realizado o ajuste da implementação para se utilizar um array de pixels. A fórmula para realizar a rotação é a seguinte: _y = x * cos(angulo) - x * sin(angulo) _x = x * sin(angulo) + x * cos(angulo) Após obter as novas coordenadas, devemos também realizar a divisão de Z, conforme a formula padrão do Mode 7, como vimos no primeiro tutorial. 1. Vamos começar a implementar. Primeiramente, iremos alterar nosso código e colocar nosso loop de renderização no início da lógica do mode 7, para repetir a geração dos frames, e podermos ajustar nosso ângulo e visualizar o resultado de forma corrente. 2. Criaremos a variável "angle", que irá obter o ângulo da visão. 3. Já qu

Mode 7 - Fog

Imagem
Fog do inglês significa neblina. Como vimos no tutorial anterior, a distância de visualização está ilimitada e não tem um aspecto elegante. Neste tutorial, iremos implementar a rotina para adicionar uma neblina na renderização, e também vamos ajustar o código para utilizar um array de pixels, na qual ganhamos performance e facilidade na implementação. Se você não viu o tutorial de implementação do mode 7, recomendo verificar, para você não ficar confuso neste tutorial. Como vimos no nosso tutorial do mode 7, nossa variável Z que define a profundidade (Depth). É nela que iremos trabalhar nosso fog. Quanto mais baixo o valor de Z, mais escuro a cor do pixel a ser renderizado deve ficar. O resultado final deve ser algo como esta imagem: 1. Vamos começar substituindo algumas rotinas que estávamos utilizando no código passado. Uma dela é a forma de renderização dos pixels na tela. Utilizávamos o método setRGB(), porém há uma grande perda de performance se formos selecionar a cor

Mode 7

Imagem
A empresa dos consoles de Nintendo SNES tinha suas "armas secretas" para se colocar acima de seus concorrentes. Uma delas era a modelagem gráfica conhecida como Mode 7. Este tipo de modelagem foi utilizada nos jogos (F-Zero, Mario Kart, Pilotwings, The Legend of Zelda: A Link to the Past, entre outros...). Este post tem como intuito, mostrar de forma detalhada como funciona este tipo de modelagem, e como pode ser implementada. Utilizamos a linguagem Java e montamos um passo-a- passo para você poder transformar seus gráficos 2D em gráficos pseudo-3D. Mode 7 nada mais é que um mapeamento de uma imagem 2D em um resultado pseudo-3D. Pseudo-3D pois não é considerado um 3D real, como os gráficos do dia de hoje. O fluxo para geração do Mode 7 é o seguinte: 1. Pegar as coordenadas X, Y 2. Dividir X e Y por Z gerando as coordenadas _X e _Y. 3. Atribuir as coordenadas X e Y com o valor das coordenadas _X e _Y da textura. Isto funciona como um mapeamento de textura em um pla