Develop Reference

How does a frameBuffer interact with multiple camera's and viewports

My goal is to draw all my visuals to a framebuffer which has a size that matches 1 by 1 with my pixel art assets. And then output the framebuffer texture to the current screen size. (A common solution for scaling pixel art).
The problem I am having while trying to achieve this is 2-fold
The frameBuffer texture is drawn too small. I expect the texture to match the whole window.
resizing the screen further distorts the proportions and position. I expect the frameBuffer texture to keep filling the screen after resizing it.
This is my trimmed down code.
public class BattleScreen extends GameScreen {
public static final int VISIBLE_WIDTH = 21;
public static final int VISIBLE_HEIGHT = 21;
private static OrthographicCamera mapCamera = null;
private SpriteBatch spriteBatch;
private OrthographicCamera hudCamera;
private Hud hud;
private EntityStage entityStage;
private FrameBuffer fbo;
private void initializeVariables(UnitOwner enemy, MapManager mapMgr) {
mapCamera = new OrthographicCamera();
mapCamera.setToOrtho(false, VISIBLE_WIDTH, VISIBLE_HEIGHT);
fbo = new FrameBuffer(Pixmap.Format.RGBA8888, 672, 672, false);
spriteBatch = new SpriteBatch(900);
entityStage = new EntityStage();
hudCamera = new OrthographicCamera();
hudCamera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
}
#Override
public void show() {
resize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
mapCamera.position.set(currentMap.getMapWidth() * 0.5f, currentMap.getMapHeight() * 0.5f, 0f);
mapRenderer = new OrthogonalTiledMapRenderer(mapMgr.getCurrentTiledMap(), Map.UNIT_SCALE, spriteBatch);
mapRenderer.setView(mapCamera);
final FitViewport vp = new FitViewport(VISIBLE_WIDTH, VISIBLE_HEIGHT, mapCamera);
currentMap.getTiledMapStage().setViewport(vp);
entityStage.setViewport(vp);
}
private void update(final float delta) {
mapCamera.position.x = Utility.clamp(mapCamera.position.x, currentMap.getTilemapWidthInTiles() - (mapCamera.viewportWidth * 0.5f), 0 + (mapCamera.viewportWidth * 0.5f));
mapCamera.position.y = Utility.clamp(mapCamera.position.y, currentMap.getTilemapHeightInTiles() - (mapCamera.viewportHeight * 0.5f), 0 + (mapCamera.viewportHeight * 0.5f));
mapCamera.update();
hudCamera.update();
}
private void renderElements(final float delta) {
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
fbo.begin();
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
renderMap();
renderUnits();
renderHUD(delta);
fbo.end();
spriteBatch.begin();
Texture texture = fbo.getColorBufferTexture();
TextureRegion textureRegion = new TextureRegion(texture);
textureRegion.flip(false, true);
spriteBatch.draw(textureRegion, 0, 0, fbo.getWidth(), fbo.getHeight());
spriteBatch.end();
}
private void renderMap() {
spriteBatch.setProjectionMatrix(mapCamera.combined);
mapRenderer.setView(mapCamera);
currentMap.getTiledMapStage().getViewport().apply();
mapRenderer.render();
}
private void renderUnits() {
spriteBatch.begin();
entityStage.getViewport().apply();
for (Entity unit : units) {
final Color temp = spriteBatch.getColor();
spriteBatch.setColor(new Color(temp.r, temp.g, temp.b, unit.getEntityactor().getColor().a));
spriteBatch.draw(getFrame(), getEntityactor().getX(), unit.getEntityactor().getY(), 1.0f, 1.0f);
spriteBatch.setColor(temp);
}
}
private void renderHUD(final float delta) {
spriteBatch.setProjectionMatrix(hud.getStage().getCamera().combined);
hud.getStage().getViewport().apply();
hud.render(delta);
}
#Override
public void resize(final int width, final int height) {
currentMap.getTiledMapStage().getViewport().update(width, height, false);
entityStage.getViewport().update(width, height, false);
hud.resize(width, height);
pauseMenu.resize(width, height);
}
}
What I tried is changing the width and height on this line in the render method
spriteBatch.draw(textureRegion, 0, 0, 1000, 1000);
And then it does fill up the whole screen nicely
Which is weird because the screen is 672 x 672 in size.

