Discussion :

[alex6891]

Bonjour,

J'aimerais savoir comment faire pour superposer plusieurs images (une grande pour le fond et trois petites pour les gains) afin de créer un ticket à gratter de telle sorte que lorsque l'on "gratte" le fond (situé devant les trois petites images), alors on voit apparaître les gains (l'image de fond s'efface au-dessus) ?

Merci pour votre aide

[bouye]

Voici un exemple vite tape et pas du tout optimise utilisant un masque en niveau de gris pour faire varier la transparence de la zone a gratter.

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
package test;
 
import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.event.*;
 
/**
 * <p>Title: </p>
 *
 * <p>Description: </p>
 *
 * <p>Copyright: Copyright (c) 2005</p>
 *
 * <p>Company: </p>
 *
 * @author not attributable
 * @version 1.0
 */
public class TicketPanel extends JPanel implements MouseInputListener {
  /** Ticket image (background).
   */
  private BufferedImage ticketImage;
 
  /** Source winnings image.
   */
  private BufferedImage winningsImage;
 
  /** Source scratch image (same size as winnings image).
   */
  private BufferedImage scratchSourceImage;
 
  /** Scratch mask (same size as source scratch image).
   */
  private BufferedImage scratchMaskImage;
 
  /** Current scratch image, contains scratched areas (same size as source scratch image).
   */
  private BufferedImage scratchImage;
 
  /** Active scratch area (same size as source scratch image).
   */
  private Rectangle scratchArea;
 
  /** Creates a new instance.
   * @exception IOException In case of I/O error.
   */
  public TicketPanel() throws IOException {
    super();
    ticketImage = ImageIO.read(new File("Ticket.png"));
    setPreferredSize(new Dimension(ticketImage.getWidth(), ticketImage.getHeight()));
    winningsImage = ImageIO.read(new File("Winnings.png"));
    scratchSourceImage = ImageIO.read(new File("Scratch.png"));
    scratchMaskImage = new BufferedImage(scratchSourceImage.getWidth(), scratchSourceImage.getHeight(), BufferedImage.TYPE_BYTE_GRAY);
    // Initial mask is completly white (opaque).
    {
      Graphics2D graphics = scratchMaskImage.createGraphics();
      graphics.setColor(Color.WHITE);
      graphics.fillRect(0, 0, scratchMaskImage.getWidth(), scratchMaskImage.getHeight());
      graphics.dispose();
    }
    scratchImage = new BufferedImage(scratchSourceImage.getWidth(), scratchSourceImage.getHeight(), BufferedImage.TYPE_INT_ARGB);
    // Initially the ticket is not scratched.
    {
      Graphics2D graphics = scratchImage.createGraphics();
      graphics.drawImage(scratchSourceImage, 0, 0, null);
      graphics.dispose();
    }
    // Active area (mouse clicks and drags valid within this rectangle.
    scratchArea = new Rectangle(10, 170, scratchSourceImage.getWidth(), scratchSourceImage.getHeight());
    addMouseListener(this);
    addMouseMotionListener(this);
  }
 
  /** Update the current scratch.
   * @param x Current X location (screen/ticket coordinates).
   * @param y Current Y location (screen/ticket coordinates).
   */
  private void maybeUpdateScratch(int x, int y) {
    if (scratchArea.contains(x, y)) {
      updateScratch(x - scratchArea.x, y - scratchArea.y);
      repaint();
    }
  }
 
  /** Update the current scratch.
   * @param x Current X location (scratch coordinates).
   * @param y Current Y location (scratch coordinates).
   */
  private void updateScratch(int x, int y) {
    // Update mask.
    Graphics2D graphics = scratchMaskImage.createGraphics();
    graphics.setColor(Color.BLACK);
    graphics.fillOval(x - 15, y - 15, 30, 30);
    graphics.dispose();
    // Update scratch image pixels.
    int width = scratchArea.width;
    int height = scratchArea.height;
    for (int i = 0; i < width; i++) {
      for (int j = 0; j < height; j++) {
        // We take RBG from the source scratch image.
        int srcRGB = scratchSourceImage.getRGB(i, j);
        // But we take alpha from the scratch mask.
        int maskRGB = scratchMaskImage.getRGB(i, j);
        // We combine both values to make the current scratch.
        int dstRGB = ((srcRGB & 0xFFFFFF) | ((maskRGB & 0xFF) << 24));
        scratchImage.setRGB(i, j, dstRGB);
      }
    }
  }
 
