Discussion :

[Armulis]

Salut!

Je voudrais réaliser une animation comme dans les dessins animés, quand un "diaphragme" noir se ferme sur l'écran.
En gros, j'ai besoin de pouvoir faire un trou dans une sprite.
J'utilise SFML2.0

On m'a proposé de composer mon image (avec des sprites) en utilisant la fonction "draw();", de "recouvrir" l'image avec un rectangle noir (et l'envoyer sur l'image avec "draw();", puis de faire un trou dedans en dessinant un disque et en l'affichant avec "draw( ... , BlendMultiply );". Le problème de cette solution, c'est que ça fait un trou à-travers toutes les sprites qui se trouvent derrière.

Est-ce qu'il existe une autre solution?

[ternel]

utiliser un masque, mais je ne sais pas techniquement comment le faire en SFML.

Il s'agit en gros à la fin de tracer un disque plein dans le buffer "qui va bien" pour que le dessin du rectangle noir (qui suivra) ne s'applique qu'en dehors.

[Armulis]

D'accord avec toi sur le concept; j'avais imaginé une solution de ce genre en fait.

Mais j'ai vraiment besoin d'une aide technique, parce que je ne trouve pas de solution, là...

[ternel]

notre-ami-à-tous, quand on lui demande ce qu'il pense de sfml mask répond avec ce lien_ci, qui me semble intéressant, avec du code et des explications.

[Armulis]

Je comprends pas vraiment tout ce qui se dit dans le lien que tu m'as donné: les exemples sont plutôt complexes et commentés en anglais, de surcroît...

J'ai fait des tests de mon côté, et le paramètre "BlendMode" de la méthode "draw()" n'ont pas l'air utiles pour faire ça.
Est-ce que quelqu'un peut me proposer une autre piste?

Note: Google est assez pauvre en résultats quand on lui demande juste "sfml mask". J'en veux pour preuve le fait que le sixième résultat ramène ici même. ^^

[ternel]

Je trouve qu'on est bien indexé, parce que quand j'ai fais la recherche sfml mask, j'avais plein de résultat, et pas notre sujet

Et avant de ne pas croire, tu as essayé leurs solutions?

[Armulis]

Bien-sûr que j'ai essayé.
Mais j'ai du mal à comprendre comment il fonctionne, et en plus quand je l'exécute ça m'ouvre seulement une fenêtre toute blanche. J'ai du mal à comprendre où se trouvent les trous =)

[Armulis]

J'ai trouvé une solution qui fonctionne presque:

Apparemment, si le trou a comme couleur "Color::Transparent", et qu'on le draw avec "BlendNone" comme deuxième paramètre, ça fait un trou.
Le problème, c'est que ça traverse toute l'image.
Dans ce code, j'ai dessiné un rectangle rouge derrière le bleu, et je veux un trou dans le rectangle bleu uniquement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#include <SFML/Graphics.hpp>
#include <windows.h>
#include <string.h>
 
#include <vector>
#include <iostream>
 
using namespace std;
using namespace sf;
 
// Ce programme doit afficher un écran bleu avec un gros trou dedans (et derrière, c'est noir par-défaut)
 
int main()
{   RenderWindow window;
    window.create(VideoMode(VideoMode::getDesktopMode().width, VideoMode::getDesktopMode().height), "HOLE", Style::Fullscreen);
 
    double width=VideoMode::getDesktopMode().width;
    double height=VideoMode::getDesktopMode().height;
 
    CircleShape sprite2;
    RectangleShape sprite4;
    RectangleShape sprite5;
    Texture texture1;
 
    sprite4.setFillColor(Color(0, 0, 255, 255));
    sprite4.setSize(sf::Vector2f(width, height));
 
    sprite5.setFillColor(Color(255, 0, 0, 255));
    sprite5.setSize(sf::Vector2f(width, height));
 
    sprite2.setFillColor(Color::Transparent);
    sprite2.setRadius(200);
    sprite2.setOrigin(200, 200);
    sprite2.setPosition(width/2, height/2);
 
    window.draw(sprite5);
    window.draw(sprite4);
    window.draw(sprite2, BlendNone);
 
    window.display();
    Sleep(2500);
}

[ternel]

En théorie, tu as deux choses: le fond réel et le masque noir (qui est l'inverse d'un disque)

L'idée est de trouver une bidouille pour ne pas calculer la forme du masque, mais de tracer l'inverse d'un disque.

Par exemple, avec un rectangle noir et un disque en alpha transparent, que tu vas blend en superposition alpha (je n'ai pas le nom sfml).

Si tu as quelques étapes de masque, tu peux précalculer les masques correspondants.


Il y a deux ordre de dessin possible:

1. tout le reste
2. le masque en une seule fonction

ou

1. Le fond
2. Le trou
3. les autres parties, qui doivent être mangées par le fond

[Cirrus Minor]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    window.draw(sprite5);
    window.draw(sprite4);
    window.draw(sprite2, BlendNone);

En faisant ça,
- tu dessines le fond rouge à l'écran,
- puis tu dessines le carré bleu par dessus,
- puis tu fais un rond...
Mais comment veux-tu que ton programme sache qu'il y avait du rouge sous le bleu ? Pour lui, il n'y a qu'un fond bleu.

Une solution:
- tu dessines le fond à l'écran,
- tu dessines ton sprite, pas à l'écran mais dans une RenderTexture,
- tu fait ton trou dans la RenderTexture,
- tu affiches la RenderTexture à l'écran.

Dans ton code, ça donnerait un truc comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    window.draw(sprite5);
    sf::RenderTexture renderTexture;
    if (!renderTexture.create(width, height))
    {
        // LOG ERROR
    }
 
    renderTexture.draw(sprite4);
    renderTexture.draw(sprite2, BlendNone);
    renderTexture.display();
    const sf::Texture& texture = renderTexture.getTexture();
    sf::Sprite sprite(texture);
 
    window.draw(sprite);
    window.display();