O que é o Editor de Imagens no Visual Studio?

O Editor de imagens no Visual Studio é uma ferramenta que você pode usar para exibir e modificar recursos de textura e imagem. Especificamente, você pode usar o Editor de Imagens para trabalhar com os tipos de textura rica e formatos de imagem usados no desenvolvimento de aplicativos DirectX. O Editor de Imagem inclui suporte para formatos de arquivo de imagem e codificações de cores populares, recursos como canais alfa e mapeamento MIP, e muitos dos formatos de textura altamente compactados e acelerados por hardware que o DirectX suporta.

Formatos suportados

O Editor de Imagem suporta os seguintes formatos de imagem:

Nome do formato	Extensão de nome de arquivo
Gráficos de rede portáteis	.png
JPEG	.jpg, .jpeg, .jpe, .jfif
Superfície de Desenho Direto	.dds
Formato de intercâmbio gráfico	.gif
Bitmap	.bmp, .dib
formato TIFF (Tagged Image File Format)	.tif, .tiff
TGA (Targa)	.tga

Introdução

Esta seção descreve como adicionar uma imagem ao seu projeto do Visual Studio e configurá-lo para suas necessidades.

Adicionar uma imagem ao seu projeto

1. No Gerenciador de Soluções, abra o menu de atalho para o projeto ao qual você deseja adicionar a imagem e escolha Adicionar>Novo Item.

2. Na caixa de diálogo Adicionar Novo Item , em Instalado, selecione Gráficos e, em seguida, selecione um formato de arquivo apropriado para a imagem.

   Observação

   Se não vir a categoria Gráficos na caixa de diálogo Adicionar Novo Item , poderá ter de instalar o componente Editores de imagem e modelo 3D . Feche a caixa de diálogo e, em seguida, selecione Ferramentas>Obter ferramentas e recursos na barra de menus, para abrir o instalador do Visual Studio. Selecione a guia Componentes individuais e, em seguida, selecione o componente Editores de imagem e modelo 3D na categoria Jogos e gráficos . Selecione . Modificar.

   

   Para obter informações sobre como escolher um formato de arquivo com base em suas necessidades, consulte Escolher o formato de imagem.

3. Especifique o Nome do arquivo de imagem e o Local onde você deseja que ele seja criado.

4. Escolha o botão Adicionar .

Escolha o formato da imagem

Dependendo de como você planeja usar a imagem, certos formatos de arquivo podem ser mais apropriados do que outros. Por exemplo, alguns formatos podem não suportar um recurso de que você precisa, por exemplo, transparência ou um formato de cor específico. Alguns formatos podem não fornecer compressão adequada para o tipo de conteúdo de imagem que você planejou.

As informações a seguir podem ajudá-lo a escolher um formato de imagem que atenda às suas necessidades:

Imagem bitmap (.bmp)

O formato de imagem bitmap. Um formato de imagem não comprimido que suporta cores de 24 bits. O formato de bitmap não oferece suporte a transparência.

Imagem GIF (.gif)

O formato de imagem GIF (Graphics Interchange Format). Um formato de imagem compactado LZW e sem perdas que suporta até 256 cores. Inadequado para fotografias e imagens que têm uma quantidade significativa de detalhes de cor, mas fornece boas taxas de compressão para imagens de baixa cor que têm um alto grau de coerência de cores.

Imagem JPG (.jpg)

O formato de imagem JPEG (Joint Photographic Experts Group). Um formato de imagem altamente comprimido e com perdas de qualidade que suporta cores de 24 bits e é adequado para compressão de uso geral de imagens que têm um alto grau de coerência de cores.

Imagem PNG (.png)

O formato de imagem PNG (Portable Network Graphics). Um formato de imagem moderadamente comprimido e sem perdas que suporta cor de 24 bits e transparência alfa. É adequado para imagens naturais e artificiais, mas não fornece taxas de compressão tão boas quanto formatos com perdas, como JPG ou GIF.

Imagem TIFF (.tif)

O formato de imagem TIFF (Tagged Image File Format ou TIF). Um formato de imagem flexível que suporta vários esquemas de compressão.

Textura DDS (.dds)

