Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (482)
Games in Android Showcase (110)
games submitted by our members
Games in WIP (547)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  LibGDX ShapeRenderer.filledRect() Transparency  (Read 8668 times)
0 Members and 1 Guest are viewing this topic.
Offline KevinWorkman

JGO Wizard


Medals: 55
Projects: 11
Exp: 12 years


klaatu barada nikto


« Posted 2013-01-17 17:08:43 »

Hey guys,

I'm trying to draw a filled rectangle with a horizontal gradient that goes from a color to transparent. I'm using the ShapeRenderer.filledRect() method that takes x, y, width, height, as well as 4 corner colors to create a gradient:

1  
shapeRenderer.filledRect(-25f, -25f, 50, 50, Color.RED, Color.CLEAR, Color.CLEAR, Color.RED);


What I would expect is a rectangle that's red on the left, completely clear on the right, and a gradient between the two. Instead what I get is a rectangle that's red on the right and completely black (and completely opaque, not transparent at all) on the right.

I've put together a little example using the default class created by LibGDX. Here I'm using a green transparency just to demonstrate:

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  
package com.me.mygdxgame;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.Texture.TextureFilter;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;

public class MyGdxGame implements ApplicationListener {
   private OrthographicCamera camera;
   private SpriteBatch batch;
   private Texture texture;
   private Sprite sprite;
   
   private ShapeRenderer shapeRenderer;
   
   Color greenClear = new Color(0, 1, 0, 0);
   
   @Override
   public void create() {      
      float w = Gdx.graphics.getWidth();
      float h = Gdx.graphics.getHeight();
     
      camera = new OrthographicCamera(100, 100);
      batch = new SpriteBatch();
     
      shapeRenderer = new ShapeRenderer();
     
      texture = new Texture(Gdx.files.internal("data/libgdx.png"));
      texture.setFilter(TextureFilter.Linear, TextureFilter.Linear);
     
      TextureRegion region = new TextureRegion(texture, 0, 0, 512, 275);
     
      sprite = new Sprite(region);
      sprite.setSize(100, 100);
      sprite.setOrigin(sprite.getWidth()/2, sprite.getHeight()/2);
      sprite.setPosition(-sprite.getWidth()/2, -sprite.getHeight()/2);
   }

   @Override
   public void dispose() {
      batch.dispose();
      texture.dispose();
   }

   @Override
   public void render() {      
      Gdx.gl.glClearColor(1, 1, 1, 1);
      Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
     
      batch.setProjectionMatrix(camera.combined);
     
      batch.begin();
      sprite.draw(batch);
      batch.end();
     
      shapeRenderer.setProjectionMatrix(camera.combined);
     
      shapeRenderer.begin(ShapeType.FilledRectangle);
      shapeRenderer.filledRect(-25f, -25f, 50, 50, Color.RED, greenClear, greenClear, Color.RED);
      shapeRenderer.end();
   }

   @Override
   public void resize(int width, int height) {
   }

   @Override
   public void pause() {
   }

   @Override
   public void resume() {
   }
}


Actually, I just realized that no transparency is drawn at all by ShapeRenderer. Changing the above code to the following results in a completely blue rectangle being drawn, despite having an alpha value of .5.

1  
2  
3  
4  
5  
6  
7  
8  
9  
shapeRenderer.setProjectionMatrix(camera.combined);
     
      shapeRenderer.setColor(0, 0, 1, .5f);
     
      shapeRenderer.begin(ShapeType.FilledRectangle);
      shapeRenderer.filledRect(-25f, -25f, 50, 50);
     
      //shapeRenderer.filledRect(-25f, -25f, 50, 50, Color.RED, greenClear, greenClear, Color.RED);
     shapeRenderer.end();


In my actual program I'm displaying images with transparent gradients, so I know it's at least possible- and if I can't figure out how to do it using this method, I'll just use another image. But I've looked through the source code of that filledRect() method, and it seems to be applying the opacity correctly.. so why doesn't it show up?

Is there something I'm missing? I've tried googling but I can't find anything that seems to resemble my problem. Any help is very appreciated!

Static Void Games - Play indie games, learn game programming, upload your own games!
Offline davedes
« Reply #1 - Posted 2013-01-17 17:49:00 »

