Add a transparent gradient to a JPanel? - java

I'm drawing a couple of shapes on a JPanel using the paintComponent() method. The final touch is to add a transparent white gradient towards the top.
I have this:
and I want to get something like this:
I've tried to use the GradientPaint method, but it doesn't seem to work properly for me at all. When I call g.setPaint(new GradientPaint(...)), it can't seem to draw over the existing pixels at all.
If anyone would like to see what I'm doing, an SSCCE of the code is available at this Pastebin.

It seems to produce an effect if these are added as the last lines of paintComponent(Graphics).
// now we have set a paint, DO SOMETHING WITH IT!
g.fillRect(0, 0, getWidth(), getHeight());
Result

Try applying a AlphaComposite before painting the gradient
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f));
The other thing you could try is to use a color with an alpha value within the gradient...
LinearGradientPaint lgp = new LinearGradientPaint(
startPoint, endPoint, new float[]{...},
new Color[] {
new Color(255, 255, 255, 0),
new Color(255, 255, 255, 128),
new Color(255, 255, 255, 0),
});

Related

Want to change a JButton with half red and half blue

I want to set my JButton background color with half red and half blue. Can I do that in java swing without using graphics 2D? Please help me!
You can do it by making it gradient.
buttonGraphics.setPaint(new GradientPaint(
new Point(0, 0),
Color.RED,
new Point(0, getWidth()),
Color.BLUE()));
buttonGraphics.fillRect(0, 0, getWidth(), getHeight());
buttonGraphics.dispose()

Drawing a circle on a bufferedImage in Java

I want to draw a circle on a buffered image that act like a png
i want to use this circle in order to replace the mouse cursor for a paint application i am working on.
i cant download a circle png from google as i need to keep changing the size of this circle depending on the width of the tool i am using it for.
here is my attempt so far
public static BufferedImage getCircle() {
BufferedImage bufferedImage = new BufferedImage(30, 30, BufferedImage.TYPE_INT_RGB);
Color transparent = new Color(0x00FFFFFF, true);
Graphics2D g = (Graphics2D) bufferedImage.getGraphics();
//trying to make the bufferedImage transparent
g.setComposite(AlphaComposite.Src);
g.setColor(transparent);
g.setBackground(transparent);
g.fillRect(0, 0, bufferedImage.getWidth(), bufferedImage.getHeight());
//drawing the circle
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g.setColor(Color.black);
g.drawOval(0, 0, 200, 200);
return bufferedImage;
}
it should look like:
However my code currently only creates a white square.
Your code has two problems (as already shown in the comments). The first is that you draw a circle with a radius of 200px into an image of dimensions 30px. If you closely look you can barely see a black pixel in the lower right corner.
Fix it by adjusting your dimensions such that it fits inside, for example like:
BufferedImage bufferedImage = new BufferedImage(60, 60, BufferedImage.TYPE_INT_RGB);
...
g.drawOval(5, 5, 50, 50);
Next is that you want to achieve a transparent background. To do so you need to set the type of the image to a color model which supports transparency, like ARGB (A = Alpha = transparency) instead of RGB:
BufferedImage bufferedImage = new BufferedImage(60, 60, BufferedImage.TYPE_INT_ARGB);
Last you probably want to increase the thickness of your border to achieve the image you showed. You do so by using g.setStroke(...):
g.setColor(Color.BLACK);
g.setStroke(new BasicStroke(5));
g.drawOval(5, 5, 50, 50);
With this setting you achieve the following result (with transparency):
Play with the values to adjust the circle to your exact needs.

How to make overlapping shapes produce a new color?

I'm making a game in which there will be red and blue Shapes moving around on screen. I've looked high and low for how to make anywhere they overlap a different color (purple). I am only using Java2D, which to my understanding does not support Shaders. I looked into drawing the red shapes to one BufferedImage and the blue shapes to another, then trying to use AlphaComposite to combine the colors and draw it to the screen, but it never produced correct results. I'm using 127,0,0 and 0,0,127 for red and blue instead of 255 because 255,0,255 looks, in my opinion, terrible for purple. I would effectively like this.
Thanks to copeg's suggestion, I was able to figure it out. Here is the code segment (Context: the shapes I'm drawing are attacks):
//Attacks
BufferedImage attackImg = new BufferedImage(S_WIDTH, S_HEIGHT, BufferedImage.TYPE_INT_ARGB);
Graphics2D ag = (Graphics2D) attackImg.getGraphics();
//Make all of attackImg a transparent image
ag.setComposite(AlphaComposite.Clear);
ag.fillRect(0, 0, S_WIDTH, S_HEIGHT);
ag.setComposite(AlphaComposite.SrcOver);
//Render red attacks to attackImg
ag.setColor(new Color(127, 0, 0, 255));
for(Shape s : redAttacks)
ag.fill(s);
//Render overlap areas using composites to attackImg
ag.setColor(new Color(127, 0, 127, 255));
ag.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_IN));
g.setColor(new Color(0, 0, 127, 255));
for(Shape s : blueAttacks)
{
ag.fill(s);
g.fill(s); //Render blue attacks
}
//Render red and purple attacks
g.drawImage(attackImg, 0, 0, null);