Fixed problem 1 with the following adaptation
mapCamera.setToOrtho(false, fbo.getWidth(), fbo.getHeight()); //adapt camera to fbo
mapCamera.update();
spriteBatch.setProjectionMatrix(mapCamera.combined);
spriteBatch.draw(textureRegion, 0, 0, fbo.getWidth(), fbo.getHeight());
spriteBatch.end();
mapCamera.setToOrtho(false, VISIBLE_WIDTH, VISIBLE_HEIGHT); //reset camera
mapCamera.update();
The spriteBatch is being reused for the map, the entities and the ui for efficiency. So I had to configure it to project the buffer texture on the screen

Libgdx (Android) - ImageButton has wrong size (scale)

I have a problem with size of ImageButton(s), buttons are not strectched/scaled because screen size of device its 1920x1080 and button picture is 342x129. (it is viewed smaller than original picture seems).
When I draw it through this game.batch.draw(playBtn, ...);
It works fine, but I need ImageButtons. What is wrong ?
Note: WIDTH = 480, HEIGHT = 800
picture: https://imgur.com/IJs4uPB
public MenuScreen(PlumberGame game) {
this.game = game;
camera = new OrthographicCamera();
viewport = new FitViewport(WIDTH,HEIGHT, camera);
stage =new Stage(viewport, spriteBatch);
background = new Texture("background.png");
title = new Texture("title.png");
camera.setToOrtho(false, WIDTH, HEIGHT);
}
#Override
public void show() {
stage = new Stage(); //Set up a stage for the ui
Gdx.input.setInputProcessor(stage); //Start taking input from the ui
atlas = new TextureAtlas("ui/buttons.pack");
skin = new Skin(atlas);
table = new Table(skin);
table.setBounds(0,0, WIDTH, HEIGHT);
ImageButton.ImageButtonStyle playBtnStyle = new ImageButton.ImageButtonStyle();
playBtnStyle.up = skin.getDrawable("playBtn");
playBtnStyle.down = skin.getDrawable("playBtnOn");
playBtn = new ImageButton(playBtnStyle);
playBtn.setSize(playBtn.getWidth(), playBtn.getHeight());
playBtn.getImage().setScaling(Scaling.fit);
playBtn.invalidateHierarchy();
playBtn.setPosition((float)(WIDTH * 0.15 ), (float) (HEIGHT * 0.5));
stage.addActor(playBtn);
}
#Override
public void render(float delta) {
stage.getBatch().setProjectionMatrix(camera.combined);
renderer.setProjectionMatrix(stage.getBatch().getProjectionMatrix());
renderer.setTransformMatrix(stage.getBatch().getTransformMatrix());
renderer.translate(WIDTH, HEIGHT, 0);
stage.act(Gdx.graphics.getDeltaTime()); //Perform ui logic
stage.getBatch().begin();
stage.getBatch().draw(background, 0, 0, WIDTH,HEIGHT);
stage.getBatch().draw(title, (float)(WIDTH * 0.12), (float) (HEIGHT * 0.75));
stage.getBatch().end();
stage.draw(); //Draw the ui
}
#Override
public void resize(int width, int height) {
stage.getViewport().update(width, height, true);
table.invalidateHierarchy();
table.setSize(width, height);
camera.update();
}

You are setting playBtn size wrong way.
This line doesn't make sense:
playBtn.setSize(playBtn.getWidth(), playBtn.getHeight());

I would recommend using Table which is really convinient when designing UIs. You specify the size of the actor when adding it to the table.
I can't try it out now since I'm not at home but it would look something like:
#Override
public void show() {
stage = new Stage(); //Set up a stage for the ui
Gdx.input.setInputProcessor(stage); //Start taking input from the ui
atlas = new TextureAtlas("ui/buttons.pack");
skin = new Skin(atlas);
table = new Table(skin);
table.setBounds(0,0, WIDTH, HEIGHT);
ImageButton.ImageButtonStyle playBtnStyle = new ImageButton.ImageButtonStyle();
playBtnStyle.up = skin.getDrawable("playBtn");
playBtnStyle.down = skin.getDrawable("playBtnOn");
playBtn = new ImageButton(playBtnStyle);
playBtn.setPosition((float)(WIDTH * 0.15 ), (float) (HEIGHT * 0.5));
Table table = new Table();
table.setFillParent(true);
table.add(playBtn).expand().fillX().height(yourHeight);
stage.addActor(table);
}
EDIT:
Another alternative is to set min size of the drawables you put in the image button style:
ImageButton.ImageButtonStyle playBtnStyle = new ImageButton.ImageButtonStyle();
playBtnStyle.up = skin.getDrawable("playBtn");
playBtnStyle.down = skin.getDrawable("playBtnOn");
playBtnStyle.up.setMinWidth(yourWidth);
playBtnStyle.up.setMinHeight(yourHeight);
playBtnStyle.down.setMinWidth(yourWidth);
playBtnStyle.down.setMinHeight(yourHeight);

