Libgdx - how to zoom a rectangle/line (shaperenderer) - libgdx

Let's say that I have an Actor which has a draw method:
#Override
public void draw(Batch batch, float parentAlpha) {
super.draw(batch,parentAlpha);
sr.begin(ShapeRenderer.ShapeType.Line);
sr.setColor(Color.RED);
sr.rectLine(getX(),getY(),getX() + getWidth(),getY(),3);
sr.end();
}
As you can see, the actor also draws a red line below itself.
Now, when I zoom the camera on a stage, where the actor is, he becomes bigger - it works but his red rectangle doesn't.
When I set debug() on the Actor, it shows the debug lines and zooms them aswell.
What I'm trying to achieve?
I need to zoom the line too, along the actor.
If there's anyone who knows how to achieve this, I would be grateful ;)

Shaperenderer is similar to batch. It has own coordinate matrix.
So you need to set projection matrix on shaperenderer too.
shaperenderer.setProjectionMatrix(camera.combined);
It will probably work for you.
But while shaperenderer drawing via vertexes, lines' width may not change even when you zoom in/out.
You can change line width with openGL function.
Gdx.gl.glLineWidth(width);
And additionaly im suggesting not to use Shaperenderer because its quite expensive class and only recommended for debug drawings.

Related

LibGDX - Draw clipped sprite

I am surely overlooking something, but is there an easy to draw for example only half a sprite in LibGDX? I originally thought I could do this with setBounds() but this distorts the sprite and does not clip it.
do not know if this is what you want, or is the most efficient way but that's what I happened to read your question, I hope I understand and serve you this:
Variable class:
Texture testTexture = new Texture (Gdx.files.internal("badlogic.jpg"));
In render method for example:
//batch is a SpriteBatch.
batch.draw(testTexture, 50, 50,
0, 0,
testTexture.getWidth() /2,
testTexture.getHeight());
this is the method in SrpiteBatch.class:
public void draw (Texture texture, float x, float y, int srcX, int
srcY, int srcWidth, int srcHeight)
Now for example in you sprite (simple test):
batch.draw(yourSprite.getTexture(), 50, 50,
0, 0, yourSprite.getTexture().getWidth() /2,
yourSprite.getTexture().getHeight() );
Edit Note:
to re-look the answer, I thought it would be nice to say that this makes, show only one area of the texture as you say, but perhaps should be noted that the texture remains the same size, I say this because if you texture used to detect collisions, keep in mind, that although half display, texture remains as large than the original
There was also Scissors class:
http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/utils/ScissorStack.html
I think I tried it once...but it worked well on desktop and not on android...so I didn't use it. Maybe it's fixed meanwhile.

Graphics2D, drawImage() -method, Scala Swing

