LibGDX SpriteBatch draw method producing results that make no sense - opengl

Question

I've read the docs: https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#draw-com.badlogic.gdx.graphics.Texture-float-float-float-float-float-float-float-float-float-int-int-int-int-boolean-boolean-
I thought I understood the behavior of the x, y, originX, and originY parameters, but apparently not. I am playing around with a simple tutorial where a SpriteBatch is drawn onto the screen. The game is using OrthographicCamera and FitViewport. The following code draws the texture in the middle of the screen
float halfW = width * 0.5f;
float halfH = height * 0.5f;
batch.draw(cavemanTexture, // Texture
-halfW, -halfH, // x, y
halfW, halfH, // originX, originY
width, height, // width, height
WORLD_TO_SCREEN, WORLD_TO_SCREEN, // scaleX, scaleY
0.0f, // rotation
0, 0, // srcX, srcY
width, height, // srcWidth, srcHeight
false, false); // flipX, flipY
I guess I do not understand what is meant when the docs say "offset" in the sentence, "The rectangle is offset by originX, originY relative to the origin."
To me if you wanted to put the texture in the center of the screen you could simply do the following:
batch.draw(cavemanTexture, // Texture
-halfW, -halfH, // x, y
0, 0, // originX, originY
width, height, // width, height
WORLD_TO_SCREEN, WORLD_TO_SCREEN, // scaleX, scaleY
0.0f, // rotation
0, 0, // srcX, srcY
width, height, // srcWidth, srcHeight
false, false); // flipX, flipY
Because that would move the bottom left corner down and to the left, enough to center the texture. But if I try that, then the image actually disappears off screen.
Here is the full original code:
package com.cookbook.samples;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
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.SpriteBatch;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.Viewport;
public class SpriteBatchSample extends GdxSample {
private static final Color BACKGROUND_COLOR = new Color(0.39f, 0.58f, 0.92f, 1.0f);
private static final float WORLD_TO_SCREEN = 1.0f / 100.0f;
private static final float SCENE_WIDTH = 12.80f;
private static final float SCENE_HEIGHT = 7.20f;
private OrthographicCamera camera;
private Viewport viewport;
private SpriteBatch batch;
private Texture cavemanTexture;
private Color oldColor;
#Override
public void create() {
camera = new OrthographicCamera();
viewport = new FitViewport(SCENE_WIDTH, SCENE_HEIGHT, camera);
batch = new SpriteBatch();
oldColor = new Color();
cavemanTexture = new Texture(Gdx.files.internal("data/caveman.png"));
cavemanTexture.setFilter(TextureFilter.Nearest, TextureFilter.Nearest);
}
#Override
public void dispose() {
batch.dispose();
cavemanTexture.dispose();
}
#Override
public void render() {
Gdx.gl.glClearColor(BACKGROUND_COLOR.r,
BACKGROUND_COLOR.g,
BACKGROUND_COLOR.b,
BACKGROUND_COLOR.a);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
int width = cavemanTexture.getWidth();
int height = cavemanTexture.getHeight();
float originX = width * 0.5f;
float originY = height * 0.5f;
// Render caveman centered on the screen
batch.draw(cavemanTexture, // Texture
-originX, -originY, // x, y
originX, originY, // originX, originY
width, height, // width, height
WORLD_TO_SCREEN, WORLD_TO_SCREEN, // scaleX, scaleY
0.0f, // rotation
0, 0, // srcX, srcY
width, height, // srcWidth, srcHeight
false, false); // flipX, flipY
// Render caveman on the top left corner at 2x size
batch.draw(cavemanTexture,
-4.0f - originX, 1.5f - originY,
originX, originY,
width, height,
WORLD_TO_SCREEN * 2.0f, WORLD_TO_SCREEN * 2.0f,
0.0f,
0, 0,
width, height,
false, false);
// Render caveman on the bottom left corner at 0.5x size
batch.draw(cavemanTexture,
-4.0f - originX, -1.5f - originY,
originX, originY,
width, height,
WORLD_TO_SCREEN * 0.5f, WORLD_TO_SCREEN * 0.5f,
0.0f,
0, 0,
width, height,
false, false);
// Render caveman on top right corner at 2x size and rotated 45 degrees
batch.draw(cavemanTexture,
4.0f - originX, 1.5f - originY,
originX, originY,
width, height,
WORLD_TO_SCREEN * 2.0f, WORLD_TO_SCREEN * 2.0f,
45.0f,
0, 0,
width, height,
false, false);
// Render caveman on bottom right corner at 1.5x size and flipped around X and Y
batch.draw(cavemanTexture,
4.0f - originX, -1.5f - originY,
originX, originY,
width, height,
WORLD_TO_SCREEN * 1.5f, WORLD_TO_SCREEN * 1.5f,
0.0f,
0, 0,
cavemanTexture.getWidth(), height,
true, true);
// Save batch color
oldColor.set(batch.getColor());
// Render blue caveman
batch.setColor(Color.CYAN);
batch.draw(cavemanTexture,
-2.0f - originX, -originY,
originX, originY,
width, height,
WORLD_TO_SCREEN, WORLD_TO_SCREEN,
0.0f,
0, 0,
width, height,
false, false);
// Render red caveman
batch.setColor(Color.RED);
batch.draw(cavemanTexture,
-originX, -originY + 2.0f,
originX, originY,
width, height,
WORLD_TO_SCREEN, WORLD_TO_SCREEN,
0.0f,
0, 0,
width, height,
false, false);
// Render green caveman
batch.setColor(Color.GREEN);
batch.draw(cavemanTexture,
2.0f - originX, -originY,
originX, originY,
width, height,
WORLD_TO_SCREEN, WORLD_TO_SCREEN,
0.0f,
0, 0,
width, height,
false, false);
// Render yellow caveman
batch.setColor(Color.YELLOW);
batch.draw(cavemanTexture,
-originX, -originY - 2.0f,
originX, originY,
width, height,
WORLD_TO_SCREEN, WORLD_TO_SCREEN,
0.0f,
0, 0,
width, height,
false, false);
batch.setColor(oldColor);
batch.end();
}
#Override
public void resize(int width, int height) {
viewport.update(width, height, false);
}
}

Answer 1

The name of your scale factor (WORLD_TO_SCREEN) makes me suspicious that you misunderstand how Viewports work. The whole point of using a Viewport at all is so you don't have to think about the screen size when you are placing stuff in your game world. The size you pass to the Viewport constructor is how much of the game world you want to be visible. When you draw something using a Viewport's camera, its size should not be related to screen dimensions, because the Viewport has already abstracted that away. You should be drawing it at the size it should be in terms of world units.
If the origin is left at (0, 0), the texture is drawn with its bottom left corner at (x, y). The origin is an offset from the bottom corner, about which the scale and rotation are applied. If you used a scale of 1 and rotation of 0, the origin x and y would have no effect whatsoever.
If you are not planning to draw sprites with rotation, I would avoid the complicated draw methods and just use SpriteBatch.draw(textureRegion, x, y, width, height). In a typical game, you will have a TextureAtlas of TextureRegions, so you'll never be passing a Texture object to SpriteBatch.
You will either want to think of your world in meter (or similar) units, or if you're doing retro pixel art you might want to use retro pixel (not screen pixel) units. So your caveman might be 1m tall and you want to see a 16m x 9m tall view of your game world. In this case, you would instantiate your viewport with FitViewport(16f, 9f). And when you drew your caveman, you'd draw it with something like
batch.draw(cavemanRegion, x, y, 1f / cavemanRegion.height * cavemanRegion.Width, 1f)
where x and y are where the bottom left corner should be in the game world.

Answer 2

Here the object is scaled and rotated around x,y
public class Enemy {
static final float scale = .4f;
int type_ship;
int x = 0;
int y = 0;
int angle = 0;
Rectangle rect;
TextureRegion region;
public Enemy(int type_ship, int x, int y) {
this.type_ship = type_ship;
this.x = x;
this.y = y;
rect = SpriteMaps.get_sprite_rect(SpriteMaps.ENEMY_RED);
region = new TextureRegion(Textures.getShipsTexture(),
(int)rect.x, (int)rect.y, (int)rect.width, (int)rect.height);
}
public void update() {
}
public void draw(SpriteBatch batch) {
float width = rect.width;
float height = rect.height;
float draw_x = this.x - width / 2;
float draw_y = this.y - height / 2;
batch.draw(region, draw_x, draw_y, width / 2, height / 2,
rect.width, rect.height, scale, scale, angle);
}
}