Che cos'è l'editor di immagini in Visual Studio?

Editor di immagini in Visual Studio è uno strumento che è possibile usare per visualizzare e modificare le risorse di trama e immagine. In particolare, è possibile usare l'editor di immagini per lavorare con i tipi di formati di trama e immagine avanzati usati nello sviluppo di app DirectX. L'editor di immagini include il supporto per i formati di file di immagine e le codifiche dei colori più diffusi, come i canali alfa e il mapping MIP e molti dei formati di trama con accelerazione hardware altamente compressi supportati da DirectX.

Formati supportati

L'editor di immagini supporta i formati di immagine seguenti:

Nome formato Estensione del nome file
Grafica di rete portabile .png
JPEG .jpg, .jpeg, .jpe, .jfif
Superficie di disegno diretta .dds
GIF (Graphics Interchange Format) .gif
Bitmap .bmp, .dib
Formato file immagine con tag .tif, .tiff
TGA (Targa) .tga

Get started

Questa sezione descrive come aggiungere un'immagine al progetto di Visual Studio e configurarla per i requisiti.

Aggiungere un'immagine al progetto

  1. In Esplora soluzioni aprire il menu di scelta rapida per il progetto a cui si vuole aggiungere l'immagine e quindi scegliere Aggiungi>nuovo elemento.

  2. Nella finestra di dialogo Aggiungi nuovo elemento , in Installato, selezionare Grafica e quindi selezionare un formato di file appropriato per l'immagine.

    Annotazioni

    Se la categoria Grafica non viene visualizzata nella finestra di dialogo Aggiungi nuovo elemento , potrebbe essere necessario installare il componente Editor modelli Image e 3D . Chiudere la finestra di dialogo e quindi selezionare StrumentiRecupera strumenti >e funzionalità dalla barra dei menu per aprire il programma di installazione di Visual Studio. Selezionare la scheda Componenti individuali e quindi selezionare il componente Editor di immagini e modelli 3D nella categoria Giochi e Grafica. Selezionare Modifica.

    Componente editor di immagini e modelli 3D

    Per informazioni su come scegliere un formato di file in base ai requisiti, vedere Scegliere il formato dell'immagine.

  3. Specificare il nome del file di immagine e il percorso in cui si desidera crearlo.

  4. Fare clic sul pulsante Aggiungi.

Scegliere il formato dell'immagine

A seconda del modo in cui si prevede di usare l'immagine, alcuni formati di file potrebbero essere più appropriati di altri. Ad esempio, alcuni formati potrebbero non supportare una funzionalità necessaria, ad esempio trasparenza o un formato di colore specifico. Alcuni formati potrebbero non fornire una compressione appropriata per il tipo di contenuto dell'immagine pianificato.

Le informazioni seguenti consentono di scegliere un formato di immagine che soddisfi le proprie esigenze:

Immagine bitmap (.bmp)

Formato immagine bitmap. Formato di immagine non compresso che supporta il colore a 24 bit. Il formato bitmap non supporta la trasparenza.

Immagine GIF (.gif)

Formato immagine GIF (Graphics Interchange Format). Un formato di immagine compresso senza perdita di dati tramite LZW che supporta fino a 256 colori. Non adatto per fotografie e immagini con una notevole quantità di dettagli di colore, ma offre buoni rapporti di compressione per le immagini a basso colore che hanno un elevato grado di coerenza dei colori.

Immagine JPG (.jpg)

Il formato di immagine Joint Photographic Experts Group (JPEG). Un formato di immagine altamente compresso e con perdita che supporta il colore a 24 bit ed è adatto per la compressione generica delle immagini con un elevato grado di coerenza dei colori.

Immagine PNG (.png)

Formato di immagine PNG (Portable Network Graphics). Formato di immagine senza perdita moderatamente compresso che supporta il colore a 24 bit e la trasparenza alfa. È adatto sia per immagini naturali che artificiali, ma non offre rapporti di compressione altrettanto buoni rispetto a quelli di formati con perdita come JPG o GIF.

Immagine TIFF (.tif)

Formato di immagine TIFF (Tagged Image File Format) o TIF. Formato di immagine flessibile che supporta diversi schemi di compressione.

Texture DDS (.dds)

Formato di texture DDS (DirectDraw Surface) Un formato di trama altamente compresso e con perdita che supporta il colore a 24 bit e la trasparenza alfa. I rapporti di compressione possono essere superiori a 8:1. Si basa sulla compressione S3 Texture, che può essere decompressa nell'hardware grafico.