I am painting on a Panel by overriding the paintComponent -method.
class Canvas extends Panel ...
...
override def paintComponent(g: Graphics2D) {
super.paintComponent(g)
for (cmd <- commands.get) cmd.execute(g, this)
}
Okay. Inside one of the commands is this one.
case class TestCommand() {
def execute(g: java.awt.Graphics2D, c: Canvas) = {
val img = new BufferedImage(c.width, c.height, BufferedImage.TYPE_INT_RGB)
g.drawImage(img, null, 0, 0)
}
What im trying to do there is create a BufferedImage from the Graphics2D -object, so i can read the value of some pixel at location x, y.
However when this command is executed, i notice that the drawImage -method causes my panel to turn completely black, wiping everything i've drawn on it so far. I want the command to simply create a BufferedImage of what i've drawn on the panel, instead of somehow affecting the Graphics2D -object itself. What am i doing wrong here?
A Graphics2D is connected to some canvas or image. You might think of it like a brush or a pen. In this case, the graphics object you have is tied to your panel. Calling drawImage draws the image on to the panel.
If you want to draw the panel on to the image, you need a Graphics for the BufferedImage:
Graphics2D ig = img.createGraphics();
Then you need to paint the panel to the graphics. java.awt.Component provides a number of convenience methods for this type of thing, for example printAll:
c.printAll(ig);
ig.dispose(); // don't forget to dispose Graphics you've created
(Sorry, I don't really know Scala syntax, if it's different.)
Without being too presumptuous, there may be better ways to approach what you're doing. E.g. if you're doing painting to the panel, as mentioned in the comments, it's usually a good idea to do your painting on an image to begin with, then paint the image to the panel. Then you always have the image.

libGDX zoom implementation isn't working right

I would like to achieve a zoom effect that is similar to "Clash of Clans". I'm currently implementing zoom in a way that pretty much all the tutorials online do. There are of course a my camera specific constants to make it zoom at good speeds for my camera.The code DOES WORK.
#Override
public boolean zoom(float initialDistance, float distance) {
float zoomAmount = -1*(distance - initialDistance)/10000;
cameraHelper.addZoom(zoomAmount);
return true;
}
The camera helper class does this simple stuff:
public void addZoom(float amount) {
setZoom(zoom + amount);
}
public void apply(OrthographicCamera camera) {
camera.zoom = zoom;
camera.update();
}
So this does work. When I fling two fingers in one continuous motion and then stop moving the fingers on the screen, let's say I zoom in with zoomAmount = x, zoom gets called once and the zoom is done.
Problem:
However, if I then wiggle one, or both, of the fingers just a tiny bit, zoom gets called again with that same value for zoomAmount = x. So by wiggling a finger, it will simply keep adding to zoom and keep zooming in or out (depending on the current state of zoomAmount).
Question:
How do I make libgdx or java remember my original camera.zoom much like initialDistance in the zoom() method. OR, is there any other trick that I can do to have a responsive and smooth zoom (without removing fingers from the screen) much like the game "Clash of Clans".
Extra info:
I have tried pinch, same effect. I have thought about having a base zoom value and then some kind of percentage multiplier, however because I have to update the camera by setting its zoom (camera.zoom = zoom;) I can't think of a clever trick with adding or subtracting any values that will not be effected by zoom() being constantly called. Any thoughts anyone?

How can I avoid sprite distortion as the frame's bounding box changes?

I have a spritesheet (packed by the wonderful TexturePacker) that looks like so:
and the animation as an animation works well using the current code.
However, when the animation moves to a frame where the bounding box is smaller (e.g. when the legs are closer, when the figure is kneeling, etc.), the image distorts so that the smaller bounding box fills the bounding box of the sprite.
How can I fix this?
The spritesheet above is a frame-extraction from a sample Adobe flash animation.
Easier way:
You can make all the textureregions the same size.
Hard way:
Keep it like this, but you need to save and calculate the size and position of every textureregion to draw.
I personally recommend you the first option, just make all the image the same size.
cant give you a link but here is what i do for these situations
while making the texture packer strip the white space
make a array of AtlasSprite for images
then in my render method
public void render(float delta) {
atlasSprite = animation.getKeyFrame(statetime, Animation.LOOPING);
atlasSprite.draw(batcher)
};
in my update method, which gives exact rectangular bounds of the current image displayed. Since you have stripped the whitespace and used AtlasSprite so bounds will be without blank whitespace.
public void update(float delta) {
bounds = sprite.getBoundingRectangle();
}
P.S. this is just a pseudo code and many syntatical error could be there its just to give you a idea

Understand LibGDX Coordinate system and drawing sprites

So I am super stoked to start using LibGDX for my first android title for OUYA and PC, but I am running into some snags with LibGDX. (All of my questions can be answered by looking at source, but I am really trying to understand the design choices as well).
To start with, the coordinate system. I created a project using the Project Setup jar, and it creates an OrthographicCamera like so
camera = new OrthographicCamera(1, h/w);
From my reading, I understand that LibGdx uses bottom left corner for 0,0 and yUp. Fine.
I see that it is pretty easy to change to y down if I want to, but I am not understanding the next bit of code that was created.
For the default sprite that gets created the position is set like so.
logoSprite.setOrigin(logoSprite.getWidth()/2, logoSprite.getHeight()/2);
logoSprite.setPosition(-logoSprite.getWidth()/2, -logoSprite.getHeight()/2);
When I run this basic program, I see the logo image I have added is centered on the screen. What I am trying to understand is why the values are negative in set position, and why is it using the sprite width and height instead of the graphics w and h of the view port? If I change to the screen width and height, then the image is drawn in some odd position in the lower right hand side of the screen.
My next question is sprite.setSize vs sprite.setScale. Why is the difference between the two? (They appear to do the same thing, except setScale leaves getWidth and getHeight unchanged).
Since my game will be using a 2D camera heavily for panning, zooming and rotation, I am trying to understand as much as I can about the libgdx framework before I start writing any code.
As a side note, I have a game development and math background and I have made several 2D and 3D games using XNA. I am finding LibGdx a bit frustrating as it does not abstract away OpenGL as much as I was expecting it to, and so far the 2D drawing I have been experimenting with seems to be more confusing than it should be!
I also wanted to note that I am planning to use spine for my animations. Should that change my choice to use y-up or y-down?
If you want to draw a sprite in center of screen, do this in your create method
logosprite.setposition(scrw/2-logosprite.getwidth()/2,scrh/2-logosprite.getheight/2);
here scrw is your viewport's width,
and scrh is your viewport's height,
this way your sprite will be in center of screen
sprite.setsize is used for setting size of the sprite and sprite.setscale is used when we scale a large/small texture so that its quality remains good in all devices(hdpi.mdpi,xhdpi,ldpi)..
no need to worry if you are using spine it works smoothly in libgdx..
You can use just this code if possible
logoSprite.setPosition(Gdx.graphics.getWidth()/2 - image.getWidth()/2,
Gdx.graphics.getHeight()/2 - image.getHeight()/2);
To center the sprite into the middle of the screen Where "image" is the Texture you have loaded/declared initially.
As for why it is coming in a odd position is due to the fact that you are using a camera.
Which changes the view a lot just go through the documentations of libgdx about camera here
In my case, I needed to set position of camera and then call update() method.
Then never forget camera's (0,0) is its center. Everything is being placed that way. My camera code:
private void cameralariUpdateEt() {
cameraGame.position.set(cameraGame.viewportWidth * 0.5f,
cameraGame.viewportHeight * 0.5f, 0);
cameraGame.update();
cameraScore.position.set(cameraScore.viewportWidth * 0.5f,
cameraScore.viewportHeight * 0.5f, 0);
cameraScore.update();
}
Call this method from inside render();
Step 1: Set the sprite origin to the position you would like it to rotate around.
// camera center point is (c.x, c.y)
logoSprite.setOrigin(c.x, c.y);
Step 2: make sure to set your sprite center to origin
logoSprite.setOriginCenter();
Step 3: Rotate your sprite
logoSprite.setRotation(Angle);
Step 4: Set the sprite position, [subtract half the sprites width and height to center the sprite]
logoSprite.setPosition(c.x - logoSprite.getWidth() / 2, c.y - logoSprite.getHeight() / 2)