Qu’est-ce que l’éditeur d’images dans Visual Studio ?

L’éditeur d’images dans Visual Studio est un outil que vous pouvez utiliser pour afficher et modifier des ressources de texture et d’image. Plus précisément, vous pouvez utiliser l’éditeur d’images pour utiliser les types de formats de texture et d’image riches utilisés dans le développement d’applications DirectX. L’Éditeur d’images inclut la prise en charge des formats de fichiers image populaires et des encodages de couleurs, des fonctionnalités telles que les canaux alpha et le mappage MIP, ainsi que la plupart des formats de texture hautement compressés et accélérés par le matériel pris en charge par DirectX.

Formats pris en charge

L’Éditeur d’images prend en charge les formats d’image suivants :

Nom du format	Extension de nom de fichier
Graphiques réseau portables	.png
JPEG	.jpg, .jpeg, .jpe, .jfif
Surface de dessin direct	.dds
Format GIF (Graphics Interchange Format)	.gif
Bitmap	.bmp, .dib
Format de fichier image étiqueté	.tif, .tiff
TGA (Targa)	.tga

Get started

Cette section explique comment ajouter une image à votre projet Visual Studio et la configurer pour vos besoins.

Ajouter une image à votre projet

1. Dans l’Explorateur de solutions, ouvrez le menu contextuel du projet auquel vous souhaitez ajouter l’image, puis choisissez Ajouter>un nouvel élément.

2. Dans la boîte de dialogue Ajouter un nouvel élément , sous Installé, sélectionnez Graphics, puis sélectionnez un format de fichier approprié pour l’image.

   Note

   Si vous ne voyez pas la catégorie Graphiques dans la boîte de dialogue Ajouter un nouvel élément , vous devrez peut-être installer le composant Éditeurs de modèles 3D et Image . Fermez la boîte de dialogue, puis sélectionnez Outils>Obtenir des outils et fonctionnalités dans la barre de menus pour ouvrir Visual Studio Installer. Sélectionnez l’onglet Composants individuels , puis sélectionnez le composant Éditeurs de modèles 3D et Image sous la catégorie Jeux et Graphiques . Sélectionnez Modifier.

   

   Pour plus d’informations sur la façon de choisir un format de fichier en fonction de vos besoins, consultez Choisir le format d’image.

3. Spécifiez le nom du fichier image et l’emplacement où vous souhaitez qu’il soit créé.

4. Cliquez sur le bouton Ajouter.

Choisir le format d’image

Selon la façon dont vous envisagez d’utiliser l’image, certains formats de fichiers peuvent être plus appropriés que d’autres. Par exemple, certains formats peuvent ne pas prendre en charge une fonctionnalité dont vous avez besoin, par exemple, la transparence ou un format de couleur spécifique. Certains formats peuvent ne pas fournir de compression appropriée pour le type de contenu d’image que vous avez planifié.

Les informations suivantes peuvent vous aider à choisir un format d’image qui répond à vos besoins :

Image bitmap (.bmp)

Format d’image bitmap. Format d’image non compressé qui prend en charge la couleur 24 bits. Le format bitmap ne prend pas en charge la transparence.

Image au format GIF (.gif)

Format d’image GIF (Graphics Interchange Format). Format d’image compressé par LZW et sans perte qui prend en charge jusqu’à 256 couleurs. Inadapté aux photographies et images qui ont une quantité significative de détails de couleur, mais fournit de bons ratios de compression pour les images de faible couleur qui ont un degré élevé de cohérence de couleur.

IMAGE JPG (.jpg)

Format d’image JPEG (Joint Photographic Experts Group). Un format d’image fortement compressé avec perte qui prend en charge la couleur en 24 bits et convient à la compression à usage général des images qui ont un degré élevé de cohérence des couleurs.

Image PNG (.png)

Format d’image PNG (Portable Network Graphics). Le format d’image modérément compressé et sans perte qui prend en charge la couleur en 24 bits et la transparence alpha. Il convient à la fois aux images naturelles et artificielles, mais ne fournit pas des taux de compression aussi bons que ceux des formats avec perte tels que JPG ou GIF.

Image TIFF (.tif)

Format d’image TIFF ou TIF (Tagged Image File Format). Format d’image flexible qui prend en charge plusieurs schémas de compression.

Texture DDS (.dds)

Format de texture DirectDraw Surface (DDS). Format de texture hautement compressé avec perte, qui prend en charge la couleur 24 bits et la transparence alpha. Ses ratios de compression peuvent être aussi élevés que 8:1. C'est basé sur la compression de texture S3, qui peut être décompressée sur le matériel graphique.