Immagine TGA (.tga)

Formato di immagine TGA (Truevision Graphics Adapter) (noto anche come Targa). Formato immagine compresso RLE privo di perdita che supporta sia immagini con mappatura dei colori (tavolozza di colori) sia immagini a colori diretti con profondità di colore fino a 24 bit e trasparenza alfa. Non adatto alle fotografie e alle immagini con una notevole quantità di dettagli di colore, ma offre buoni rapporti di compressione per le immagini con lunghi intervalli di colori identici.

Configurare l'immagine

Prima di iniziare a usare l'immagine creata, è possibile modificarne la configurazione predefinita. Ad esempio, è possibile modificarne le dimensioni o il formato di colore utilizzato. Per informazioni su come configurare queste e altre proprietà dell'immagine, vedere Proprietà dell'immagine.

Annotazioni

Prima di salvare il lavoro, assicurarsi di impostare la proprietà Formato colore se si desidera utilizzare un formato di colore specifico. Se il formato di file supporta la compressione, è possibile modificare le impostazioni di compressione quando si salva il file per la prima volta o quando si sceglie Salva con nome.

Usare l'editor di immagini per modificare trame e immagini

I comandi che influiscono sullo stato dell'editor di immagini si trovano sulla barra degli strumenti Modalità editor immagini insieme ai comandi avanzati. La barra degli strumenti si trova lungo il bordo superiore dell'area di progettazione dell'editor di immagini. Gli strumenti di disegno si trovano sulla barra degli strumenti dell'editor di immagini lungo il bordo sinistro dell'area di progettazione dell'editor di immagini.

Barra degli strumenti della modalità editor di immagini

Screenshot della barra degli strumenti in modalità editor di immagini in Visual Studio.

La tabella seguente descrive gli elementi nella barra degli strumenti Modalità editor immagini , elencati nell'ordine in cui vengono visualizzati da sinistra a destra:

Elemento della barra degli strumenti Description
Seleziona Abilita la selezione di un'area rettangolare di un'immagine. Dopo aver selezionato un'area, è possibile tagliare, copiare, spostare, ridimensionare, ruotare, capovolgere o eliminarla. Quando è presente una selezione attiva, gli strumenti di disegno influiscono solo sull'area selezionata.
Selezione irregolare Abilita la selezione di un'area irregolare di un'immagine. Dopo aver selezionato un'area, è possibile tagliare, copiare, spostare, ridimensionare, ruotare, capovolgere o eliminarla. Quando è presente una selezione attiva, gli strumenti di disegno influiscono solo sull'area selezionata.
Selezione della bacchetta Abilita la selezione di un'area colorata in modo simile di un'immagine. La tolleranza, ovvero la differenza massima tra i colori adiacenti in cui sono considerati simili, può essere configurata per includere una gamma più piccola o più ampia di colori simili. Dopo aver selezionato un'area, è possibile tagliare, copiare, spostare, ridimensionare, ruotare, capovolgere o eliminarla. Quando è presente una selezione attiva, gli strumenti di disegno influiscono solo sull'area selezionata.
Padella Abilita lo spostamento dell'immagine rispetto alla cornice della finestra. In modalità Panoramica selezionare un punto nell'immagine e quindi spostarlo.

È possibile attivare temporaneamente la modalità Panoramica premendo e tenendo premuto CTRL .
Zoom Abilita la visualizzazione di più o meno dettagli dell'immagine rispetto alla cornice della finestra. In modalità Zoom selezionare un punto sull'immagine e quindi spostarlo verso destra o verso il basso per eseguire lo zoom avanti o verso sinistra o verso l'alto per eseguire lo zoom indietro.

È possibile ingrandire o ridurre premendo CTRL mentre si utilizza la rotellina del mouse oppure si preme il segno più (+) o meno (-).
Visualizza a grandezza naturale Visualizza l'immagine usando una relazione 1:1 tra i pixel dell'immagine e i pixel dello schermo.
Adatta alle dimensioni Visualizza l'immagine completa nella cornice della finestra.
Adatta alla larghezza Visualizza la larghezza intera dell'immagine nella cornice della finestra.
Griglia Abilita o disabilita la griglia che mostra i limiti dei pixel. La griglia potrebbe non essere visualizzata fino a quando non si esegue lo zoom nell'immagine.
Visualizzare il livello MIP successivo Attiva il successivo livello MIP più grande in una catena di mappe MIP. Il livello MIP attivo viene visualizzato nell'area di progettazione. Questo elemento è disponibile solo per le texture con livelli MIP.
Visualizzare il livello MIP precedente Attiva il successivo livello MIP più piccolo in una catena di mappe MIP. Il livello MIP attivo viene visualizzato nell'area di progettazione. Questo elemento è disponibile solo per texture con livelli MIP.
Canale rosso

