Sources PureBasicConsultez toutes les sources

Nombre d'auteurs : 41, nombre de sources : 88, dernière mise à jour : 13 août 2011 

 
OuvrirSommaireScreen, sprite, sprite3D

Le but :
Réaliser un effet de lumière, ou d'ombre : nous allons afficher un sprite avec un "mode fusion" (blendmode) différent, afin de changer son aspect.
Il pourra avoir l'air plus lumineux, ou plus sombre.

Utilité :
Par exemple, pour un sort de magie dans un jeu d'aventure ou RPG, ou une explosion dans un space shoot, ou encore pour créer un effet jour/nuit.
On peut trouver beaucoup d'autres utilités.

Explication sommaire sur les "blendmode" :
Qu'est-ce qu'un blendmode.
Si vous connaissez un peu gimp ou photoshop, vous saurez que les calques ont ce que l'on appelle les modes de fusion (= blendmode).
Le mode de fusion (ou blendmode) est une façon d'afficher une image (ou un sprite dans un jeu), en fonction de ce qu'il y a en dessous.

Prenons 2 images A et B.

  • - L'image A sur trouve sur le calque du dessus.
  • - l'image B sur le calque du dessous.
  • - L'image A est donc "vue au dessus " de l'image B.

Parmi les modes de fusion, on trouve ceux-ci :

  • - Normal : on superpose juste une image A (avec transparence ou non) au dessus d'une autre image B
  • - Produit : l'image A du dessus assombrit celle du dessous (la B)
  • - Mode addition : l'image A du dessus "éclaire" l'image B du dessous
  • - Mode inversion : l'image A du dessus inverse les couleurs de l'image B du dessous, en fonction des couleurs de l'image A ,etc.

Il existe beaucoup d'autres modes de fusion, le mieux pour voir l'intérêt étant de les tester :)

Avec purebasic, nous avons la possibilité d'exploiter très simplement ces modes de fusion.

Nous allons voir comment faire cela facilement.

Le code pour utiliser le blend mode, ainsi que la méthode :
Utiliser le blendmode est assez simple. Il y néanmoins une suite de choses à réaliser dans l'ordre :

  • - Tout d'abord avoir un sprite, et le "convertir en sprite3D avec createSprite3D()
  • - Puis démarrer le mode 3D avec start3D()
  • - Puis changer le blendmode avec Sprite3DBlendingMode(ModeSource, ModeDestination) : voir un peu plus bas l'explication en détail.
  • - Ensuite afficher le sprite 3D avec DisplaySprite3D()
  • - Ne pas oublier de remettre le blend mode normal avec Sprite3DBlendingMode(5,6), sinon, tous vos sprites risquent d'être dessinés avec l'autre blendmode.