Image TGA (.tga)

Format d’image TGA (Truevision Graphics Adapter) (également appelé Targa). Un format d'image compressé sans perte RLE qui prend en charge les images avec mappage de couleur (palette de couleurs) ou les images en couleur directe, avec jusqu'à 24 bits de couleur et une transparence alpha. Inadapté aux photographies et aux images qui ont une quantité significative de détails de couleur, mais fournit de bons ratios de compression pour les images qui ont de longues étendues de couleurs identiques.

Configurer l’image

Avant de commencer à utiliser l’image que vous avez créée, vous pouvez modifier sa configuration par défaut. Par exemple, vous pouvez modifier ses dimensions ou le format de couleur qu’il utilise. Pour plus d’informations sur la configuration de ces propriétés et d’autres propriétés de l’image, consultez les propriétés d’image.

Note

Avant d’enregistrer votre travail, veillez à définir la propriété Color Format si vous souhaitez utiliser un format de couleur spécifique. Si le format de fichier prend en charge la compression, vous pouvez ajuster les paramètres de compression lorsque vous enregistrez le fichier pour la première fois ou lorsque vous choisissez Enregistrer sous.

Utiliser l’éditeur d’images pour modifier les textures et les images

Les commandes qui affectent l’état de l’Éditeur d’images se trouvent dans la barre d’outils Mode Éditeur d’images avec des commandes avancées. La barre d’outils se trouve le long du bord le plus haut de l’aire de conception de l’éditeur d’images . Les outils de dessin sont situés sur la barre d'outils de l'Éditeur d'images le long du bord le plus à gauche de l'aire de conception de l'Éditeur d'images.

Barre d’outils Mode Éditeur d’images

Le tableau suivant décrit les éléments de la barre d’outils Mode Éditeur d’image , qui sont répertoriés dans l’ordre dans lequel ils apparaissent de gauche à droite :

