Comment : créer une texture de baseHow to: Create a Basic Texture

Ce document montre comment utiliser l’éditeur d’images pour créer une texture de base.This document demonstrates how to use the Image Editor to create a basic texture.

Ce document illustre ces activités :This document demonstrates these activities:

  • Définition de la taille de la textureSetting the size of the texture

  • Définition des couleurs de premier plan et d’arrière-planSetting the foreground and background colors

  • Utilisation du canal alpha (transparence)Using the alpha channel (transparency)

  • Utilisation des outils Remplissage et EllipseUsing the Fill and Ellipse tools

  • Définition des propriétés des outilsSetting tool properties

Création d’une texture de baseCreating a basic texture

Vous pouvez utiliser l’éditeur d’images pour créer et modifier des images et des textures pour votre jeu ou application.You can use the Image Editor to create and modify images and textures for your game or app.

Les étapes suivantes montrent comment créer une texture représentant une cible. Lorsque vous avez terminé, la texture doit ressembler à l’image suivante.The following steps show how to create a texture that represents a "bullseye" target.When you are finished, the texture should look like the following picture. Pour mettre en évidence la transparence de la texture, l’éditeur d’images a été configuré pour utiliser un modèle à damiers verts pour l’afficher.To better demonstrate the transparency in the texture, the Image Editor has been configured to use a green, checkered pattern to display it.

Cible avec transparence affichée en vert"Bullseye" target with transparency shown in green

Avant de commencer, assurez-vous que la fenêtre Propriétés est affichée.Before you begin, make sure that the Properties window is displayed. Vous allez l’utiliser pour définir la taille de l’image, modifier les propriétés des outils et spécifier des couleurs pendant que vous travaillez.You use the Properties window to set the image size, change tool properties, and specify colors while you work.