Transparency overlapping in Java

So I'm making a simple pause function in my game, and I want to have a grey transparent background, the problem is, the rectangle keeps overlapping and is just causing a fade out look. I've tried g2.dispose, and it works, but I can't draw anything else over that.
I have my render method, which is being called 60 times a second. (I issume the rectangle is being drawn 60 times a second)
public void render(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.setColor(new Color(0, 0, 0, 50));
g2.fillRect(0, 0, RPG.getWidth(), RPG.getHeight());
g2.drawImage(paused, 0, 0, null);
}
Thanks!
Edit: I feel like an idiot... I just had to draw my ingame screen underneath that!
If I understand correctly what you mean by "causing a fade out look" (although I'm not sure I do), you want to fill a background with a transparent color without blending the new transparent color with pixels that are already present. You can do this by setting the composite mode to "source":
g2.setComposite(AlphaComposite.Src);
You can set it back to the default "source over destination" rule to return to normal drawing afterwards by doing:
g2.setComposite(AlphaComposite.SrcOver);
Edit: Or perhaps you do want to blend the transparent color, but with the rest of the game graphics and not with itself? In that case, just make sure that you're redrawing the game background each time you draw the transparency over the top, although I'd suggest pausing the 60fps refresh during game pause if nothing on the screen is changing, just to avoid wasting CPU/battery.
Consider trying to create a copy of the Graphics context first and then disposing of it when your finished...
public void render(Graphics g) {
Graphics2D g2 = (Graphics2D) g.create();
g2.setColor(new Color(0, 0, 0, 50));
g2.fillRect(0, 0, RPG.getWidth(), RPG.getHeight());
g2.drawImage(paused, 0, 0, null);
g2.dispose();
}
This way, the changes to the Graphics state remain isolated between the create and dispose calls and don't affect anything else painted after it
Also, remember, unless you are clearing what was previously painted to the Graphics context, it will accumulate on repeated calls.

Drawing transparent ShapeRenderer in libgdx

I have a drawn a filled circle using ShapeRenderer and now I want to draw this circle as a transparent one. I am using the following code to do that: But the circle is not coming as transparent. Also, I checked th libgdx API and from the wiki, it says that, need to Create CameraStrategy. Has somebody faced similar issue ever before? If so, please give me some clues. Thanks in advance.
Gdx.gl.glEnable(GL10.GL_BLEND);
Gdx.gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
drawFilledCircle();
Gdx.gl.glDisable(GL10.GL_BLEND);
private void drawFilledCircle(){
shapeRenderer.setProjectionMatrix(camera.combined);
shapeRenderer.begin(ShapeType.FilledCircle);
shapeRenderer.setColor(new Color(0, 1, 0, 1));
shapeRenderer.filledCircle(470, 45, 10);
shapeRenderer.end();
}
The following code is working for me in this case, maybe it will help someone else:
Gdx.gl.glEnable(GL10.GL_BLEND);
Gdx.gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
shapeRenderer.setProjectionMatrix(camera.combined);
shapeRenderer.begin(ShapeType.FilledCircle);
shapeRenderer.setColor(new Color(0, 1, 0, 0.5f));
shapeRenderer.filledCircle(470, 45, 10);
shapeRenderer.end();
Gdx.gl.glDisable(GL10.GL_BLEND);
First we need to enable blending:
Gdx.gl.glEnable(GL10.GL_BLEND);
And make sure that you don't call SpriteBatch.begin() and SpriteBatch.end() between that line of code and your Shaperender.drawSomething() line of code. I don't know why but that's what works in my case
Only this worked for me :
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
//Gdx.gl.glEnable(GL20.GL_BLEND);
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA); // <<< this line here makes the magic we're after
game.shapeRenderer.setProjectionMatrix(camera.combined);
game.shapeRenderer.begin(ShapeType.Filled);
go.drawShapes();
game.shapeRenderer.end();
//Gdx.gl.glDisable(GL20.GL_BLEND);
Well, there is not really a point in drawing something fully transparent. If you did want to make a half transparent circle, you would have to clear the color buffer by glClearColor before each frame and set Color alpha component to 0.5f.
If you wouldn't clear the buffer, after few render draws, the circle would blend into one with almost solid color.
private void drawFilledCircle(Camera camera){
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear( GL10.GL_COLOR_BUFFER_BIT );
shapeRenderer.setProjectionMatrix(camera.combined);
shapeRenderer.begin(ShapeType.FilledCircle);
shapeRenderer.setColor(new Color(0, 1, 0, 0.5f)); // last argument is alpha channel
shapeRenderer.filledCircle(470, 45, 10);
shapeRenderer.end();
}

Categories

Resources