O formato de textura DirectDraw Surface (DDS). Um formato de textura altamente comprimido e com perdas que suporta cor de 24 bits e transparência alfa. Suas taxas de compressão podem ser tão altas quanto 8:1. Baseia-se na compressão de textura S3, que pode ser descomprimida em hardware gráfico.

Imagem TGA (.tga)

O formato de imagem Truevision Graphics Adapter (TGA) (também conhecido como Targa). Um formato de imagem compactado por RLE e sem perdas que suporta imagens mapeadas por cores (paleta de cores) ou de cores diretas de até 24 bits de cor e transparência alfa. Inadequado para fotografias e imagens que têm uma quantidade significativa de detalhes de cor, mas fornece boas taxas de compressão para imagens que têm longos intervalos de cores idênticas.

Configurar a imagem

Antes de começar a trabalhar com a imagem que você criou, você pode alterar sua configuração padrão. Por exemplo, você pode alterar suas dimensões ou o formato de cor que ele usa. Para obter informações sobre como configurar essas e outras propriedades da imagem, consulte Propriedades da imagem.

Observação

Antes de salvar seu trabalho, certifique-se de definir a propriedade Color Format se quiser usar um formato de cor específico. Se o formato de ficheiro suportar compressão, pode ajustar as definições de compressão quando guardar o ficheiro pela primeira vez ou quando escolher Guardar Como.

Trabalhar com o Editor de Imagens para modificar texturas e imagens

Os comandos que afetam o estado do Editor de Imagem estão localizados na barra de ferramentas Modo Editor de Imagem , juntamente com comandos avançados. A barra de ferramentas está localizada ao longo da borda superior da superfície de design do Editor de Imagens . As ferramentas de desenho estão localizadas na barra de ferramentas do Editor de Imagens ao longo da borda mais à esquerda da superfície de design do Editor de Imagens .

Barra de ferramentas do Modo Editor de Imagem

A tabela a seguir descreve os itens na barra de ferramentas Modo Editor de Imagem , que são listados na ordem em que aparecem da esquerda para a direita:

Item da barra de ferramentas	Description
Selecionar	Permite a seleção de uma região retangular de uma imagem. Depois de selecionar uma região, você pode cortá-la, copiá-la, movê-la, dimensioná-la, girá-la, invertê-la ou excluí-la. Quando há uma seleção ativa, as ferramentas de desenho afetam apenas a região selecionada.
Seleção irregular	Permite a seleção de uma região irregular de uma imagem. Depois de selecionar uma região, você pode cortá-la, copiá-la, movê-la, dimensioná-la, girá-la, invertê-la ou excluí-la. Quando há uma seleção ativa, as ferramentas de desenho afetam apenas a região selecionada.
Seleção de Varinha	Permite a seleção de uma região de cor semelhante de uma imagem. A tolerância, ou seja, a diferença máxima entre cores adjacentes dentro das quais elas são consideradas semelhantes, pode ser configurada para incluir uma gama menor ou maior de cores semelhantes. Depois de selecionar uma região, você pode cortá-la, copiá-la, movê-la, dimensioná-la, girá-la, invertê-la ou excluí-la. Quando há uma seleção ativa, as ferramentas de desenho afetam apenas a região selecionada.
Pan	Permite o movimento da imagem em relação à moldura da janela. No modo panorâmico , selecione um ponto na imagem e mova-o. Você pode ativar temporariamente o modo Pan pressionando e mantendo pressionada a tecla Ctrl .
Ampliar	Permite a exibição de mais ou menos detalhes da imagem em relação à moldura da janela. No modo de zoom , selecione um ponto na imagem e, em seguida, mova-o para a direita ou para baixo para aumentar o zoom, ou para a esquerda ou para cima para reduzir o zoom. Você pode aumentar ou diminuir o zoom pressionando e mantendo pressionada a tecla Ctrl enquanto usa a roda do mouse ou pressiona o sinal de mais (+) ou o sinal de menos (-).
Zoom para o tamanho real	Exibe a imagem usando uma relação 1:1 entre os pixels da imagem e os pixels da tela.
Zoom para ajustar	Exibe a imagem completa na moldura da janela.
Zoom para largura	Exibe a largura total da imagem na moldura da janela.
Grelha	Habilita ou desabilita a grade que mostra os limites de pixels. A grade pode não aparecer até que você aumente o zoom na imagem.
Ver Próximo Nível MIP	Ativa o próximo nível maior de MIP em uma cadeia de mapas MIP. O nível MIP ativo é exibido na superfície de design. Este item só está disponível para texturas com níveis de MIP.
Ver Nível MIP Anterior	Ativa o próximo nível MIP menor em uma cadeia de mapas MIP. O nível MIP ativo é exibido na superfície de design. Este item só está disponível para texturas com níveis de MIP.
Canal Vermelho Canal Verde Canal Azul Canal alfa	Habilita ou desabilita o canal de cores específico. Observação: Ao habilitar ou desabilitar sistematicamente os canais de cores, você pode isolar problemas relacionados a um ou mais deles. Por exemplo, podes identificar uma transparência alfa incorreta.
Contexto geral	Habilita ou desabilita a exibição do plano de fundo através de partes transparentes da imagem. Você pode configurar como o plano de fundo é exibido escolhendo entre estas opções: Tabuleiro de xadrez Usa uma cor verde juntamente com a cor de plano de fundo especificada para exibir o plano de fundo como um padrão quadriculado. Você pode usar essa opção para ajudar a tornar as partes transparentes da imagem mais aparentes. Fundo branco Usa a cor branca para exibir o plano de fundo. Fundo preto Usa a cor preta para exibir o plano de fundo. Animar fundo Desliza o padrão quadriculado lentamente. Você pode usar essa opção para ajudar a tornar as partes transparentes da imagem mais aparentes.
Propriedades	Como alternativa, abre ou fecha a janela Propriedades .
Advanced	Contém comandos e opções adicionais. Filtros Fornece vários filtros de imagem comuns: Preto e Branco, Desfoque, Iluminar, Escurecer, Deteção de Bordas, Relevo, Inverter Cores, Ondulação, Tom Sépia e Aguçar. Motores Gráficos Renderizar com D3D11 Usa o Direct3D 11 para renderizar a superfície de design do Editor de Imagens . Renderizar com D3D11WARP Usa o Direct3D 11 Windows Advanced Rasterization Platform (WARP) para renderizar a superfície de design do Editor de Imagens . Tools Flip Horizontal Transpõe a imagem em torno do seu eixo horizontal, também conhecido como x. Inverter Verticalmente Transpõe a imagem em torno de seu eixo vertical, ou y. Gerar Mips Gera níveis de MIP para uma imagem. Se os níveis de MIP já existirem, eles serão recriados a partir do maior nível de MIP. Todas as alterações feitas em níveis menores de MIP são perdidas. Para salvar os níveis de MIP que você gerou, você deve usar o formato .dds para salvar a imagem. View Taxa de quadros Quando ativado, exibe a taxa de quadros no canto superior direito da superfície de design. A taxa de fotogramas é o número de fotogramas que são desenhados por segundo. Dica: Você pode escolher o botão Avançado para executar o último comando novamente.

Barra de ferramentas do Editor de Imagem

A tabela a seguir descreve os itens na barra de ferramentas do Editor de Imagens , que são listados na ordem em que aparecem de cima para baixo:

Item da barra de ferramentas	Description
Lápis	Usa a seleção de cores ativa para desenhar um traçado com alias. Você pode definir a cor e a espessura do traçado na janela Propriedades .
Pincel	Usa a cor ativa para desenhar um traçado suavizado. Você pode definir a cor e a espessura do traçado na janela Propriedades .
Aerógrafo	Usa a seleção de cores ativa para desenhar um traçado anti-aliasing que se funde com a imagem e se torna mais saturado à medida que o tempo passa. Você pode definir a cor e a espessura do traçado na janela Propriedades .
Conta-gotas	Define a seleção de cores ativa como a cor do pixel selecionado.
Preenchimento	Usa a seleção de cores ativa para preencher uma região da imagem. A região afetada é definida como o pixel onde o preenchimento é aplicado, juntamente com cada pixel que está ligado a ele através de pixels da mesma cor e que são da mesma cor. Se o preenchimento for aplicado dentro de uma seleção ativa, a região afetada será restringida pela seleção. Por padrão, a seleção de cores ativas é misturada com a região afetada da imagem de acordo com seu componente alfa. Para usar a seleção de cores ativa para substituir a região afetada, pressione e mantenha pressionada a tecla Shift quando usar a ferramenta de preenchimento.
Apagador	Define os pixels para a cor totalmente transparente se a imagem suportar um canal alfa. Caso contrário, o Eraser define os pixels para a cor de fundo ativa.
Linha, Retângulo, Retângulo arredondado, Elipse	Desenha uma forma na imagem. Você pode definir a cor e a espessura do contorno na janela Propriedades . Para desenhar uma primitiva que tenha largura e altura iguais, pressione e mantenha pressionada a tecla Shift enquanto desenha.
Texto	Usa a seleção de cores de primeiro plano para desenhar texto. A cor do plano de fundo é determinada pela seleção da cor do plano de fundo. Para um plano de fundo transparente, o valor alfa da seleção de cor de plano de fundo deve ser 0. Enquanto a região de texto estiver ativa, pode definir se o texto será desenhado com traçado anti-aliasing, e ajustar o Valor do texto, a Fonte, o Tamanho e o estilo—Negrito, Itálico ou Sublinhado—na janela Propriedades. O conteúdo e a aparência do texto são finalizados quando a área de texto não está mais ativa.
Girar	Gira a imagem 90 graus no sentido horário.
Trim	Corta a imagem para a seleção ativa.

Trabalhar com níveis de MIP

Alguns formatos de imagem, por exemplo, DirectDraw Surface (.dds), suportam níveis MIP para nível de detalhe (LOD) de espaço de textura.

Trabalhar com transparência

Alguns formatos de imagem, por exemplo, DirectDraw Surface (.dds), suportam transparência. Há várias maneiras de usar a transparência, dependendo da ferramenta que você está usando. Para especificar o nível de transparência para uma seleção de cores, na janela Propriedades , defina o componente A (alfa) da seleção de cores.

A tabela a seguir descreve como diferentes tipos de ferramentas controlam como a transparência é aplicada:

Tool	Description
Lápis, Pincel, Aerógrafo, Linha, Retângulo, Retângulo Arredondado, Elipse, Texto	Para mesclar a seleção de cores ativas com a imagem, na janela Propriedades , expanda o grupo de propriedades Canais e defina a caixa de seleção Desenhar no canal Alpha e, em seguida, desenhe normalmente. Para desenhar usando a seleção de cores ativa e deixar o valor alfa da imagem no lugar, desmarque a caixa de seleção Desenhar do canal Alpha e desenhe normalmente.
Preenchimento	Para misturar a seleção de cores ativas com a imagem, basta escolher a área a preencher. Para usar a seleção de cores ativa, incluindo o valor do canal alfa, para substituir a imagem, pressione e mantenha pressionada a tecla Shift e escolha a área a ser preenchida.

Propriedades da imagem

Você pode usar a janela Propriedades para especificar várias propriedades da imagem. Por exemplo, você pode definir as propriedades width e height para redimensionar a imagem.

A tabela a seguir descreve as propriedades da imagem:

Propriedade	Description
Largura	A largura da imagem.
Altura	A altura da imagem.
Bits por pixel	O número de bits que representam cada pixel. O valor dessa propriedade depende do formato de cor da imagem.
Seleção transparente	True para misturar a camada de seleção com a imagem principal, com base no valor alfa da camada de seleção; caso contrário, False. Este item só está disponível para imagens que suportam alfa.
Formato	O formato de cor da imagem. Você pode especificar vários formatos de cor, dependendo do formato da imagem. O formato de cor define o número e tipo de canais de cor que estão incluídos na imagem, e também o tamanho e codificação de vários canais.
Nível Mip	O nível MIP ativo. Este item só está disponível para texturas com níveis de MIP.
Contagem de Nível de Mip	O número total de níveis de MIP na imagem. Este item só está disponível para texturas com níveis de MIP.
Contagem de quadros	O número total de quadros na imagem. Este item só está disponível para imagens que suportam matrizes de textura.
Moldura	O quadro atual. Apenas o primeiro quadro pode ser visualizado; Todos os outros quadros são perdidos quando a imagem é salva.
Contagem de fatias de profundidade	O número total de faixas de profundidade na imagem. Este item só está disponível para imagens que suportam texturas de volume.
Corte de Profundidade	O corte de profundidade atual. Apenas a primeira fatia pode ser visualizada; Todas as outras fatias são perdidas quando você salva a imagem.