Libgdx - different sizes when framebuffer's texture is rendered to screen

Because of my design, i want to get rid of NinePatch object, but i use it to initialize textures at the desired size using framebuffer, and then apply that textures to my custom objects
Im new to LibGDX and GL stuff.
The problem is when i draw FBO texture to screen the image is so small, idk why
I grab skeleton of all this from here: https://stackoverflow.com/a/7632680/401529
My RenderToTexture class is:
public class RenderToTexture {
private float fbScaler = 1f;
private boolean fbEnabled = true;
private FrameBuffer fb = null;
private TextureRegion fbReg = null;
[... more constructors ... ]
/**
*
* #param scale
*/
public RenderToTexture(int width, int height, float scale, boolean hasDepth) {
if(width == -1){
width = (int) (Gdx.graphics.getDisplayMode().width * scale);
}
if(height == -1){
height = (int) (Gdx.graphics.getDisplayMode().height * scale);
}
fb = new FrameBuffer(
Pixmap.Format.RGBA8888,
(int)(width * fbScaler),
(int)(height * fbScaler),
hasDepth
);
fbReg = new TextureRegion(fb.getColorBufferTexture());
fbReg.flip(false,false);
}
public void begin(){
if(fbEnabled) {
fb.begin();
Gdx.gl.glClearColor(0, 0,0,0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
}
}
public TextureRegion end(){
if(fb != null)
{
fb.end();
return fbReg;
// batch.draw(fboRegion, 0, 0);
}
return null;
}
}
And my util class:
public class ImageUtils {
public static TextureRegion ninePatchToTextureRegion(NinePatch patch, int width, int height){
return ninePatchToTextureRegion(new NinePatchDrawable(patch), width, height);
}
public static TextureRegion ninePatchToTextureRegion(NinePatchDrawable patch, int width, int height){
RenderToTexture r2t = new RenderToTexture(width, height, 1, false);
SpriteBatch sb = new SpriteBatch();
r2t.begin();
sb.begin();
patch.draw(sb, 0, 0, width, height);
sb.end();
sb.dispose();
return r2t.end();
}
}
Then i call this util class when i create a sprite:
NinePatchDrawable ninepatchtest = new NinePatchDrawable(
new NinePatch(new Texture(Gdx.files.internal("img/ui/btn-retro-blue.png")), 5, 5, 5, 5)
);
TextureRegion result = ImageUtils.ninePatchToTextureRegion(ninepatchtest, 200, 100);
sprite = new Sprite(result);
The current result is (left) and the size simulated desired result (right)
EDIT: Camera size is displaymode size, glued to screen, no zoom, no movement.
EDIT: Fixed missing dispose suggested by #Tenfour04
If this way is not the best way to do it, im open to new alternatives

Well i found a "HALF" solution of my problem:
As i see here in this example LibGDX - Drawing to a FrameBuffer does not work i miss the setProjectionMatrix to SpriteBatch object, so render to texture class begin() method now is:
public SpriteBatch begin(){
SpriteBatch batch = null;
if(fbEnabled) {
fb.begin();
Gdx.gl.glClearColor(0, 0,0,0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
Matrix4 m = new Matrix4();
m.setToOrtho2D(0, 0, fb.getWidth(), fb.getHeight());
batch = new SpriteBatch();
batch.setProjectionMatrix(m);
}
return batch;
}
Now renderToTexture begin() returns spritebatch, so:
public static TextureRegion ninePatchToTextureRegion(NinePatchDrawable patch, int width, int height){
RenderToTexture r2t = new RenderToTexture(width, height, 1, false);
SpriteBatch sb = r2t.begin();
sb.begin();
patch.draw(sb, 0, 0, width, height);
sb.end();
sb.dispose();
return r2t.end();
}
This solves the size of drawed texture from FBO, but ninepatch is drawed ok outside framebuffer, and stretched with framebuffer...

Gdx.input.getY is flipped

I have an issue in LibGDX where when i call upon Gdx.input.getY(), it selects a pixel that's on the other side of the application relative to the center of the screen.
public class Main extends ApplicationAdapter {
private SpriteBatch batch;
private Texture img;
private OrthographicCamera camera;
int xPos;
int yPos;
private Vector3 tp = new Vector3();
BitmapFont font;
#Override
public void create () {
batch = new SpriteBatch();
img = new Texture("crosshair.png");
camera = new OrthographicCamera();
camera.setToOrtho(false, 1280, 720);
font = new BitmapFont();
}
#Override
public void render () {
yPos = Gdx.input.getY();
xPos = Gdx.input.getX();
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.unproject(tp.set(xPos, yPos, 0));
batch.begin();
font.draw(batch,xPos + " , " + yPos, Gdx.input.getX() - 25, Gdx.input.getY() - 5);
batch.draw(img, xPos, yPos);
batch.end();
}
#Override
public void dispose () {
batch.dispose();
img.dispose();
}

Subtracting the viewport height with the touch location won't work, because that would be subtracting world coordinates with touch coordinates. (and even for a pixel perfect projection it would be height - 1 - y). Instead use the unproject method to convert touch coordinates to world coordinates.
There are two problems with your code:
You are never setting the batch projection matrix.
Even though you are using the unproject method, you are never using its result.
So instead use the following:
#Override
public void render () {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
camera.unproject(tp.set(Gdx.input.getX(), Gdx.input.getY(), 0));
font.draw(batch,tp.x+ " , " + tp.y, tp.x - 25, tp.y - 5);
batch.draw(img, tp.x, tp.y);
batch.end();
}
I would suggest to read the following pages, which describe this and the reasoning behind it in detail:
https://github.com/libgdx/libgdx/wiki/Coordinate-systems
https://xoppa.github.io/blog/pixels/
https://github.com/libgdx/libgdx/wiki/Viewports

It's better to try this
yPos = camera.viewportHeight - Gdx.input.getY();

Libgdx render for a rectangle array different textures

I am developing a game with libgdx and i got stuck at a point. So My SpriteBatch draws for all the Rectangles that are in an array with the same texture but I want that every single one has its own texture. MY Code looks like this
public class GameScreen implements Screen{
final MrJetpack game;
OrthographicCamera camera;
SpriteBatch batch;
ShapeRenderer rend;
private Array<Rectangle> raindrops;
Texture enemy1,enemy2,enemy3,enemy4,endScreen;
TextureRegion[] enemys = new TextureRegion[4];
private int random;
public GameScreen(final MrJetpack game){
this.game = game;
camera = new OrthographicCamera();
camera.setToOrtho(false, 800, 480);
enemy1 = new Texture(Gdx.files.internal("boxk.png"));
enemy2 = new Texture(Gdx.files.internal("boxg.png"));
enemy3 = new Texture(Gdx.files.internal("kugel.png"));
enemy4 = new Texture(Gdx.files.internal("kugelk.png"));
enemys[0] = new TextureRegion(enemy1);
enemys[1] = new TextureRegion(enemy2);
enemys[2] = new TextureRegion(enemy3);
enemys[3] = new TextureRegion(enemy4);
raindrops = new Array<Rectangle>();
rend = new ShapeRenderer();
batch = new SpriteBatch();
}
#Override
public void render(float delta) {
// TODO Auto-generated method stub
//Gdx.gl.glClearColor(0, (float)148/255,(float) 255/255, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.update();
batch.setProjectionMatrix(camera.combined);
rend.begin(ShapeType.Filled);
rend.rect(0, 0, 800, 10);
rend.rect(0, 160, 800, 10);
rend.rect(0, 320, 800, 10);
rend.setColor(Color.ORANGE);
rend.end();
batch.begin();
for(Rectangle raindrop: raindrops) {
batch.draw(enemys[random], raindrop.x - 10, raindrop.y);
}
batch.end();
if(TimeUtils.nanoTime() - lastDropTime > spawnTime){
spawnRaindrop();
}
Iterator<Rectangle> iter = raindrops.iterator();
while(iter.hasNext()) {
Rectangle raindrop = iter.next();
raindrop.x -= 20 * Gdx.graphics.getDeltaTime();
if(raindrop.x < 0) {
spawnRaindrop();
iter.remove();
}
}
}
private void spawnRaindrop() {
Rectangle raindrop = new Rectangle();
raindrop.x = 800;
stages = MathUtils.random(1, 3);
random = MathUtils.random(0, 3);
raindrop.width = 30;
raindrop.height = 53;
raindrops.add(raindrop);
lastDropTime = TimeUtils.nanoTime();
}
So what actually happening is that everytime a new Rectangle spawns in the screen the other ones who were already displayed change the Texture so every Rectangle got the same Texture . Any solutions or examples?
EDIT: http://imgur.com/46ywYyy
This is my problem for people who understood my question false :)
Like you can see the texture is changing for all the other rectangles but i want everyone to have their static texture

They told you, one way to do it, but I see you do not clear, I'll put more or less as you might do.
I'll try to make the form more similar to what you already have in your code.
note
this code may have syntax error, among others, becouse I'm doing from the editor StackOverflow.
1- create a class that is derived from sprite, for example something like:
public class SpriteRaindrop extends Sprite{
Rectangle raindrop = new Rectangle();
public SpriteRaindrop(Texture t, int srcWidth,
int srcHeigth,
float posX,
float posY){
super(t, srcWidth, srcHeigth);
raindrop.x = posX;
raindrop.y = posY;
raindrop.width = srcWidth;
raindrop.height = srcHeigth;
setPosition(posX, posY);
}
public void updateR(){
raindrod.x = getX();
raindrod.y = getY();
}
}
This your code with with any changes
public class GameScreen implements Screen{
final MrJetpack game;
OrthographicCamera camera;
SpriteBatch batch;
ShapeRenderer rend;
private Array<SpriteRaindrop> raindrops;
Texture enemy1,enemy2,enemy3,enemy4,endScreen;
TextureRegion[] enemys = new TextureRegion[4];
private int random;
public GameScreen(final MrJetpack game){
this.game = game;
camera = new OrthographicCamera();
camera.setToOrtho(false, 800, 480);
enemy1 = new Texture(Gdx.files.internal("boxk.png"));
enemy2 = new Texture(Gdx.files.internal("boxg.png"));
enemy3 = new Texture(Gdx.files.internal("kugel.png"));
enemy4 = new Texture(Gdx.files.internal("kugelk.png"));
enemys[0] = new TextureRegion(enemy1);
enemys[1] = new TextureRegion(enemy2);
enemys[2] = new TextureRegion(enemy3);
enemys[3] = new TextureRegion(enemy4);
raindrops = new Array<SpriteRaindrop>();
rend = new ShapeRenderer();
batch = new SpriteBatch();
}
#Override
public void render(float delta) {
// TODO Auto-generated method stub
//Gdx.gl.glClearColor(0, (float)148/255,(float) 255/255, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.update();
batch.setProjectionMatrix(camera.combined);
rend.begin(ShapeType.Filled);
rend.rect(0, 0, 800, 10);
rend.rect(0, 160, 800, 10);
rend.rect(0, 320, 800, 10);
rend.setColor(Color.ORANGE);
rend.end();
batch.begin();
for(SpriteRaindrop raindrop: raindrops) {
//raindrop.translatex(-10f);
//what is raindrop.y value
raindrop.updateR();
raindrop.draw(batch);
}
batch.end();
if(TimeUtils.nanoTime() - lastDropTime > spawnTime){
spawnRaindrop();
}
Iterator<SpriteRaindrop> iter = raindrops.iterator();
while(iter.hasNext()) {
SpriteRaindrop raindrop = iter.next();
raindrop.translateX(-20f * Gdx.graphics.getDeltaTime());
if(raindrop.getX() < 0) {
spawnRaindrop();
iter.remove();
}
}
}
private void spawnRaindrop() {
stages = MathUtils.random(1, 3);
random = MathUtils.random(0, 3);
lastDropTime = TimeUtils.nanoTime();
SpriteRaindrop raindrop = new SpriteRaindrop(enemys[random],
30, 53,
800, 0);
raindrops.add(raindrop);
}
this is just an idea, but I think it can work, I hope you help

The variable random is global for class, once a new sprite spawns it sets the value to new random value and all of them are draw by:
batch.draw(enemys[random], raindrop.x - 10, raindrop.y);
You need to track this together with location per instance.