ShapeRenderer doesn't enable transparency for you. So you need to do this:

1  
2  
3  
4  
5  
6  
Gdx.gl.glEnable(GL10.GL_BLEND);
Gdx.gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);

... render shapes ...

Gdx.gl.glDisable(GL10.GL_BLEND);


However, if you just want a simple gradient rectangle, it will be more performant to use SpriteBatch. This way you can include the rectangle in the same batch as the rest of your sprites and without incurring any state changes like above.

Here is a utility method you can use:
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  
private static float[] verts = new float[20];

public static void drawGradient(SpriteBatch batch, TextureRegion tex, float x, float y,
      float width, float height, Color a, Color b, boolean horiz) {
   float ca = a.toFloatBits();
   float cb = b.toFloatBits();

   int idx = 0;
   verts[idx++] = x;
   verts[idx++] = y;
   verts[idx++] = horiz ? ca : cb; // bottom left
  verts[idx++] = tex.getU(); //NOTE: texture coords origin is top left
  verts[idx++] = tex.getV2();

   verts[idx++] = x;
   verts[idx++] = y + height;
   verts[idx++] = ca; // top left
  verts[idx++] = tex.getU();
   verts[idx++] = tex.getV();

   verts[idx++] = x + width;
   verts[idx++] = y + height;
   verts[idx++] = horiz ? cb : ca; // top right
  verts[idx++] = tex.getU2();
   verts[idx++] = tex.getV();

   verts[idx++] = x + width;
   verts[idx++] = y;
   verts[idx++] = cb; // bottom right
  verts[idx++] = tex.getU2();
   verts[idx++] = tex.getV2();

   batch.draw(tex.getTexture(), verts, 0, verts.length);
}


Notice you need to pass a TextureRegion here. If you just want to make a gradient using an untextured rectangle, you need to sample a 1x1 white pixel from your sprite sheet. I've explained the process here:
https://github.com/mattdesl/lwjgl-basics/wiki/Batching-Rectangles-and-Lines

The resulting code, using the "libgdx.png" texture:
http://www.java-gaming.org/?action=pastebin&id=390

Offline KevinWorkman

JGO Wizard


Medals: 55
Projects: 11
Exp: 12 years


klaatu barada nikto


« Reply #2 - Posted 2013-01-17 17:58:52 »

Ohh thanks a lot, I didn't realize you had to enable transparency, especially because transparent images worked automagically.

I'll have to do some profiling to see if I can use the first method you mentioned. If not, I'll probably just use a 100-pixel wide, 1-pixel tall image containing the transparency gradient and stretch that out to the height I need, since it's just a basic horizontal gradient.

Thanks again for your help!

Static Void Games - Play indie games, learn game programming, upload your own games!
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline davedes
« Reply #3 - Posted 2013-01-17 18:19:00 »

Ohh thanks a lot, I didn't realize you had to enable transparency, especially because transparent images worked automagically.

I'll have to do some profiling to see if I can use the first method you mentioned. If not, I'll probably just use a 100-pixel wide, 1-pixel tall image containing the transparency gradient and stretch that out to the height I need, since it's just a basic horizontal gradient.

Thanks again for your help!
Did you see the code I posted? Your texture only needs to be 1x1 pixels. Ideally you would include this 1x1 white image inside a sprite sheet (alongside your GUI, fonts, game characters, etc) so that everything is batched in a single draw call, and no extra texture binds are needed.

You can then draw the 1x1 pixel with any size and colors you want.

Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

atombrot (26 views)
2014-08-19 09:29:53

Tekkerue (24 views)
2014-08-16 06:45:27

Tekkerue (23 views)
2014-08-16 06:22:17

Tekkerue (13 views)
2014-08-16 06:20:21

Tekkerue (20 views)
2014-08-16 06:12:11

Rayexar (59 views)
2014-08-11 02:49:23

BurntPizza (38 views)
2014-08-09 21:09:32

BurntPizza (30 views)
2014-08-08 02:01:56

Norakomi (37 views)
2014-08-06 19:49:38

BurntPizza (67 views)
2014-08-03 02:57:17
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!