How do I resize my textures in LibGDX?(Android) - java

I'm starting to use LibGDX, and wanted to easily port my game to different screen size(in Android). I have a background texture, which I want to scale to the currently used resolution. The game works on 1920x1080, but when I use a lower resolution the texture is cut, how do I change it to the currently screen size?
I use
batch = new SpriteBatch();
bkTexture = new TextureRegion(new Texture(Gdx.files.internal("menu.png")),0 , 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
and
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(delta);
batch.begin();
batch.draw(bkTexture, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
batch.end();
stage.draw();

Add filter on your texture?
myTexture.setFilter(TextureFilter.Linear, TextureFilter.Linear);

Try this:
bkTexture = new TextureRegion(new Texture(Gdx.files.internal("menu.png")),0 , 0);
instead of
bkTexture = new TextureRegion(new Texture(Gdx.files.internal("menu.png")),0 , 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
Using the 2nd line you extract a texture region with the size Gdx.graphics.getWidth(), Gdx.graphics.getHeight() at position 0,0 of the menu.png texture.

Related

LibGDX ScalingViewport not changing position

I am trying to develop an Android app and I have stumbled across a really nasty problem.
I am trying to use a different viewport from my "main" one for a different stage to control certain elements. I have started using Scaling viewport with Scaling.none, as it seems the most appropriate for what I am looking for. The problem is, when I try to change its position, it simply does not move! It just stays in the center of the screen. Here is the code I am using in the contructor for the viewports:
viewport = new StretchViewport(720, 1280, cam);
viewport.apply();
cam.position.set(cam.viewportWidth / 2, cam.viewportHeight / 2,0);
secondaryViewport = new ScalingViewport(Scaling.none, 480, 421);
secondaryViewport.setScreenPosition(240, 0);
Can't Scaling viewports be moved?
EDIT: Here is my render() method:
#Override
public void render(SpriteBatch sb) {
cam.update();
secondaryViewport.getCamera().update();
sb.setProjectionMatrix(cam.combined);
Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
sb.begin();
sb.setColor(Color.WHITE);
sb.draw(bg, cam.position.x - cam.viewportWidth / 2, 0, cam.viewportWidth, cam.viewportHeight);
sb.end();
stage.getViewport().apply();
stage.draw();
stage.act();
secondaryStage.getViewport().apply();
secondaryStage.draw();
secondaryStage.act();
}
By default camera position of Viewport is at at 0,0,0
Use this secondaryViewport.getCamera().position.set(100,100,0); to change position of secondaryViewport.
secondaryViewport = new ScalingViewport(Scaling.none, 480, 421);
By this statement you're creating a new Camera that is different from the camera which is used in your StretchViewport.
Ok, the solution was
secondaryStage.getViewport().setScreenPosition(x, y);

Libgdx Stencil Buffer overlap

I have a question about using the Stencil Buffer with OpenGL and libgdx
As example I need to draw to circles with overlap.
The code of render method is here:
Gdx.gl.glClearColor(1f, 1f, 1f, 1f);
Gdx.gl20.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_STENCIL_BUFFER_BIT);
shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
Gdx.gl.glEnable(GL20.GL_STENCIL_TEST);
Gdx.gl.glClearStencil(0);
Gdx.gl.glClear(GL20.GL_STENCIL_BUFFER_BIT);
Gdx.gl.glStencilFunc(GL20.GL_ALWAYS, 1, 0);
Gdx.gl.glStencilOp(GL20.GL_KEEP, GL20.GL_INCR, GL20.GL_INCR);
shapeRenderer.setColor(new Color(1f, 0f, 0f, 1f)); // red
shapeRenderer.circle(200, 200, 100);
shapeRenderer.circle(180, 180, 100);
Gdx.gl.glStencilFunc(GL20.GL_EQUAL, 2, 0xFF);
Gdx.gl.glStencilOp(GL20.GL_REPLACE, GL20.GL_REPLACE, GL20.GL_REPLACE);
shapeRenderer.setColor(new Color(0f, 1f, 0f, 1f)); // green
shapeRenderer.circle(200, 200, 100);
shapeRenderer.circle(180, 180, 100);
Gdx.gl.glDisable(GL20.GL_STENCIL_TEST);
shapeRenderer.end();
Result is:
Expected something like this:
Overlap should be in other color.
What is a problem here?
The logic looks OK as far as it goes, so I suspect the issue is that your framebuffer that you are rendering in to doesn't actually have a stencil attachment. If there is no stencil buffer OpenGL ES behaves as if the stencil test is disabled, so your final two circles will always overdraw the first two.
Check your context creation (for window surfaces), or your FBO creation for off-screen render targets.

OpenGL frame buffer + LibGDX

I have one problem with openGL frame buffer.
I want to achieve:
Bind FBO1. Draw image1 to FBO1. Unbind FBO1.
Bind FBO2. Draw FBO1 to FBO2. Unbind FBO2.
Bind FBO1. Draw image2 to FBO1. Unbind FBO1.
Draw FBO2 to the screen
What I expect to see:
I expect to see only image1 on the screen, because it is drawn in the first FBO and then the first FBO is drawn onto the second FBO
What is the problem:
I am seeing both image1 and image2 on drawn, which should be imposible, because only the first image is drawn in FBO1 when FBO1 is drawn in FBO2 and I only draw FBO2 to the screen.
Here is the code to reproduce the problem:
// --- in show() method
this.img = new Texture(Gdx.files.internal("shaders/image.jpg"));
this.img2 = new Texture(Gdx.files.internal("shaders/image2.jpg"));
this.fbo = new FrameBuffer(Format.RGBA8888, Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), false);
this.fbo2 = new FrameBuffer(Format.RGBA8888, Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), false);
// --- in render() method
// start frame buffer 1 and draw image 1
this.fbo.begin();
{
this.batch.begin();
this.batch.draw(this.img, 0, 0, 400, 400, 0, 0, this.img.getWidth(), this.img.getHeight(), false, true);
this.batch.end();
}
this.fbo.end();
// start frame buffer 2 and frame buffer 1 output
this.fbo2.begin();
{
this.batch.begin();
this.batch.draw(this.fbo.getColorBufferTexture(), 500, 0, this.fbo.getColorBufferTexture().getWidth(), this.fbo.getColorBufferTexture().getHeight(), 0, 0, this.fbo.getColorBufferTexture()
.getWidth(), this.fbo.getColorBufferTexture().getHeight(), false, true);
this.batch.end();
}
this.fbo2.end();
// start frame buffer 1 again and draw image 2
this.fbo.begin();
{
this.batch.begin();
this.batch.draw(this.img2, 150, 150, 400, 400, 0, 0, this.img2.getWidth(), this.img2.getHeight(), false, true);
this.batch.end();
}
this.fbo.end();
// draw frame buffer 2 to the batch
this.batch.begin();
this.batch.draw(this.fbo2.getColorBufferTexture(), 0, 0);
this.batch.end();
The draw() methods are a bit long, because I want to pass flipY = true, because OpenGL draws the frame buffers upside-down.
The parameters of the draw() method that I am using are:
Texture texture, float x, float y, float width, float height, int srcX, int srcY, int srcWidth, int srcHeight, boolean flipX, boolean flipY
What am I missing? Why is this happening?
Each time you begin drawing on another FrameBuffer, you need to clear it if you don't want the old contents.
frameBuffer.begin();
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
//...
You also need to clear the screen at the beginning of render() if you don't want the contents from the last call to render().
Also, if you are covering the whole background with your image, you might as well disable blending on the SpriteBatch.

