Develop Reference

transparent .png background

I know Im not the first person to ask this type of question, but I think mines a little bit different.
I have a png image I drew on MS paint that is a player and I want the background of the image to be transparent when I use a graphics objects to draw the image. I tried some stuff with magic pink but It doesn't seem to be working the same in java. Im not new to java, but Im inexperienced so could you explain any packages or methods that you use thanks!

You will need to use AlphaComposite to have the transparency effect:
Assuming that you already know Graphics2D and Graphics uses BufferedImage
Creating temporary graphics object g.create() and then dispose the object for safely restore the state of graphics object changed after the object creation.
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.setComposite(AlphaComposite.SrcOver.derive(0.5f));
g2d.drawImage(tileImage, 0, 0, getWidth(), getHeight());
g2d.dispose();
// draw player image
}

With Java6, a PNG picture should be used for TrayIcon, but as mentioned in this SO question, check:
the background color chosen to represent the transparent pixels
the transparency options
the resolution of the icon
alternate format like SVG (provided you are using external library like Batik, and
conversion mechnism to java.awt.Image)

How to zoom properly into a canvas?

When I apply canvas.getContext2d().scale(1.5, 1.5), then my objects in the canvas gets bigger as expected, but are somehow blurred.
What do I have to do to make the canvas draw my objects as sharp as it is when not scaled?

Use the antialiasing rendering hint:
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
So when you scale, it will look really better.
The images of the right use the RenderingHints.VALUE_ANTIALIAS_ON

I discovered that there are ctx.transform() and ctx.scale()methods for a Canvas. Which work fine, but as they behave like just scaling an image up, the result is not sharp. Guess due to (anti)alasing and stuff like that.
So I decided to rewrite all my ctx.draw() methods to respect a GLOBAL_OFFSET, which changes value when user zooms in and out. This way, the canvas objects can keep their original coordiante point values, but respecting the zoom level and offset it is possible to draw them bigger or thinner, which kind of "simmulates" the zooming and panning.

Swing image display optimization

I am displaying an image in Swing. I am drawing on top of the image (a bunch of drawRect() calls) and refreshing the screen. The image is constant, but the objects drawn on top are not. Is there any way to avoid redrawing the image any time? Since the graphics card likely does the image display, is it safe to assume that the drawRect() calls are the bottleneck? I draw as many as 20,000 calls a frame (but usually no more than 3000).
Edit: It is indeed the rect calls that are slowing it down and it can be made considerably faster by removing the transparency channel. That being said, it would still be nice to speed it up and include the transparency. The code can't really get simpler, so I am hoping by doing something different it will help.
public void paintComponent(Graphics g) {
super.paintComponent(g) ;
//grid or walkers
g.drawImage(image, 0, 0, null);
for(Walker w : walkArray){
g.setColor(new Color(255,255-w.data[3], 0, w.data[2]));
g.drawRect(w.data[0], w.data[1], 1, 1);
}
}

This is out of context, but can you lookup the colors in a precomputed palette instead of creating an instance of a Color in every cycle? Maybe that could improve performance a little.
Edit: For example, a List<Integer> is used as an RGB lookup table here, and a Queue<Color> is used here.

Implementing Doublebuffering?

I am making a game and I am trying to find the best way to implement Doublebuffering into it. Would anyone be able to show me how I could do it with my rendering code below?
public void paint(Graphics g){
super.paint(g);
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(p.getImage(), p.getX(),p.getY(),null);
//draw each ball object
for(int i=0;i<balls.size(); i++){
Ball tmp = (Ball) balls.get(i);
g2d.drawImage(tmp.getImage(), tmp.getX(),tmp.getY(),null);
}
//strings
g2d.drawString("Score: "+score,50,20);
}
Could someone please help?

If you're using Swing you just can use the built-in double buffering: http://java.sun.com/products/jfc/tsc/articles/painting/#db
In case you're implementing your own rendering, here are some hints:
Double Buffering basically means you have two draw buffers that you alternatingly write to while the other is displayed.
In your case, you might use an image to draw your game content to and then draw that image to the component. This should give you double buffering in a sense. You might use two images which you swap in order to reduce concurrent access, i.e. one would be the "front" buffer that is displayed and the other is the "back" buffer you draw to.
That said, I'd strongly recommend not to implement that yourself. Instead you should try and use one of the existing 2D libraries (like Swing) or 3D libraries (like OpenGL with JOGL or LWJGL as Java bindings - note that it doesn't have to be 3D with OpenGL). Alternatively you could also look for a game engine, there are plenty of them out there.

How can you produce sharp paint results when rotating a BufferedImage?