Élément de barre d’outils	Descriptif
Choisir	Active la sélection d’une région rectangulaire d’une image. Après avoir sélectionné une région, vous pouvez couper, copier, déplacer, mettre à l’échelle, faire pivoter, retourner ou supprimer cette région. Lorsqu’il existe une sélection active, les outils de dessin affectent uniquement la région sélectionnée.
Sélection irrégulière	Active la sélection d’une région irrégulière d’une image. Après avoir sélectionné une région, vous pouvez couper, copier, déplacer, mettre à l’échelle, faire pivoter, retourner ou supprimer cette région. Lorsqu’il existe une sélection active, les outils de dessin affectent uniquement la région sélectionnée.
Sélection de la baguette	Active la sélection d’une région de couleur similaire d’une image. La tolérance ( autrement dit, la différence maximale entre les couleurs adjacentes dans lesquelles elles sont considérées comme similaires) peut être configurée pour inclure une plage plus petite ou plus large de couleurs similaires. Après avoir sélectionné une région, vous pouvez couper, copier, déplacer, mettre à l’échelle, faire pivoter, retourner ou supprimer cette région. Lorsqu’il existe une sélection active, les outils de dessin affectent uniquement la région sélectionnée.
Pan	Active le déplacement de l’image par rapport au cadre de la fenêtre. En mode Panoramique , sélectionnez un point sur l’image, puis déplacez-le. Vous pouvez activer temporairement le mode Panoramique en appuyant et en maintenant la touche Ctrl enfoncée .
Zoom	Active l’affichage de détails d’image plus ou moins par rapport au cadre de la fenêtre. En mode Zoom , sélectionnez un point sur l’image, puis déplacez-le vers la droite ou vers le bas pour effectuer un zoom avant, ou vers la gauche ou vers le haut pour effectuer un zoom arrière. Vous pouvez effectuer un zoom avant ou arrière en appuyant sur Ctrl enfoncée pendant que vous utilisez la roulette de la souris ou appuyez sur le signe plus (+) ou moins (-).
Zoom sur la taille réelle	Affiche l’image à l’aide d’une relation de 1:1 entre les pixels de l’image et les pixels de l’écran.
Zoom pour ajuster	Affiche l’image complète dans le cadre de la fenêtre.
Zoom vers la largeur	Affiche la largeur totale de l’image dans le cadre de la fenêtre.
Grille	Active ou désactive la grille qui affiche les limites de pixels. La grille peut ne pas apparaître tant que vous n’avez pas zoomé sur l’image.
Afficher le niveau MIP suivant	Active le niveau MIP supérieur suivant dans une chaîne de carte MIP. Le niveau MIP actif s’affiche sur la surface de conception. Cet élément est disponible uniquement pour les textures qui ont des niveaux MIP.
Afficher le niveau MIP précédent	Active le niveau MIP plus petit suivant dans une chaîne de mappage MIP. Le niveau MIP actif s’affiche sur la surface de conception. Cet élément est disponible uniquement pour les textures qui ont des niveaux MIP.
Canal rouge Canal vert Canal bleu Canal alpha	Active ou désactive le canal de couleur spécifique. Note: En activant ou désactivant systématiquement les canaux de couleur, vous pouvez isoler les problèmes liés à un ou plusieurs d’entre eux. Par exemple, vous pouvez identifier une transparence alpha incorrecte.
Arrière-plan	Active ou désactive l’affichage de l’arrière-plan via des parties transparentes de l’image. Vous pouvez configurer l’affichage de l’arrière-plan en choisissant parmi ces options : Damier Utilise une couleur verte avec la couleur d’arrière-plan spécifiée pour afficher l’arrière-plan en tant que modèle de checkerboard. Vous pouvez utiliser cette option pour rendre les parties transparentes de l’image plus apparentes. Arrière-plan blanc Utilise la couleur blanche pour afficher l’arrière-plan. Arrière-plan noir Utilise la couleur noire pour afficher l’arrière-plan. Animer l’arrière-plan Effectuer un panoramique lentement du motif de damier. Vous pouvez utiliser cette option pour rendre les parties transparentes de l’image plus apparentes.
Propriétés	Alterne entre l'ouverture et la fermeture de la fenêtre Propriétés.
Avancé	Contient des commandes et des options supplémentaires. Filtres Fournit plusieurs filtres d’images courants : Noir et Blanc, Flou, Éclaircir, Assombrir, Détection de bord, Embossage, Couleurs inversées, Ondulation, Tonalité sépia et Netteté. Moteurs graphiques Rendu avec D3D11 Utilise Direct3D 11 pour rendre la surface de conception de l’éditeur d’images. Rendu avec D3D11WARP Utilise Direct3D 11 Windows Advanced Rasterization Platform (WARP) pour afficher la surface de conception de l'éditeur d'images. Outils Retourner horizontalement Transpose l’image autour de son axe horizontal, ou x. Retourner verticalement Transpose l’image autour de son axe vertical, ou y. Générer des MIPS Génère des niveaux MIP pour une image. Si des niveaux MIP existent déjà, ils sont recréés à partir du plus grand niveau MIP. Toutes les modifications apportées à des niveaux MIP plus petits sont perdues. Pour enregistrer les niveaux MIP que vous avez générés, vous devez utiliser le format .dds pour enregistrer l’image. View Fréquence d’images Lorsque cette option est activée, affiche la fréquence d’images dans le coin supérieur droit de l’aire de conception. La fréquence d’images est le nombre d’images dessinées par seconde. Astuce : Vous pouvez cliquer sur le bouton Avancé pour réexécuter la dernière commande.

Barre d’outils Éditeur d’images

Le tableau suivant décrit les éléments de la barre d’outils Éditeur d’images , qui sont répertoriés dans l’ordre dans lequel ils apparaissent de haut en bas :