Canale verde

Canale blu

Canale alfa
Abilita o disabilita il canale colore specifico. Nota: Abilitando o disabilitando sistematicamente i canali di colore, è possibile isolare i problemi correlati a uno o più di essi. Ad esempio, è possibile identificare la trasparenza alfa errata.
Sfondo Abilita o disabilita la visualizzazione dello sfondo tramite parti trasparenti dell'immagine. È possibile configurare la modalità di visualizzazione dello sfondo scegliendo tra queste opzioni:

Scacchiera
Usa un colore verde insieme al colore di sfondo specificato per visualizzare lo sfondo come motivo a scacchiera. È possibile usare questa opzione per rendere più evidenti le parti trasparenti dell'immagine.

Sfondo bianco
Usa il colore bianco per visualizzare lo sfondo.

Sfondo nero
Usa il colore nero per visualizzare lo sfondo.

Animare lo sfondo
Esegue la panoramica del modello a scacchiera lentamente. È possibile usare questa opzione per rendere più evidenti le parti trasparenti dell'immagine.
Proprietà In alternativa, apre o chiude la finestra Proprietà .
Advanced Contiene comandi e opzioni aggiuntivi.

Filtri

Fornisce diversi filtri di immagine comuni: Nero e Bianco, Sfocatura, Brillantezza, Scuro, Rilevamento bordi, Rilievo, Inverti colori, Increspature, Tono sepia e Affila.

Motori di grafica

Eseguire il rendering con D3D11
Usa Direct3D 11 per eseguire il rendering dell'area di progettazione dell'editor di immagini.

Eseguire il rendering con D3D11WARP
Usa Direct3D 11 Windows Advanced Rasterization Platform (WARP) per eseguire il rendering dell'area di progettazione dell'editor di immagini.

Strumenti

Rifletti Orizzontalmente
Trasponi l'immagine attorno all'asse orizzontale, o x.

Capovolgi verticalmente
Traspone l'immagine attorno all'asse verticale, o y.

Generare MIPS
Genera livelli MIP per un'immagine. Se i livelli MIP esistono già, vengono ricreati dal livello MIP più grande. Tutte le modifiche apportate ai livelli MIP più piccoli vengono perse. Per salvare i livelli MIP generati, è necessario usare il formato .dds per salvare l'immagine.

View

Frequenza dei fotogrammi
Se abilitata, visualizza la frequenza dei fotogrammi nell'angolo superiore destro dell'area di progettazione. La frequenza dei fotogrammi è il numero di fotogrammi disegnati al secondo. Suggerimento: Puoi scegliere il pulsante Avanzato per eseguire di nuovo l'ultimo comando.

Barra degli strumenti dell'editor di immagini

Screenshot della barra degli strumenti dell'editor di immagini in Visual Studio.

La tabella seguente descrive gli elementi della barra degli strumenti dell'editor di immagini, elencati nell'ordine in cui vengono visualizzati dall'alto verso il basso:

Elemento della barra degli strumenti Description
Matita Usa la selezione del colore attivo per disegnare un tratto con alias. È possibile impostare il colore e lo spessore del tratto nella finestra Proprietà .
Spazzola Usa la selezione del colore attivo per disegnare un tratto anti-alias. È possibile impostare il colore e lo spessore del tratto nella finestra Proprietà .
Aerografo Usa la selezione del colore attivo per tracciare un tratto anti-alias che si combina attivamente con l'immagine e diventa più saturo in funzione del tempo. È possibile impostare il colore e lo spessore del tratto nella finestra Proprietà .
Contagocce Imposta la selezione del colore attivo sul colore del pixel selezionato.
Riempire Usa la selezione dei colori attivi per riempire un'area dell'immagine. L'area interessata viene definita come pixel in cui viene applicato il riempimento, insieme a ogni pixel collegato da pixel dello stesso colore e che corrisponde allo stesso colore. Se il riempimento viene applicato all'interno di una selezione attiva, l'area interessata è vincolata dalla selezione.