Observação

Como a propriedade Girar por se aplica a todas as ferramentas e regiões selecionadas, ela sempre aparece na parte inferior da janela Propriedades junto com outras propriedades da ferramenta. Rodar por está sempre mostrado porque toda a imagem está automaticamente seleccionada quando não há outra seleção ou ferramenta ativa. Para obter mais informações sobre a propriedade Rotação por, consulte Propriedades da ferramenta.

Redimensionar imagens

Há duas maneiras de redimensionar uma imagem. Em ambos os casos, o Editor de Imagem usa interpolação bilinear para redefinir a amostra da imagem.

• Na janela Propriedades , especifique novos valores para as propriedades Width e Height .

• Selecione a imagem inteira e use os marcadores de borda para redimensioná-la.

Regiões selecionadas

As seleções no Editor de imagens definem regiões da imagem que estão ativas. As regiões ativas são afetadas por ferramentas e transformações. Quando há uma seleção ativa, as áreas fora da região selecionada não são afetadas pela maioria das ferramentas e transformações. Se não houver uma seleção ativa, toda a imagem estará ativa.

A maioria das ferramentas (Lápis, Pincel, Aerógrafo, Preenchimento, Borracha e primitivas 2D) e transformações (Girar, Cortar, Inverter Cores, Inverter Horizontal e Inverter Vertical) são restritas ou definidas pela seleção ativa. No entanto, algumas ferramentas (Conta-gotas e Texto) e transformações (Gerar Mips) não são afetadas por nenhuma seleção ativa. Essas ferramentas sempre se comportam como se a imagem inteira fosse a seleção ativa.

Enquanto seleciona uma região, você pode pressionar e segurar Shift para fazer uma seleção proporcional (quadrada). Caso contrário, a seleção não será restringida.

Redimensionar seleções

Depois de selecionar uma região, você pode redimensioná-la ou seu conteúdo de imagem alterando o tamanho do marcador de seleção. Ao redimensionar a região selecionada, você pode usar as seguintes teclas modificadoras para alterar o comportamento da região selecionada à medida que a redimensiona:

Ctrl - Copia o conteúdo da região selecionada antes de ser redimensionada. Isso deixa a imagem original intacta enquanto a cópia é redimensionada.

Shift - Redimensiona a região selecionada proporcionalmente ao seu tamanho original.

Alt - Altera o tamanho da região de seleção. Isso deixa a imagem intacta.

A tabela a seguir descreve as combinações válidas de teclas modificadoras:

Ctrl	Turno	Alt	Description
			Redimensiona o conteúdo da região selecionada.
	Shift		Redimensiona proporcionalmente o conteúdo da região selecionada.
		Alt	Redimensiona a região selecionada. Isso define uma nova região de seleção.
	Shift	Alt	Redimensiona proporcionalmente a região selecionada. Isso define uma nova região de seleção.
Ctrl			Copia e redimensiona o conteúdo da região selecionada.
Ctrl	Shift		Copia e, em seguida, redimensiona proporcionalmente o conteúdo da região selecionada.

Propriedades da ferramenta

Enquanto uma ferramenta é selecionada, você pode usar a janela Propriedades para especificar detalhes sobre como ela afeta a imagem. Por exemplo, você pode definir a espessura da ferramenta Lápis ou a cor da ferramenta Pincel .

Você pode definir uma cor de primeiro plano e uma cor de plano de fundo. Ambos suportam um canal alfa para fornecer opacidade definida pelo usuário. As configurações se aplicam a todas as ferramentas. Se você usar um mouse, o botão esquerdo do mouse corresponde à cor do primeiro plano e o botão direito do mouse corresponde à cor do plano de fundo.