Élément de barre d’outils	Descriptif
Crayon	Utilise la sélection de couleur active pour dessiner un trait avec effet d'aliasing. Vous pouvez définir la couleur et l’épaisseur du trait dans la fenêtre Propriétés .
Brosse	Utilise la sélection de couleur active pour dessiner un trait anticrénelé. Vous pouvez définir la couleur et l’épaisseur du trait dans la fenêtre Propriétés .
Aérographe	Utilise la sélection de couleur active pour dessiner un trait anti-aliasé qui se fond avec l’image et qui devient plus saturé au fil du temps. Vous pouvez définir la couleur et l’épaisseur du trait dans la fenêtre Propriétés .
Pipette	Définit la sélection de couleur active sur la couleur du pixel sélectionné.
Remplir	Utilise la sélection de couleur active pour remplir une région de l’image. La région affectée est définie comme le pixel où le remplissage est appliqué, ainsi que chaque pixel connecté à celui-ci par des pixels de la même couleur et qui est également de cette couleur. Si le remplissage est appliqué dans une sélection active, la région affectée est limitée par la sélection. Par défaut, la sélection de couleur active est fusionnée avec la région affectée de l’image en fonction de son composant alpha. Pour utiliser la sélection de couleur active pour remplacer la région affectée, appuyez longuement sur la touche Maj lorsque vous utilisez l’outil de remplissage.
Gomme	Définit les pixels à une couleur entièrement transparente si l’image prend en charge le canal alpha. Sinon, Eraser définit les pixels sur la couleur d’arrière-plan active.
Trait, Rectangle, Rectangle arrondi, Ellipse	Dessine une forme sur l’image. Vous pouvez définir la couleur et l’épaisseur du contour dans la fenêtre Propriétés . Pour dessiner une primitive qui a une largeur et une hauteur égales, maintenez enfoncé Maj lorsque vous dessinez.
Texte	Utilise la sélection de couleur de premier plan pour dessiner du texte. La couleur d’arrière-plan est déterminée par la sélection de couleur d’arrière-plan. Pour un arrière-plan transparent, la valeur alpha de la sélection de couleur d’arrière-plan doit être 0. Pendant que la zone de texte est active, vous pouvez définir si le texte est dessiné avec un trait anticrénelé, et vous pouvez définir la valeur de texte, la police, la taille et le style (Gras, Italique ou Souligné) dans la fenêtre Propriétés . Le contenu et l’apparence du texte sont finalisés lorsque la zone de texte n’est plus active.
Tourner	Fait pivoter l’image de 90 degrés dans le sens des aiguilles d’une montre.
Découper	Supprime l’image dans la sélection active.

Utiliser des niveaux MIP

Certains formats d’image, par exemple DirectDraw Surface (.dds), prennent en charge les niveaux MIP pour le niveau de détail de l’espace de texture (LOD).

Travailler avec transparence

Certains formats d’image, par exemple DirectDraw Surface (.dds), prennent en charge la transparence. Il existe plusieurs façons d’utiliser la transparence, en fonction de l’outil que vous utilisez. Pour spécifier le niveau de transparence d’une sélection de couleurs, dans la fenêtre Propriétés , définissez le composant A (alpha) de la sélection de couleur.

Le tableau suivant décrit comment différents types d’outils contrôlent l’application de la transparence :

Tool	Descriptif
Crayon, Pinceau, Airbrush, Trait, Rectangle, Rectangle arrondi, Ellipse, Texte	Pour fusionner la sélection de couleur active avec l’image, dans la fenêtre Propriétés , développez le groupe de propriétés Canaux et activez la case à cocher Dessiner sur le canal Alpha , puis dessinez normalement. Pour dessiner à l’aide de la sélection de couleur active et laisser la valeur alpha de l’image en place, décochez la case Dessiner du canal Alpha , puis dessinez normalement.
Remplir	Pour fusionner la sélection de couleur active avec l’image, choisissez simplement la zone à remplir. Pour utiliser la sélection de couleurs active, y compris la valeur du canal alpha, pour remplacer l’image, appuyez longuement sur Maj , puis choisissez la zone à remplir.

Propriétés d’image

Vous pouvez utiliser la fenêtre Propriétés pour spécifier différentes propriétés de l’image. Par exemple, vous pouvez définir les propriétés de largeur et de hauteur pour redimensionner l’image.

Le tableau suivant décrit les propriétés d’image :

Propriété	Descriptif
Largeur	Largeur de l’image.
Hauteur	Hauteur de l’image.
Bits par pixel	Nombre de bits qui représentent chaque pixel. La valeur de cette propriété dépend du format de couleur de l’image.
Sélection transparente	True pour fusionner la couche de sélection avec l’image principale, en fonction de la valeur alpha de la couche de sélection ; sinon, False. Cet élément est disponible uniquement pour les images qui prennent en charge alpha.
Format	Format de couleur de l’image. Vous pouvez spécifier différents formats de couleur, selon le format de l’image. Le format de couleur définit le nombre et le type de canaux de couleur inclus dans l’image, ainsi que la taille et l’encodage de différents canaux.
Niveau Mip	Niveau MIP actif. Cet élément est disponible uniquement pour les textures qui ont des niveaux MIP.
Nombre de niveaux Mip	Nombre total de niveaux MIP dans l’image. Cet élément est disponible uniquement pour les textures qui ont des niveaux MIP.
Nombre d’images	Nombre total d’images dans l’image. Cet élément est disponible uniquement pour les images qui prennent en charge les tableaux de textures.
Cadre	Cadre actuel. Seul le premier cadre peut être consulté ; toutes les autres images sont perdues lorsque l’image est enregistrée.
Nombre de tranches de profondeur	Nombre total de tranches de profondeur dans l’image. Cet élément est disponible uniquement pour les images qui prennent en charge les textures de volume.
Tranche de profondeur	Tranche de profondeur actuelle. Seule la première tranche peut être consultée ; toutes les autres tranches sont perdues lorsque vous enregistrez l’image.