Explication sur le blendmode :
Les modes source et destination
> on va définir avec ces paramètres quel mode de mélange de couleurs est à utiliser pour à la fois la couleur source et celle de destination.
Nous pouvons utiliser les constantes suivantes pour chaque paramètre. Chaque constante définie un facteur de mélange. On utilise donc une constante pour la source, et une autre pour la destination (2 constantes différentes ou 2 constantes identiques, cela dépend de ce que l'on souhaite comme effet) :

  • #D3DBLEND_ZERO = 1
  • #D3DBLEND_ONE = 2
  • #D3DBLEND_SRCCOLOR = 3
  • #D3DBLEND_INVSRCCOLOR = 4
  • #D3DBLEND_SRCALPHA = 5
  • #D3DBLEND_INVSRCALPHA = 6
  • #D3DBLEND_DESTALPHA = 7
  • #D3DBLEND_INVDESTALPHA = 8
  • #D3DBLEND_DESTCOLOR = 9
  • #D3DBLEND_INVDESTCOLOR = 10
  • #D3DBLEND_SRCALPHASAT = 11
  • #D3DBLEND_BOTHSRCALPHA = 12
  • #D3DBLEND_BOTHINVSRCALPHA = 13

Explication plus poussée (remerciement à Onilink, car celui-ci est tiré de son tutoriel sur le CBNA) :
"Chaque constante définie un facteur de mélange, s signifie source, et d destination (Rs = Red source, Rd = Red destination).

  • #D3DBLEND_ZERO : (0, 0, 0, 0)
  • #D3DBLEND_ONE : (1, 1, 1, 1)
  • #D3DBLEND_SRCCOLOR : (Rs, Gs, Bs, As)
  • #D3DBLEND_DESTCOLOR : (Rd, Gd, Bd, Ad)
  • #D3DBLEND_INVSRCCOLOR : (1?Rs, 1?Gs, 1?Bs, 1?As)
  • #D3DBLEND_INVDESTCOLOR : (1?Rd, 1?Gd, 1?Bd, 1?Ad)
  • #D3DBLEND_SRCALPHA : (As, As, As, As)
  • #D3DBLEND_DESTALPHA : (Ad, Ad, Ad, Ad)
  • #D3DBLEND_INVSRCALPHA : (1?As, 1?As, 1?As, 1?As)
  • #D3DBLEND_INVDESTALPHA : (1?Ad, 1?Ad, 1?Ad, 1?Ad)
  • #D3DBLEND_SRCALPHASAT : (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 tiens 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.

- Mode normal
Sprite3DBlendingMode(#D3DBLEND_SRCALPHA, #D3DBLEND_INVSRCALPHA).
mélange = [source] * [As,As,As,As] + [destination] * [1-As,1-As,1-As,1-As]

- Mode additif
Sprite3DBlendingMode( #D3DBLEND_ONE, #D3DBLEND_ONE)
mélange = [source] * [1,1,1,1] + [destination] * [1,1,1,1]
mélange = [source] + [destination]"

L'image :
Pour le png, utilisez une image de votre choix, il faut juste qu'elle ait plusieurs couleurs et du contraste pour mieux voir les effets. Éventuellement, avec un canal alpha c'est encore mieux ;)

Vous pouvez utilisez celle-ci :

Image non disponible
 
Sélectionnez

;{ ************************ Infos **************************
; purebasic 4.51
; exemple by blendman 03/2011
; effet de lumière, blendmode
; (ici, nous trouvons juste des informations)
;}

;{************************ variables, constante *************
; tout d'abord, on définit nos constantes
;
Enumeration
  #window ; constante pour la fenêtre
  #fire ; constante pour le sprite
EndEnumeration
;}

;{ ************************ initialisation ******************
;ici, on initialise tout ce qui est nécessaire pour le fonctionnement du programme
InitKeyboard () ; le clavier
InitSprite() ; on initialise les sprites
InitSprite3D() ; on va utiliser un sprite3D, il faut initialiser cela
UsePNGImageDecoder() ; enfin, on a besoin du "decoder" png, car notre image est en png
;}



;{ ************************ open window *********************
;ensuite, on ouvre la fenêtre et on crée l'écran
OpenWindow(#window, 0, 0,800, 600, "Fx et blendmode" , #PB_Window_SystemMenu|#PB_Window_BorderLess |#PB_Window_ScreenCentered ) ; d'abord, on crée la fenêtre
OpenWindowedScreen( WindowID (#window),0,0, 800,600, 1, 0,0) ; on crée un écran contenu dans la fenêtre
;}

;{ ************************ sprite et loading ***************
;dans cette partie on charge notre sprite, et on crée le sprite3D à partir de celui-ci.
;Le sprite3D est plus ou moins une sorte de plan sur lequel notre image est dessinée.
; on doit utiliser un sprite3D pour gérer la transparence des png.
LoadSprite(#fire,"fx.png",#PB_Sprite_AlphaBlending|#PB_Sprite_Texture) ; on charge le png.
;Il est important de mettre les paramètres
;#PB_Sprite_AlphaBlending|#PB_Sprite_Texture
; pour gérer la transparence du png
CreateSprite3D(#fire,#fire) ; là, on crée le sprite 3D
;}

;{ ************************ boucle principale ***************
;puis on crée notre boucle principale
Repeat ; la boucle principale se répète jusqu'à "until" (voir en bas du code)
  
  FlipBuffers () ; inversion du buffer
  ClearScreen ( RGB (125,125,125)) ; on efface l'écran avec une couleur grise
  
  Event= WindowEvent () ; on regarde les évènements dans la fenêtre
  ExamineKeyboard () ; on doit lancer ceci pour pouvoir utiliser les touches du clavier
  
  
  ; voici la partie  on va
  ; s'occuper des mode de fusion (blend mode) :
  
  Start3D() ; tout d'abord, il faut démarrer le mode "3D"
  ; mode de fusion add
  Sprite3DBlendingMode(2,2) ; avec ce code on définit un mode de fusion : ici, c'est le mode "additif" (donne un effet de lumière aux sprites)
  DisplaySprite3D(#fire, 100,200) ; on dessine le sprite
  Sprite3DBlendingMode(5,6) ; et on n'oublie pas de revenir au blendmode normal :)
  
  ;mode de fusion multiply (produit) ;un autre mode de fusion
  Sprite3DBlendingMode(9,6) ; on définit donc le nouveau mode de fusion pour notre/nos sprite
  DisplaySprite3D(#fire, 200,200) ; on les dessine
  Sprite3DBlendingMode(5,6) ; et on remet en blendmode normal
  
  ; mode de fusion normal
  Sprite3DBlendingMode(5,6) ; le nouveau mode (ici, j'ai choisi le mode normal, pour comparer avec les autres
  DisplaySprite3D(#fire, 300,200) ; on dessine le sprite
  Sprite3DBlendingMode(5,6) ;on revient au mode normal
  
  ; mode de fusion screen
  Sprite3DBlendingMode(9,2) ; on définit donc le nouveau mode de fusion pour notre/nos sprite
  DisplaySprite3D(#fire, 100,400); on  dessine
  Sprite3DBlendingMode(5,6) ;on revient au mode normal
  
  ; mode de fusion invert
  Sprite3DBlendingMode(8,4) ; on définit donc le nouveau mode de fusion pour notre/nos sprite
  DisplaySprite3D(#fire, 200,400); on dessine
  Sprite3DBlendingMode(5,6);on revient au mode normal
  Stop3D() ; on a terminé de dessiner nos sprites3D, on arrête donc le mode 3D.
  
Until Event= #PB_Event_CloseWindow Or KeyboardPushed ( #PB_Key_Escape ) ;ici, on indique que si on clique sur la croix en haut ou que l'on appuie sur la touche échappe, cela arrête le programme.
; vous vous rappelez , en haut, la boucle commence à repeat.... until. Le until c'est ici :).
;}

Et voilà, c'est tout :)

Maintenant, c'est à vous de jouer, et faites de belles lumières et de beaux effets.


Remerciement
Onilink du CBNA pour son tutoriel sur les blendmode, dont celui-ci est inspiré :)
le tutoriel d'Onilink (tutoriel pour game Maker à la base)

Créé le 9 mars 2011  par blendman
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2008 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.