A tabela a seguir descreve as propriedades da ferramenta:

Tool	Propriedades
Todas as ferramentas e seleções	Rodar por Define a quantidade, em graus, que o efeito da seleção ou da ferramenta é girado no sentido horário.
Lápis, Pincel, Aerógrafo, Borracha	Espessura Define o tamanho da área afetada pela ferramenta.
Texto	Anti-alias Desenha texto com bordas alisadas. Isso dá ao texto uma aparência mais suave. Value O texto a exibir. Fonte A fonte usada para desenhar o texto. Tamanho O tamanho do texto. Negrito Coloca a fonte em negrito. Italics Coloca a fonte em itálico. Sublinhado Deixa a fonte sublinhada.
2D Primitivo	Anti-alias Desenha primitivas com bordas anti-aliasing. Isto dá-lhes uma aparência mais suave. Espessura Define a espessura da linha que forma o limite do primitivo. Raio X (Apenas retângulo arredondado) Define o raio de arredondamento para as bordas superior e inferior do primitivo. Raio Y (Apenas retângulo arredondado) Define o raio de arredondamento para as bordas esquerda e direita do primitivo.
Lápis, Pincel, Aerógrafo, 2D Primitivo	Canais Habilita ou desabilita canais de cores específicos para visualização e desenho. Se View estiver definido para um canal de cor específico, esse canal ficará visível na imagem; caso contrário, não é visível. Se Draw estiver definido para um canal de cor específico, esse canal será afetado por operações de desenho; caso contrário, não é.
Seleção de Varinha, Preenchimento	Tolerância Define a diferença máxima entre cores adjacentes dentro das quais elas são consideradas semelhantes, para que menos ou mais cores semelhantes façam parte da região afetada ou selecionada. Por padrão, o valor é 32, o que significa que pixels adjacentes dentro de 32 tons (mais claro ou mais escuro) da cor original são considerados parte da região.

Atalhos de teclado

Command	Atalhos de teclado
Alternar para o modo Selecionar	S
Mudar para o modo de zoom	Z
Mudar para o modo Pan	K
Selecionar tudo	+ CtrlUm
Excluir a seleção atual	Eliminar
Cancelar a seleção atual	Esc (fuga)
Aumentar o zoom	+ CtrlRoda do rato para a frente Ctrl+PageUp Sinal de adição (+)
Reduzir o zoom	- CtrlRoda do rato para trás Ctrl-PageDown Sinal de menos (-)
Mover a imagem para cima	Roda do rato para trás PageDown
Mover a imagem para baixo	Roda do rato para a frente PageUp
Mover a imagem para a esquerda	Shift+Roda do rato para trás Roda do rato para a esquerda Shift+Page Down
Mover a imagem para a direita	Shift+Roda do rato para a frente Roda do rato para a direita Shift+PageUp
Zoom para o tamanho real	+ Ctrl0 (zero)
Ajustar imagem à janela	Ctrl+G, Ctrl+F
Ajustar a imagem à largura da janela	Ctrl+G, Ctrl+I
Alternar grelha	+ CtrlG, Ctrl+G
Recortar imagem para a seleção atual	+ CtrlG, Ctrl+C
Ver seguinte nível MIP (mais detalhado)	+ CtrlG, Ctrl+6
Ver nível MIP anterior (detalhe inferior)	Ctrl+G, Ctrl+7
Alternar canal de cor vermelha	Ctrl+G, Ctrl+1
Alternar canal de cor verde	CtrlG, Ctrl2
Alternar canal de cor azul	Ctrl+G, Ctrl+3
Alternar o canal alfa (transparente)	Ctrl+G, Ctrl+4
Alternar padrão de tabuleiro alfa	Ctrl+G, Ctrl+B
Mudar para a ferramenta de seleção irregular	L
Mudar para a ferramenta de seleção de varinha	M
Mudar para a ferramenta lápis	P
Mudar para a ferramenta de pincel	B
Mudar para a ferramenta de preenchimento	F
Mudar para a ferramenta apagador	E
Mudar para a ferramenta de texto	T
Mudar para a ferramenta de seleção de cores (conta-gotas)	Eu
Mova a seleção ativa e seu conteúdo.	Teclas de seta .
Redimensione a seleção ativa e seu conteúdo.	+ CtrlTeclas de seta
Mova a seleção ativa, mas não seu conteúdo.	Turno+Teclas de seta
Redimensione a seleção ativa, mas não seu conteúdo.	Shift+Ctrl+teclas de seta
Confirmar a camada atual	Regresso
Diminuir a espessura da ferramenta	[
Aumentar a espessura da ferramenta	]