Pixmap circle border doesn't appear in libGDX html project

I'm programming my first project with libGDX and I'm currently trying to draw a transparent circle with an opaque border on top of the background.
It's working as desired in the android an the desktop project. The html project, however, doesn't render the border of the circle.
The circle is a texture which is created with a pixmap. As there is no possibility to set the strokewidth for the drawCircle method (why isn't there any?; see http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Pixmap.html#drawCircle-int-int-int-), I'm drawing the border as a filledCircle with another circle on top of it:
creating the texture
Pixmap pixmap = new Pixmap(radius * 2 + 1, radius * 2 + 1, Format.RGBA8888);
Pixmap.setBlending(Blending.None);
pixmap.setColor(new Color(1,1,1,1));
pixmap.fillCircle(radius, radius, radius);
pixmap.setColor(new Color(0, 0, 0, 0.6f);
pixmap.fillCircle(radius, radius, radius - borderWidth);
texture = new Texture(pixmap);
texture.setFilter(TextureFilter.Linear, TextureFilter.Linear);
pixmap.dispose();
drawing
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT (Gdx.graphics.getBufferFormat().coverageSampling ? GL20.GL_COVERAGE_BUFFER_BIT_NV : 0));
// tell the camera to update its matrices.
camera.update();
game.spriteBatch.setProjectionMatrix(camera.combined);
// begin the drawing process
game.spriteBatch.begin();
drawBackground();
//circle gets drawn here
game.spriteBatch.draw(texture, 50, 50);
//end drawing process
game.spriteBatch.end();
Any ideas?
Edit: Tested on Chrome (35.0.1916.153) and Firefox (30.0) on Ubuntu 14.04. Can anybody reproduce this problem?
You need to disable blending before drawing a circle:
pixmap.setBlending(Pixmap.Blending.None);
pixmap.fillCircle(radius, radius, radius);

libgdx and android application. Image as background

I am new and I just start my journey with libgdx. I would like to know how I can do image.png in resolution 960x640 as background in my game? This is possible? Thx for advices and forbearance. Maybe you hava a simply tutorial?
This is my render class:
public void render() {
texture = new Texture(Gdx.files.internal("E:/background.png"));
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(texture, 0, 0);
batch.end();
}
Second question. I need to insert two active images, active means when I click on that image, the next image show me on the screen. I want to implement action when I click on that picture.
In your create() method, create a new Texture referencing your image.png, and then use your existing SpriteBatch to render it in the render() loop. Immediately after your GL.clear() call, go your batch.draw(backgroundTexture, 0. 0) and make sure you're in OrthographicProjection mode for your camera.
first you have to set the view port
do this in your create method
`float scrw = 960;
float scrh = 640;
camera = new OrthographicCamera();
camera.viewportHeight = scrh;
camera.viewportWidth = scrw;
camera.position.set(camera.viewportWidth * .5f,
camera.viewportHeight * .5f, 0f);
camera.update();`
create a texture
texture = new Texture("data/background.png");
put this texture in a sprite like this
sprite=new sprite(texture);
and then set the size like this
sprite.setsize(960,640);
and draw it in your render methods between batch.begin
and batch.end
sprite.draw(batch);

Categories