Note

Étant donné que la propriété Rotation par propriété s’applique à tous les outils et régions sélectionnées, elle apparaît toujours en bas de la fenêtre Propriétés avec d’autres propriétés d’outil. La rotation par est toujours affichée, car l’image entière est implicitement sélectionnée lorsqu’il n’existe aucune autre sélection ou outil actif. Pour plus d’informations sur la propriété Rotation par propriété, consultez Propriétés de l’outil.

Redimensionner des images

Il existe deux façons de redimensionner une image. Dans les deux cas, l’éditeur d’images utilise l’interpolation biligne pour rééchantiller l’image.

• Dans la fenêtre Propriétés , spécifiez de nouvelles valeurs pour les propriétés Width et Height .

• Sélectionnez l’image entière et utilisez les marqueurs de bordure pour redimensionner l’image.

Régions sélectionnées

Les sélections dans l’Éditeur d’images définissent des régions de l’image actives. Les régions actives sont affectées par les outils et les transformations. Lorsqu’il existe une sélection active, les zones situées en dehors de la région sélectionnée ne sont pas affectées par la plupart des outils et transformations. S’il n’existe pas de sélection active, l’image entière est active.

La plupart des outils (Crayon, Pinceau, Airbrush, Remplissage, Gomme, et primitives 2D) et transformations (Rotation, Rogner, Inverser les couleurs, Retourner horizontalement et Retourner verticalement) sont limités ou définis par la sélection active. Toutefois, certains outils (Eyedropper et Text) et transformations (Generate Mips) ne sont pas affectés par une sélection active. Ces outils se comportent toujours comme si l’image entière est la sélection active.

Lors de la sélection d’une région, vous pouvez appuyer longuement sur Maj pour effectuer une sélection proportionnelle (carré). Sinon, la sélection n’est pas contrainte.

Redimensionner les sélections

Après avoir sélectionné une région, vous pouvez la redimensionner ou son contenu d’image en modifiant la taille du marqueur de sélection. Pendant que vous redimensionnez la région sélectionnée, vous pouvez utiliser les touches de modificateur suivantes pour modifier le comportement de la région sélectionnée lorsque vous la redimensionnez :

Ctrl : copie le contenu de la région sélectionnée avant de le redimensionner. Cela laisse l’image d’origine intacte pendant que la copie est redimensionnée.

Maj : redimensionne la région sélectionnée en proportion de sa taille d’origine.

Alt : modifie la taille de la région de sélection. Cela laisse l’image non modifiée.

Le tableau suivant décrit les combinaisons de touches de modificateur valides :

Ctrl	Quart de travail	Alt	Descriptif
			Redimensionne le contenu de la région sélectionnée.
	Période de travail		Redimensionne proportionnellement le contenu de la région sélectionnée.
		Alt	Redimensionne la région sélectionnée. Cela définit une nouvelle région de sélection.
	Période de travail	Alt	Redimensionne proportionnellement la région sélectionnée. Cela définit une nouvelle région de sélection.
Ctrl			Copie, puis redimensionne le contenu de la région sélectionnée.
Ctrl	Période de travail		Copie, puis redimensionne proportionnellement le contenu de la région sélectionnée.

Propriétés de l’outil

Pendant qu’un outil est sélectionné, vous pouvez utiliser la fenêtre Propriétés pour spécifier des détails sur la façon dont elle affecte l’image. Par exemple, vous pouvez définir l’épaisseur de l’outil Crayon ou la couleur de l’outil Pinceau .

Vous pouvez définir à la fois une couleur de premier plan et une couleur d’arrière-plan. Les deux prennent en charge un canal alpha pour fournir une opacité définie par l’utilisateur. Les paramètres s’appliquent à tous les outils. Si vous utilisez une souris, le bouton gauche de la souris correspond à la couleur de premier plan et le bouton droit de la souris correspond à la couleur d’arrière-plan.

Le tableau suivant décrit les propriétés de l’outil :

