render to FrameBuffer not working in combination with ShapeRenderer in a custom Actor (libgdx) - libgdx

I try to implement a custom Actor which displays contents of a FrameBuffer by extending Image. Inside I'd like to draw using a ShapeRenderer.
public class CustomActor extends Image {
private FrameBuffer frameBuffer = null;
private ShapeRenderer shapeRenderer = new ShapeRenderer();
private int width;
private int height;
public CustomActor() {
width = Gdx.graphics.getWidth();
height = Gdx.graphics.getHeight();
shapeRenderer.setAutoShapeType(true);
}
#Override
public void draw(Batch batch, float parentAlpha) {
if (frameBuffer == null) {
frameBuffer = new FrameBuffer(Pixmap.Format.RGB565, width / 2, height / 2, false);
TextureRegion textureRegion = new TextureRegion(frameBuffer.getColorBufferTexture());
textureRegion.flip(false, true);
setDrawable(new TextureRegionDrawable(textureRegion));
}
frameBuffer.begin();
// render content
Gdx.gl.glClearColor(0, 1, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
shapeRenderer.setColor(Color.WHITE);
shapeRenderer.rect(0, 0, frameBuffer.getWidth() / 2, frameBuffer.getHeight() / 2);
shapeRenderer.end();
if (frameBuffer != null) {
frameBuffer.end();
}
super.draw(batch, parentAlpha);
}
}
When deleting the ShapeRenderer part I can see the green background in the scene. But as soon as I use the ShapeRenderer the content is black. There is no white rectangle visible.
Any ideas what I am doing wrong?

Just found out that using my own SpriteBatch (with begin() and end()) after the FrameBuffer end() it works. So the problem seems to have to do with the calling order of the FrameBuffers methods and the SpriteBatches methods. Ending the given actor batch before beginning the FrameBuffer and "re"-beginning it to draw the actor is also working (see comment above).

Related

LIBGDX Framebuffer is drawn as a black box

We figured out the issue. I was disposing the framebuffer before using it.
I recently queried about how to use the Libgdx Framebuffer correctly.
Summed up, i am making a tile-based game and i wanted to understand how to setup and use a
framebuffer object to eventually start experimenting with shaders. I wanted to exclude the
"water tiles" from the normal draw cycle and instead have them be rendered to a framebuffer.
Then render the framebuffer to the screen.
(I am not using any "Scene2d" or "Tiled" classes)
Link to previous question: How to use LIBGDX FrameBuffer correctly.
Even though the answer i accepted did not work in my particular program, it did work
when i tried it out on a smaller more contained program (shown below).
This works:
public void render() {
float dt = Gdx.graphics.getDeltaTime();
Cam.instance.getCamera().translate(direction.x*speed*dt, direction.y*speed*dt,0);
Cam.instance.update();
// clear the screen, set batch's projection matrix
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(Cam.instance.getCamera().combined);
// draw texture as layer 0
batch.begin();
batch.draw(green,606,306);
batch.flush(); // No need to call batch.end() / batch.begin()
// Storing the original values of the batch before changing it.
originalMatrixTemp.set(batch.getProjectionMatrix());
int originalBlendSrcFunc = batch.getBlendSrcFunc();
int originalBlendDstFunc = batch.getBlendDstFunc();
// Sorcery as far as i am concerned. "Ensures alpha is preserved in case of overlapping translucent sprites"
batch.setBlendFunctionSeparate(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA, GL20.GL_ONE, GL20.GL_ONE);
frameBuffer.begin(); // initialize framebuffer
// clear the colors of the batch
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.draw(red,256,0); // Draw another texture, now unto the framebuffer texture
batch.flush(); // flush batch
frameBuffer.end(); // end framebuffer
// "Ensure we're drawing the frame buffer texture without modifying its color"
batch.setColor(Color.WHITE);
// I think we are setting the projection to "default" (-1,1,2,-2)
batch.setProjectionMatrix(IDENTITY);
// draw the framebuffers texture across all the screen (layer 1)
batch.draw(frameBuffer.getColorBufferTexture(),-1, 1, 2, -2);
batch.flush();
// restoring the original state
batch.setProjectionMatrix(originalMatrixTemp);
batch.setBlendFunction(originalBlendSrcFunc, originalBlendDstFunc);
// drawing arbitrary layer 2
batch.draw(green,300,300);
batch.end(); // end of cycle
}
and it shows (Red square is the framebuffer texture):
The cycle is: Begin -> Draw something -> Draw, using buffer -> Draw something -> end.
So my question is then, why does this not work:
private void renderFbo(int layer) {
batch.flush();
originalMatrixTemp.set(batch.getProjectionMatrix());
int originalBlendSrcFunc = batch.getBlendSrcFunc();
int originalBlendDstFunc = batch.getBlendDstFunc();
batch.setBlendFunctionSeparate(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA, GL20.GL_ONE, GL20.GL_ONE);
fbo.begin();
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
// Drawing the layer unto the framebuffer:
for (DrwDat dat: layers.get(layer)) { dat.draw(batch); }
batch.flush();
fbo.end();
batch.setColor(Color.WHITE);
batch.setBlendFunction(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
batch.setProjectionMatrix(IDENTITY);
// Halving the output texture to see the issue clearer. whole screen: (-1, 1, 2, -2)
batch.draw(fbo.getColorBufferTexture(), -0.5f, 0.5f, 1f, -1f);
batch.flush();
batch.setProjectionMatrix(originalMatrixTemp);
batch.setBlendFunction(originalBlendSrcFunc, originalBlendDstFunc);
}
With this being the immediate context:
public void draw() {
Gdx.gl.glClearColor(1, 1, 1, 1); // clearing with WHITE to see the framebuffer texture
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
for (int i = 0; i < NUM_LAYERS; i++) {
if (RENDER[i]) {
if (SORT[i]) Collections.sort(layers.get(i));
//for (DrwDat dat: layers.get(i)) { dat.draw(batch);}
if (i==1) { renderFbo(i); } // calling the framebuffer-using method for "water layer"
else{
for (DrwDat dat: layers.get(i)) {
dat.draw(batch);
}
}
}
}
Instance variables in the "draw class" :
public class DrwHandler {
private static final String TAG = DrwHandler.class.getName();
public static DrwHandler instance = new DrwHandler();
private final Matrix4 originalMatrixTemp = new Matrix4();
private static final Matrix4 IDENTITY = new Matrix4();
private Map<Integer, ArrayList<DrwDat>> layers;
private OrthographicCamera camera;
private FrameBuffer fbo;
private SpriteBatch batch;
private static final int NUM_LAYERS = 8;
private static final boolean[] RENDER = new boolean[NUM_LAYERS];
private static final boolean[] SORT = new boolean[NUM_LAYERS];
private DrwHandler() {
fbo = new FrameBuffer(Pixmap.Format.RGBA8888, Settings.SCREEN_W,Settings.SCREEN_H,false);
batch = new SpriteBatch();
layers = new HashMap<>();
layers.put(0,new ArrayList<>());
layers.put(1,new ArrayList<>());
layers.put(2,new ArrayList<>());
layers.put(3,new ArrayList<>());
layers.put(4,new ArrayList<>());
layers.put(5,new ArrayList<>());
layers.put(6,new ArrayList<>());
layers.put(7,new ArrayList<>());
}
It shows:
The "black box" is the framebuffer texture (redused in size). The white background is the clear color.
and the green is a foreground layer.
It is black regardless of changing the Gdx.gl.glClearColor(0, 0, 0, 0) within the context of the framebuffer rendering to some other color.
without the renderFbo() method, it renders normally like this:
Now i have heard Static references can cause issues with OpenGL-related objects:
"If you will be building for Android, never use static references to any OpenGL-related objects unless you have an expert understanding of the LibGDX lifecycle. Even then, it is an error-prone practice. People come on here to ask about black textures pretty frequently and 99% of the time it has to do with some static reference being used incorrectly."
I am not building for android. And since my previous question i have removed static objects.
just to be sure.
But i do use statics in a few select classes like this (example):
public class Cam {
public static Cam instance = new Cam();
private OrthographicCamera camera;
private Cam() {
camera = new OrthographicCamera(Settings.SCREEN_W, Settings.SCREEN_H);
}
(including my Assets class and Draw class):
Trying to think about what else.. I guess we will try with this first. Se if something sticks out to you.
Really could need some help right about now. Been banging my head against the wall for a while. Thank you.
Here is a link to some source files that could be relevant:
Source

LibGDX Scaling down

I've tried to scale down a 512 x 256 image of a rocket by setting the width and height directly. When I launch it the rocket image is pixely and very bad quality even though it is supposed a crisp vector image. I wanted to know how I would properly scale this down to still retain the quality.
public GameScreen(){
cam = new OrthographicCamera();
cam.setToOrtho(false, 600, 800);
batch = new SpriteBatch();
img = new Texture(Gdx.files.internal("data/rocket.png"));
batch.setProjectionMatrix(cam.combined);
}
#Override
public void show() {
}
#Override
public void render(float delta) {
cam.update();
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(img,10, 10, 100, 60);
batch.end();
}
As Tenfour04 mentioned in comments you need to initialize Texture class with mipmaps enabled. Then set texture filters using setFilter method.
img = new Texture(Gdx.files.internal("data/rocket.png"), true);
img.setFilter(Texture.TextureFilter.MipMapLinearNearest, Texture.TextureFilter.Nearest);

Libgdx: Dynamically increasing size of Pixmap

I am new to Libgdx. I have a requirement where I have multiple balls in a game and I want to increase the ball diameter every time the user touches the ball. I used the method pixmap.drawCircle() to create the ball and every time a user touches the ball, I call a method increaseBallDia() to increase the ball size. Since there is no method to increase the height and width of an existing Pixmap, in increaseBallDia() method, I create a new Pixmap with increased width and height and then draw a ball with incremented diameter.
The problem is that my increaseBallDia() is not working properly and there is no increment to the height and width of the Pixmap. Due to this as the ball diameter increases it covers the entire Pixmap area and appears like a rectangle instead of a circle.
Any pointers on how to solve this would be greatly appreciated.
Following is the relevant code snippet:
public class MyActor extends Actor {
int actorBallDia = 90;
Pixmap pixmap = new Pixmap(actorBallDia, actorBallDia,Pixmap.Format.RGBA8888);
float actorX, actorY;
Texture texture;
public void increaseBallDia() {
actorBallDia = actorBallDia + 5;
int radius = actorBallDia / 2 - 1;
Pixmap pixmap = new Pixmap(actorBallDia, actorBallDia,
Pixmap.Format.RGBA8888);
pixmap.drawCircle(pixmap.getWidth() / 2 , pixmap.getHeight() / 2,
radius);
pixmap.fillCircle(pixmap.getWidth() / 2 , pixmap.getHeight() / 2,
radius);
texture = new Texture(pixmap);
}
public void createYellowBall() {
pixmap.setColor(Color.YELLOW);
int radius = actorBallDia / 2 - 1;
pixmap.drawCircle(pixmap.getWidth() / 2, pixmap.getHeight() / 2,
radius);
pixmap.setColor(Color.YELLOW);
pixmap.fillCircle(pixmap.getWidth() / 2, pixmap.getHeight() / 2,
radius);
texture = new Texture(pixmap);
}
#Override
public void draw(Batch batch, float alpha) {
if (texture != null) {
batch.draw(texture, actorX, actorY);
}
}
public void addTouchListener() {
addListener(new InputListener() {
#Override
public boolean touchDown(InputEvent event, float x, float y,
int pointer, int button) {
MyActor touchedActor = (MyActor) event.getTarget();
touchedActor.actorTouched = true;
return true;
}
#Override
public void touchUp(InputEvent event, float x, float y,
int pointer, int button) {
MyActor touchedActor = (MyActor) event.getTarget();
touchedActor.actorTouched = false;
}
});
}
#Override
public void act(float delta) {
if (actorTouched) {
increaseBallDia();
}
}
Regards,
RG
You should create the pixmap with its biggest possible dimensions. When the ball is meant to be small, just scale it down as you wish.

LibGDX - How do I correctly add ExtendViewports?

I'm new to LibGDX and I am trying to get my screen resolution sizes set up first before I get into the actual game itself. Before I added extendViewport I had an orthographic Camera and an Image that displayed. But when I got rid of the orthographic camera and added the Viewport the image disappeared. Here is the code i have for the the screen.
public class GameScreen implements Screen {
SlingshotSteve game;
private ExtendViewport viewport;
PerspectiveCamera camera;
public void Menu(SlingshotSteve game){
this.game = game;
}
SpriteBatch batch;
TextureRegion backgroundTexture;
Texture texture;
GameScreen(final SlingshotSteve gam) {
this.game = gam;
batch = new SpriteBatch();
Texture texture = new Texture(Gdx.files.internal("background.jpg"));
backgroundTexture = new TextureRegion(texture, 0, 0, 500, 500);
Music mp3Sound = Gdx.audio.newMusic(Gdx.files.internal("rain.mp3"));
mp3Sound.setLooping(true);
mp3Sound.play();
}
public void render(float delta) {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.update();
batch.setProjectionMatrix(camera.combined);
batch.begin();
batch.draw(backgroundTexture, 0, 0, SlingshotSteve.WIDTH, SlingshotSteve.HEIGHT);
batch.end();
}
#Override
public void resize(int width, int height) {
viewport.update(width, height);
}
#Override
public void dispose() {
batch.dispose();
texture.dispose();
}
#Override
public void show() {
camera = new PerspectiveCamera();
viewport = new ExtendViewport(800, 480, camera);
}
}
The other question I have is that this screen is the main game screen where Level 1 is going to occur. Since I added a main menu I had to switch from the "Application Listener" to the "Implement Screen". Is this correct, or do I have to go back to the Application Listener to get the Create() method? I'm not completely sure what everything means so If someone could please explain this to me that would be great!

Distance field font in libgdx

I'm trying to rendering smooth scalable bitmap fonts. After checking this question one of the answers mentioned using distance field fonts.
I'm doing exactly as mentioned in LibGDX wiki article about distance filed fonts. However I can't get it working. Fonts are rendered hazy.
Here's the code I used to generate this output
public class FontRenderTest implements ApplicationListener {
private Texture texture;
private SpriteBatch spriteBatch;
private BitmapFont font;
#Override
public void create() {
spriteBatch = new SpriteBatch();
Texture texture = new Texture(Gdx.files.internal("Raleway.png"), true); // true enables mipmaps
texture.setFilter(TextureFilter.MipMapLinearNearest, TextureFilter.Linear); // linear filtering in nearest mipmap image
font = new BitmapFont(Gdx.files.internal("Raleway.fnt"), new TextureRegion(texture), false);
}
#Override
public void render() {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
spriteBatch.begin();
font.draw(spriteBatch, "This is hazy !!", 100, 150);
spriteBatch.end();
}
}
I'm not sure if I properly understand the function of distance field font. If anyone could explain how to render font smooth.
I think it needs a shader and if I recall right the shaders require GL20. As it said in the wiki you would need .frag and .vert files. I modified your code with the help from this Libgdx test: http://git.io/-yAmNg .
It looks like this with different smoothing.
public class FontRenderTest implements ApplicationListener {
private Texture texture;
private SpriteBatch spriteBatch;
private BitmapFont font;
private DistanceFieldShader distanceFieldShader;
private static class DistanceFieldShader extends ShaderProgram {
public DistanceFieldShader () {
// The vert and frag files are copied from http://git.io/yK63lQ (vert) and http://git.io/hAcw9Q (the frag)
super(Gdx.files.internal("data/shaders/distancefield.vert"), Gdx.files.internal("data/shaders/distancefield.frag"));
if (!isCompiled()) {
throw new RuntimeException("Shader compilation failed:\n" + getLog());
}
}
/** #param smoothing a value between 0 and 1 */
public void setSmoothing (float smoothing) {
float delta = 0.5f * MathUtils.clamp(smoothing, 0, 1);
setUniformf("u_lower", 0.5f - delta);
setUniformf("u_upper", 0.5f + delta);
}
}
#Override
public void create() {
spriteBatch = new SpriteBatch();
Texture texture = new Texture(Gdx.files.internal("hiero.png"), true); // true enables mipmaps
texture.setFilter(TextureFilter.MipMapLinearNearest, TextureFilter.Linear); // linear filtering in nearest mipmap image
font = new BitmapFont(Gdx.files.internal("hiero.fnt"), new TextureRegion(texture), false);
distanceFieldShader = new DistanceFieldShader();
}
#Override
public void render() {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
spriteBatch.begin();
spriteBatch.setShader(distanceFieldShader);
font.draw(spriteBatch, "This is pretty sharp !!", 100, 120);
distanceFieldShader.setSmoothing(0f);
spriteBatch.setShader(distanceFieldShader);
font.draw(spriteBatch, "This is hazy !!", 100, 150);
distanceFieldShader.setSmoothing(1f);
spriteBatch.setShader(distanceFieldShader);
font.draw(spriteBatch, "This is pretty smooth !!", 100, 180);
distanceFieldShader.setSmoothing(1/2f);
spriteBatch.end();
}
Use the shader created by DistanceFieldFont.createDistanceFieldShader.