04 Edicao Visual
-
Upload
black-skull -
Category
Documents
-
view
22 -
download
0
description
Transcript of 04 Edicao Visual
![Page 1: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/1.jpg)
Edição VisualImagens, Tilemaps e Sprites2006 – PUCPR – Tutoria de Jogos – 1º Ano
EdiEdiçção Visualão VisualImagens, Imagens, TilemapsTilemaps e e SpritesSprites2006 2006 –– PUCPR PUCPR –– Tutoria de Jogos Tutoria de Jogos –– 11ºº AnoAno
Paulo V. W. Paulo V. W. RadtkeRadtke
[email protected]@gmail.comhttp://www.ppgia.pucpr.br/~radtke/jogos/http://www.ppgia.pucpr.br/~radtke/jogos/
![Page 2: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/2.jpg)
PUCPR - CCET 2
Conteúdo• Ferramentas necessárias.• Classificação dos recursos visuais.• Criação de tilemaps.• Criação e edição de sprites.• Criação de fontes bitmap.
![Page 3: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/3.jpg)
PUCPR - CCET 3
Ferramentas• Para este módulo serão utilizados:– Paint .Net (v. 2.61)– Mappy (v. 1.4.9)– Bitmap Font Builder (v. 1.9.7)
Obs: O editor de imagem pode ser o de sua preferência.
![Page 4: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/4.jpg)
PUCPR - CCET 4
Classificação dos Recursos Visuais
• Os recursos se dividem nos seguintes tipos principais:– Imagens estáticas.– Tilesets e tilemaps.– Sprites.– Fontes bitmap.
![Page 5: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/5.jpg)
PUCPR - CCET 5
Classificação dos Recursos Visuais
• Imagens estáticas:– Logotipos.– Telas de carregamento.– Elementos de decoração fixos.– Arte de créditos.
![Page 6: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/6.jpg)
PUCPR - CCET 6
Classificação dos Recursos Visuais
• Sprites:– Elementos animados do jogo.– Utilizados para representar inimigos, o jogador, cursores animados entre outros.
– Possuem como característica principal pontos transparentes.
![Page 7: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/7.jpg)
PUCPR - CCET 7
Classificação dos Recursos Visuais
• Tilesets e tilemaps:– Utilizados em jogos com movimentação de tela, ou em dispositivos com poucos recursos de memória.
– Representam imagens completas, muito maiores do que a memória do sistema seria capaz de armazenar.
![Page 8: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/8.jpg)
PUCPR - CCET 8
Classificação dos Recursos Visuais
• Fontes bitmap:– Geralmente, apenas modos console possuem fontes e mecanismos de texto.
– Celulares possuem recursos primitivos.– Assim, são necessárias fontes baseadas em sprites para mostrar textos nas imagens em muitas situações.
![Page 9: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/9.jpg)
PUCPR - CCET 9
Visão Geral do Paint .NET
Layers
Histórico de
comandos
Cores
Ferramentas
Imagem
![Page 10: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/10.jpg)
PUCPR - CCET 10
Criação de Tilemaps• Vamos usar o tilemap como imagem do cenário dos nossos jogos.
• Caso o cenário do seu jogo possa ser resolvido com uma imagem de fundo estática, use esta opção.
![Page 11: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/11.jpg)
PUCPR - CCET 11
Criação de Tilemaps• Ao criar o tileset, cada bloco éassociado a um índice, da esquerda para a direita, de cima para baixo.
• O Mappy considera um bloco nulo como o bloco 0. Um bloco nulo não é desenhado na tela.
![Page 12: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/12.jpg)
PUCPR - CCET 12
Criação de Tilemaps• Por conveniência, é melhor deixar um bloco nulo como o primeiro bloco do tileset.
• Um bloco nulo tem a cor preta (RGB: 0,0,0)
• Atenção: o Mappy ignora TODOS os blocos nulos em uma imagem.
![Page 13: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/13.jpg)
PUCPR - CCET 13
Criação de Tilemaps• O primeiro passo ao se criar um tilemap é definir o tileset (imagem de blocos) associado.
• Para isto, devemos nos perguntar qual a aparência que queremos ter no nosso mapa.
![Page 14: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/14.jpg)
PUCPR - CCET 14
Criação de Tilemaps• Para ilustrar o processo, o Jogo da Velha irá utilizar um tilemap para o cenário de fundo.
![Page 15: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/15.jpg)
PUCPR - CCET 15
Criação de Tilemaps• Conceito:– Uma mesa com uma toalha, na qual écolocado o tabuleiro.
– O canto da tela é reservado para a animação da velha e outras informações.
• Para isto, será usada uma imagem 256x256, com blocos 32x32.
![Page 16: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/16.jpg)
PUCPR - CCET 16
Criação de Tilemaps• O tamanho escolhido (quadrado)é devido a implementação da biblioteca para imagens a ser utilizada.
• Celulares podem usar tamanhos diferentes.• Valores para desktop: 8x8, 16x16, 32x32, 64x64, 128x128, 256x256, 512x512, 1024x1024, etc.
![Page 17: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/17.jpg)
PUCPR - CCET 17
Criação de Tilemaps• A imagem PNG gerada tem a seguinte aparência:
![Page 18: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/18.jpg)
PUCPR - CCET 18
Uso do Mappy• Ao abrir o Mappy, devemos criar um novo mapa.
• Selecionamos a opção advanced e temos uma tela com as opções do mapa.
![Page 19: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/19.jpg)
PUCPR - CCET 19
Uso do MappyTamanho do
blocoLargura do mapa
em blocos
Número de cores
Versão do arquivo
![Page 20: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/20.jpg)
PUCPR - CCET 20
Uso do Mappy• Opções selecionadas:– Bloco 32x32;– Dimensões do mapa: 20x15 (640x480 pixels)
– Número de cores: 24bits (16 milhões)– Versão: 1.0 (importante para a versão desktop)
![Page 21: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/21.jpg)
PUCPR - CCET 21
Uso do Mappy• ATENÇÃO: as dimensões do mapa e tamanho dos blocos dizem respeito a um projeto específico (Jogo da Velha). Verifique as necessidades do seu projeto para escolher estes valores adequadamente.
![Page 22: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/22.jpg)
PUCPR - CCET 22
Uso do Mappy• Uma vez criado o mapa, devemos importar os gráficos no menu File, opção Import.
![Page 23: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/23.jpg)
PUCPR - CCET 23
Uso do Mappy• Uma vez criado o mapa e importados os blocos, utilizamos os blocos como carimbos para criar a tela.
• O Mappy possui muitos recursos, como brushes (agrupamentos de blocos). Leia o manual para conhecê-los (pasta DOCS).
![Page 24: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/24.jpg)
PUCPR - CCET 24
Tela Final
![Page 25: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/25.jpg)
PUCPR - CCET 25
Nota sobre o Mappy• A última versão no site está com o zoom de blocos desabilitado.
• Esta característica é ruim para desenvolvimento em celular, já que os blocos são pequenos.
• Para trabalhar melhor, utilize o Mappy1.4.9 disponibilizado no site da tutoria.
![Page 26: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/26.jpg)
PUCPR - CCET 26
Criação de Sprites• Os sprites serão criados como blocos quadrado, conforme mostrado anteriormente.
• Para celulares, tamanhos de blocos como 8x8 ou 16x16 são adequados.
• Para desktop, 32x32 são um bom compromisso.
![Page 27: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/27.jpg)
PUCPR - CCET 27
Criação de Sprites• Como em tilesets, quando um sprite éanimado ou possui mais que um bloco, utilizamos uma imagem ÚNICA para todos elementos.
• Novamente as restrições de tamanho continuam aplicáveis devido àimplementação da biblioteca.
![Page 28: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/28.jpg)
PUCPR - CCET 28
Criação de Sprites• A ferramenta de anti-aliasing dá bons resultados na imagem, mas contra um fundo FIXO.
• Sprites deslocam-se sobre fundos variáveis, logo o anti-aliasing fica complicado com transparência simples.
![Page 29: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/29.jpg)
PUCPR - CCET 29
Criação de Sprites• Assim, DEVEMOS desabilitar o anti-aliasing do Paint .NET:
Anti-aliasing
![Page 30: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/30.jpg)
PUCPR - CCET 30
Criação de Sprites• Para desktops, a cor transparente utilizada será o magenta (RGB: 255, 0, 255).
• Para isto, basta utilizar um fundo magenta na imagem e fazer o desenho.
![Page 31: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/31.jpg)
PUCPR - CCET 31
Criação de Sprites• Para celulares a cor transparente terá o canal de alpha igual a zero (transparente).
• A melhor solução é utilizar layers, deixando o layer de fundo com uma cor fixa e fazendo a edição nos layers superiores.
![Page 32: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/32.jpg)
PUCPR - CCET 32
Criação de Sprites• Na hora de gerar o arquivo PNG do sprite, basta tornar invisível o layerde fundo.
![Page 33: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/33.jpg)
PUCPR - CCET 33
Criação de Sprites• Desvantegem deste método (celulares) no Paint .NET: tem que trabalhar o tempo todo com o arquivo no formato que permita layers, o PDN.
![Page 34: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/34.jpg)
PUCPR - CCET 34
Criação de Sprites• Sprites básicos do jogo da velha (32x32, 4 blocos em cada imagem):
![Page 35: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/35.jpg)
PUCPR - CCET 35
Criação de Sprites• Sprites animados devem ter todos os seus quadros definidos na imagem:
![Page 36: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/36.jpg)
PUCPR - CCET 36
Fontes Bitmap• A maneira mais comum de se utilizar textos, mesmo em OpenGL e Direct3D, é utilizarmos as fontes em sprites.
• Assim, devemos utilizar uma ferramenta capaz de gerar tais sprites.
![Page 37: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/37.jpg)
PUCPR - CCET 37
Fontes Bitmap• Uma ferramenta bastante poderosa éa Bitmap Font Builder.
![Page 38: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/38.jpg)
PUCPR - CCET 38
Fontes Bitmap• Em geral, fontes bitmap são feitas
de acordo com duas situações:1. Quando a cor de fundo em que as
fontes serão desenhadas é conhecida.2. Quando as fontes vão ser desenhadas
sobre imagens coloridas.
![Page 39: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/39.jpg)
PUCPR - CCET 39
Fontes Bitmap• No caso de fundo conhecido, devemos colocar a cor de fundo desejada e podemos utilizar anti-aliasing:
![Page 40: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/40.jpg)
PUCPR - CCET 40
Fontes Bitmap• No caso de fundo variável, devemos colocar a cor de fundo magenta e não devemos utilizar anti-aliasing:
![Page 41: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/41.jpg)
PUCPR - CCET 41
Fontes Bitmap• Em geral, sabemos sobre que cor um texto vai ser desenhado, logo, podemos utilizar a primeira opção.
• Visualmente esta opção é mais agradável.
![Page 42: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/42.jpg)
PUCPR - CCET 42
Fontes Bitmap• Recomendações:– Fontes com anti-aliasing (smoothing) são claras mesmo em tamanhos como 8x8 (textura 128x128).
– Fontes sem anti-aliasing não costumam ser legíveis em tamanhos menor que 16x16 (256x256).
![Page 43: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/43.jpg)
PUCPR - CCET 43
Próximas Aulas• Tutorial básico SDL/J2ME.• Desenhando um tilemap.• Desenhando sprites.• Desenhando texto.• Eventos de teclado e mouse.• Testando colisão de sprites.
![Page 44: 04 Edicao Visual](https://reader034.fdocument.pub/reader034/viewer/2022050811/5695d0901a28ab9b0292f541/html5/thumbnails/44.jpg)
PUCPR - CCET 44
Perguntas?