Tool	Propriétés
Tous les outils et sélections	Faire pivoter par Définit la quantité, en degrés, de rotation de l'effet de sélection ou d'outil dans le sens des aiguilles d'une montre.
Crayon, Pinceau, Aérographe, Gomme	Épaisseur Définit la taille de la zone affectée par l’outil.
Texte	Anti-alias Dessine du texte aux bords lissés. Cela donne au texte une apparence plus fluide. Valeur Texte à dessiner. Font Police utilisée pour afficher le texte. Taille Taille du texte. Bold Met la police en gras. Italics Met la police en italique. Souligné Rend la police soulignée.
Primitive 2D	Anti-alias Dessine des primitives qui ont les bords anti-aliasées. Cela leur donne une apparence plus lisse. Épaisseur Définit l’épaisseur de la ligne qui forme la limite de la primitive. Rayon X (Rectangle arrondi uniquement) Définit le rayon de courbure pour les extrémités supérieures et inférieures de la forme primitive. Rayon Y (Rectangle arrondi uniquement) Définit le rayon d’arrondi pour les bords gauche et droit de la primitive.
Crayon, Pinceau,Aérographe, Primitive 2D	Canaux Active ou désactive des canaux de couleur spécifiques pour l’affichage et le dessin. Si l’affichage est défini pour un canal de couleur spécifique, ce canal est visible dans l’image ; sinon, il n’est pas visible. Si draw est défini pour un canal de couleur spécifique, ce canal est affecté par les opérations de dessin ; sinon, ce n’est pas le cas.
Sélection wand, Remplissage	Tolérance Définit la différence maximale entre les couleurs adjacentes dans lesquelles elles sont considérées comme similaires, de sorte que moins ou plus de couleurs similaires font partie de la région affectée ou sélectionnée. Par défaut, la valeur est 32, ce qui signifie que les pixels adjacents dans 32 nuances (plus clair ou plus foncé) de la couleur d’origine sont considérés comme faisant partie de la région.

Raccourcis clavier

Command	Raccourcis clavier
Basculer vers le mode Sélectionner	S
Basculer vers le mode Zoom	Z
Passer en mode Panoramique	K
Tout sélectionner	Ctrl+A
Supprimer la sélection actuelle	Supprimer
Annuler la sélection actuelle	Échap (Escape)
Zoom avant	Ctrl+Roulette de la souris vers l’avant Ctrl+PageUp Signe Plus (+)
Zoom arrière	Ctrl-Roulette de la souris vers l’arrière Ctrl-PageDown Signe moins (-)
Faire défiler l’image vers le haut	Roulette de la souris vers l’arrière PageDown
Faire défiler l’image vers le bas	Roulette de la souris vers l’avant PageUp
Déplacez l’image vers la gauche	Touche Maj+Roulette de la souris vers l’arrière Roulette de la souris vers la gauche Maj+Page Suivante
Déplacer l'image vers la droite	Shift+Roulette de la souris vers l’avant Roulette de la souris à droite Période de travail+PageUp
Zoom sur la taille réelle	Ctrl+0 (zéro)
Ajuster l’image à la fenêtre	Ctrl+G, Ctrl+F
Ajuster l’image à la largeur de la fenêtre	Ctrl+G, Ctrl+I
Activer/désactiver la grille	Ctrl+G, Ctrl+G
Rogner l’image vers la sélection actuelle	Ctrl+G, Ctrl+C
Afficher le niveau MIP suivant (détail supérieur)	Ctrl+G, Ctrl+6
Afficher le niveau MIP précédent (détail inférieur)	Ctrl+G, Ctrl+7
Activer/désactiver le canal de couleur rouge	Ctrl+G, Ctrl+1
Activer/désactiver le canal de couleur verte	Ctrl+G, Ctrl+2
Activer/désactiver le canal de couleur bleue	Ctrl+G, Ctrl+3
Activer/désactiver le canal alpha (transparence)	Ctrl+G, Ctrl+4
Activer/désactiver le motif de damier alpha	Ctrl+G, Ctrl+B
Basculer vers l’outil de sélection irrégulière	L
Basculer vers l’outil de sélection à la baguette magique	M
Basculer vers l’outil crayon	P
Basculer vers l’outil pinceau	B
Basculer vers l’outil de remplissage	F
Basculer vers l’outil de gomme	E
Basculer vers l’outil texte	T
Basculer vers l’outil sélection de couleur (eyedropper)	Je
Déplacez la sélection active et son contenu.	Touches de direction .
Redimensionnez la sélection active et son contenu.	Ctrl+Touches de direction
Déplacez la sélection active, mais pas son contenu.	Maj+Touches de direction
Redimensionnez la sélection active, mais pas son contenu.	Maj+Ctrl+Touches de direction
Valider la couche actuelle	Rendre
Réduire l’épaisseur de l’outil	[
Augmenter l’épaisseur de l’outil	]

