Does anyone know whether libGDX has a method for scrolling/shifting an image/texture within itself?
To explain; I would like to be able to scroll the contents (pixels) of an image, either vertically or horizontally within its own region. For example, if an image is shifted 1 pixel to the right, all pixels move 1 to the right and those on the right-most-edge are wrapped to the left-most-edge. The image size does not change, only the positioning of the pixels within it change.
I have mainly been working with the Sprite class, it can do a lot (scale, rotate, etc) but shift/scroll as I need it, isn't there.
Before writting the method myself, I thought I'd ask here...
The following worked for me, this was provided by Kush:
float delta = 0f;
// In the Actors act method
delta += Gdx.graphics.getDeltaTime();
// Horizontal
batch.draw(texture, 0, 0, width, height, 0 + delta * 10, 1, 1 + delta * 10, 0);
// Vertical
batch.draw(texture, 0, 0, width, height, 1, 0 + delta * 10, 0, 1 + delta * 10);
You won't need Sprite for this, draw directly Texture using batch. For wrapping first set
Texture texture = new Texture("example.png");
texture.setWrap(TextureWrap.Repeat, TextureWrap.Repeat);
then draw using uv
batch.draw(texture, x, y, width, height, u, v, u2, v2);
or any other method that suits you in SpriteBatch.
Related
I am trying to draw an arc within another arc at at distance of 10px in Wear OS.
We know that an arc can be drawn using the following:
canvas.drawArc(arcBounds, 0, 90, false, paint);
The above statement will draw an arc from 3pm to 6pm.
I would like to draw another arc at the same startAngle and sweepAngle within the above arc.
Assuming that the total number of arc that need to be drawn is based on the size of a list, how can I achieve the expected output?
Here is what my original arcBounds init method looks like:
private void initArcBounds(int width, int height, int additionalMargin) {
float margin = res.getDimension(R.dimen.timearc_margin) + additionalMargin;
arcBounds.left = margin;
arcBounds.top = margin;
arcBounds.right = width - margin;
arcBounds.bottom = height - margin;
}
for (Event el : eventList) {
canvas.drawArc(arcBounds, start, sweepAngle, false, timeArcPaints);
arcBounds.inset(10,10);
}
To create concentric arcs inward, we just need to "shrink" the bounds by the desired measure on each side. The RectF class has the convenient inset(dx, dy) method which will do just that. It expects those measures in pixels, so we can simply pass 10 for each, with no adjustments needed.
This will modify the RectF's bounds, so to keep those at their initial values in the original, we can create a temporary copy before the draw loop with RectF's copy constructor.
For example, altogether:
RectF temp = new RectF(arcBounds);
for (...) {
canvas.drawArc(temp, 0, 90, false, paint);
temp.inset(10f, 10f);
}
I'm playing around with the 2.0.0-SNAPSHOT, and I want to set the page to landscape and also rotate my picture. So I've done page.setRotation(90);
There seems to be a bug with using PDFBox and AffineTransform
This code doesn't do anything like I'd expect:
AffineTransform at = new AffineTransform(w, 0, 0, h, 20, 20);
at.translate(0.5, 1);
at.rotate(Math.toRadians(90));
Width and Height have to be tiny to keep the image on the page, rotate by itself squishes the image, and translate before rotate seems to scale the image huge.
Is this a bug, or am I just not understanding PDFBox?
Don't do an extra translation, instead put the translation when creating the AT. Remember that the rotation is around the bottom-left axis, so add the width w to the x-position.
PDPage page = new PDPage();
document.addPage(page);
page.setRotation(90);
PDPageContentStream contentStream = new PDPageContentStream(document, page);
int x = 150;
int y = 300;
// draw unrotated
contentStream.drawXObject(ximage, x, y, ximage.getWidth() / 2, ximage.getHeight() / 2);
// draw 90° rotated, placed on the right of the first image
AffineTransform at = new AffineTransform(ximage.getHeight() / 2, 0, 0, ximage.getWidth() / 2, x + ximage1.getWidth(), y);
at.rotate(Math.toRadians(90));
contentStream.drawXObject(ximage, at);
This will draw the image twice, once normally and once rotated 90°, and positioned to the right. "/2" is used to scale 50%, you can of course use another factor. Note that "/2" is not used for the initial x position, because the (scaled) width is needed twice. Once to position to the old position (because of the axis!), and once to move it to the right so that the images don't overlap.
Note also that getHeight() and getWidth() are reversed, for the page rotation.
AffineTransform at = new AffineTransform(w, 0, 0, h, 20, 20);
at.translate(0.5, 1);
at.rotate(Math.toRadians(90));
Width and Height have to be tiny to keep the image on the page, rotate by itself squishes the image, and translate before rotate seems to scale the image huge.
Is this a bug, or am I just not understanding PDFBox?
It is not a bug, it simply is math. You merely have to be aware that if you have an AffineTransform at and then call at.translate(...) or at.rotate(...), you do not set the translation / rotation part of the affine transformation to the given values but instead replace your transformation by the composition of the former transformation and the translation / rotation.
This means that e.g.
AffineTransform at = new AffineTransform(w, 0, 0, h, 20, 20);
at.translate(0.5, 1);
is not the same as
AffineTransform at = new AffineTransform(w, 0, 0, h, 20.5, 21);
as you might have expected, but instead
AffineTransform at = new AffineTransform(w, 0, 0, h, 20 + w/2, 20 + h);
This is why Width and Height have to be tiny to keep the image on the page - translate(0.5, 1) pushes very far otherwise.
As the order in which you compose the transformation matters, you might be happier if you created your transformation in this order:
AffineTransform at = AffineTransform.getTranslateInstance(0.5, 1);
at.rotate(Math.toRadians(90));
af.concatenate(new AffineTransform(w, 0, 0, h, 20, 20));
PS: As Tilman said: Remember that the rotation is around the bottom-left, so this composition will rotate off-screen, too. Simply add h+20 to the x coordinate of the initial translation.
using the ShapeRenderer class, I can only fill rectangles.
So how can I fill a circle?
and if possible, fill a sector (portion of a circle)?
As in the example of the shaperender
shapeRenderer.begin(ShapeType.Filled);
shapeRenderer.setColor(0, 1, 0, 1);
shapeRenderer.rect(x, y, width, height); // fills a rect
shapeRenderer.circle(x, y, radius);//<--- fills a circle
shapeRenderer.end();
should fill the circle. How to get a portion of a cicle i have no clue. Maybe create a mesh and fill it or such like that. Take a look at the shaperender there are differnet methods to fill parts. Just check if some of them fit.
For your second question, there is a method that fills only a portion of a circle
shapeRenderer.begin(ShapeType.Filled);
shapeRenderer.setColor(0, 1, 0, 1);
shapeRenderer.arc(x, y, radius, start, degrees, segments); // Fills a portion of a circle
shapeRenderer.end();
I wrote some code to get a plain 2d box to face the mouse. It rotated just fine around its center, and everything was working great, but when i put a texture on the box, it did not rotate around the center anymore.
The code:
float imgWidth = texture.getImageWidth()*scale;
float imgHeight = texture.getImageHeight()*scale;
glLoadIdentity();
texture.bind();
glTranslatef(x, y, 0);
glRotated(rotation - 90, 0, 0, 360);
glBegin(GL_QUADS);
glTexCoord2f(0, 0);
glVertex2f(-imgWidth, -imgHeight);
glTexCoord2f(1, 0);
glVertex2f(imgWidth, -imgHeight);
glTexCoord2f(1,1);
glVertex2f(imgWidth, imgHeight);
glTexCoord2f(0, 1);
glVertex2f(-imgWidth, imgHeight);
glEnd();
The answer is simple but with a complicated background that has to be understood.
OpenGL always rotate something not around its center but takes as center the point (0;0).
This can be an issue because if you translate your object somewhere and then your rotate it, it will rotate not on its center but around the (0;0) point (origin) creating a big rotation, I will say as a planet around the Sun.
Also OpenGL works with matrix, that with very barbaric simplification means that the operation are executed bottom to top.
// store the current model matrix
GL11.glPushMatrix();
// bind to the appropriate texture for this image
this.texture.bind();
// translate to the right location and prepare to draw
GL11.glColor3f(1, 1, 1);
GL11.glTranslated(x + (this.texture.getImageWidth() / 2), y + (this.texture.getImageHeight() / 2), 0);
GL11.glRotated(this.angle, 0, 0, 1);
GL11.glTranslated(-this.texture.getImageWidth() / 2, -this.texture.getImageHeight() / 2, 0);
// draw a quad textured to match the sprite
GL11.glBegin(GL11.GL_QUADS);
{
GL11.glTexCoord2f(0, 0);
GL11.glVertex2f(0, 0);
GL11.glTexCoord2f(0, this.texture.getHeight());
GL11.glVertex2f(0, this.texture.getImageHeight());
GL11.glTexCoord2f(this.texture.getWidth(), this.texture.getHeight());
GL11.glVertex2f(this.texture.getImageWidth(), this.texture.getImageHeight());
GL11.glTexCoord2f(this.texture.getWidth(), 0);
GL11.glVertex2f(this.texture.getImageWidth(), 0);
}
GL11.glEnd();
// restore the model view matrix to prevent contamination
GL11.glPopMatrix();
This means that first I am moving the texture to have its center positioned at (0;0) that means translating it backward half the dimensions.
Then I rotate it, and this is the crucial point, because you are using a strange way to rotate it, maybe the problem it's here, take a look to the javadoc:
SPECIFICATION
void glRotated( GLdouble angle,<br>
GLdouble x,<br>
GLdouble y,<br>
GLdouble z )<br>
void glRotatef( GLfloat angle,<br>
GLfloat x,<br>
GLfloat y,<br>
GLfloat z )<br>
PARAMETERS<br>
angle Specifies the angle of rotation, in degrees.
x, y, z<br>
Specify the x, y, and z coordinates of a vector, respectively.
DESCRIPTION<br>
glRotate produces a rotation of angle degrees around the<br>
vector (x,y,z).
First of all all x,y,z values should be between 0 and 1, if you want to rotate a 2d image then you should use the z axis, so the third param will be 1 that mean that you are rotating your image around the unit vector z.
The angle should be in degree and can be either positive or negative.
Try to change your code according to the documentation and you will have your problem solved.
Also with your quad you are drawing a 2x scaled quad, you are starting from -imageWidth to +imageWidth that means 2 times the width...
I want it to be at 0 on the y-axis, that is what I mean by flat to the ground.
I am making the floor of my game in android, I am using opengl es 1. I have a square I am using as the floor, so obviously I want it to be flat to the ground. I want the y-axis to be 0, but whenever I set it to this the square isn't on the screen. But if I set all of the y-axis to 0.1 then the square is hovering from the center of the screen to the top right corner, not flat to the ground.
This is the vertices array:
float w = 10;
float h = 10;
float vertices[] ={
0f, 0.1f, 0f,
w, 0.1f, 0f,
0f, 0.1f, -h,
w, 0.1f, -h
};
I am then storing it in the normal float buffer:
ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
vbb.order(ByteOrder.nativeOrder());
mFVertexBuffer = vbb.asFloatBuffer();
mFVertexBuffer.put(vertices);
mFVertexBuffer.position(0);
And then when it comes to drawing it:
gl.glDrawElements( GL10.GL_TRIANGLES,2*3, GL10.GL_UNSIGNED_BYTE, mIndexBuffer);
And this is setting up the frustum, which I don't think should make a difference but...
public void onSurfaceChanged(GL10 gl, int width, int height) {
gl.glViewport(0, 0, width, height);
float aspectRatio;
float zNear =.1f;
float zFar = 1000f;
float fieldOfView = 1f;
float size;
gl.glEnable(GL10.GL_NORMALIZE);
aspectRatio=(float)width/(float)height;
gl.glMatrixMode(GL10.GL_PROJECTION);
size = zNear * (float)(Math.tan((double)(fieldOfView/2.0f)));
gl.glFrustumf(-size, size, -size /aspectRatio,
size /aspectRatio, zNear, zFar);
gl.glMatrixMode(GL10.GL_MODELVIEW);
}
Why is it not flat? and why when the y-axis is 0, does it disappear?
I am tring to achieve this:
Where the white section is the floor.
Your object is "disappearing", because your object has no height.
It's like if you were holding an infinitely thin piece of paper flat in front of your eyes. If the paper is above or below your field of vision, then you can see it, but if you put it exactly parallel to your eyes, you wouldn't be able to see it.
It's not really clear to me what you expect it to look like. How do you want this floor to look, will you be looking at it from above, or from an angle? Do you want it to fill from the center of the screen to the bottom? Maybe a mockup image could really help explain what you're trying to achieve.