I'm using the Processing language to do a little game, but I'm having trouble with images and rotation. My sprite displays fine if I apply no rotation to it, but it disappears completely if it is rotated. Here's the rotation code:
void display(boolean alternate) {
pushMatrix();
if(!isHead && !isTail && alternate) rotate(radians(180));
rotate(radians(90*direction));
image(snake, x, y, linkSize, linkSize);
popMatrix();
}
When direction is 0, or alternate is true and direction is 2, then the image displays. Otherwise, no image is displayed. I'm not sure if it matters or not, but snake is a .png image with an alpha transparency. The declaration for snake is snake = loadImage("SnakeLink.png");.
You are actually rotating the image from it's origin (top left corner), so it disappears from the screen.
You have to translate to the center of the image, rotate, translate back to it's origin and then display it.
translate(image.width/2, image.height/2);
rotate(radians);
translate(-image.width/2, -image.height/2);
Related
I'm trying to draw a bounding box that follows the mouse and is positioned beneath it but the rectangle doesn't move with it, it moves too fast or too slow and not at the right place.
I've tried getting the mouse coordinates and passing them in to a rectangle, then I draw a rectangle at its position so I can see where it is.
mouseRect is a rectangle drawn at the mouse's position:
mouseRect.set((float)Gdx.input.getX(), (float)Gdx.input.getY(), 32, 32);
This is my render method that is meant to draw a rectangle at mouseRect's position:
shapeRenderer.setProjectionMatrix(cam.combined);
shapeRenderer.begin(ShapeType.Filled);
shapeRenderer.setColor(Color.BLUE);
shapeRenderer.rect(mouseRect.x, mouseRect.y, mouseRect.width, mouseRect.height);
shapeRenderer.end();
The box does move when the mouse moves but it's far too fast and it's not positioned under the mouse as should be expected (there's a giant offset and seems to be inverted but when I make it negative it still doesn't work).
I think you should read about coordinate systems. The mouse system is y-down and screen dependent, while (if I remember correctly), the camera is y-up, centered, and uses the viewport size.
I would suggest using a Stage with a listener for mouseMoved or touchDragged events, which have stage coordinates. Add an actor drawing a rectangle to the stage. You could then move the actor accordingly. You wouldn't have to handle coordinate system changes.
It could look like this:
Actor rectangleActor = new RectangleActor();
stage.addActor(rectangleActor);
stage.addListener(new InputListener() {
public boolean mouseMoved(InputEvent event, float x, float y) {
rectangleActor.setPosition(event.getStageX(), event.getStageY());
return false;
}
})
See this answer for how to draw a rectangle in an actor.
I've got a problem to draw a sprite to my project.
I have a map (960x900) divided into tiles (64x64).
As you can see in the picture, when i click on the bottom left corner of the purple square, the position is (0;0), and when I click on the top right corner of purple square, the position is (36;47)
The problem is that the picture of the purple square has a size of 32x32, and when I draw this picture with libgdx on the screen, the size doesn't match.
Another example: the square with black border has a size of 64x64. So if I draw the purple square in front of the black, the purple should be the half (in height and in width) of the black, no?
Does anyone know why libgdx resizes the purple square?
Sprite sprite = new Sprite(new Texture("assets/purpleSquare.png"));
i draw it in a method
public void render(SpriteBatch batch) {
batch.draw(sprite, 0, 0);
}
I don't know why the picture is resized by libgdx.. I have also tried to do
batch.draw(sprite, 0, 0, width, heigth);
To precise the sprite's size but it doesn't work too..
The size on screen bears no direct relation to the size of the original image. When you draw a sprite you provide the SpriteBatch with a position, width, and height in world coordinates. The sprite will be stretched to fit these world coordinates, regardless of the original image size.
When you click the screen, you are clicking in screen coordinates. The relation between screen and world coordinates is determined by the projection matrix that you use with the SpriteBatch. The projection matrix is typically controlled with a Camera or Viewport object, which you can use to convert between the two coordinate systems using the project and unproject methods.
I'm happy to see that after many hours i found a solution, even if i know which is not correct.
I would like some help to understand the problem's origin.
With this parts of code :
public void update(float delta) {
batch.begin();
drawBackground(); // Draw the background
drawButton(); // Draw the play/pause button
batch.end();
drawMap(); // draw a tmx map made with tiled
batch.begin();
if(!world.isInitial()) {
renderMonster(); // method which draw the monster
}
renderTower(); // method which draw the tower's level
batch.end();
}
I don't understand why i have to do "batch.begin()" and "batch.end()" twice.
I dont' understant why with this code, the purple square is resized.
With this code :
public void update(float delta) {
batch.begin();
drawBackground();
drawButton();
batch.end();
drawMap();
------->sb = new SpriteBatch();
sb.begin();
if(!world.isInitial()) {
renderMonster();
}
renderTower();
sb.end();
}
this line that i add fix the bug with the purple square. If i work with two SpriteBatch (because with one, if i reinitialize SpriteBatch in update method, my pause/play button diseapper) and i initialise the second (SpriteBatch sb) in the update method.
It is correct to initialise a SpriteBatch every time i'm passing on the update method ? There's no method with a SpriteBatch to avoid this problem ?
so I'm working on a game where I would like to have the camera in game centered on the middle of the screen for all device lengths. I hope this picture can better explain what I'm trying to achieve. I have tried setting the position of the camera but that hasn't worked for me.
scrnHeight = Gdx.graphics.getHeight();
if (scrnHeight <= HEIGHT) {
cam.setToOrtho(false, 480, 800);
} else {
cam.setToOrtho(false, 480, scrnHeight);
}
//This is the part that seems to be giving me all the issues
cam.position.set(cam.viewportWidth/2,cam.viewportHeight/2, 0);
cam.update();
Gdx.input.setInputProcessor(this);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
gsm.update(Gdx.graphics.getDeltaTime());
gsm.render(batch);
batch.begin();
batch.draw(border, -(border.getWidth() - WIDTH) / 2, -(border.getHeight() / 4));
batch.end();
I don't know if I'm giving it the wrong coordinates when I'm setting the position or what is happening that causes the lack of vertical centering. Any help would be much appreciated.
The orthographic camera position in LibGDX means position in-game, not on the device screen, therefore changing it won't actually move the game screen on the device.
Therefore, you use the camera position to move and position the camera in-game.
For example, in response to player input movement:
if (Gdx.input.isKeyPressed(Input.Keys.LEFT)) {
cam.translate(-3, 0, 0); // Moves the camera to the left.
}
if (Gdx.input.isKeyPressed(Input.Keys.RIGHT)) {
cam.translate(3, 0, 0); // Moves the camera to the right.
}
As you can see, we are moving the camera in-game, left and right according to the player's input.
However, your code has a few more issues like not setting the batch projection matrix:
batch.setProjectionMatrix(cam.combined);
And resetting the camera position to the center of the viewport each frame:
// Don't run this each frame, it resets the camera position!
cam.position.set(cam.viewportWidth/2,cam.viewportHeight/2, 0);
cam.update(); // <- However, you must run this line each frame.
Finally, centering the LibGDX app on the device screen should be done outside of Libgdx, otherwise, if you intend to use the spare screen for the same LibGDX app, then you should create another camera to work full screen and render it before the actual game camera, usually used for HUD and such...
I have not found answer for this question anywhere, so let's go.
What i expect:
I want to render rocket. Rocket is flying from given start point with evaluated angle. I'm evaluating angle like this:
getVelocity().angle() - 90f
My problem is to calibrate rocket position on top of the rocket. Image below shows how should it work:
In the top picture is how libgdx render not rotated texture region. In the bottom picture is what i expect: I want to move and rotate texture region with given angle to have (x,y) coordinate on the top of rocket.
What i have:
I tired to write method to draw sprite how i expect but i failed. I think it is caused due to fact that i don't understand documentation of this method.
Following manual:
void com.badlogic.gdx.graphics.g2d.SpriteBatch.draw(TextureRegion region, float x, float y, float originX, float originY, float width, float height, float scaleX, float scaleY, float rotation)
Draws a rectangle with the bottom left corner at x,y and stretching the region to cover the given width and height. The rectangle is offset by originX, originY relative to the origin. Scale specifies the scaling factor by which the rectangle should be scaled around originX, originY. Rotation specifies the angle of counter clockwise rotation of the rectangle around originX, originY.
My code:
public static void drawRotatedTex(SpriteBatch pmRenderer, TextureRegion pmTex, float pmPosX, float pmPosY, float pmAngle)
{
pmRenderer.begin();
pmRenderer.draw(
pmTex, pmPosX, pmPosY, -pmTex.getRegionWidth()/2, pmTex.getRegionHeight(), pmTex.getRegionWidth(), pmTex.getRegionHeight(), 1f, 1f, pmAngle);
pmRenderer.end();
}
Results:
It is moment of collision. As we can see coordinates are offset in relation to rocket.
I don't ask about full solution. For me will be sufficient if someone explain me (on drawing or something) like this method works.
EDIT
Moderation suggested that this question is duplicate of:
libgdx: Rotate a texture when drawing it with spritebatch
I read this topic, but it is not my solution. I know how to rotate my sprite by i don't have idea why coordinates of rocket are offset in relation to rocket top.
EDIT
Invocation of my drawRotatedTex from rocket class:
#Override
public void render(Renderer pmRenderer, float pmX, float pmY) {
SpriteBatch lvSpritebatch = pmRenderer.getSpriteBatch();
Sprite lvSprite = null;
if(mIsExploding)
{
if((lvSprite = mExplosion.getTexture()) != null)
{
lvSpritebatch.begin();
lvSpritebatch.draw(lvSprite, pmX + lvSprite.getWidth()/2, pmY - lvSprite.getHeight()/2);
lvSpritebatch.end();
}
}
else
{
lvSprite = mAnimation.getTexture();
RendererTools.drawRotatedTex(lvSpritebatch,lvSprite,pmX,pmY,getVelocity().angle() - 90f);
}
}
It is not very clear what you are asking, if it's only about moving the origin you would not need that much text. Anyway, I will take a shot at it.
If you want to accomplish what you have in your picture you setup your sprite like this:
sprite.setOrigin(s.getWidth()/2, s.getHeight()); //Centers sprite on top of image.
If I now rotate it in the draw method it rotates around the top center.
sprite.rotate(5);
sprite.draw(batch);
Despite being rotated around the center top of itself it remains position remains the same. If I would set the origin far away from the image and rotate it then the image would travel very far but the position remains the same. Still if you would move it's position 10 pixels to the right the image (wherever it may be) will be moved to the right.
Hope this helps.
public void render() {
this.spriteRenderer.setProjectionMatrix(this.instance.camera.combined);
this.spriteRenderer.begin();
if (!this.ballon.isPoping()) {
Sprite s = this.ballon.getSprite();
spriteRenderer.draw(s, 50, 50, s.getWidth(), s.getHeight());
}
// else {
// if (!this.ballon.isPoped()) {
// Sprite s = this.ballon.getCurrentAnimation();
// this.spriteRenderer.draw(s, this.ballon.getX(),
// this.ballon.getY(),
// this.ballon.getSprite().getWidth() * SpriteConfiguration.BALLON_SCALE,
// this.ballon.getSprite().getHeight() * SpriteConfiguration.BALLON_SCALE);
// this.ballon.processAnimation();
// }
// }
this.spriteRenderer.end();
}
I have set camera.setToOrtho to true with my width, and height. whenever I run that render method, my ballon sprite is basically vertically turned, looks like it flipped by 180 degrees over, like the image is saved as a standing ballon, and upon draw it looks like its turned, so I have to rotate the screen to see it.
The reason I used setProjectionMatrix is because the default location of the screen (0, 0) on android portrait mode I assume, is top-right corner, which on libGDX it is automtaically at bottom left corner, so basically setToOrtho fixes it for libGDX, but the phone's default location doesn't change, and I want it to change & be the same as libGDX's one because I need to handle screen touching, and get the correct position.
So basically setProjectionMatrix & setToOrtho(true...) does it's job, but the only problem that it just rotates the image by 180 degrees.
Does anyone know why it does that?