2
\$\begingroup\$

 Curve picture

i need to draw curve like this picture, I have tried from this link https://github.com/libgdx/libgdx/wiki/Path-interface-&-Splines , but the curve is not so smooth like some game(Amazing Wire) which is already in the market.

\$\endgroup\$
3
\$\begingroup\$

You can use a bezier or catmullromsplie to draw curves based on supplied points.

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.math.Bezier;
import com.badlogic.gdx.math.CatmullRomSpline;
import com.badlogic.gdx.math.Vector2;

public class Test extends ApplicationAdapter{

    //create paths
    private Bezier<Vector2> path1; 
    private CatmullRomSpline<Vector2> path2;
    private ShapeRenderer sr;

    @Override
    public void create () {

        // set up random control points
        int width = Gdx.graphics.getWidth();
        int height = Gdx.graphics.getHeight();
        int points = 4;
        Vector2[] controlPoints = new Vector2[points];
        for (int i = 0; i < points; i++) {
           int x = (int) (Math.random() * width) ;
           int y = (int) (Math.random() * height);
           Vector2 point = new Vector2(x, y);
           controlPoints[i] = point;
        }

        // set up the curves
        path1 = new Bezier<Vector2>(controlPoints);
        path2 = new CatmullRomSpline<Vector2>(controlPoints, true);

        // setup ShapeRenderer
        sr = new ShapeRenderer();
        sr.setAutoShapeType(true);
    }




    @Override
    public void render () {
        Gdx.gl.glClearColor(0f, 0f, 0f, 0f);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        sr.begin();
        sr.setColor(Color.WHITE);

        //draw path1
        for(int i = 0; i < 100; ++i){
            float t = i /100f;
            // create vectors to store start and end points of this section of the curve
            Vector2 st = new Vector2();
            Vector2 end = new Vector2();
            // get the start point of this curve section
            path1.valueAt(st,t);
            // get the next start point(this point's end)
            path1.valueAt(end, t-0.01f);
            // draw the curve
            sr.line(st.x, st.y, end.x, end.y);

        }

        //same as above but for catmullrom
        sr.setColor(Color.RED);
        for(int i = 0; i < 100; ++i){
            float t = i /100f;
            Vector2 st = new Vector2();
            Vector2 end = new Vector2();
            path2.valueAt(st,t);
            path2.valueAt(end, t-0.01f);
            sr.line(st.x, st.y, end.x, end.y);

        }

        sr.end();
    }

    @Override
    public void dispose () {
    }
}

EDIT: If the lines are still not smooth enough then you could try using anti-aliasing. You can enable it in libgdx by adding the following lines to your appropriate launcher

Android:

config.numSamples =2; // number of sample to take more = smoother

Desktop:

config.samples =2; // number of sample to take

This gives me this line AntiAliasing 2 samples

\$\endgroup\$
  • \$\begingroup\$ but the curve is not smooth , and if i want to move this curve on a particular path then the quality is not so good... How can i improve the quality of this curve when it is moving ?? Plz ans me.. \$\endgroup\$ – Avijit Biswas May 11 '17 at 5:48
  • \$\begingroup\$ I've edited my answer to show anti aliasing example for smoothing lines with AA \$\endgroup\$ – dfour May 11 '17 at 9:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.