We Keep Coding

Texture Stretching when using a FrameBuffer and SpriteBatch

I have been working on this for 2 days and still cant figure out what is going on. I am working on a Game Framework and i have migrated from Slick2D to LibGDX and would like to render once to a texture as to save CPU/GPU cycles and improve performance. I have created a class called DrawSurface and its main goal is to allow me to draw to a offscreen texture and then just draw that using LibGDXs Built in Image class.
public final class DrawSurface {
public static interface DrawCall{
void draw(SpriteBatch b, int width, int height);
}
public static Texture offscreenDraw(DrawCall c, int canvasWidth, int canvasHeight){
FrameBuffer fbo = new FrameBuffer(Pixmap.Format.RGBA8888,(canvasWidth),(canvasHeight),true);
SpriteBatch batch = new SpriteBatch();
batch.setProjectionMatrix(new Matrix4().setToOrtho2D(0,0,fbo.getWidth(),fbo.getHeight()));
fbo.begin();
batch.begin();
c.draw(batch,fbo.getWidth(),fbo.getHeight());
batch.end();
Pixmap map = ScreenUtils.getFrameBufferPixmap(0,0,fbo.getWidth(),fbo.getHeight());
fbo.end();
Texture t = new Texture(map);
map.dispose();
return t;
}
}
Which Gives me This Result When Drawing Images:
The "DrawCall" that is used to get this image is:
Texture t = DrawSurface.offscreenDraw(new DrawSurface.DrawCall() {
#Override
public void draw(SpriteBatch b, int w, int h) {
Image img = new Image(0x0000FF,w,h);
img.setLocation(0,0);
img.draw(b);
for(int i = 0; i < w; i += 64){
for(int j = 0; j < h; j += 64){
Blocks.GRASS_BLOCK.setLocation(i,j);
Blocks.GRASS_BLOCK.draw(b);
}
}
}
},512,512);
The Image should Render as a blue Square 512x512 pixels in size, with small "Grass" block images that should also be square. Sized 16x16. Unfortunately i get a warped result, and i do not understand why. As the Large White thing (a software JoyStick i created) is not stretched while the "DrawsSurface" is. If you would like a look at my camera code:
// Constructor Above.
this.gameWidth = gameWidth;
this.gameHeight = gameHeight;
this.camera = new OrthographicCamera();
FlatPixelGame.gameCamera = this.camera;
this.viewport = new StretchViewport(gameWidth,gameHeight,camera);
this.viewport.apply();
LogBot.log("Game Instance Created Size [%s,%s]",gameWidth,gameHeight);
InputManager.getInstance().addListener(this);
this.camera.position.set(camera.viewportWidth / 2, camera.viewportHeight / 2, 0);
Any Help Would Be Appreciated, i have scoured Forums, StackOverflow and LibGDX Documentation and still cannot seem to fix this issue.
Again, Thank you in Advance :)

After a little work under the hood with LibGDX source code from BadLogic, as well as reading bug threads it seems there is an issue when converting a PixMap to a texture. Rendering a image derived from a file works fine, but generated images that come from a Pixmap can show warping due to the off-screen view-port not being the same as the current rendering view-port.
A quick way around this is using TextureRegions and Sprites.
public static Image offscreenDraw(DrawCall c, int canvasWidth, int canvasHeight){
FrameBuffer fbo = new FrameBuffer(Pixmap.Format.RGBA8888,canvasWidth,canvasHeight,true);
SpriteBatch batch = new SpriteBatch();
Matrix4 matrix = new Matrix4();
matrix.setToOrtho2D(0, 0, canvasWidth,canvasHeight);
batch.setProjectionMatrix(matrix);
fbo.begin();
batch.begin();
c.draw(batch,canvasWidth,canvasHeight);
batch.end();
Texture t = fbo.getColorBufferTexture();
t.setFilter(Texture.TextureFilter.Nearest, Texture.TextureFilter.Nearest);
if(!t.getTextureData().isPrepared()){
t.getTextureData().prepare();
}
fbo.end();
TextureRegion r = new TextureRegion(t,0,0,canvasWidth,canvasHeight);
return new Image(new com.badlogic.gdx.scenes.scene2d.ui.Image(new Sprite(r)));
}