  /** {@inheritDoc}
   */
  @Override protected void paintComponent(Graphics graphics) {
    super.paintComponent(graphics);
    graphics.drawImage(ticketImage, 0, 0, null);
    graphics.drawImage(winningsImage, scratchArea.x, scratchArea.y, null);
    graphics.drawImage(scratchImage, scratchArea.x, scratchArea.y, null);
  }
 
  /** Self-test main.
   * @param args Arguments from the command line.
   */
  public static void main(String ...args) {
    try {
      TicketPanel ticket = new TicketPanel();
      JFrame frame = new JFrame("Scatch !!!");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setLayout(new BorderLayout());
      frame.add(ticket, BorderLayout.CENTER);
      frame.pack();
      frame.setResizable(false);
      frame.setVisible(true);
    } catch (Throwable t) {
      t.printStackTrace();
    }
  }
 
  ///////////////////////
  // Event management. //
  ///////////////////////
 
  /** {@inheritDoc}
   */
  public void mouseClicked(MouseEvent event) {
    maybeUpdateScratch(event.getX(), event.getY());
  }
 
  /** {@inheritDoc}
   */
  public void mousePressed(MouseEvent event) {
 
  }
 
  /** {@inheritDoc}
   */
  public void mouseReleased(MouseEvent event) {
 
  }
 
  /** {@inheritDoc}
   */
  public void mouseEntered(MouseEvent event) {
 
  }
 
  /** {@inheritDoc}
   */
  public void mouseExited(MouseEvent event) {
 
  }
 
  /** {@inheritDoc}
   */
  public void mouseDragged(MouseEvent event) {
    maybeUpdateScratch(event.getX(), event.getY());
  }
 
  /** {@inheritDoc}
   */
  public void mouseMoved(MouseEvent event) {
  }
}

Parmis les amelioration/optimisations possibles on peut citer :
- travailler directement sur la zone de scratch source.
- ne pas utiliser d'image separee pour le masque et modifier dirrectement les pixels de l'image scratch.
- plutot que de dessiner un simple cercle noir, utiliser une forme geometrique un peu plus complexe (ovoide/patatoide) qui ressemble plus a scratch cause par un doigt ou d'un ongle.
- plutot que de dessiner une forme geometrique, utiliser une bitmap en niveaux de gris, ca donnerai un effet de transparence interessant.
EDIT 3
- eventuellement on pourrait simuler la trace de la tranche d'une piece.
- orienter (graphics.rotate()) ou incliner (graphics.shear()) la forme ou la bitmap en fonction la trajectoire de la sourie et de l'angle (la pente) de la courbe.
- faire varier la force du grattage en fonction de la vitesse de deplacement de la souris.
- ...


Parmis les autres techniques possibles : utiliser une forme geometrique (Area) qui servira de zone de clip lorsque l'on dessine l'image scratch par dessus le ticket (graphics.setClip()) . Quand on dragge la souris on ajoute des cercles (ou un autre forme geometrique) a cette aire faisant ansi grandire la zone de clip. Note cetter derniere methode sera plus rapide a defaut d'etre plus jolie.

EDIT - On pourrait aussi essayer de jouer avec la classe AlphaComposite lors de la composition entre le masque (polygonal) et l'image scratch.

...
EDIT 2 - allez maintenant il faut rajouter du son pour que ca fasse "scratch, scratch" quand on gratte...

[alex6891]

Merci Bouye je vais lire ça de près et tester pour voir