Edição Visual Imagens, Tilemaps e Sprites 2006 PUCPR Tutoria de Jogos 1º Ano - PDF
Download "Edição Visual Imagens, Tilemaps e Sprites 2006 PUCPR Tutoria de Jogos 1º Ano"
Dalila Lacerda Almeida
1 Edição Visual Imagens, Tilemaps e Sprites 2006 PUCPR Tutoria de Jogos 1º Ano Paulo V. W. Radtke
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. PUCPR - CCET 2
3 Ferramentas Para este módulo serão utilizados: Paint.Net (v. 2.61) Mappy (v ) Bitmap Font Builder (v ) Obs: O editor de imagem pode ser o de sua preferência. PUCPR - CCET 3
4 Classificação dos Recursos Visuais Os recursos se dividem nos seguintes tipos principais: Imagens estáticas. Tilesets e tilemaps. Sprites. Fontes bitmap. PUCPR - CCET 4
5 Classificação dos Recursos Visuais Imagens estáticas: Logotipos. Telas de carregamento. Elementos de decoração fixos. Arte de créditos. PUCPR - CCET 5
6 Sprites: Classificação dos Recursos Visuais Elementos animados do jogo. Utilizados para representar inimigos, o jogador, cursores animados entre outros. Possuem como característica principal pontos transparentes. PUCPR - CCET 6
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. PUCPR - CCET 7
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. PUCPR - CCET 8
9 Visão Geral do Paint.NET Ferramentas Histórico de comandos Imagem Cores Layers PUCPR - CCET 9
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. PUCPR - CCET 10
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. PUCPR - CCET 11
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. PUCPR - CCET 12
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. PUCPR - CCET 13
14 Criação de Tilemaps Para ilustrar o processo, o Jogo da Velha irá utilizar um tilemap para o cenário de fundo. PUCPR - CCET 14
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. PUCPR - CCET 15
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. PUCPR - CCET 16
17 Criação de Tilemaps A imagem PNG gerada tem a seguinte aparência: PUCPR - CCET 17
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. PUCPR - CCET 18
19 Uso do Mappy Tamanho do bloco Largura do mapa em blocos Número de cores Versão do arquivo PUCPR - CCET 19
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) PUCPR - CCET 20
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. PUCPR - CCET 21
22 Uso do Mappy Uma vez criado o mapa, devemos importar os gráficos no menu File, opção Import. PUCPR - CCET 22
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). PUCPR - CCET 23
24 Tela Final PUCPR - CCET 24
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 Mappy disponibilizado no site da tutoria. PUCPR - CCET 25
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. PUCPR - CCET 26
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. PUCPR - CCET 27
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. PUCPR - CCET 28
29 Criação de Sprites Assim, DEVEMOS desabilitar o antialiasing do Paint.NET: Anti-aliasing PUCPR - CCET 29
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. PUCPR - CCET 30
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. PUCPR - CCET 31
32 Criação de Sprites Na hora de gerar o arquivo PNG do sprite, basta tornar invisível o layer de fundo. PUCPR - CCET 32
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. PUCPR - CCET 33
34 Criação de Sprites Sprites básicos do jogo da velha (32x32, 4 blocos em cada imagem): PUCPR - CCET 34
35 Criação de Sprites Sprites animados devem ter todos os seus quadros definidos na imagem: PUCPR - CCET 35
36 Fontes Bitmap A maneira mais comum de se utilizar textos, mesmo em OpenGL e Direct 3D, é utilizarmos as fontes em sprites. Assim, devemos utilizar uma ferramenta capaz de gerar tais sprites. PUCPR - CCET 36
37 Fontes Bitmap Uma ferramenta bastante poderosa é a Bitmap Font Builder. PUCPR - CCET 37
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. PUCPR - CCET 38
39 Fontes Bitmap No caso de fundo conhecido, devemos colocar a cor de fundo desejada e podemos utilizar anti-aliasing: PUCPR - CCET 39
40 Fontes Bitmap No caso de fundo variável, devemos colocar a cor de fundo magenta e não devemos utilizar anti-aliasing: PUCPR - CCET 40
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. PUCPR - CCET 41
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). PUCPR - CCET 42
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. PUCPR - CCET 43