IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

tondeurh

Affichage d’un Sprite par la technique du masque de couleur en JavaFX

Noter ce billet
par , 22/05/2016 à 10h27 (1226 Affichages)
Principe :
Quand on veut dessiner un objet de forme quelconque sur une autre image, il est nécessaire de respecter ces règles :
1) Conserver l’image d’arrière-plan en mémoire, exemple celle de notre échiquier, image de base…

nom du fichier : base.png

Nom : chessboard.png
Affichages : 1698
Taille : 22,6 Ko

Ci-dessous un zoom sur la case a8, ou l’on veut placer notre roi, le coin supérieur de la case commence a 32 pixels du bord gauche et 35 pixels du haut.

Nom : zoomChessboard.png
Affichages : 392
Taille : 39,0 Ko

2) Utiliser une couleur de masquage (couleur qui ne devra pas être dessinée) dans notre Sprite.
Exemple, pour l’image ci-dessous on a mis en rouge les pixels que l’on ne veut pas afficher (technique du masque Alpha), la couleur rouge pondération RVB(1.0,0.0 ,0.0), on a choisi la couleur rouge, mais toutes autres couleurs qui ne participe pas à l’image que l’on veut affiché aurait fait l’affaire.

Nom : KingZoom.png
Affichages : 374
Taille : 31,3 Ko

Nom du fichier : roiN.png
On va charger cette image que l’on nommera « Sprite » en mémoire également.

3) On va ensuite copier chaque pixel du « Sprite » sur une copie de l’image de base, sauf les pixels qui ont la couleur rouge (qui ne nous intéressent pas)

Et l’on obtiendra ceci

Nom : fusionChessBoard.png
Affichages : 426
Taille : 44,1 Ko

Technique :

Comment charger une image en mémoire avec JavaFX ?
On va pour cela utiliser la classe de l’API JavaFX « Image », cette classe possède un constructeur qui accepte en paramètre un objet de type FileInputStream qui lui-même permet de mettre en place un flux de lecture à partir d’un chemin de fichier image au format jpg, pbg, bmp ou gif.

Code java : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
Image base;
 try {
 base=new Image(new FileInputStream("./src/monprog/img/base.png"));
 } catch (FileNotFoundException ex)
 {
 Logger.getLogger(MonProg.class.getName()).log(Level.SEVERE, null, ex);
 }

Dans l’exemple de code ci-dessus, on déclare une variable objet de type image, et on instancie cet objet avec l’image qui se trouvent dans le dossier « ./img » du dossier source, ceci permet de charger en mémoire l’image (bitmap) base.png, qui sera ici la copie de départ de mon échiquier.
On va faire de même avec notre Sprite :

Code java : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
Image sprite;
 try {
 sprite=new Image(new FileInputStream("./src/monprog/img/roiN.png"));
 } catch (FileNotFoundException ex)
 {
 Logger.getLogger(MonProg.class.getName()).log(Level.SEVERE, null, ex);
 }

Dans le code ci-dessus on charge dans l’objet « sprite » de type image, l’image (bitmap) du fichier roiN.png.
Réaliser une copie de l’image de base et la rendre modifiable !

Code java : Sélectionner tout - Visualiser dans une fenêtre à part
WritableImage baseCopie=new WritableImage(base.getPixelReader(),base.getWidth(),base.getHeight());

On va convertir dans un premier temps avec le code ci-dessus l’objet Image en un objet WritableImage, un objet Writableimage, permet d’accéder au canevas du bitmap et d’y écrire des pixels sur celui-ci.
L’objet WritableImage, possède un constructeur qui attend en paramètre, un canevas de pixel encapsulé dans un objet « PixelReader » et une largeur et hauteur, dans le bout de code ci-dessus, on récupére le canvas de pixel « PixelReader » a partir de la méthode « getPixelReader() » de la classe « Image ».

Comment copier notre Sprite sur l’image de base ?
On va pouvoir maintenant copier les pixels qui nous intéressent de notre Sprite sur la base grâce au code ci-dessous.

Code java : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
PixelReader pr=sprite.getPixelReader();
 
for (int x=0;x<sprite.getWidth();x++){
for (int y=0;y<sprite.getHeight();y++){ Color couleur=pr.getColor(x, y); double b=couleur.getBlue(); double g=couleur.getGreen(); double r=couleur.getRed(); if (b==0.0 && g==0.0 && r==1.0){ //si couleur rouge => ne rien faire
}
else
{
//ecrire le pixel sur l’image baseCopie
baseCopie.getPixelWriter().setColor(32, 35, couleur);
}
}
}

On va dans un premier temps à la ligne 1 de notre code, récupérer le canevas des pixels formant l’image de notre Sprite, pour cela on va faire appel à la classe PixelReader et à la méthode getPixelReader() de la classe Image.

On va ensuite pour chaque pixel de ce canevas de pixels, lire sa couleur (RVB), en utilisant la méthode getColor() de la classe « PixelReader », puis utiliser les méthodes getBlue(), getGreen(), getRed de la classe Color pour obtenir les pondérations R, V, B de ce pixel.

Si la pondération R=1.0, V=0.0, B=0.0 (rouge) alors on va ignorer ce pixel.

Sinon on copie le pixel sur la copie de l’image de base, en utilisant la méthode « setColor(x,y,color) de la classe PixelWriter, objet PixelWriter que l’on récupère grâce à la méthode getPixelWriter() de l’objet baseCopie.

FIN

Envoyer le billet « Affichage d’un Sprite par la technique du masque de couleur en JavaFX » dans le blog Viadeo Envoyer le billet « Affichage d’un Sprite par la technique du masque de couleur en JavaFX » dans le blog Twitter Envoyer le billet « Affichage d’un Sprite par la technique du masque de couleur en JavaFX » dans le blog Google Envoyer le billet « Affichage d’un Sprite par la technique du masque de couleur en JavaFX » dans le blog Facebook Envoyer le billet « Affichage d’un Sprite par la technique du masque de couleur en JavaFX » dans le blog Digg Envoyer le billet « Affichage d’un Sprite par la technique du masque de couleur en JavaFX » dans le blog Delicious Envoyer le billet « Affichage d’un Sprite par la technique du masque de couleur en JavaFX » dans le blog MySpace Envoyer le billet « Affichage d’un Sprite par la technique du masque de couleur en JavaFX » dans le blog Yahoo

Mis à jour 23/05/2016 à 13h47 par kolodz ([Blog]Ajout langage à la balise code)

Catégories
Java , Programmation , 2D / 3D / Jeux , DotNET

Commentaires