Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação...
Transcript of Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação...
![Page 1: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/1.jpg)
Reinventando o estilo 2D
• Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica.
• Objetivo: buscar formas de inovar e reinventar o estilo.
Por André Santee(asantee.net)
![Page 2: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/2.jpg)
A quem se destina este trabalho?
• Estudantes da área de computação
• Programadores de jogos amadores
• Programadores profissionais
• Viciados por videogame
![Page 3: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/3.jpg)
Mapas: o que são hoje
• Conjuntos de sprites organizadas em forma de ladrilhos (quadrados ou isométricos)
Diablo II: isométrico Codename Gordon: quadrado
![Page 4: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/4.jpg)
Novas tendências...
• Vários jogos bidimensionais têm surgido seguindo novas tendências.
• Têm se fugido dos mapas “quadrados”, que eram somente presos à ladrilhos (tiles) e usa-se mais entidades que podem ser espalhadas em qualquer lugar na tela.
![Page 5: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/5.jpg)
Novas tendências...
1. Realiza cálculos de alpha blending (transparência) muito rapidamente. Isso nos permite usar e abusar de belos efeitos de luz, sombra, água, fumaça etc.
O hardware gráfico atual possui três grandes vantagens para jogos 2D:
Halos de luz Sombras Partículas
![Page 6: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/6.jpg)
Novas tendências...
2. O GPU moderno pode processar vértices e aplicar texturas rapidamente. - Isso permite cenas com milhares de sprites (elementos gráficos).- Também permite o uso de elementos baseados em vetores dinâmicos. Como no game World of Goo:
![Page 7: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/7.jpg)
Novas tendências...
3. O hardware atual permite o uso de shaders.Com shaders pode-se conseguir resultados que antes nem eram imaginados.
![Page 8: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/8.jpg)
Os shaders
• Shaders podem ser usados em elementos 3D mesclados com os elementos 2D, criando cenas “eye-catching”:
Figuras: shaders aplicados aos gráficos 3D (autores desconhecidos)
![Page 9: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/9.jpg)
Os shaders
• Os shaders também podem ser aplicados diretamente à entidades bidimensionais (sprites) criando novas sensações e permitindo novas experiências.
![Page 10: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/10.jpg)
Pixel shaders em gráficos 2D• Podemos criar uma cena no estilo 2D
recheada de efeitos de shader
![Page 11: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/11.jpg)
Iluminação por pixel• Podemos dar mais detalhes aos sprites
utilizando bump mapping convencional:
Colorização convencional Somente vertex shaders Pixel shaders
![Page 12: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/12.jpg)
Iluminação por pixel• Pixel shaders podem aumentar o detalhe da iluminação,
tornando os gráficos bem mais belos.• Vamos olhar mais de perto:
Somente vertex shaders Pixel shaders
Repare na incidência da luz nas pedras dos pilares
![Page 13: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/13.jpg)
Iluminação por pixel• Esse efeito pode ser conseguido somente
com a sprite e um normal map, que pode ser criado facilmente com qualquer ferramenta “normal mapper”:
+
•Com isso podemos criar efeitos de iluminação dinâmica
•Cada luz pode ser animada e a iluminação e sombra irão interagir com cada movimento das fontes de luz
![Page 14: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/14.jpg)
Demonstração em vídeoclique no vídeo para assistir
![Page 15: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/15.jpg)
Outras possibilidades...
Com shaders ainda é possível:
• Criar efeitos de refração e reflexo na água e outras superfícies
• Efeitos de distorção e ondas em superfícies
• Decals mais realistas e complexos
• Nuvens mais realistas
• Etc. etc. etc...
![Page 16: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/16.jpg)
Quais ferramentas usar?• O 2D moderno pode ser programado com API’s
modernas como Direct3D ou OpenGL.• Ambas as API’s possuem linguagens de shader
próprias, mas também podemos usar shaders multi-API, com a linguagem Cg.
• Muitas linguagens atuais oferecem suporte a essas ferramentas: C/C++, Delphi, Visual Basic, C#,etc.
• C++ é a linguagem mais recomendada, documentada e utilizada profissionalmente para jogos
![Page 17: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/17.jpg)
Quais ferramentas usar?
• Recomenda-se o uso de bibliotecas que facilitam o trabalho e evitam que o programador faça o “trabalho sujo”, que além de tomar muito tempo, fica sempre sujeito a mais bugs.
• Atualmente são poucas as bibliotecas pra jogos 2D que oferecem suporte a recursos modernos (shaders).
• Na demonstração de shaders dessa apresentação foi utilizada a biblioteca brasileira GameSpaceLib – asantee.net/gamespace
![Page 18: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/18.jpg)
• GSlib é uma biblioteca desenvolvida em C++ para desenvolvimentos de jogos que auxilia no controle de entrada e saída de dados (vídeo, áudio, mouse, teclado e joysticks).
• A GSlib é gratuita, portável para outros sistemas operacionais e possui o código-fonte aberto.
• Dentre outras bibliotecas como SDL e Allegro, a vantagem da GSlib é que possui objetos muito mais fáceis e intuitivos para programação: programação simplificada.
![Page 19: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/19.jpg)
Com a GSlib o programador pode facilmente...• detectar múltiplos joysticks• carregar e tocar músicas e efeitos sonoros de
arquivos OGG, MP3, WAV, etc.• reproduzir vídeos em MPG, WMV, AVI, etc.• utilizar shaders da linguagem Cg através de uma
interface fácil e intuitiva
Visite o site: www.asantee.net/gamespace/ para baixar e aprender a usá-la
![Page 20: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/20.jpg)
Concluindo...• O desenvolvimento de jogos 2D não é
mais visto como uma etapa de transição para o 3D. Mas se configura numa nova modalidade de jogos.
• A preferência por estilos de jogos é uma questão subjetiva. Há preferências para todos os lados. Cabe ao desenvolvedor optar por um estilo apropriado à proposta do projeto.
![Page 21: Reinventando o estilo 2D Proposta: enxergar os gráficos 2D como um estilo e não como limitação técnica. Objetivo: buscar formas de inovar e reinventar.](https://reader036.fdocumentos.com/reader036/viewer/2022062700/552fc152497959413d8e3809/html5/thumbnails/21.jpg)
Dúvidas? Comentários?
• Escrevam para [email protected]
Obrigado pela atenção e pelo tempo cedido
Um pouco de merchandising....Meu site pessoal: www.asantee.net
Livro: programação de jogos 3D
Editora Novatec