Exemples d’éditeur d’images

Les exemples de cette section vous montrent comment utiliser l’éditeur d’images pour créer une texture de base et comment générer et modifier des niveaux MIP.

Créer une texture de base

Vous pouvez utiliser l’Éditeur d’images pour créer et modifier des images et des textures pour votre jeu ou application. Par exemple, vous pouvez définir la taille de la texture, définir le premier plan et les couleurs d’arrière-plan, utiliser le canal alpha (transparence), utiliser les outils Fill et Ellipse et définir les propriétés de l’outil.

Dans cet exemple, les étapes suivantes vous montrent comment créer une texture qui représente une cible « bullseye ». Lorsque vous avez terminé, la texture doit ressembler à l’image suivante. Pour mieux illustrer la transparence dans la texture, l'éditeur d'images a été configuré pour utiliser un motif vert à damier pour l'afficher.

Avant de commencer, vérifiez que la fenêtre Propriétés s’affiche. Vous utilisez la fenêtre Propriétés pour définir la taille de l’image, modifier les propriétés de l’outil et spécifier des couleurs pendant que vous travaillez.

Créer une texture cible « bullseye »

1. Créez une texture avec laquelle travailler. Pour plus d’informations sur l’ajout d’une texture à votre projet, consultez l’Éditeur d’images.

2. Définissez la taille de l’image sur 512 x 512 pixels. Dans la fenêtre Propriétés , définissez les valeurs des propriétés Width et Height sur 512.

3. Dans la barre d’outils Éditeur d’images, choisissez l’outil Remplissage . La fenêtre Propriétés affiche désormais les propriétés de l’outil Remplissage avec les propriétés de l’image.

4. Définissez la couleur de premier plan sur un noir entièrement transparent. Dans la fenêtre Propriétés , dans le groupe de propriétés Colors , sélectionnez Premier plan. Définissez les valeurs des propriétés R, G, B et A à côté du sélecteur de couleurs selon 0.

5. Dans la barre d’outils Éditeur d’images, choisissez l’outil Remplissage , puis appuyez longuement sur la touche Maj et choisissez n’importe quel point dans l’image. L’utilisation de la touche Maj entraîne la valeur alpha de la couleur de remplissage pour remplacer la couleur dans l’image ; sinon, la valeur alpha est utilisée pour mélanger la couleur de remplissage avec la couleur dans l’image.

   Important

   Cette étape, ainsi que la sélection de couleurs à l’étape précédente, garantit que l’image de base est préparée pour la texture cible « bullseye » que vous dessinerez. Lorsque l’image est remplie de noir transparent et que la bordure de la cible est noire, il n’y aura pas d’artefacts d’alias autour de la cible.

6. Dans la barre d’outils Éditeur d’images, choisissez l’outil Ellipse .

7. Définissez la couleur de premier plan sur un noir entièrement opaque. Définissez les valeurs des propriétés R, G et B sur 0 et la valeur de la propriété 255 sur .

8. Définissez la couleur d’arrière-plan sur blanc entièrement opaque. Dans la fenêtre Propriétés , dans le groupe de propriétés Colors , sélectionnez Arrière-plan. Définissez les valeurs des propriétés R, G, B et A sur 255.

9. Définissez la largeur du contour de l’ellipse. Dans la fenêtre Propriétés, dans le groupe de propriétés Apparence, définissez la valeur de la propriété 8 sur .

10. Vérifiez que l’anticrénelage est activé. Dans la fenêtre Propriétés , dans le groupe de propriétés Apparence , vérifiez que la propriété Anti-alias est définie.

11. À l’aide de l’outil Ellipse, dessinez un cercle depuis les coordonnées de pixel (3, 3) jusqu'aux coordonnées de pixel (508, 508). Pour dessiner le cercle plus facilement, vous pouvez appuyer longuement sur la touche Maj pendant que vous dessinez.

    Note

    Les coordonnées de pixels de l’emplacement actuel du pointeur s’affichent dans la barre d’état de Visual Studio.

12. Modifiez la couleur d’arrière-plan. Définissez R sur 44, G sur 165, B sur 211et A sur 255.