Per impostazione predefinita, la selezione dei colori attivi viene combinata con l'area interessata dell'immagine in base al relativo componente alfa. Per utilizzare la selezione colore attiva per sovrascrivere l'area interessata, premere e tenere premuto Maiusc quando si usa lo strumento di riempimento.
Gomma Imposta i pixel sul colore completamente trasparente se l'immagine supporta un canale alfa. In caso contrario, Eraser imposta i pixel sul colore di sfondo attivo.
Linea, Rettangolo, Rettangolo arrotondato, Ellisse Disegna una forma sull'immagine. È possibile impostare il colore e lo spessore del contorno nella finestra Proprietà .

Per disegnare una primitiva con larghezza e altezza uguali, premere e tenere premuto MAIUSC durante il disegno.
Testo Usa la selezione del colore di primo piano per disegnare il testo. Il colore di sfondo è determinato dalla selezione del colore di sfondo. Per uno sfondo trasparente, il valore alfa della selezione del colore di sfondo deve essere 0. Mentre l'area di testo è attiva, è possibile impostare se il testo viene disegnato con un tratto anti-aliasing ed è possibile impostare il testo Value, Font, Size e style( Grassetto, Corsivo o Sottolineato) nella finestra Proprietà . Il contenuto e l'aspetto del testo vengono finalizzati quando l'area di testo non è più attiva.
Ruotare Ruota l'immagine a 90 gradi in senso orario.
trim Taglia l'immagine in base alla selezione attiva.

Lavorare con i livelli MIP

Alcuni formati di immagine, ad esempio DirectDraw Surface (.dds), supportano i livelli MIP per il livello di dettaglio dello spazio delle trame (LOD).

Lavorare con trasparenza

Alcuni formati di immagine, ad esempio DirectDraw Surface (.dds), supportano la trasparenza. Esistono diversi modi per usare la trasparenza, a seconda dello strumento in uso. Per specificare il livello di trasparenza per una selezione di colori, nella finestra Proprietà impostare il componente A (alfa) della selezione del colore.

La tabella seguente descrive in che modo diversi tipi di strumenti controllano la modalità di applicazione della trasparenza:

Tool Description
Matita, Pennello, Airbrush, Linea, Rettangolo, Rettangolo arrotondato, Ellisse, Testo Per combinare la selezione dei colori attivi insieme all'immagine, nella finestra Proprietà espandere il gruppo di proprietà Canali e impostare la casella di controllo Disegno sul canale Alfa , quindi disegnare normalmente.

Per disegnare utilizzando la selezione del colore attiva e lasciare il valore alfa dell'immagine sul posto, deselezionare la casella di controllo Disegno del canale Alfa e quindi disegnare normalmente.
Riempire Per combinare la selezione dei colori attivi insieme all'immagine, è sufficiente scegliere l'area da riempire.

Per utilizzare la selezione del colore attivo, compreso il valore del canale alfa, per sovrascrivere l'immagine, tenere premuto MAIUSC e quindi scegliere l'area da riempire.

Proprietà dell'immagine

È possibile usare la finestra Proprietà per specificare varie proprietà dell'immagine. Ad esempio, è possibile impostare le proprietà di larghezza e altezza per ridimensionare l'immagine.

La tabella seguente descrive le proprietà dell'immagine:

Proprietà Description
Larghezza Larghezza dell'immagine.
Altezza Altezza dell'immagine.
Bit per pixel Numero di bit che rappresentano ogni pixel. Il valore di questa proprietà dipende dal formato colore dell'immagine.
Selezione trasparente True per combinare il livello di selezione insieme all'immagine principale, in base al valore alfa del livello di selezione; in caso contrario, False. Questo elemento è disponibile solo per le immagini che supportano alfa.
Formato Formato di colore dell'immagine. È possibile specificare vari formati di colore, a seconda del formato dell'immagine. Il formato del colore definisce il numero e il tipo di canali di colore inclusi nell'immagine, nonché le dimensioni e la codifica di vari canali.
Livello Mip Livello MIP attivo. Questo elemento è disponibile solo per texture con livelli MIP.
Conteggio livelli Mip Numero totale di livelli MIP nell'immagine. Questo elemento è disponibile solo per texture con livelli MIP.
Numero di fotogrammi Numero totale di fotogrammi nell'immagine. Questo elemento è disponibile solo per le immagini che supportano matrici di trame.
Cornice Fotogramma corrente. Solo il primo fotogramma può essere visualizzato; tutti gli altri fotogrammi vengono persi quando l'immagine viene salvata.
Conteggio delle Sezioni di Profondità Numero totale di sezioni di profondità nell'immagine. Questo elemento è disponibile solo per le immagini che supportano texture volumetriche.
Sezione profondità Sezione di profondità corrente. È possibile visualizzare solo la prima sezione; tutte le altre sezioni vengono perse quando si salva l'immagine.