Exemplos de Editor de Imagem

Os exemplos nesta seção mostram como usar o Editor de imagens para criar uma textura básica e como gerar e modificar níveis de MIP.

Criar uma textura básica

Você pode usar o Editor de imagens para criar e modificar imagens e texturas para seu jogo ou aplicativo. Por exemplo, você pode definir o tamanho da textura, definir as cores de primeiro plano e plano de fundo, usar o canal alfa (transparência), usar as ferramentas Preenchimento e Elipse e definir as propriedades da ferramenta.

Neste exemplo, as etapas a seguir mostram como criar uma textura que representa um alvo "bullseye". Quando terminar, a textura deverá ser semelhante à imagem a seguir. Para demonstrar melhor a transparência na textura, o Editor de Imagens foi configurado para usar um padrão verde quadriculado para exibi-lo.

Antes de começar, verifique se a janela Propriedades é exibida. Use a janela Propriedades para definir o tamanho da imagem, alterar as propriedades da ferramenta e especificar cores enquanto trabalha.

Crie uma textura de alvo "bullseye"

1. Crie uma textura com a qual trabalhar. Para obter informações sobre como adicionar uma textura ao seu projeto, consulte Editor de imagens.

2. Defina o tamanho da imagem para 512x512 pixels. Na janela Propriedades , defina os valores das propriedades Width e Height como 512.

3. Na barra de ferramentas do Editor de Imagens, escolha a ferramenta Preenchimento . A janela Propriedades agora exibe as propriedades da ferramenta Preenchimento juntamente com as propriedades da imagem.

4. Defina a cor de primeiro plano como preto totalmente transparente. Na janela Propriedades , no grupo de propriedades Cores , selecione Primeiro plano. Defina os valores das propriedades R, G, B e A ao lado do seletor de cores como 0.

5. Na barra de ferramentas do Editor de Imagens, escolha a ferramenta Preenchimento e, em seguida, pressione e mantenha pressionada a tecla Shift e escolha qualquer ponto da imagem. Usar a tecla Shift faz com que o valor alfa da cor de preenchimento substitua a cor na imagem; caso contrário, o valor alfa é usado para misturar a cor de preenchimento com a cor na imagem.

   Importante

   Esta etapa, juntamente com a seleção de cores na etapa anterior, garante que a imagem base esteja preparada para a textura de destino "bullseye" que você desenhará. Quando a imagem é preenchida com preto transparente — e porque a borda do alvo é preta — não haverá artefatos de aliasing ao redor do alvo.

6. Na barra de ferramentas do Editor de Imagens, escolha a ferramenta Elipse .

7. Defina a cor do primeiro plano como preto totalmente opaco. Defina os valores das propriedades R, G e B como 0 e o valor da propriedade A como 255.

8. Defina a cor do plano de fundo como branco totalmente opaco. Na janela Propriedades , no grupo de propriedades Cores , selecione Plano de fundo. Defina os valores das propriedades R, G, B e A como 255.

9. Defina a largura do contorno da elipse. Na janela Propriedades , no grupo de propriedades Aparência , defina o valor da propriedade Width como 8.

10. Certifique-se de que a suavização de borda está ativada. Na janela Propriedades , no grupo de propriedades Aparência , verifique se a propriedade Anti-alias está definida.

11. Usando a ferramenta Elipse, desenhe um círculo desde as coordenadas de píxel (3, 3) até às coordenadas de píxel (508, 508). Para desenhar o círculo mais facilmente, você pode pressionar e segurar a tecla Shift enquanto desenha.

    Observação

    As coordenadas de pixel do local atual do ponteiro são exibidas na barra de status do Visual Studio.

12. Altere a cor do plano de fundo. Defina R para 44, G para 165, B para 211, e A para 255.

