Before modifing
after modyfing
just as we can see,i want to achieve it by code.I have searched many materials ,but they are just making a rounded rectangle by their own color,not form one picture.Any help will be very appreciated.
I made a method for doing this which takes an original pixmap (image) and combines it with a mask to crop the original image to the shape of the mask. I posted the code in a question here:
libGDX: How can I crop Texture as a circle
In your case the mask should be a rounded rectangle. It doesn't matter what the color of the mask is as long as the alpha channel is "1". Then the result will be your original image cropped to the rounded rectangle.
Use this:
public class RoundImage extends Image {
private int radius;
private int diameter;
public RoundImage(int radius) {
this.radius = radius;
this.diameter = radius * 2;
}
#Override public void setDrawable (Drawable drawable) {
if(drawable instanceof TextureRegionDrawable)
{
Pixmap origPixmap = ((TextureRegionDrawable) drawable).getRegion().getTexture().getTextureData().consumePixmap();
Pixmap pixmap = round(origPixmap);
drawable = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
// origPixmap.dispose();
}
super.setDrawable(drawable);
}
private Pixmap round(Pixmap pixmap)
{
int width = pixmap.getWidth();
int height = pixmap.getHeight();
int min = Math.min(width,height);
int max = Math.max(width,height);
Pixmap round = new Pixmap(width ,height, Pixmap.Format.RGBA8888);
round.drawPixmap(pixmap , radius , 0 , radius , 0 , pixmap.getWidth() - diameter , pixmap.getHeight());
round.drawPixmap(pixmap , 0 , radius , 0 , radius , radius , pixmap.getHeight() - diameter);
round.drawPixmap(pixmap , pixmap.getWidth() - radius , radius , pixmap.getWidth() - radius , radius , radius , pixmap.getHeight() - diameter);
//---------------- draw rounds
draw_top_left_round(round, pixmap);
draw_top_right_round(round, pixmap);
draw_bottom_right_round(round, pixmap);
draw_bottom_left_round(round, pixmap);
return round;
}
private void draw_bottom_right_round(Pixmap round, Pixmap pixmap) {
draw_round(round , pixmap , pixmap.getWidth() - diameter , pixmap.getHeight() - diameter);
}
private void draw_bottom_left_round(Pixmap round, Pixmap pixmap) {
draw_round(round , pixmap , 0 , pixmap.getHeight() - diameter);
}
private void draw_top_left_round(Pixmap round, Pixmap pixmap) {
draw_round(round,pixmap, 0,0);
}
private void draw_top_right_round(Pixmap round, Pixmap pixmap) {
draw_round(round , pixmap, pixmap.getWidth() - diameter,0);
}
//--------------------------
private void draw_round(Pixmap round, Pixmap pixmap , int x_offsetStart , int y_offsetStart) {
for(int y = y_offsetStart; y < y_offsetStart + diameter; y++)
{
for(int x = x_offsetStart; x < x_offsetStart + diameter ; x++)
{
double dist_x = (radius - x + x_offsetStart);
double dist_y = radius - y + y_offsetStart;
double dist = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y));
if(dist < radius)
{
round.drawPixel(x, y,pixmap.getPixel(x, y));
}
else
round.drawPixel(x, y,0);
}
}
}
}
Related
I am new to libgdx and trying to move a circle vy draging it. But its not working properly.
class deceleration is as follows -
public class gScreen1 extends ScreenAdapter
implements GestureDetector.GestureListener {
private static final float WORLD_WIDTH = 640;
private static final float WORLD_HEIGHT = 480;
...
#Override
public void show() {
super.show();
camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
camera.position.set(WORLD_WIDTH / 2, WORLD_HEIGHT / 2, 0);
camera.update();
viewport = new FitViewport(WORLD_WIDTH, WORLD_HEIGHT, camera);
shapeRenderer = new ShapeRenderer();
batch = new SpriteBatch();
}
private void drawGrid() {
Gdx.gl.glLineWidth(2);
shapeRenderer.setProjectionMatrix(camera.projection);
shapeRenderer.setTransformMatrix(camera.view);
shapeRenderer.setColor(Color.YELLOW);
shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
size = points.length;
for (int i = 0; i < size; i++) {
shapeRenderer.circle(pointsr[i].x , pointsr[i].y ,10);
}
shapeRenderer.end();
}
#Override
public void render(float delta) {
super.render(delta);
clearScreen();
drawGrid();
}
#Override
public boolean pan(float x1, float y1, float deltaX, float deltaY) {
Vector3 tmpCoords = new Vector3(x1,y1, 0);
camera.unproject(tmpCoords);
int x = (int)tmpCoords.x;
int y = (int)tmpCoords.y;
for( i = 0; i < size ; i++) {
int x2 = pointsr[i].x;
int y2 = pointsr[i].y;
if( ((x2 -x)*(x2 -x) + (y2 -y)*(y2 -y) ) < 400 )
break;
}
if( i < size ) {
pointsr[i].x += deltaX;
pointsr[i].y += deltaY;
}
}
Circles are not following movement of finger, some time they move a little bit but in opposite y direction of touch movement.
So how do i implement the collision detection for an arc of a circle? Will i have to use the Box 2d collision or can i do it some other way using Rectangle or stuff like that?
BTW I hate box2d because i dont understand most of the things in it, so if there is a solution that excludes the box2d, it will be very much appreciated.
The yellow arc keeps on rotating over the black circle. How do i implement collision detection in here?
Please help ! Thanks!
To avoid using Box2D you could define the shape as a polygon and use the polygon.contains(x,y) method or use the Intersector
Below is an example using both:
import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.math.Circle;
import com.badlogic.gdx.math.Intersector;
import com.badlogic.gdx.math.Polygon;
public class Test extends ApplicationAdapter implements InputProcessor{
private ShapeRenderer sr;
private Polygon polya;
private boolean isColliding = false;
private Circle mp;
#Override
public void create () {
//define arc as polygon
// the more points used to define the shape will
// increase both required computation and collision precision
polya = new Polygon();
// create vertices
float section = 15f;
float[] newVerts = new float[200];
for(int i = 0; i < 50; i++){
newVerts[i*2] = (float)Math.sin(i/section); //x 0 to 98 even
newVerts[i*2+1] = (float)Math.cos(i/section); //y 1 to 99 odd
newVerts[199-i*2] = (float)Math.cos(i/section); //x 100 to 108
newVerts[198-i*2] = (float)Math.sin(i/section) + 0.2f; //y 101 to 199
}
polya.setVertices(newVerts);
polya.scale(50);
polya.setOrigin(1, 1);
polya.rotate(60);
//define circle to act as point for checking intersections
mp = new Circle(Gdx.graphics.getWidth()/2,Gdx.graphics.getHeight()/2,4);
// setup batchers
sr = new ShapeRenderer();
sr.setAutoShapeType(true);
Gdx.input.setInputProcessor(this);
}
#Override
public void render () {
Gdx.gl.glClearColor(0f, 0f, 0f, 0f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
// check collision with polygon
isColliding = polya.contains(mp.x,mp.y);
//check collision using Intersector
isColliding = Intersector.isPointInPolygon(polya.getTransformedVertices(),0,polya.getVertices().length,mp.x,mp.y);
sr.begin();
sr.setColor(Color.WHITE);
if(isColliding){
sr.setColor(Color.RED);
}
sr.polygon(polya.getTransformedVertices());
sr.circle(mp.x,mp.y,mp.radius);
sr.end();
}
#Override
public void dispose () {
}
#Override
public boolean mouseMoved(int screenX, int screenY) {
int newy = Gdx.graphics.getHeight() - screenY;
polya.setPosition(screenX, newy);
return false;
}
(... removed unused input processor methods for clarity ...)
}
In my case, the arc was in motion and I needed to calculate its collision, so I updated the polygon along with the rendering. Essentially, I got the vertices in the same way that LibGDX renders an arc.
On the left you can see what the arcs I'm drawing look like. On the right you can see what the polygons would look like calculated from the shape of their corresponding arcs if I had to draw them.
Ignore the different colors and count of sections, they are randomly generated.
To achieve this result, I wrote this method:
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Polygon;
import com.badlogic.gdx.math.Vector2;
import java.util.ArrayList;
// ...
public void fillPolygonWithArc(Polygon polygon, float x, float y, float radius, float start, float degrees, int segments) {
float theta = (2 * MathUtils.PI * (degrees / 360.0f)) / segments;
float cos = MathUtils.cos(theta);
float sin = MathUtils.sin(theta);
float cx = radius * MathUtils.cos(start * MathUtils.degreesToRadians);
float cy = radius * MathUtils.sin(start * MathUtils.degreesToRadians);
ArrayList<Vector2> vertices = new ArrayList<>();
vertices.add(new Vector2(x, y));
vertices.add(new Vector2(x + cx, y + cy));
for (int i = 0; i < segments; i++) {
vertices.add(new Vector2(x + cx, y + cy));
float temp = cx;
cx = cos * cx - sin * cy;
cy = sin * temp + cos * cy;
vertices.add(new Vector2(x + cx, y + cy));
}
vertices.add(new Vector2(x + cx, y + cy));
cx = 0;
cy = 0;
vertices.add(new Vector2(x + cx, y + cy));
polygon.setVertices(new float[vertices.size() * 2 + 4]);
for (int i = 0; i < vertices.size(); i++) {
polygon.setVertex(i, vertices.get(i).x, vertices.get(i).y);
}
}
// ...
How does he work?
It takes as parameters a polygon in which to write the vertices of the
arch and the parameters needed to get the shape of the arch, these are
the same parameters that you pass to the method that draws the arc (shapeRenderer.arc).
And then it calculates the vertices of the arch in the same way as
LibGDX does and fills the polygon with them.
I just looked at the LibGDX source.
Use case:
fillPolygonWithArc(polygon, getPosition().x, getPosition().y, getRadius(), start, finalStep, getSegments());
shapeRenderer.setColor(color);
shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
shapeRenderer.arc(getPosition().x, getPosition().y, getRadius(), start, finalStep, getSegments());
shapeRenderer.end();
Also, if you want, you can draw a polygon:
fillPolygonWithArc(polygon, getPosition().x, getPosition().y, getRadius(), start, finalStep, getSegments());
shapeRenderer.setColor(color);
shapeRenderer.begin(ShapeRenderer.ShapeType.Line);
shapeRenderer.polygon(polygon.getVertices());
shapeRenderer.end();
Ultimately, you can check if some point is inside the polygon you need:
polygon.contains(new Vector2(4, 20));
For my game i wanted to use trigonometry. As i have initialy searched everything was the same as it was in Actionscript3. But i was wrong. Nothing worked as it should. So after searching the libGDX forum and stachoverflow posts i have "played" with numbers and find solution. Hope it helps someone
How to calculate an angle in libgdx and how to set x and y velocity with trigonometry (code omitted for clarity):
//variables
private Object object;
private float touchX, touchY, angle, xSpeed, ySpeed;
private final int power = 5;
//touch up event
#Override
public boolean touchUp(int screenX, int screenY, int pointer, int button) {
touchX = screenX;
touchY = h - screenY; // screenX gives an inverted y position (y == 0 is at the top)
setPosition(touchX, touchY);
}
//set angle and velocity method
public void setPosition(int x, int y){
//example 1 (velocity is calculated without angle):
angle = (float) (Math.atan2(y - object.y, x - object.x) * tdg) - 90.0f;
//at the end there is not always -90.0f. It depends of how the texture (or sth else we
//want to rotate) is rotated in .png file. Play with nuber if -90.0f is not good. Use
//the scale from -360 to 360
xSpeed = (x - bx) / 30;
ySpeed = (y - by) / 30;
//example 2 (velocity with angle):
angle = (float) Math.atan2(y - object.y, x - object.x);
xSpeed = (float) (Math.cos(angle)*power);
ySpeed = (float) (Math.sin(angle)*power);
angle = (angle*180/Math.PI) - 90.0f;
}
Im trying to create a circle in LWJGL , using VBO's and VAO , and move it using an offset , but it seems one vertex is stuck in the center of the screen . I can't figure out how to move it to the new location . Any help is appreciated , thanks !
P.S : I have already tried debugging the program , but I can't locate the faulty vertex in my array
import java.nio.FloatBuffer;
import org.lwjgl.BufferUtils;
import org.lwjgl.LWJGLException;
import org.lwjgl.opengl.*;
public class Test {
// Setup variables
private int WIDTH = 800;
private int HEIGHT = 600;
private String title = "Circle";
// Quad variables
private int vbo = 0; // Vertex Buffer Object
private int vao = 0; // Vertex Array Object
int SUBDIVISIONS = 100;
float[] vertex = new float[(SUBDIVISIONS + 1) * 4];
public Test() {
// Initialize
setupOpenGL();
setupQuad();
while (!Display.isCloseRequested()) {
loop();
Display.update();
Display.sync(60);
}
Display.destroy();
}
public void setupOpenGL() {
try {
Display.setDisplayMode(new DisplayMode(WIDTH, HEIGHT));
Display.setTitle(title);
Display.create();
} catch (LWJGLException e) {
e.printStackTrace();
System.exit(-1); // If error , exit program
}
GL11.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
}
public void setupQuad() {
float r = 0.2f;
float x;
float y;
float offSetX = 0.3f;
float offSetY = 0.3f;
vertex[0] = (float) Math.sin(Math.PI*2*0/SUBDIVISIONS) * r + offSetX;
vertex[1] = (float) Math.cos(Math.PI*2*1/SUBDIVISIONS) * r + offSetY;
for (int i = 2; i < 360; i = i + 2) {
double angle = Math.PI * 2 * i / SUBDIVISIONS;
x = (float) Math.cos(angle) * r;
vertex[i] = x + offSetX;
}
for (int i = 3; i < 360; i = i + 2) {
double angle = Math.PI * 2 * i / SUBDIVISIONS;
y = (float) Math.sin(angle) * r;
vertex[i] = y + offSetY;
}
FloatBuffer vertexBuffer = BufferUtils.createFloatBuffer(vertex.length);
vertexBuffer.put(vertex);
vertexBuffer.flip();
vao = GL30.glGenVertexArrays();
GL30.glBindVertexArray(vao);
vbo = GL15.glGenBuffers();
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, vbo);
GL15.glBufferData(GL15.GL_ARRAY_BUFFER,vertexBuffer,GL15.GL_STATIC_DRAW);
GL20.glVertexAttribPointer(0, 2, GL11.GL_FLOAT, false, 0, 0);
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
GL30.glBindVertexArray(0);
}
public void loop() {
GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
GL30.glBindVertexArray(vao);
GL20.glEnableVertexAttribArray(0);
// Draw the vertices
GL11.glDrawArrays(GL11.GL_TRIANGLE_FAN, 0, vertex.length / 2);
// Put everything back to default (deselect)
GL20.glDisableVertexAttribArray(0);
GL30.glBindVertexArray(0);
}
public static void main(String[] args) {
new Test();
}
}
"I think I've found the problem . I was setting the positions of only 359 vertices out of 404 vertices (nr of subdivisions + 1 times 4) . It seems the rest of the vertices were stuck at 0,0 on the screen . Allowing both FOR statements to cycle up to 404 seems to solve the problem"
I'm new in LibGDX.
I created group with actors in show method and add listener (where i calculate rotation matrix) and want to rotate all actors from group with batch.setTransformMatrix(matrixResult); but nothing happens. How can I force to rotate all actors of group?
#Override
public void show() {
camera = new PerspectiveCamera(67, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
camera.position.set(0f, 0f, - 120);
camera.lookAt(0,0,0);
camera.near = 0.1f;
camera.far = 300f;
camera.update();
stage = new Stage();
shader = new ShaderProgram(vertexShader, fragmentShader);
myBatch = new SpriteBatch();
shapeRenderer = new ShapeRenderer();
sphere = BuildSphere(5, 100);
group = new Group(){
#Override
public void draw(Batch batch, float parentAlpha) {
batch.setTransformMatrix(matrixResult);
super.draw(batch, parentAlpha);
}
};
group.setTouchable(Touchable.enabled);
group.addListener(new InputListener(){
#Override
public boolean touchDown(InputEvent event, float x, float y,
int pointer, int button) {
Gdx.app.log("MOUSE_X_BEG", Float.toString(x));
Gdx.app.log("MOUSE_Y_BEG", Float.toString(y));
begX = x;
begY = y;
return true;
}
#Override
public void touchDragged(InputEvent event, float x, float y,
int pointer) {
endX = x;
endY = y;
//isRotate = true;
float translationX = endX-begX;
float translationY = begY-endY;
float length = (float)Math.sqrt(Math.pow(translationX,2) + Math.pow(translationY,2));
Vector3 axis = new Vector3(0, 0, 0);
if(length>0){
if(begX-endX == 0){
axis.x = 1;
}else{
float angle = (float) (Math.atan(translationY/translationX) + Math.PI/2.0*(translationX <0 ? -1 : 1));
axis.z = 1;
axis.x = (float) Math.cos(angle);
axis.y = (float) Math.sin(angle);
}
}
quaternion = new Quaternion(axis, 0.02f*length);
Matrix4 rotation = new Matrix4(quaternion);
matrixResult = rotation.mul(matrixRotationOld);
matrixRotationOld = matrixResult;
}
});
//group.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
for (CenterCoordinate cenCoordinate : sphere.getPolygonCenterCoordinates()) {
Vector3 vector = cenCoordinate.getCartesianCenter();
Polygon polygon = new Polygon(1, cenCoordinate.getType().getCode(), cenCoordinate.getRadius(), cenCoordinate.getPsi(),
cenCoordinate.getKsi(), vector, cenCoordinate.getRotation());
group.addActor(polygon);
}
stage.addActor(group);
Gdx.input.setInputProcessor(stage);
}
Polygon extends Actor draw method :
#Override
public void draw(Batch batch, float parentAlpha) {
translation.setToTranslation(vertex.x, vertex.y, vertex.z);
matrix.mul(translation);
shader.begin();
shader.setUniformMatrix("u_worldView", matrix);
mesh.render(shader, GL20.GL_LINE_LOOP, 1, mesh.getNumVertices()-1);
shader.end();
matrix.idt();
}
Rotating the batch will not rotate the group. If you want to rotate everything i would suggest to rotate the camera of the Stage and set the Stages SpriteBatchs ProjectionMatrix to cam.combined. But to rotate only the Group use the rotateBy(degrees) or setRotation(degrees) method.
Rotating the SpriteBatch or the camera is actually only a change of the view, but rotating the Actor (in your case the Group) changes the logic of them.
In the draw() method you then will need to take care about this rotation and then you will have the result you want.