Annotazioni

Poiché la proprietà Rotate by si applica a tutti gli strumenti e alle aree selezionate, viene sempre visualizzata nella parte inferiore della finestra Proprietà insieme ad altre proprietà degli strumenti. La rotazione viene sempre visualizzata perché l'intera immagine viene selezionata in modo implicito quando non è presente alcuna altra selezione o strumento attivo. Per altre informazioni sulla proprietà Rotate by , vedere Proprietà degli strumenti.

Ridimensionare le immagini

Esistono due modi per ridimensionare un'immagine. In entrambi i casi, l'editor di immagini usa l'interpolazione bilineare per ricampionare l'immagine.

  • Nella finestra Proprietà specificare nuovi valori per le proprietà Width e Height .

  • Selezionare l'intera immagine e usare i marcatori di bordo per ridimensionare l'immagine.

Aree selezionate

Le selezioni nell'editor di immagini definiscono le aree dell'immagine attive. Le aree attive sono interessate da strumenti e trasformazioni. Quando è presente una selezione attiva, le aree esterne all'area selezionata non sono interessate dalla maggior parte degli strumenti e delle trasformazioni. Se non è presente una selezione attiva, l'intera immagine è attiva.

La maggior parte degli strumenti (Matita, Pennello, Airbrush, Riempimento, Gomma e primitive 2D) e delle trasformazioni (Ruota, Trim, Inverti colori, Capovolgi orizzontalmente e Capovolgi verticalmente) è vincolata o definita dalla selezione attiva. Tuttavia, alcuni strumenti (Eyedropper e Text) e trasformazioni (Genera mips) non sono interessati da alcuna selezione attiva. Questi strumenti si comportano sempre come se l'intera immagine fosse la selezione attiva.

Mentre si seleziona un'area, è possibile tenere premuto MAIUSC per effettuare una selezione proporzionale (quadrata). In caso contrario, la selezione non è vincolata.

Ridimensionare le selezioni

Dopo aver selezionato un'area, è possibile ridimensionarla o il relativo contenuto dell'immagine modificando le dimensioni del marcatore di selezione. Durante il ridimensionamento dell'area selezionata, è possibile usare i tasti di modifica seguenti per modificare il comportamento dell'area selezionata durante il ridimensionamento:

CTRL : copia il contenuto dell'area selezionata prima del ridimensionamento. In questo modo l'immagine originale rimane intatta mentre la copia viene ridimensionata.

Shift : ridimensiona l'area selezionata in proporzione alle dimensioni originali.

ALT: modifica le dimensioni dell'area di selezione. In questo modo l'immagine non viene modificata.

Nella tabella seguente vengono descritte le combinazioni di tasti di modifica valide:

Ctrl Spostamento Alt Description
Ridimensiona il contenuto dell'area selezionata.
Shift Ridimensiona proporzionalmente il contenuto dell'area selezionata.
Alt Ridimensiona l'area selezionata. Definisce una nuova area di selezione.
Shift Alt Ridimensiona proporzionalmente l'area selezionata. Definisce una nuova area di selezione.
CTRL Copia e quindi ridimensiona il contenuto dell'area selezionata.
CTRL Spostare Copia e quindi ridimensiona proporzionalmente il contenuto dell'area selezionata.

Proprietà degli strumenti

Mentre è selezionato uno strumento, è possibile usare la finestra Proprietà per specificare i dettagli su come influisce sull'immagine. Ad esempio, è possibile impostare lo spessore dello strumento Matita o il colore dello strumento Pennello .

È possibile impostare sia un colore di primo piano che un colore di sfondo. Entrambi supportano un canale alfa per fornire opacità definita dall'utente. Le impostazioni si applicano a tutti gli strumenti. Se si utilizza un mouse, il pulsante sinistro del mouse corrisponde al colore di primo piano e il pulsante destro del mouse corrisponde al colore di sfondo.

Nella tabella seguente vengono descritte le proprietà degli strumenti:

Tool Proprietà
Tutti gli strumenti e le selezioni Ruota per
Definisce la quantità, espressa in gradi, di rotazione dell'effetto della selezione o dello strumento nella direzione in senso orario.
Matita, Pennello, Aerografo, Gomma Spessore
Definisce le dimensioni dell'area interessata dallo strumento.
Testo Anti-alias
Disegna testo con bordi anti-alias. In questo modo il testo presenta un aspetto più uniforme.

Valore
Testo da disegnare.

Font
Tipo di carattere utilizzato per disegnare il testo.

Dimensione
Dimensione del testo.

Grassetto
Rende il carattere in grassetto.

Italics
Rende corsivo il tipo di carattere.

Sottolineato
Rende sottolineato il tipo di carattere.
Primitiva 2D Anti-alias
Disegna primitive con bordi anti-aliasing. Questo dà loro un aspetto più liscio.

Spessore
Definisce lo spessore della linea che forma il limite della primitiva.

Raggio X
(solo rettangolo arrotondato) Definisce il raggio di arrotondamento per i bordi superiore e inferiore della primitiva.

Raggio Y
(solo rettangolo arrotondato) Definisce il raggio di arrotondamento per i bordi sinistro e destro della forma primitiva.
Matita, Pennello, Aerografo, Primitiva 2D Canali
Abilita o disabilita canali di colore specifici per la visualizzazione e il disegno. Se View è impostato per un canale colore specifico, tale canale è visibile nell'immagine; in caso contrario, non è visibile. Se Draw è impostato per un canale di colore specifico, tale canale è interessato dalle operazioni di disegno; in caso contrario, non lo è.
Selezione bacchetta, Riempimento Tolleranza
Definisce la differenza massima tra i colori adiacenti all'interno dei quali sono considerati simili, in modo che meno o più colori simili vengano resi parte dell'area interessata o selezionata. Per impostazione predefinita, il valore è 32, il che significa che i pixel adiacenti entro 32 sfumature (più chiaro o più scuro) del colore originale sono considerati parte dell'area.

Combinazioni di tasti

Command Combinazioni di tasti
Passare alla modalità seleziona S
Passare alla modalità Zoom Z
Passare alla modalità Panoramica K
Seleziona tutto Ctrl+Un
Eliminare la selezione corrente Elimina
Annullare la selezione corrente Esc (uscita)
Ingrandisci Ctrl+Rotellina del mouse in avanti

Ctrl+PageUp

Segno più (+)
Riduci lo zoom Ctrl-Scorrere la rotellina del mouse all'indietro

Ctrl-PageDown

Segno meno (-)
Sposta l'immagine verso l'alto Rotella del mouse indietro

PageDown
Scorri l'immagine verso il basso Rotellina del mouse in avanti

PageUp
Sposta l'immagine a sinistra Spostare+Rotellina del mouse all'indietro

Rotellina del mouse a sinistra

Spostare+PageDown
Sposta l'immagine a destra Spostare+Rotellina del mouse in avanti

Rotellina del mouse a destra

Spostare+PageUp
Ingrandire le dimensioni effettive Ctrl+0 (zero)
Adattare l'immagine alla finestra Ctrl+G, CTRL+F
Adattare l'immagine alla larghezza della finestra Ctrl+G, CTRL+I
Attiva/disattiva griglia Ctrl+G, CTRL+G
Ritagliare l'immagine nella selezione corrente Ctrl+G, CTRL+C
Visualizzare il livello MIP successivo (più dettagliato) Ctrl+G, CTRL+6
Visualizzare il livello MIP precedente (dettaglio inferiore) Ctrl+G, CTRL+7
Attiva/disattiva canale colore rosso Ctrl+G, CTRL+1
Attiva/disattiva canale colore verde Ctrl+G, CTRL+2
Attiva/disattiva canale colore blu Ctrl+G, CTRL+3
Attiva/disattiva canale alfa (trasparenza) Ctrl+G, CTRL+4
Attiva/disattiva schema checkerboard alfa Ctrl+G, CTRL+B
Passa allo strumento di selezione irregolare L
Passa allo strumento di selezione bacchetta M
Passa allo strumento a matita P
Passa allo strumento pennello B
Passa allo strumento di riempimento F
Passare allo strumento di cancellazione E
Passa allo strumento di testo T
Passa allo strumento di selezione dei colori (contagocce) Io
Spostare la selezione attiva e il relativo contenuto. Tasti di direzione
Ridimensionare la selezione attiva e il relativo contenuto. Ctrl+Tasti di direzione
Spostare la selezione attiva, ma non il relativo contenuto. Maiusc+tasti freccia
Ridimensionare la selezione attiva, ma non il relativo contenuto. Spostare+Ctrl+Tasti di direzione
Eseguire il commit del livello corrente Ritorno
Ridurre lo spessore degli strumenti [
Aumentare lo spessore degli strumenti ]

