Why doesn't my coordinate system reflect the standard coordinate axis that I requested for?(LibGdx)

Question

Basically, I want my coordinate system to have (0,0) as the top left corner of the screen(used to this in Swing and Android Canvas drawing). I saw a great thread for doing so Changing the Coordinate System in LibGDX (Java). I used the code that the creator provided but the rectangle I am drawing is still at the bottom of the screen.(screenshot)

Here is my code for drawing the rectangle(I use one class, GameWorld, to manage all the "game objects" and another class, GameRenderer to render all the game objects) Both classes have a method that will be called from the GameScreen's render method. Relevant code in GameScreen.java

public class GameScreen implements Screen {
          //manage game objects
          private GameWorld world;
          //render game objects 
          private GameRenderer renderer;
          public GameScreen() {
                 world = new GameWorld();
                 renderer = new GameRenderer(world);
          }
          public void render(float delta) {
                  world.update(delta);
                   renderer.render();
           }
          .....
  }

And in GameWorld.java

public class GameWorld {
    private Rectangle rectangle;
    public GameWorld() {
              rectangle = new Rectangle(0, 0, 17, 12);
    }
     public void update(float delta) {
            rectangle.setX(rectangle.getX() + 1);
             if(rectangle.getX() > Gdx.graphics.getWidth()) {
                       rectangle.setX(0);
            }
     }
     public Rectangle getRect() {
              return rectangle;
      }
  }

And in GameRenderer.java

public class GameRenderer {
    private ShapeRenderer shapeRenderer;
    private OrthographicCamera cam;
    private GameWorld myWorld;
    public GameRenderer(GameWorld theWorld) {
        myWorld = theWorld;
        cam = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        cam.setToOrtho(true, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

    }
    public void render() {
        shapeRenderer = new ShapeRenderer();
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
        shapeRenderer.setColor(87/255.0f, 109/255.0f, 120/255.0f, 1);
        Rectangle toDraw = myWorld.getRect();
        shapeRenderer.rect(toDraw.getX(), toDraw.getY(),
                toDraw.getWidth(), toDraw.getHeight());
        shapeRenderer.end();

    }
}

And finally in Desktop.java where I am testing the game,

public class DesktopLauncher {
     public static void main (String[] arg) {
             LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
             config.title = "My test";
             config.width = 272;
             config.height = 408;
             new LwjglApplication(new MyGdxGame(), config);
      }

}

Does anyone see where i am doing wrong? Why is the rectangle still being drawn at the bottom of the screen. I used the provided code from the creator and specified the rectangle's top y coordinate as zero.

Answer 1

You didn't apply your camera's projection to the ShapeRenderer.

Add this line right before shapeRenderer.begin():

shapeRenderer.setProjectionMatrix(cam.combined);

Also, you should move ShapeRenderer's instantiation from render() to the class constructor so you aren't creating a new one on every frame.