Pour créer une texture de cibleTo create a "bullseye" target texture

  1. Créez une texture à utiliser.Create a texture to work with. Pour plus d’informations sur l’ajout d’une texture à votre projet, consultez la section Mise en route de l’article Éditeur d’images.For information about how to add a texture to your project, see the Getting Started section in Image Editor.

  2. Définissez la taille de l’image sur 512x512 pixels.Set the image size to 512x512 pixels. Dans la fenêtre Propriétés, définissez les valeurs des propriétés Largeur et Hauteur sur 512.In the Properties window, set the values of the Width and Height properties to 512.

  3. Dans la barre d’outils de l’éditeur d’images, choisissez l’outil Remplissage.On the Image Editor toolbar, choose the Fill tool. À présent, la fenêtre Propriétés affiche les propriétés de l’outil Remplissage ainsi que les propriétés des images.The Properties window now displays the properties of the Fill tool together with the image properties.

  4. Définissez la couleur de premier plan sur noir entièrement transparent.Set the foreground color to fully-transparent black. Dans la fenêtre Propriétés, dans le groupe de propriétés Couleurs, sélectionnez Premier plan.In the Properties window, in the Colors property group, select Foreground. Définissez les valeurs des propriétés R, V, B et A situées en regard du sélecteur de couleurs sur 0.Set the values of the R, G, B, and A properties next to the color picker to 0.

  5. Dans la barre d’outils de l’éditeur d’images, choisissez l’outil Remplissage, puis appuyez sur la touche Maj de façon prolongée et choisissez un point de l’image.On the Image Editor toolbar, choose the Fill tool, and then press and hold the Shift key and choose any point in the image. L’utilisation de la touche Maj provoque le remplacement de la couleur de l’image par la valeur alpha de la couleur de remplissage. Par ailleurs, la valeur alpha permet de fusionner la couleur de remplissage avec la couleur de l’image.Using the Shift key causes the alpha value of the fill color to replace the color in the image; otherwise, the alpha value is used to blend the fill color together with the color in the image.

    Important

    Cette étape, associée à la sélection de couleur de l’étape précédente, permet de s’assurer que l’image de base est préparée pour la texture de la cible que vous dessinez.This step, together with the color selection in the previous step, ensures that the base image is prepared for the "bullseye" target texture that you will draw. Lorsque l’image est remplie de noir transparent, et parce que la bordure de la cible est noire, il n’existe pas d’artefact de crénelage autour de la cible.When the image is filled with transparent black—and because the border of the target is black—there will be no aliasing artifacts around the target.

  6. Dans la barre d’outils de l’éditeur d’images, choisissez l’outil Ellipse.On the Image Editor toolbar, choose the Ellipse tool.

  7. Définissez la couleur de premier plan sur noir entièrement opaque.Set the foreground color to fully-opaque black. Définissez les valeurs des propriétés R, V et B sur 0, et la valeur de la propriété A sur 255.Set the values of the R, G, and B properties to 0 and the value of the A property to 255.

  8. Définissez la couleur d’arrière-plan sur blanc entièrement opaque.Set the background color to fully-opaque white. Dans la fenêtre Propriétés, dans le groupe de propriétés Couleurs, sélectionnez Arrière-plan.In the Properties window, in the Colors property group, select Background. Définissez les valeurs des propriétés R, V, B et A sur 255.Set the values of the R, G, B, and A properties to 255.

  9. Définissez la largeur du contour de l’ellipse.Set the width of the outline of the ellipse. Dans la fenêtre Propriétés, dans le groupe de propriétés Apparence, définissez la valeur de la propriété Largeur sur 8.In the Properties window, in the Appearance property group, set the value of the Width property to 8.

  10. Vérifiez que l’anticrénelage est activé.Make sure that anti-aliasing is enabled. Dans la fenêtre Propriétés, dans le groupe de propriétés Apparence, assurez-vous que la propriété Anticrénelage est définie.In the Properties window, in the Appearance property group, make sure that the Anti-alias property is set.

  11. À l’aide de l’outil Ellipse, tracez un cercle des coordonnées de pixel (3, 3) aux coordonnées de pixel (508, 508).Using the Ellipse tool, draw a circle from pixel coordinate (3, 3) to pixel coordinate (508, 508). Pour tracer le cercle plus facilement, vous pouvez appuyer sur la touche Maj de façon prolongée tout en effectuant le tracé.To draw the circle more easily, you can press and hold the Shift key while you draw.

    Note

    Les coordonnées en pixels de l’emplacement actuel du pointeur sont affichées sur la barre d’état Visual StudioVisual Studio.The pixel coordinates of the current pointer location are displayed on the Visual StudioVisual Studio status bar.

  12. Modifiez la couleur d’arrière-plan.Change the background color. Définissez R sur 44, V sur 165, B sur 211, et A sur 255.Set R to 44, G to 165, B to 211, and A to 255.

  13. Tracez un autre cercle des coordonnées de pixel (64, 64) aux coordonnées de pixel (448, 448).Draw another circle from pixel coordinate (64, 64) to pixel coordinate (448, 448).

  14. Modifiez la couleur d’arrière-plan de nouveau sur blanc entièrement opaque.Change the background color back to fully-opaque white. Définissez R, V, B et A sur 255.Set R, G, B, and A to 255.

  15. Tracez un autre cercle des coordonnées de pixel (128, 128) aux coordonnées de pixel (384, 384).Draw another circle from pixel coordinate (128, 128) to pixel coordinate (384, 384).

  16. Modifiez la couleur d’arrière-plan.Change the background color. Définissez R sur 255, V et B sur 64, et A sur 255.Set R to 255, G and B to 64, and A to 255.

  17. Tracez un autre cercle des coordonnées de pixel (192, 192) aux coordonnées de pixel (320, 320).Draw another circle from pixel coordinate (192, 192) to pixel coordinate (320, 320).

    La texture de cible est complète.The "bullseye" target texture is complete. Voici l’image finale, affichée avec la transparence.Here's the final image, shown with transparency.

    Texture de cible complèteThe complete "bullseye" target texture

    Ensuite, vous pouvez générer des niveaux MIP pour cette texture.As a next step, you can generate MIP levels for this texture. Pour plus d’informations, consultez l’article Comment : créer et modifier les niveaux MIP.For information, see How to: Create and Modify MIP Levels.

Voir aussiSee Also

Éditeur d’imagesImage Editor