Esempi di Editor di immagini

Gli esempi in questa sezione illustrano come usare l'editor di immagini per creare una trama di base e come generare e modificare i livelli MIP.

Creare una trama di base

Puoi usare l'Editor immagini per creare e modificare immagini e trame per il gioco o l'app. Ad esempio, è possibile impostare le dimensioni della trama, impostare i colori di primo piano e di sfondo, usare il canale alfa (trasparenza), usare gli strumenti Fill e Ellipse e impostare le proprietà degli strumenti.

In questo esempio, i passaggi seguenti illustrano come creare una texture che rappresenta un bersaglio "bullseye". Al termine, la consistenza dovrebbe essere simile all'immagine seguente. Per illustrare meglio la trasparenza nella trama, l'editor di immagini è stato configurato per utilizzare un modello a scacchi verde per visualizzare la trasparenza.

Immagini che raffigurano un target

Prima di iniziare, assicurarsi che venga visualizzata la finestra Proprietà . Usare la finestra Proprietà per impostare le dimensioni dell'immagine, modificare le proprietà dello strumento e specificare i colori mentre si lavora.

Creare una texture di bersaglio "bullseye"

  1. Creare una trama con cui lavorare. Per informazioni su come aggiungere una trama al progetto, vedere Editor di immagini.

  2. Impostare le dimensioni dell'immagine su 512x512 pixel. Nella finestra Proprietà impostare i valori delle proprietà Width e Height su 512.

  3. Sulla barra degli strumenti Dell'editor di immagini scegliere lo strumento Riempimento . La finestra Proprietà visualizza ora le proprietà dello strumento Riempimento insieme alle proprietà dell'immagine.

  4. Impostare il colore di primo piano su nero completamente trasparente. Nella finestra Proprietàselezionare Primo piano nel gruppo di proprietà Colors. Impostare i valori delle proprietà R, G, B e A accanto alla selezione colori su 0.

  5. Sulla barra degli strumenti dell'editor di immagini scegliere lo strumento Riempimento, quindi premere e tenere premuto MAIUSC e scegliere qualsiasi punto nell'immagine. L'uso del tasto MAIUSC fa sì che il valore alfa del colore di riempimento sostituisca il colore nell'immagine; in caso contrario, il valore alfa viene usato per combinare il colore di riempimento con il colore nell'immagine.

    Importante

    Questo passaggio, insieme alla selezione dei colori nel passaggio precedente, garantisce che l'immagine di base sia preparata per la trama di destinazione "bullseye" che verrà disegnata. Quando l'immagine viene riempita con nero trasparente, e perché il bordo della destinazione è nero, non ci saranno artefatti di aliasing intorno alla destinazione.

  6. Sulla barra degli strumenti Dell'editor di immagini scegliere lo strumento Ellisse .

  7. Impostare il colore di primo piano su nero completamente opaco. Impostare i valori delle proprietà R, G e B su 0 e il valore della proprietà A su 255.

  8. Impostare il colore di sfondo su bianco completamente opaco. Nel gruppo di proprietà Colors della finestra Proprietà selezionare Sfondo. Impostare i valori delle proprietà R, G, B e A su 255.

  9. Impostare la larghezza del contorno dell'ellisse. Nella finestra Proprietà , nel gruppo di proprietà Aspetto , impostare il valore della proprietà Width su 8.

  10. Assicurarsi che l'anti-aliasing sia abilitato. Nella finestra Proprietà , nel gruppo di proprietà Aspetto , verificare che la proprietà Anti-alias sia impostata.

  11. Usando lo strumento Ellipse , disegnare un cerchio dalla coordinata (3, 3) pixel alla coordinata (508, 508)pixel. Per disegnare più facilmente il cerchio, è possibile tenere premuto il tasto MAIUSC mentre si disegna.

    Annotazioni

    Le coordinate pixel della posizione del puntatore corrente vengono visualizzate sulla barra di stato di Visual Studio.

  12. Modificare il colore di sfondo. Impostare R su 44, G su 165, B su 211e A su 255.

  13. Disegnare un altro cerchio dalla coordinata (64, 64) pixel alla coordinata (448, 448)pixel.

  14. Ripristinare il colore di sfondo in bianco completamente opaco. Impostare R, G, B e A su 255.

  15. Disegnare un altro cerchio dalla coordinata (128, 128) pixel alla coordinata (384, 384)pixel.

  16. Modificare il colore di sfondo. Impostare R su 255, G e B su 64e A su 255.

  17. Disegnare un altro cerchio dalla coordinata (192, 192) pixel alla coordinata (320, 320)pixel.