13. Dessinez un autre cercle depuis la coordonnée de pixel (64, 64) jusqu'à la coordonnée de pixel (448, 448).

14. Remplacez la couleur d’arrière-plan par un blanc entièrement opaque. Définissez R, G, B et A sur 255.

15. Dessinez un autre cercle de la coordonnée de pixel (128, 128) à la coordonnée de pixel (384, 384).

16. Modifiez la couleur d’arrière-plan. Définissez R sur 255, G et B64sur , et A sur 255.

17. Dessinez un autre cercle de la coordonnée de pixels (192, 192) à la coordonnée de pixels (320, 320).

La texture cible « bullseye » est complète. Voici l’image finale, présentée avec fond transparent.

Pour effectuer le suivi, vous pouvez générer des niveaux MIP pour cette texture. Pour plus d’informations sur la procédure à suivre, consultez la section suivante.

Créer et modifier des niveaux MIP

Ce document montre comment utiliser l’éditeur d’images pour générer et modifier des niveaux MIP pour le niveau de détail de l’espace de texture (LoD).

Génération de niveaux MIP

Mipmapping est une technique utilisée pour augmenter la vitesse de rendu et réduire les artefacts d’alias sur les objets textures en précalculant et en stockant plusieurs copies d’une texture de différentes tailles. Chaque copie, appelée niveau MIP, correspond à la moitié de la largeur et de la hauteur de la copie précédente. Lorsqu’une texture est rendue sur la surface d’un objet, le niveau MIP qui correspond le plus étroitement à la zone d’espace d’écran de la surface texture est automatiquement choisi. Cela signifie que le matériel graphique n’a pas besoin de filtrer les textures surdimensionnées pour maintenir une qualité visuelle cohérente. Bien que le coût de mémoire du stockage des niveaux MIP soit d’environ 33 pour cent plus que celui de la texture d’origine seule, les performances et les gains de qualité de l’image le justifient.

Pour générer des niveaux MIP

1. Commencez par une texture de base. Pour obtenir de meilleurs résultats, spécifiez une texture qui a une largeur et une hauteur qui sont une puissance de deux tailles, par exemple, 256, 512, 1024, et ainsi de suite.

2. Générez les niveaux MIP. Dans la barre d’outils Mode Éditeur d’image, choisissez Outils avancés>>générer mips.

   Notez que les boutons Atteindre le niveau Mip suivant et Atteindre le niveau Mip précédent s’affichent désormais dans la barre d’outils Image Editor Mode. Si la fenêtre Propriétés s’affiche, notez également que les propriétés en lecture seule Mip Level et Mip Level Count apparaissent désormais dans les propriétés de l’image.

Modification des niveaux MIP

Pour obtenir des effets spéciaux ou augmenter la qualité de l’image à des niveaux spécifiques de détail, vous pouvez modifier chaque niveau MIP individuellement. Par exemple, vous pouvez donner à un objet texture une apparence différente à une distance (une distance supérieure correspond à des niveaux MIP plus petits), ou vous pouvez vous assurer que les textures qui contiennent du texte ou des symboles restent lisibles même à des niveaux MIP plus petits.

Pour modifier un niveau MIP individuel

1. Sélectionnez le niveau MIP que vous souhaitez modifier. Dans la barre d’outils Mode Éditeur d’image , utilisez les boutons Atteindre le niveau MIP suivant et Atteindre les boutons niveau MIP précédents pour passer d’un niveau MIP à l’autre.

2. Après avoir sélectionné le niveau MIP que vous souhaitez modifier, vous pouvez utiliser les outils de dessin pour le modifier sans modifier le contenu d’autres niveaux MIP. Les outils de dessin sont disponibles dans la barre d’outils Éditeur d’images . Après avoir sélectionné un outil, vous pouvez modifier ses propriétés dans la fenêtre Propriétés .

Note

Si vous n’avez pas besoin de modifier le contenu des niveaux MIP individuels, comme vous pouvez le faire pour obtenir certains effets, nous vous recommandons de générer des mipmaps à partir de la texture source au moment de la génération. Cela permet de s’assurer que les niveaux MIP restent synchronisés avec la texture source, car les modifications apportées à un niveau MIP ne sont pas propagées automatiquement à d’autres niveaux.

Contenu connexe

Visitez la page Exporter des textures pour découvrir comment utiliser le pipeline de contenu d’image pour exporter des textures contenant des mipmaps, des prémultiplies alpha, etc.