13. Desenhe outro círculo desde a coordenada de pixel (64, 64) até a coordenada de pixel (448, 448).

14. Altere a cor do plano de fundo de volta para branco totalmente opaco. Defina R, G, B e A como 255.

15. Desenhe outro círculo da coordenada de pixel (128, 128) até a coordenada de pixel (384, 384).

16. Altere a cor do plano de fundo. Defina R para 255, G e B para 64, e A para 255.

17. Desenhe outro círculo a partir da coordenada de pixel (192, 192) até à coordenada de pixel (320, 320).

A textura do alvo "bullseye" está completa. Aqui está a imagem final, mostrada com transparência.

Para acompanhar, você pode gerar níveis de MIP para essa textura. Para obter informações sobre como fazer isso, consulte a próxima seção.

Criar e modificar níveis de MIP

Este documento demonstra como usar o Editor de Imagem para gerar e modificar níveis de MIP para o Nível de Detalhe (LoD) de espaço de textura.

Geração de níveis de MIP

Mipmapping é uma técnica usada para aumentar a velocidade de renderização e reduzir artefatos de aliasing em objetos texturizados pré-calculando e armazenando várias cópias de uma textura em tamanhos diferentes. Cada cópia, que é conhecida como um nível MIP, tem metade da largura e altura da cópia anterior. Quando uma textura é renderizada na superfície de um objeto, o nível de MIP que corresponde mais de perto à área de espaço de tela da superfície texturizada é escolhido automaticamente. Isso significa que o hardware gráfico não precisa filtrar texturas superdimensionadas para manter uma qualidade visual consistente. Embora o custo de memória para armazenar os níveis de MIP seja cerca de 33% maior do que o da textura original sozinha, os ganhos de desempenho e qualidade de imagem justificam isso.

Para gerar níveis de MIP

1. Comece com uma textura básica. Para obter melhores resultados, especifique uma textura que tenha uma largura e altura que sejam uma potência de dois tamanhos, por exemplo, 256, 512, 1024 e assim por diante.

2. Gere os níveis de MIP. Na barra de ferramentas Modo de Edição de Imagem, escolha Ferramentas>Avançadas>Gerar Mips.

   Observe que os botões Ir para o próximo nível Mip e Ir para o nível Mip anterior agora aparecem na barra de ferramentas Modo Editor de Imagem . Se a janela Propriedades for exibida, note também que as propriedades de apenas leitura Mip Level e Mip Level Count agora aparecem nas propriedades da imagem.

Modificando os níveis de MIP

Para obter efeitos especiais ou aumentar a qualidade da imagem em níveis específicos de detalhes, você pode modificar cada nível de MIP individualmente. Por exemplo, você pode dar a um objeto texturizado uma aparência diferente à distância (uma distância maior corresponde a níveis menores de MIP) ou pode garantir que as texturas que contêm texto ou símbolos permaneçam legíveis, mesmo em níveis menores de MIP.

Para modificar um nível de MIP individual

1. Selecione o nível MIP que você deseja modificar. Na barra de ferramentas Modo Editor de Imagem , use os botões Ir para o próximo nível MIP e Ir para o nível MIP anterior para mover-se entre os níveis MIP.

2. Depois de selecionar o nível MIP que você deseja modificar, você pode usar as ferramentas de desenho para modificá-lo sem alterar o conteúdo de outros níveis MIP. As ferramentas de desenho estão disponíveis na barra de ferramentas do Editor de Imagens. Depois de selecionar uma ferramenta, você pode alterar suas propriedades na janela Propriedades .

Observação

Se você não precisar modificar o conteúdo de níveis MIP individuais, como você pode fazer para obter determinados efeitos, recomendamos que você gere mipmaps a partir da textura de origem no momento da compilação. Isso ajuda a garantir que os níveis de MIP permaneçam sincronizados com a textura de origem, pois as modificações em um nível de MIP não são propagadas para outros níveis automaticamente.

Conteúdo relacionado

Visite a página Exportar texturas para saber como usar o Image Content Pipeline para exportar texturas que contêm mipmaps, alfa pré-multiplicada e muito mais.