AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  Connexion  

Partagez
 

 [Tutoriel] Le Blend mode en long et en large

Aller en bas 
AuteurMessage
onilink_
Modérateur
onilink_

Messages : 9101
Localisation : Montpellier
Projet Actuel : Planet Centauri
OniDev

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyJeu 5 Aoû 2010 - 20:44

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)
[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)
[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 :
[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] )

[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]
[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)


[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)


[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.

[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<--

_________________
[Tutoriel] Le Blend mode en long et en large Runningpotato1[Tutoriel] Le Blend mode en long et en large TvF6GED


Dernière édition par onilink_ le Sam 27 Avr 2013 - 12:39, édité 12 fois (Raison : Quelques corrections.)
Revenir en haut Aller en bas
Maniac206
*Excellent utilisateur*
Maniac206

Messages : 4977
Localisation : Canada

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyJeu 5 Aoû 2010 - 23:23

C'est jolie tout ça!
Revenir en haut Aller en bas
Mass
*Excellent utilisateur*
Mass

Messages : 3337
Localisation : Dans une canonnière wookie.
Projet Actuel :
Things
[Tutoriel] Le Blend mode en long et en large Void

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyVen 6 Aoû 2010 - 7:37

wow, juste le truc dont j'avais besoin coeur

_________________
Wyvup
Revenir en haut Aller en bas
http://madmass.mype.fr/CBNA/
onilink_
Modérateur
onilink_

Messages : 9101
Localisation : Montpellier
Projet Actuel : Planet Centauri
OniDev

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyVen 6 Aoû 2010 - 11:30

Voila , tutoriel finis :fete:

_________________
[Tutoriel] Le Blend mode en long et en large Runningpotato1[Tutoriel] Le Blend mode en long et en large TvF6GED
Revenir en haut Aller en bas
Bast
Administrateur
Bast

Messages : 20008
Localisation : Alsace

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyVen 6 Aoû 2010 - 12:11

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.

_________________
[Tutoriel] Le Blend mode en long et en large Sl_sign_icon
Revenir en haut Aller en bas
http://www.lecbna.org/
onilink_
Modérateur
onilink_

Messages : 9101
Localisation : Montpellier
Projet Actuel : Planet Centauri
OniDev

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyVen 6 Aoû 2010 - 12:25

Merci Bast. hap

_________________
[Tutoriel] Le Blend mode en long et en large Runningpotato1[Tutoriel] Le Blend mode en long et en large TvF6GED
Revenir en haut Aller en bas
Invité
Invité



[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyVen 6 Aoû 2010 - 17:57

excellent tutoriel Hat
Revenir en haut Aller en bas
Termite
Utilisateur confirmé: Rang ****
Termite

Messages : 1005
Localisation : Dans ta charpente !
Projet Actuel : RayEngine 5.0

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyDim 29 Aoû 2010 - 2:21

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

_________________
Because these are not the words of God, the same God that burnt the knowing.
Revenir en haut Aller en bas
Invité
Invité



[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyLun 15 Oct 2012 - 1:18

Exclamation 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) :

[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

Revenir en haut Aller en bas
M@d_Doc
Modérateur
M@d_Doc

Messages : 6600
Localisation : 47°44'8.04
Projet Actuel : aucun

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyLun 15 Oct 2012 - 9: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)

_________________
[Tutoriel] Le Blend mode en long et en large Control_commentTous les icones de gm utilisables sur le cbna ICI [Tutoriel] Le Blend mode en long et en large Main1_change_sprite
Revenir en haut Aller en bas
http://www.lecbna.org
Invité
Invité



[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyLun 15 Oct 2012 - 16:56

merci pour le feedback,
j'ai pris tes remarques en comptes et j'ai corrigé quelques bugs Smile
Revenir en haut Aller en bas
tales
Utilisateur confirmé: Rang *


Messages : 243

[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large EmptyJeu 17 Jan 2013 - 22:36

Excellent tuto merci beaucoup!! Smile
Revenir en haut Aller en bas
Contenu sponsorisé




[Tutoriel] Le Blend mode en long et en large Empty
MessageSujet: Re: [Tutoriel] Le Blend mode en long et en large   [Tutoriel] Le Blend mode en long et en large Empty

Revenir en haut Aller en bas
 
[Tutoriel] Le Blend mode en long et en large
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» En mode hibernation
» chaise haute trip trap mode d'emploi?
» Qu'est ce que qu'un Col 1 /2 long fermé ?
» comptabilité à faire soi même : mode d'emploi
» col long et accouchement..

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Le CBNA :: Développement :: Game Maker-
Sauter vers: