We Keep Coding

Rotating text not the position of the text in processing

i am trying to make a clock and have all the numbers in the correct place but they are all rotated e.g. 6 is upside down whereas 12 is correct. is there anyway to rotate just the text not the position of the text?
my code is
push();
textSize(48);
for (int i = 1; i < 13; i++) {
int offset = -15;
if (str(i).length() == 2) {
offset -= 14.5;
}
rotate(radians(30));
text(i, offset, -350);
//println(i*30);
}
pop();

Without seeing the code my hunch is you use rotate(), but probably you don't use pushMatrix()/popMatrix(); to isolate the coordinate space to local one that can be temporarily rotated.
I recommend reading the 2D Transformations tutorial
As the tutorial mentions, the order of transformations matters:
size(300, 300);
background(0);
stroke(255);
// center align text
textAlign(CENTER);
// global translation to center
translate(width / 2, height / 2);
int hours = 12;
// an angle section (360/12 = 30 degrees), but in radians
float angleIncrement = TWO_PI / hours;
// distance from center
float radius = 100;
for(int i = 0 ; i < hours; i++){
// calculate the angle for each hour, subtracting a bit because angle 0 points to the right, not top (12 o'clock)
// remember this offset: it may come in handy when drawing clock handles ;)
float angle = (angleIncrement * i) - (QUARTER_PI * 4/3);
// isolate coordinate space
pushMatrix();
// rotate from global center by each hour angle
rotate(angle);
// translate from locally rotated center based on radius
translate(radius, 0);
// undo local rotation so text is straight
rotate(-angle);
// render text
text(i+1,0,0);
// exit local coordinate system, back to global coordinates after this
popMatrix();
}
Here is the same example with a helper function to help visualise the coordinate systems:
void setup() {
size(300, 300);
background(0);
stroke(255);
// center align text
textAlign(CENTER);
drawCoordinateSystem("1.original cooordinates",60, 255);
// global translation to center
translate(width / 2, height / 2);
drawCoordinateSystem("2.global center",60, 64);
int hours = 12;
// an angle section (360/12 = 30 degrees), but in radians
float angleIncrement = TWO_PI / hours;
// distance from center
float radius = 100;
for (int i = 0; i < hours; i++) {
// calculate the angle for each hour, subtracting a bit because angle 0 points to the right, not top (12 o'clock)
// remember this offset: it may come in handy when drawing clock handles ;)
float angle = (angleIncrement * i) - (QUARTER_PI * 4/3);
// isolate coordinate space
pushMatrix();
// rotate from global center by each hour angle
rotate(angle);
if(i == 0){
drawCoordinateSystem("3.local+rotation",60, 127);
}
// translate from locally rotated center based on radius
translate(radius, 0);
if(i == 0){
drawCoordinateSystem("4.local+rot.+\ntrans.",60, 192);
}
// undo local rotation so text is straight
rotate(-angle);
if(i == 0){
drawCoordinateSystem("\n5.prev.\n-rot.",60, 255);
}
// render text
text(i+1, 0, 0);
// exit local coordinate system, back to global coordinates after this
popMatrix();
}
}
void drawCoordinateSystem(String label, float size, float alpha){
pushStyle();
textAlign(LEFT);
strokeWeight(3);
// x axis
stroke(192, 0, 0, alpha);
line(0, 0, size, 0);
// y axis
stroke(0, 192, 0, alpha);
line(0, 0, 0, size);
text(label, 10, 15);
popStyle();
}
Note that the indent is not required for pushMatrix()/popMatrix(), it's more of a visual cue to aid when you read code to remember coordinate system nesting.
This is over the top and you won't need the code bellow, but hopefully it's a fun visualisation:
PImage screenshot;
String[] labels = {"1.original cooordinates","2.global center\ntranslate(width / 2, height / 2)",
"3.local+rotation\npushMatrix();\nrotate(angle)",
"4.local+rot.+\ntrans.\ntranslate(radius, 0)","5.previous-rot.\nrotate(-angle)",""};
PMatrix2D[] systems = new PMatrix2D[labels.length];
PMatrix2D lerpMatrix = new PMatrix2D();
void setup() {
size(300, 300);
background(0);
stroke(255);
// center align text
textAlign(CENTER);
// "1.original cooordinates"
systems[0] = new PMatrix2D();
// global translation to center
translate(width / 2, height / 2);
// "2.global center"
systems[1] = systems[0].get();
systems[1].translate(width / 2, height / 2);
int hours = 12;
// an angle section (360/12 = 30 degrees), but in radians
float angleIncrement = TWO_PI / hours;
// distance from center
float radius = 100;
for (int i = 0; i < hours; i++) {
// calculate the angle for each hour, subtracting a bit because angle 0 points to the right, not top (12 o'clock)
// remember this offset: it may come in handy when drawing clock handles ;)
float angle = (angleIncrement * i) - (QUARTER_PI * 4/3);
// isolate coordinate space
pushMatrix();
// rotate from global center by each hour angle
rotate(angle);
if(i == 0){
// "3.local+rotation"
PMatrix2D local = new PMatrix2D();
local.apply(systems[1]);
local.rotate(angle);
systems[2] = local.get();
}
// translate from locally rotated center based on radius
translate(radius, 0);
if(i == 0){
// "4.local+rot.+\ntrans."
systems[3] = systems[2].get();
systems[3].translate(radius,0);
}
// undo local rotation so text is straight
rotate(-angle);
if(i == 0){
// "\n5.prev.\n-rot."
systems[4] = systems[3].get();
systems[4].rotate(-angle);
systems[5] = systems[4];
}
// render text
text(i+1, 0, 0);
// exit local coordinate system, back to global coordinates after this
popMatrix();
}
screenshot = get();
}
void draw(){
image(screenshot,0, 0);
animateCoordinateSystems();
text("mouse mouse on X axis", width / 2, height - 12);
}
void animateCoordinateSystems(){
float mapping = map(constrain(mouseX, 0, width), 0, width, 0.0, 1.0);
float globalT = (float)(labels.length -1) * mapping;
int index = (int)globalT;
float localT = globalT - index;
lerpMatrix(systems[index], systems[index+1], localT, lerpMatrix);
pushMatrix();
applyMatrix(lerpMatrix);
drawCoordinateSystem(labels[index] + (labels[index+1].length() > 0 ? "\ntransitions to\n" + labels[index+1] : ""),60, 255);
popMatrix();
}
void lerpMatrix(PMatrix2D from, PMatrix2D to, float t, PMatrix2D result){
result.m00 = lerp(from.m00, to.m00, t);
result.m01 = lerp(from.m01, to.m01, t);
result.m02 = lerp(from.m02, to.m02, t);
result.m10 = lerp(from.m10, to.m10, t);
result.m11 = lerp(from.m11, to.m11, t);
result.m12 = lerp(from.m12, to.m12, t);
}
void drawCoordinateSystem(String label, float size, float alpha){
pushStyle();
textAlign(LEFT);
strokeWeight(3);
// x axis
stroke(192, 0, 0, alpha);
line(0, 0, size, 0);
// y axis
stroke(0, 192, 0, alpha);
line(0, 0, 0, size);
text(label, 10, 15);
popStyle();
}

Multiple cameras and ScissorStack?

I'm currently trying to make a game, and I'm still novice with using cameras, and I'm thinking that two OrthographicCameras may be necessary, but I'm not sure if that's the most efficient way, or even how to do so.
Basically, I want this to be the layout for it:
The Main Area is where the main stuff is, which is a Server Interface. The Game Level is where the actual game part is in. I am currently using a ScissorStack to cut the region, but with this demo, results make me question how to do this:
public class TestScissorStackAndCamera extends ApplicationAdapter {
private SpriteBatch batch;
private OrthographicCamera camera;
private Sprite sprite;
private int width, height;
#Override
public void create() {
Gdx.gl.glClearColor(0, 0, 0, 0);
width = Gdx.graphics.getWidth();
height = Gdx.graphics.getHeight();
batch = new SpriteBatch();
camera = new OrthographicCamera(width, height);
camera.position.set(width / 2, height / 2, 0);
camera.update();
createSprite();
}
private void createSprite() {
Pixmap map = new Pixmap(width, height, Format.RGBA8888);
map.setColor(Color.RED);
map.fillRectangle(0, 0, width, height);
map.setColor(Color.BLUE);
map.drawLine(width / 2, 0, width / 2, height);
map.drawLine(0, height / 2, width, height / 2);
Texture texture = new Texture(map);
sprite = new Sprite(texture);
}
#Override
public void render() {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined); // The Question!
batch.begin();
{
Rectangle scissors = new Rectangle();
Rectangle area = new Rectangle(10, 10, width - 20, height - 20);
ScissorStack.calculateScissors(camera, batch.getTransformMatrix(), area, scissors);
ScissorStack.pushScissors(scissors);
batch.draw(sprite, 0, 0);
batch.flush();
ScissorStack.popScissors();
}
batch.end();
}
public static void main(String[] args) {
LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
config.title = "ScissorStack & Camera Test";
config.resizable = false;
new LwjglApplication(new TestScissorStackAndCamera(), config);
}
}
Questioning batch.setProjectionMatrix(camera.combined)
I marked a line in the code with a comment, The Question!, which is what is affecting the results. If I don't have it, using the camera.translate(...) method, the image is drawn at (0, 0) but what it does is it moves what part is viewed. If I do have that line, when I use the camera.translate(...) method, the image is drawn respectively to the position of the camera.
In respect to the game that I'm currently developing, it behaves awkwardly without the projectionMatrix not being set, but when I do set it, it messes up the positioning of the rest of the game. I even added some testing features, and it's not rendering inside of the correct ScissorStack
How could I go about setting up two cameras, or what could I do to set up what I'm trying to correctly and efficiently?
With my actual game (not the mock-up) this is what it is doing. It should be rendering inside of the red lines, but it's not:
If you'd like to see my current code for my GameLevel that is handling the ScissorStack and OrthographicCamera:
public GameLevel(int x, int y, int displayWidth, int displayHeight) {
this.x = x; // x = 10
this.y = y; // y = 10
this.displayWidth = displayWidth; // displayWidth = Gdx.graphics.getWidth() - x - 10
this.displayHeight = displayHeight; // displayHeight = Gdx.graphics.getHeight() - y - 120
camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
camera.position.set(displayWidth / 2, displayHeight / 2, 0);
// FBLAGame.batch.setProjectionMatrix(camera.combined);
camera.update();
init();
}
...
#Override
public void render() {
Rectangle area = new Rectangle(x, y, displayWidth, displayHeight);
Rectangle scissor = new Rectangle();
Matrix4 matrix = FBLAGame.batch.getTransformMatrix();
ScissorStack.calculateScissors(camera, matrix, area, scissor);
ScissorStack.pushScissors(scissor);
renderLevel();
FBLAGame.batch.flush();
ScissorStack.popScissors();
Pixmap map = new Pixmap(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), Format.RGBA8888);
map.setColor(Color.RED);
map.drawRectangle((int) area.x, (int) area.y, (int) area.width, (int) area.height);
Texture t = new Texture(map);
map.dispose();
FBLAGame.batch.draw(t, 0, 0);
}

libgdx won't draw sprite or animation

it seems as though i cannot get the draw method to work???
it seems as though the bullet.draw(batcher)
does not work and i cannot understand why as the bullet is a sprite.
i have made a Sprite[] and added them as animation.
could that be it?
i tried
batcher.draw(AssetLoader.bulletAnimation.getKeyFrame(runTime), bullet.getX(), bullet.getY(), bullet.getOriginX() / 2, bullet.getOriginY() / 2, bullet.getWidth(), bullet.getHeight(), 1, 1, bullet.getRotation());
but that dont work, the only way it draws is this
batcher.draw(AssetLoader.bulletAnimation.getKeyFrame(runTime), bullet.getX(), bullet.getY());
below is the code.
// this is in a Asset Class
texture = new Texture(Gdx.files.internal("SpriteN1.png"));
texture.setFilter(TextureFilter.Nearest, TextureFilter.Nearest);
bullet1 = new Sprite(texture, 380, 350, 45, 20);
bullet1.flip(false, true);
bullet2 = new Sprite(texture, 425, 350, 45, 20);
bullet2.flip(false, true);
Sprite[] bullets = { bullet1, bullet2 };
bulletAnimation = new Animation(0.06f, bullets);
bulletAnimation.setPlayMode(Animation.PlayMode.LOOP);
// this is the GameRender class
public class GameRender() {
private Bullet bullet;
private Ball ball;
public GameRenderer(GameWorld world) {
myWorld = world;
cam = new OrthographicCamera();
cam.setToOrtho(true, 480, 320);
batcher = new SpriteBatch();
// Attach batcher to camera
batcher.setProjectionMatrix(cam.combined);
shapeRenderer = new ShapeRenderer();
shapeRenderer.setProjectionMatrix(cam.combined);
// Call helper methods to initialize instance variables
initGameObjects();
initAssets();
}
private void initGameObjects() {
ball = GameWorld.getBall();
bullet = myWorld.getBullet();
scroller = myWorld.getScroller();
}
private void initAssets() {
ballAnimation = AssetLoader.ballAnimation;
bulletAnimation = AssetLoader.bulletAnimation;
}
public void render(float runTime) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL30.GL_COLOR_BUFFER_BIT);
batcher.begin();
// Disable transparency
// This is good for performance when drawing images that do not require
// transparency.
batcher.disableBlending();
// The ball needs transparency, so we enable that again.
batcher.enableBlending();
batcher.draw(AssetLoader.ballAnimation.getKeyFrame(runTime), ball.getX(), ball.getY(), ball.getWidth(), ball.getHeight());
batcher.draw(AssetLoader.bulletAnimation.getKeyFrame(runTime), bullet.getX(), bullet.getY());
// End SpriteBatch
batcher.end();
}
}
// this is the gameworld class
public class GameWorld {
public static Ball ball;
private Bullet bullet;
private ScrollHandler scroller;
public GameWorld() {
ball = new Ball(480, 273, 32, 32);
bullet = new Bullet(10, 10);
scroller = new ScrollHandler(0);
}
public void update(float delta) {
ball.update(delta);
bullet.update(delta);
scroller.update(delta);
}
public static Ball getBall() {
return ball;
}
public ScrollHandler getScroller() {
return scroller;
}
public Bullet getBullet() {
return bullet;
}
}
is there anyway so make the sprite work?
i am adding the bullet class to see if there could be something wrong there.
public class Bullet extends Sprite {
public static final float BULLET_HOMING = 6000;
public static final float BULLET_SPEED = 300;
private Vector2 velocity;
private float lifetime;
public Bullet(float x, float y) {
velocity = new Vector2(0, 0);
setPosition(x, y);
}
public void update(float delta) {
float targetX = GameWorld.getBall().getX();
float targetY = GameWorld.getBall().getY();
float dx = targetX - getX();
float dy = targetY - getY();
float distToTarget = (float) Math.sqrt(dx * dx + dy * dy);
dx /= distToTarget;
dy /= distToTarget;
dx *= BULLET_HOMING;
dy *= BULLET_HOMING;
velocity.x += dx * delta;
velocity.y += dy * delta;
float vMag = (float) Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y);
velocity.x /= vMag;
velocity.y /= vMag;
velocity.x *= BULLET_SPEED;
velocity.y *= BULLET_SPEED;
Vector2 v = velocity.cpy().scl(delta);
setPosition(getX() + v.x, getY() + v.y);
setOriginCenter();
setRotation(velocity.angle());
lifetime += delta;
setRegion(AssetLoader.bulletAnimation.getKeyFrame(lifetime));
}
}

Your keyframes are kept in an array called bullets, but when you call the Animation constructor you pass something called 'aims' as the second argument. You should try instead passing 'bullets', as in:
bulletAnimation = new Animation(0.06f,bullets);
You shouldn't have a problem with using a Sprite[] as the Sprite class extends TextureRegion I think.
------ OP fixed the typo and still didn't work------
I think the problem will be with the origin arguments of the batcher.draw()call. The position of the Sprite is relative to the origin of the SpriteBatch's co-ordinate system, and the origin of the Sprite is relative to this position (i.e. the bottom-left corner of the Sprite rectangle). To get an origin in the center of the Sprite, i think originX should be width/2 and originY should be height/2. So try:
batcher.draw(AssetLoader.bulletAnimation.getKeyFrame(runTime),bullet.getX(),bullet.getY(), bullet.getWidth()/2,bullet.getHeight()/2,bullet.getWidth(),bullet.getHeight(),1,1,bullet.getRotation());
Because if your getOriginX/Y methods return origins relative to the SpriteBatcher's co-ordinate system(the screen co-ordinates), then your Sprites could be rotating and scaling around some ridiculous origin and end up being drawn off-screen.
I hope I'm right and it's problem solved.
----- OP posted further code, the 'bullet' class-----
When you call bullet.getWidth() and bullet.getHeight() in your draw method, these will return 0.0f because you haven't specified values for them. Remember the Sprites you are actually drawing are bullet1 and bullet2 from your AssetLoader class. Try setting bullet's width and height with:
setSize(AssetLoader.bullet1.getWidth(), AssetLoader.bullet1.getHeight());
in your bullet constructor.
I don't think you need to use setRegion() in your bullet class either, again, because the Sprites you're actually drawing are bullet1 and 2.
fingers crossed.

try and change the update method to this
Vector2 target = new Vector2(GameWorld.getBall().getX(), GameWorld.getBall().getY());
target.sub(getX(), getY());
target.nor().scl(BULLET_HOMING);
velocity.add(target.scl(delta));
velocity.nor().scl(BULLET_SPEED);
Vector2 v = velocity.cpy().scl(delta);
translate(v.x, v.y);
setOriginCenter();
setRotation(velocity.angle());
that should clean your code a little

Why does my libgdx game progressively slow down?

I have a game that generates bodies forever until the game ends. For some reason, the game will be nice and smooth at first, but then it will start to slow down and become choppy as you keep going while playing. Then, after you die and restart, the game repeats this process. I dispose all I can. Here is what pushes the player body:
//in main game class
private Vector2 movement = new Vector2();
sSpeed = 200000;
switch(button)
{
case Buttons.LEFT:
movement.y = sSpeed * 1.2f;
movement.x = sSpeed * 1.5f;
table.clear();
}
return false;
}
//in Level Generator class
public LevelGenerator(BodyDef bDef, float topEdge, float bottomEdge, float minGap, float maxGap, float w, float h, Sprite s, World world) {
this.bDef = bDef;
this.topEdge = topEdge;
this.bottomEdge = bottomEdge;
this.minGap = minGap;
this.maxGap = maxGap;
width = w;
height = h;
this.s = s;
this.world = world;
}
public void generate(float rightEdge) {
if(x + MathUtils.random(minGap, maxGap) > rightEdge) {
return;
}
x = rightEdge;
float y = MathUtils.random(topEdge - height * 2f, bottomEdge + height * 2f);
bDef = new BodyDef();
bDef.type = BodyType.DynamicBody;
PolygonShape ast = new PolygonShape();
ast.setAsBox(width, height, new Vector2(x + width, y + height), 0);
item = world.createBody(bDef);
Fixture fix = item.createFixture(ast, 0);
}
//in main game class
generator.generate(camera.position.x + camera.viewportWidth / 2 + 10);
generator = new LevelGenerator(ballD3, 120, -125, 58, 63, 12.5f, 12.5f, aSprite1 , world);

Sadly the best way to avoid this kind of memory leak is to track the objects yourself.
I've gotten around this problem by creating an array called bodies that holds all the bodies. Then you run a for loop something like this (sorry, JavaScript:)
_.each(bodies,function(body){
var pos = body.GetPosition();
if (pos.y > 500) world.destroyBody(body);
});

Box2d libgdx, a bit confused about the pixels to meters stuff

So I understand the concept. The idea is that box2d more or less works in meters, so you need to do a conversion from pixels to it. Makes sense. I was following the tutorial/intro to box2d here. It mentions to do the conversion and gives you some example amounts to use. Now, that's all well and good, but I find when I'm using such techniques, the debugger box doesn't seem to render where they should. The collision does work as expected however.
In my GameScreen class, here's how I initialize the ground:
ground = new BodyDef();
// set the position half way up the ground
ground.position.set(0,16 * GameScreen.WORLD_TO_BOX);
groundBody = world.createBody(ground);
groundShape = new PolygonShape();
// make the height 16px so it doubles to 32
groundShape.setAsBox(Gdx.graphics.getWidth() * GameScreen.WORLD_TO_BOX, 16.0f * GameScreen.WORLD_TO_BOX);
groundBody.createFixture(groundShape, 0.0f);
My render method in that screen is like so:
public void render(float delta) {
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
camera.update();
stateTime += Gdx.graphics.getDeltaTime();
batch.begin();
batch.draw(background, 0, Gdx.graphics.getHeight() - 512, 512, 512);
batch.draw(trailingBackground, 512, Gdx.graphics.getHeight() - 512);
int heightToCover = Gdx.graphics.getHeight() - 512;
int widthToCover = Gdx.graphics.getWidth();
for(int w = 0; w < widthToCover; w += 32) {
for(int h = 0; h < heightToCover; h += 32) {
batch.draw(lightBackgroundTile, w, h, 32, 32);
}
}
player.update();
player.render(stateTime, batch);
batch.end();
levels.get(currentLevel).render(camera);
// physics updates
world.step(1/60f, 6, 2);
debugRenderer.render(world, camera.combined);
}
Here's the constructor of the player class, so you can see how im setting up its collision box2d objects. I also pasted the update method which is called in the above render loop to adjust the sprites position.
public Player(int x, int y, World world) {
super();
playerTexture = new Texture(Gdx.files.internal("assets/hero.png"));
init(x, y, 128, 128, playerTexture, false, world);
bodyDef = new BodyDef();
bodyDef.type = BodyType.DynamicBody;
bodyDef.position.set(x * GameScreen.WORLD_TO_BOX, y * GameScreen.WORLD_TO_BOX);
body = getWorld().createBody(bodyDef);
collisionBox = new PolygonShape();
collisionBox.setAsBox(32 * GameScreen.WORLD_TO_BOX, 64 * GameScreen.WORLD_TO_BOX, new Vector2(64 * GameScreen.WORLD_TO_BOX, 64 * GameScreen.WORLD_TO_BOX), 0.0f);
FixtureDef fixtureDef = new FixtureDef();
fixtureDef.shape = collisionBox;
fixtureDef.density = 10f;
fixtureDef.friction = 0.4f;
fixtureDef.restitution = 0f;
body.createFixture(fixtureDef);
collisionBox.dispose();
addFrame(0, 0, 128, 128);
}
public void update() {
this.setX((int) ((body.getPosition().x) * GameScreen.BOX_TO_WORLD));
this.setY((int) ((body.getPosition().y) * GameScreen.BOX_TO_WORLD));
}
Now, when I remove the multiplication of those static floats in the various calculations, sizes, etc, the collision remains correct and the debugger box shows up. However passing the raw pixels to box2d feels wrong. Is there something I'm missing here as to why the debugging boxes don't show up as is?

I do like you are doing but might be a little different.
Might be a little overkill but here's my jucl port
jucl/Android - pastebin
Then I just have utility classes ie:
public class Pixel {
public static float toMeter(float pixels) {
return (float)LengthConversions.Pixel2SIf(pixels);
}
public static Vector2 toMeter(Vector2 vecPixel) {
return new Vector2(Pixel.toMeter(vecPixel.x), Pixel.toMeter(vecPixel.y));
}
}
public class Meter {
public static final float METERS_PER_PIXEL = (float) LengthConversions.SI_PIXEL;
public static float toPixel(float meter) {
return (float)LengthConversions.SI2Pixelf(meter);
}
}
In my initialize:
int graphicsWidth = Gdx.graphics.getWidth();
int graphicsHeight = Gdx.graphics.getHeight();
CAMERA_WIDTH_METERS = Pixel.toMeter(graphicsWidth);
CAMERA_HEIGHT_METERS = Pixel.toMeter(graphicsHeight);
Then in my game classes (like your Player class). In my case it was a pinball game so i have Flipper, Ball, Bumper, etc. I have a #Override render() method where I sync up the sprite with the physics body.
Here's an example file..sry it's messy but might be helpful.
Pinball Engine Class file