[Tutoriel] Le Blend mode en long et en large

Le Blend mode

Sommaire
1-Intro
2-Partie Théorique
3-Utilisation du blend mode
4-Extention du blend mode

1-Intro

En mode additif, on peut décomposer la couleur blanche en 3 composantes : les couleurs primaires de la lumière (rouge, vert et bleu).
Avec ces trois couleurs, il est possible de créer une infinité de couleurs.
En informatique, une couleur est représentée par un nombre entier positif compris entre 0 et 16777215 (le noir et le blanc), soit 0x000000 et 0xFFFFFF en hexadécimal. Ce qui nous donne 256 valeurs possibles pour chaque composante d'une couleur. Chaque composante tient donc sur octet de mémoire, une couleur prend donc trois octets.
Dans l'octet de poids fort est stocké le bleu, dans celui du milieu le vert et dans celui de poids faible le rouge.
Chaque pixel de votre écran possède une couleur, qui elle possède trois composantes (RGB).
Sous Game Maker, lorsque l'on dessine sur l'écran, on remplace juste les pixels d'une couleur par une autre. Donc pour faire des dessins simples tels qu'une ligne ou un point pas de problème.
Avez-vous déjà vous eu envie de créer des effets ? Qui en fonction de ce que vous allez dessiner, et sur quoi vous allez le faire vont donner divers résultats ? Créer un effet de lumière ? Créer un effet néon, ou tout simplement afficher une partie de l'écran en négatif ?
Et bien tout cela est possible, et assez simplement grâce au blend mode. Le blend mode est un mode comme son nom l'indique qui permet d'ajouter, soustraire les couleurs à l'écran (blend = mélange en Français).
Je vais vous apprendre dans ce tutoriel à maîtriser la bête qu'est le blend mode.

2-Partie Théorique

Il existe deux fonctions permettant d'activer le blend mode (bien qu'il est déjà activé par défaut d'une certaine manière en mode bm_normal)
-draw_set_blend_mode(mode)
-draw_set_blend_mode_ext(src, dest)

Nous allons voir le fonctionnement de notre première fonction pour commencer, la seconde étant plus complexe (et plus puissante aussi).

Avec cette première fonction, il est possible de mélanger les couleurs déjà affichées avec ce que l'on va dessiner.

Il existe 4 modes de mélange "simples" utilisables avec draw_set_blend_mode
bm_normal : le mode activé par défaut, pas de mélange.
bm_add : le mode ajout de couleur.
bm_subtract : Le mode soustraction de couleurs.
bm_max : Un mode spécial d'ajout de couleur.

3-Utilisation du blend mode

a) bm_normal

Ce mode très important va permettre de remettre le blend mode normalement, en gros de remettre notre mode de dessin a la normale.
Il faudra donc l'utiliser suite à toutes utilisations du blend mode afin que les effets ne s'effectuent que là où nous le souhaitons.

b) bm_add

Le mode ajout de couleurs est très utile pour faire des effets de lasers et de lumières. Son fonctionnement est très simple a comprendre.
Chaque pixel de votre écran est donc constitué de 3 composantes (hormis l'alpha, dont je parlerais pour la prochaine partie) : rouge, vert et bleu.
Le mode bm_add va ajouter les composantes des pixels que vous allez dessiner avec celles des pixels de l'écran. En gros si mon écran est complètement rouge et que je dessine un rond vert (c_lime), alors le rond sera affiché jaune (rouge + vert).
Afficher du blanc sur n'importe quoi donne du blanc, afficher du noir ne donne rien. Afficher n'importe quelle nuance de gris éclaircit l'image.

Exemple :

Code:: draw_set_blend_mode(bm_add)
draw_circle_color(mouse_x, mouse_y, 80, c_white, c_black, 0)
draw_set_blend_mode(bm_normal)

blend mode - [Tutoriel] Le Blend mode en long et en large 1_bm_add

c) bm_subtract

Ce mode est l'inverse de bm_add. Ici au lieu d'ajouter les composantes de ce que l'on dessine (que l'on appellera la source désormais) et celles de l'écran (que l'on appellera la destination), il va les soustraire.
Pratique pour faire des effets d'ombres mais surtout pour faire un autre effet simplement : dessiner en négatif !

Exemple :

Code:: //Notre sprite normal
draw_sprite(sprite1, 0, 149, 0)
//Et maintenant notre sprite en négatif
draw_set_color(c_white)
draw_rectangle(0, 0, 149, 148, 0)
draw_set_blend_mode(bm_subtract)
draw_sprite(sprite1, 0, 0, 0)
draw_set_blend_mode(bm_normal)

blend mode - [Tutoriel] Le Blend mode en long et en large 2_bm_subtract