LAG : not fluid movement on JAVA Box2D game

I'm a newbie game developer. I've been trying to develop a game using LibGDX and Box2D physics engine, but when I export my android application, it is not working as it should be.
This problem is happening in some devices; it does not matter if it's an old device or a new one.
For example the app is working well in Sony Xperia Z1, Motorola XT615, LG L1, LG L3, LG L5,etc. However, in Sony Xperia U, Motorola Moto E,Samsung Galaxy's is not working like I expect.
You can see a non-fluid behavior when the object is moving across the screen. That's the problem I have. It's like a stutter effect, not fluid.
I read on forums that It could be a FPS (frames per second) problem when I set the time step in the world. So, I am using a fixed time step method and with the remainder time that I get in "accumulator" I interpolate it. I read these articles:
http://gafferongames.com/game-physics/fix-your-timestep/
http://saltares.com/blog/games/fixing-your-timestep-in-libgdx-and-box2d/
to learn the fixed time step and interpolation method, but I think that there is a fail in my code that I can't see.
Here is my code:
public class MyGame extends ApplicationAdapter {
SpriteBatch batch;
Texture img;
Sprite sprite;
Body body;
Box2DDebugRenderer debugRenderer;
OrthographicCamera camera;
World world;
final float PixelsToMeters=100f;
float step = 1.0f / 60.0f ,alpha;
Vector2 currentPosition,lastPosition,position;
double currentTime,accumulator,lastAngle,currentAngle;
final float BODY_WIDTH=95f,BODY_HEIGHT=95f;
#Override
public void create () {
world= new World(new Vector2(0f,-9.8f),true);
batch = new SpriteBatch();
img = new Texture("circulo.png");
sprite=new Sprite(img);
//BODY DEFINITION
BodyDef bodydef=new BodyDef();
bodydef.type= BodyType.DynamicBody;
bodydef.position.set(-3.5f,-2.4f);
body=world.createBody(bodydef);
CircleShape shape=new CircleShape();
shape.setRadius((sprite.getWidth()/2)/PixelsToMeters);
FixtureDef fixturedef=new FixtureDef();
fixturedef.shape=shape;
fixturedef.density=0.1f;
fixturedef.restitution=1f;
fixturedef.friction=0.5f;
body.createFixture(fixturedef);
shape.dispose();
//SET SPRITE POSITION
sprite.setPosition(body.getPosition().x *PixelsToMeters - BODY_WIDTH/2,
body.getPosition().y * PixelsToMeters - BODY_HEIGHT/2);
//THROW CIRCLE
body.setLinearVelocity(3.5f,9.5f);
lastPosition=new Vector2();
position=new Vector2();
camera=new
OrthographicCamera(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
}
#Override
public void render () {
camera.update();
double newTime = TimeUtils.millis() / 1000.0;
double frameTime = Math.min(newTime - currentTime, 0.25);
float deltaTime = (float)frameTime;
currentTime = newTime;
accumulator+=deltaTime;
while (accumulator >= step) {
//SAVE LAST BODY POSITION AND ANGLE
lastPosition.x=body.getPosition().x;
lastPosition.y=body.getPosition().y;
lastAngle=body.getAngle();
world.step(step, 8, 3);
accumulator -= step;
}
//SAVE CURRENT BODY POSITION AND ANGLE
currentPosition= new Vector2(body.getPosition().x,body.getPosition().y);
currentAngle=body.getAngle();
alpha=(float) (accumulator/step);
position.x = lastPosition.x + (currentPosition.x - lastPosition.x) * alpha;
position.y = lastPosition.y + (currentPosition.y - lastPosition.y) * alpha;
sprite.setPosition(position.x * PixelsToMeters - BODY_WIDTH/2, position.y * PixelsToMeters
-BODY_HEIGHT/2);
sprite.setRotation((float)Math.toDegrees(lastAngle+(currentAngle-lastAngle)*alpha));
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
batch.draw(sprite, sprite.getX(), sprite.getY(),
sprite.getOriginX(), sprite.getOriginY(),
sprite.getWidth(), sprite.getHeight(), sprite.getScaleX(),
sprite.getScaleY(), sprite.getRotation());
batch.end();
}
#Override
public void dispose() {
world.dispose();
batch.dispose();
img.dispose();
super.dispose();
}
}

I had this exact problem before using box2d, small stuttering when physics steps took longer than 1/60 seconds.
I also tried interpolation and read lots of articles about it without any success.
In the end I am not using fixed timestep at all (just delta to the world step) and all goes smoothly with box2d.
But if you still want to use fixed step, i have some suggestions:
Use Gdx.graphics.getDeltaTime() as it gives you a smoothed delta with n previous frames.
Use deltaTime in the world step loop:world.step(deltaTime, 8, 3); and accumulator -= deltaTime.
Hope it helps!

Moving objects in libgdx

I have a bug object that I want to move across the screen as soon as the game starts. The bug starts from the bottom left of the screen and is supposed to move to the top right and stop. What I have is the bug never really gets to the top right because the game screen(X and Y) size are not equal. How do I make the bug move to that position?
This is what I have.
public void create() {
spriteBatch = new SpriteBatch();
bug = new Sprite(new Texture("EnemyBug.png"));
bug.setSize(50, 85);
bug.setPosition(0,0);
}
public void render() {
xdeg++;
ydeg++;
Gdx.gl.glClearColor(0.7f, 0.7f, 0.2f, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
spriteBatch.begin();
bug.translate(xdeg, ydeg);
bug.draw(spriteBatch);
spriteBatch.end();
}

I'll assume that you know your window width (W) and height (H). First find the W / H ratio:
float ratio = screenWidth / screenHeight;
Then update your bug position accordingly:
bug.translate(ratio, 1);
This will make the sprite move through the screen diagonal.

java libgdx move perspective camera

I'm creating a 3D game but I don't know how to translate the camera according to my fingers. I'm creating a map(x = -30 to +30;y = -30 to 30;z = -1 to 1) where every coordinate is used for a model using .g3db files from my assets and put in place using model translation. This works so far, the map looks good and is viewed in a 67% angle. The map is so large it can't be viewed in the camera at once(no I don't want to zoom out). Whenever I'm touching the screen of my android phone it's just rotating around the center, but instead I want the gamemap to stay in place from my point of view and instead change the position of the perspective camera on the x and y axis. There's no game object that can be used for position tracking, everything should be depending on my finger actions. This way I want to move to visible screen to each x and y direction(think of it visualy like a 2D camera moving up, down and to the sides in front of a picture). Can you help me?
This is my code so far:
public class MyGdxGame extends ApplicationAdapter implements ApplicationListener{
//define variables
...
#Override
public void create() {
environment = new Environment();
environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.4f, 0.4f, 0.4f, 1f));
environment.add(new DirectionalLight().set(0.8f, 0.8f, 0.8f, -1f, -0.8f, -0.2f));
modelBatch = new ModelBatch();
cam = new PerspectiveCamera(67, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
cam.position.set(10f, 10f, 10f);
cam.lookAt(0,0,0);
cam.near = 1f;
cam.far = 300f;
cam.update();
assets = new AssetManager();
//load assets
...
loading = true;
camController = new CameraInputController(cam);
camController.forwardTarget = true;
Gdx.input.setInputProcessor(camController);
}
private void doneLoading() {
//load models and add them to instances
loading = false
}
#Override
public void render() {
if (loading && assets.update())
doneLoading();
camController.update();
Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
modelBatch.begin(cam);
modelBatch.render(instances, environment);
modelBatch.end();
}
I'm using the spring tool suite 3.5.1 as IDE and libgdx 1.0.1

Dont use a CameraInputController, but instead implement InputProcessor and use that class in the call to Gdx.input.setInputProcessor.
For example:
public class MyGdxGame extends ApplicationAdapter implements InputProcessor {
And in the create method:
Gdx.input.setInputProcessor(this);
You'll have to implement all methods as shown in this link, except for the touchDown and touchDragged method which require additional code:
private int dragX, dragY;
#Override
public boolean touchDown (int x, int y, int pointer, int button) {
dragX = x;
dragY = y;
return true;
}
#Override
public boolean touchDragged (int x, int y, int pointer) {
float dX = (float)(x-dragX)/(float)Gdx.graphics.getWidth();
float dY = (float)(dragY-y)/(float)Gdx.graphics.getHeight();
dragX = x;
dragY = y;
cam.position.add(dX * 10f, dY * 10f, 0f);
cam.update();
return true;
}
Here the dX and dY values is the amount that user has dragged on the screen within the range between -1f and +1f. E.g. for dX a value of 0.5f means that the user dragged half the screen size to the right. Note that these are delta values since the last time the method was called. The method is likely to be called many times per drag operation. Therefor, the dX and dY will be small values.
The call to cam.position.add(...) will actually move the camera and the call to cam.update(); will recalculate the values needed for rendering. I've used a multiplier of 10f for both the X and Y translation of the camera. This means that if the user fully drags from the left edge to the right edge of the screen, that the camera will move a total amount of 10 units to the right. You can adjust the value as needed.
Note that this moves the camera on XY plane. If you need to move on e.g. the XZ plane, you need to adjust the call the cam.position.add(...) accordingly. Also, this doesn't change the direction of the camera. If you want to move the camera, while looking at the same location, you'll need to add cam.lookAt(0,0,0); just before cam.update();.

libGDX Moving orthographic camera down a texture

I've been trying to create a game where there's a person falling. The size of my background texture is 480x3200, and I'm trying to create the game so that the camera keeps the person in the middle of the screen while falling down, and then stops at the bottom. But I can't get my background is extend beyond the screen it starts in, and then be able to see the rest of the image.
All of my code does right now is scale down the 480x3200 image down to fit onto my current screen (which I set to be 480x800), and then as the person falls, the background doesn't change.
Here's my WorldRenderer class where I've tried to do different things but every time, I can never get the person to see a different part of the image when it starts moving down.
public WorldRenderer(SpriteBatch b, World w) {
this.world = w;
this.cam = new OrthographicCamera(CAMERA_WIDTH, CAMERA_HEIGHT);
this.cam.position.set(CAMERA_WIDTH / 2, Person.position.y,0);
this.cam.setToOrtho(false, CAMERA_WIDTH, CAMERA_HEIGHT);
this.cam.update();
spriteBatch = b;
loadTextures();
}
public void render(float delta) {
person = world.getPerson();
moveCamera();
cam.update();
spriteBatch.setProjectionMatrix(cam.combined);
spriteBatch.disableBlending();
spriteBatch.begin();
renderBackground();
spriteBatch.end();
spriteBatch.enableBlending();
spriteBatch.begin();
renderObjects();
spriteBatch.end();
}
private void moveCamera() {
cam.position.set(cam.position.x, Person.position.y, 0);
cam.update();
}
private void renderObjects() {
renderPerson();
renderBlocks();
renderPlatforms();
}
private void renderBackground() {
spriteBatch.draw(backgroundTexture, cam.position.x - CAMERA_WIDTH / 2, cam.position.y - CAMERA_HEIGHT / 2, CAMERA_WIDTH, CAMERA_HEIGHT);
}
}
Does anyone have any suggestions?
Edit:
Thanks, I changed the draw in renderBackground to
spriteBatch.draw(backgroundTexture,0,0, CAMERA_WIDTH, CAMERA_HEIGHT * 4); and it works now.

spriteBatch.draw(backgroundTexture, cam.position.x - CAMERA_WIDTH / 2,
cam.position.y - CAMERA_HEIGHT / 2, CAMERA_WIDTH, CAMERA_HEIGHT);
This code is drawing the background image relative to the camera's position. That's why changing the camera's position has no effect on the background image's position. Change it to something like this:
spriteBatch.draw(backgroundTexture,0,0);

Or u can simply use ParrallaxBackground and ParrallaxLayer class
This way u dont have to manage ur camera
Its done in an optimized manner in the mentioned class.