One attempted approach was to use TexturePaint and g.fillRect() to paint the image. This however requires you to create a new TexturePaint and Rectangle2D object each time you paint an image, which isn't ideal - and doesn't help anyway.
When I use g.drawImage(BufferedImage,...), the rotated images appear to be blurred/soft.
I'm familiar with RenderingHints and double-buffering (which is what I'm doing, I think), I just find it difficult to believe that you can't easily and efficiently rotate an image in Java that produces sharp results.
Code for using TexturePaint looks something like this.
Grahics2D g2d = (Graphics2D)g;
g2d.setPaint(new TexturePaint(bufferedImage, new Rectangle2D.Float(0,0,50,50)));
g2d.fillRect(0,0,50,50);
I'm using AffineTransform to rotate a hand of cards into a fan.
What would be the best approach to paint good-looking images quickly?
Here is a screenshot:
The 9 is crisp but the rest of the cards are definitely not as sharp.
It could be possible that the problem lies in when I create each card image and store it in an array.
Here's how I'm doing it at the moment:
// i from 0 to 52, card codes.
...
GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
GraphicsDevice gs = ge.getDefaultScreenDevice();
GraphicsConfiguration gc = gs.getDefaultConfiguration();
BufferedImage img = gc.createCompatibleImage(86, 126, Transparency.TRANSLUCENT);
Graphics2D g = img.createGraphics();
setRenderingHints(g);
g.drawImage(shadow, 0, 0, 86, 126, null);
g.drawImage(white, 3, 3, 80, 120, null);
g.drawImage(suit, 3, 3, 80, 120, null);
g.drawImage(value, 3, 3, 80, 120, null);
g.dispose();
cardImages[i] = img;
}
private void setRenderingHints(Graphics2D g){
g.setRenderingHint(KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g.setRenderingHint(KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g.setRenderingHint(KEY_ANTIALIASING, VALUE_ANTIALIAS_ON);
}
How should I approach this differently?
Thanks.
Edit:
Without RenderingHints
Setting AA hints made no difference. Also, setting RenderingHints when creating the images makes no difference either. It's only when they are being rotated with AffineTransform and painted using g.drawImage(...) that they seem to blur. The image above shows the difference between default (nearest neighbor) and bilinear interpolation.
Here is how I'm currently painting them (much faster than TexturePaint):
// GamePanel.java
private void paintCard(Graphics2D g, int code, int x, int y){
g.drawImage(imageLoader.getCard(code), x, y, 86, 126, null);
}
// ImageLoader.java
public BufferedImage getCard(int code){
return cardImages[code];
}
All my cards are 80x120 and the shadow .png is 86x126, so as to leave 3px semi-transparent shadow around the card. It's not a realistic shadow I know, but it looks okay.
And so the question becomes... How can you produce sharp paint results when rotating a BufferedImage?
Reference to a previous question also regarding a fanned card hand:
How can you detect a mouse-click event on an Image object in Java?
Bounty-Edit:
Okay so after much discussion I made a few test .svg cards to see how SVG Salamander would go about rendering them. Unfortunately, the performance is terrible. My implementation is clean enough, seeing as with double-buffered BufferedImage's the painting was incredibly fast. Which means I have come full circle and I'm back to my original problem.
I'll give the 50 bounty to whoever can give me a solution to get sharp BufferedImage rotations. Suggestions have been to make the images bigger than they need to be and downscale before painting, and to use bicubic interpolation. If these are the only possible solutions, then I really don't know where to go from here and I may just have to deal with the blurred rotations - because both of those impose performance setbacks.
I can finish my game if I can find a way to do this well.
Thanks to everyone. :)

When you rotate a rasterized image (such as a BufferedImage), you lose data. The best solution is to save your images larger than you'll need them, and downscale on the fly when you paint them. I've found that 1.5x the size you need is a good starting point.
Then, when you're painting the image, resize on the fly:
g.drawImage(bufferedImage, x, y, desiredWidth, desiredHeight, observer);
Rotations using bilinear interpolation is recommended.
Credit for suggestion goes to guido.

This advice is probably a little late in your design, but may be worth mentioning.
Rasterized images is probably the wrong technology to use if a lot of rotations and animations are a part of your UI; especially with complicated images with lots of curves. Just wait until you try and scale your canvass. I might suggest looking at a vector based graphical library. They will render the sorts of effects you want with less potential for artifacts.
http://xmlgraphics.apache.org/batik/using/swing.htm

Setting the interpolation type, as well as anti-aliasing value, in an AffineTransformOp may offer some improvement. Type TYPE_BICUBIC, while slower, is typically the best quality; an example is outlined here. Note that you can supply multiple RenderingHints. Another pitfall arises from failing to apply the hints each time the image is rendered. You may also need to adjust the transparency of the background, as suggested here. Finally, consider creating an sscce that includes one of your actual images.