Donc ici avant d'afficher mon sprite j'ai dessiné un rectangle blanc. Les composantes de mon sprite vont donc se soustraire à celles de mon rectangle blanc, ce qui affichera mon sprite en négatif.

d) bm_max

Le mode bm_max fonctionne presque de la même manière que bm_add , mais au lieu d'ajouter la source plus la destination pour chaque composante ( mélange = source + destination) , lui va fonctionner de la manière suivante :
mélange = (source + destination) - (source*destination)/256

Exemple :
blend mode - [Tutoriel] Le Blend mode en long et en large 3_bm_max

Comme vous pouvez le voir bm_max ressemble fortement a bm_add, mis a part que l'addition est plus douce.

4-Extension du blend mode

Nous allons maintenant voir comment utiliser la fonction draw_set_blend_mode_ext.
Ce blend mode, va indiquer quel mode de mélange de couleurs est à utiliser pour à la fois la couleur source et celle de destination.

Cette fonction possède deux paramètres : draw_set_blend_mode(source, destination)

Nous pouvons utiliser ces constantes pour chaque paramètre. Chaque constante définit un facteur de mélange, s signifie source, et d destination (Rs = Red source, Rd = Red destination).

bm_zero : (0, 0, 0, 0)
bm_one : (1, 1, 1, 1)

bm_src_color : (Rs, Gs, Bs, As)
bm_dest_color : (Rd, Gd, Bd, Ad)

bm_inv_src_color : (1–Rs, 1–Gs, 1–Bs, 1–As)
bm_inv_dest_color : (1–Rd, 1–Gd, 1–Bd, 1–Ad)

bm_src_alpha : (As, As, As, As)
bm_dest_alpha : (Ad, Ad, Ad, Ad)

bm_inv_src_alpha : (1–As, 1–As, 1–As, 1–As)
bm_inv_dest_alpha : (1–Ad, 1–Ad, 1–Ad, 1–Ad)

bm_src_alpha_sat : (f, f, f, 1) -> f = min(As, 1–Ad)

Notre résultat sera donc calculé de cette manière :
mélange = [source] * [facteur mélange source] + [destination] * [facteur mélange destination]

Je tient a préciser qu'ici, les composantes de nos couleurs donc Rs, Gs, Bs, As et Rd, Gs, Bs, As, seront rapportées a des valeurs comprises entre 0 et 1 pour le calcul (le blanc seras donc (1,1,1,1) et le noir (0,0,0,0) , le gris (0.5, 0.5, 0.5, 0.5)).

Pour que vous compreniez mieux voici quelques modes de mélanges que nous avons vus précédemment.

-bm_normal

draw_set_blend_mode_ext(bm_src_alpha, bm_inv_src_alpha)

mélange = [source] * [As,As,As,As] + [destination] * [1-As,1-As,1-As,1-As]

-bm_add

draw_set_blend_mode_ext( bm_one, bm_one )

mélange = [source] * [1,1,1,1] + [destination] * [1,1,1,1]
mélange = [source] + [destination]

Nous allons voir maintenant quelques effets que nous allons pouvoir faire avec tout ça.

a) sqr

draw_set_blend_mode_ext( bm_src_color, bm_zero )

mélange = [source] * [Rs, Gs, Bs, As] + [destination] * [0,0,0,0]
mélange = [source] * [source] = sqr( [source] )

blend mode - [Tutoriel] Le Blend mode en long et en large 4_sqr

b) source * destination

draw_set_blend_mode_ext( bm_dest_color, bm_zero )

mélange = [source] * [destination]

blend mode - [Tutoriel] Le Blend mode en long et en large 5_src_x_dest

c) Négatif

draw_set_blend_mode_ext(bm_inv_dest_color, bm_inv_src_color)

mélange = [source] * [1-Rd, 1-Gd, 1-Bd, 1-Ad] + [destination] * [1-Rs, 1-Gs, 1-Bs, 1-As]
mélange = [source] – [source]*[destination] + [destination] – [source]*[destination]
mélange = [source] + [destination] – 2*[source]*[destination]

Désormais tout ce qui sera dessiné en blanc rendra la destination négative :
mélange = [1,1,1,1] + [destination] – 2*[1,1,1,1]*[destination]
mélange = [1,1,1,1] – [destination]

Code:: draw_set_blend_mode_ext(bm_inv_dest_color,bm_inv_src_color)
draw_circle_color(mouse_x, mouse_y, 80, c_white, 0, 0)
draw_set_blend_mode(bm_normal)

blend mode - [Tutoriel] Le Blend mode en long et en large 6_neg

d) Masque d'un sprite

Voici comment récupérer le masque d'un sprite.
draw_sprite_mask