La trama di destinazione "bullseye" è completata. Ecco l'immagine finale, mostrata con trasparenza.

Figura che mostra la trama del bersaglio

Per continuare, è possibile generare livelli MIP per questa texture. Per informazioni su come eseguire questa operazione, vedere la sezione successiva.

Creare e modificare i livelli MIP

Questo documento illustra come usare l'editor di immagini per generare e modificare i livelli MIP per i livelli di dettaglio (LoD) nello spazio delle texture.

Generazione di livelli MIP

Mipmapping è una tecnica usata per aumentare la velocità di rendering e ridurre gli artefatti di aliasing sugli oggetti texturizzati, precalcolando e archiviando diverse copie di una texture in varie dimensioni. Ogni copia, nota come livello MIP, è metà della larghezza e dell'altezza della copia precedente. Quando viene eseguito il rendering di una trama sulla superficie di un oggetto, viene scelto automaticamente il livello MIP che corrisponde più strettamente all'area dello spazio dello schermo della superficie con trama. Ciò significa che l'hardware grafico non deve filtrare le trame sovradimensionate per mantenere una qualità visiva coerente. Anche se il costo di memoria dell'archiviazione dei livelli MIP è superiore al 33% rispetto a quello della trama originale, le prestazioni e i guadagni di qualità dell'immagine lo giustificano.

Per generare livelli MIP

  1. Comincia con una texture di base. Per ottenere risultati ottimali, specificare una texture con larghezza e altezza che siano una potenza di due, ad esempio 256, 512, 1024 e così via.

  2. Generare i livelli MIP. Sulla barra degli strumenti Modalità di modifica immagini, scegliere Strumenti>Avanzati>Genera mips.

    Si noti che i pulsanti Vai al livello Mip successivo e Vai al livello Mip precedente vengono ora visualizzati sulla barra degli strumenti Modalità editor immagini . Se viene visualizzata la finestra Proprietà , si noti anche che le proprietà di sola lettura Mip Level e Mip Level Count vengono ora visualizzate nelle proprietà dell'immagine.

Modifica dei livelli MIP

Per ottenere effetti speciali o aumentare la qualità dell'immagine a livelli specifici di dettaglio, è possibile modificare ogni livello MIP singolarmente. Ad esempio, è possibile assegnare a un oggetto con trama un aspetto diverso a una distanza (maggiore distanza corrisponde a livelli MIP più piccoli) oppure assicurarsi che le trame che contengono testo o simboli rimangano leggibili anche a livelli MIP più piccoli.

Per modificare un singolo livello MIP

  1. Selezionare il livello MIP da modificare. Sulla barra degli strumenti della Modalità Editor Immagini, usare i pulsanti Vai al livello MIP successivo e Vai al livello MIP precedente per spostarsi tra i livelli MIP.

  2. Dopo aver selezionato il livello MIP da modificare, è possibile utilizzare gli strumenti di disegno per modificarlo senza modificare il contenuto di altri livelli MIP. Gli strumenti di disegno sono disponibili sulla barra degli strumenti dell'editor di immagini . Dopo aver selezionato uno strumento, è possibile modificarne le proprietà nella finestra Proprietà .

Annotazioni

Se non è necessario modificare il contenuto dei singoli livelli MIP, come si potrebbe fare per ottenere determinati effetti, è consigliabile generare mipmap dalla trama di origine in fase di compilazione. Ciò consente di garantire che i livelli MIP rimangano sincronizzati con la trama di origine perché le modifiche a un livello MIP non vengono propagate automaticamente ad altri livelli.

Visitare la pagina Esportazione delle texture per scoprire come utilizzare la Image Content Pipeline per esportare texture che contengono mipmap, pre-multiply alpha e altri elementi.