Code:: draw_set_color(c_white)
draw_rectangle(argument2, argument3, argument2 + sprite_get_width(argument0), argument3 + sprite_get_height(argument0), 0)
draw_set_blend_mode_ext(bm_zero, bm_src_alpha)
draw_sprite(argument0, argument1, argument2, argument3)
draw_set_blend_mode(bm_normal)

blend mode - [Tutoriel] Le Blend mode en long et en large 7_mask

e) Supprimer un canal

draw_set_blend_mode_ext(bm_dest_color, bm_zero)
mélange = [source] * [destination]

Maintenant nous pouvons facilement supprimer un canal.
Si nous dessinons en blanc on aurait -> mélange = [destination] , donc rien de changé.
Par contre si on dessine juste en rouge :
mélange = [Rs, 0, 0, 0] * [destination]
mélange = [canal rouge destination]

On gros de cette manière nous garderons les canaux de la source.

blend mode - [Tutoriel] Le Blend mode en long et en large 8_channel

Et voilà c'est la fin, en espérant avoir été clair, et surtout que désormais vous n'allez plus vous passer de blend mode Wink

PS: Pour vous faciliter la tâche, Sachem a créé un outil pour visualiser les différentes combinaisons de blendmode, n'hésitez pas à vous en servir!
-->ICI<--

C'est jolie tout ça!

wow, juste le truc dont j'avais besoin coeur

Voila , tutoriel finis :fete:

Administrateur Messages : 20024 Localisation : Alsace

Beau travail oni; clair, complet et propre. ;)

Je compte mettre à jour ce topic prochainement avec l'ensemble des tutoriels de la section, ça fait un article de qualité de plus à ajouter à la liste.

Merci Bast. hap

Invité

excellent tutoriel Hat

Hop, petit détérage ! happy1

Voilà, j'ai deux petit problèmes avec les blend modes :

J'ai besoin d'utiliser un alpha qui varie sur un bm_subtract, le code que j'ai pondu marche niquel en "bm_add", mais il semble que le subtract me bouffe l'alpha, comment j'peux corriger ça ?

Ensuite, j'ai besoin de flasher l'écran pour faire un orage, le hic c'est que j'utlise un blend mode pour faire de la nuit et un autre pour l'orage.
La room est composé de deux objets, un qui gère la nuit :

Code:: draw_set_blend_mode_ext(bm_zero,bm_src_color)
draw_set_color(make_color_rgb(121,127,191))
draw_rectangle(0,0,room_width,room_height,0)
draw_set_blend_mode(bm_normal)

et l'autre le flash :

Code:: surface_set_target(flash_surf)
draw_set_color(make_color_rgb(185,181,157))
draw_rectangle(0,0,320,200,0)
surface_reset_target()

draw_set_blend_mode_ext(bm_dest_color,bm_src_alpha)
draw_surface(flash_surf,0,0)
draw_set_blend_mode(bm_normal)

Séparément, le code qui gère le flash marche très bien (effet similaire à color dodge dans photoshop) mais quand je mets les deux en même temps, le flash se retrouve moins puissant, mais il est parfait en virant celui qui créé la nuit et en mettant une image qui comporte les couleurs de la nuit.

Comment j'peux empêcher que les deux se mélanges ?

Merci à vous et euh.. bonne journée/soirée/réveil/whateveryouwants happy1

Invité

Bump

J'ai conçu un petit programme qui pourra être utile en plus de ce tutoriel, il permet de visionner les différents paramètres de blend_mode_ext ainsi que de les combiner sur plusieurs calques (8 en max) :

blend mode - [Tutoriel] Le Blend mode en long et en large Bmview10

blend mode - [Tutoriel] Le Blend mode en long et en large Bmview10

Liens de téléchargement :

fleche_d

exe : http://host-a.net/u/shm31/bmviewer.zip

fleche_d

gmk : http://host-a.net/u/shm31/bmviewer.gmk

Sujet: Re: [Tutoriel] Le Blend mode en long et en large Lun 15 Oct 2012 - 11:52

Pas mal du tout! Ça risque de me servir, ça Smile

2-3 petites remarques:
Ce serait bien d'avoir un menu proposant certains classiques prédéfinis (inversion de couleur, le-super-blend-mode-utilisé-dans-tous-les-moteurs-de-lumière, etc.)
Et peut être la possibilité de changer le blend mode d'un layer sélectionné avec les flèches (pour parcourir plus vite les possibilités si on sait pas trop ce que l'on fait)

Invité

merci pour le feedback,
j'ai pris tes remarques en comptes et j'ai corrigé quelques bugs Smile

Utilisateur confirmé: Rang * Messages : 243

Excellent tuto merci beaucoup!! Smile

» Problème de blend mode
» Masque et blend mode
» [Résolu] pb avec blend mode
» Blend mode - origine décalée
» Recherche Prof pour Blend Mode