Tutorial 1.5: Move bitch, get outta my way - Simple sprite movement

When looking at the program as it is now, the orb-sprite appears bottom-left, and is fairly small compared to the screen. Why that particular size by the way? Because it is 100 pixels wide, and the (emulator phone) display is 1920 pixels wide, and  1080 pixels tall. Or something. So, it takes about 5% of the screen.

But what is a man gotta do, to make that sprite be elsewhere, say in the center of the screen? Well, let’s draw it on a different {X,Y} position then. Take notice of how X and Y are calculated:

   public void render () {
      Gdx.gl.glClearColor(0.05f, 0.21f, 0.2f, 1.0f);
      Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

      // Calculate center pixel position
      int screenW = Gdx.graphics.getWidth();
      int screenH = Gdx.graphics.getHeight();
      int x = screenW / 2 - 50; // -50 from center (sprite is 100 pixels wide)
      int y = screenH / 2 - 50;
      spr.setPosition( x, y );

      // Draw
      batch.begin();
      spr.draw( batch );
      batch.end();
   } // render

And how to make it MOVE (over time) or “slide” then? Simple, keep track of either X or Y, and increase (or decrease to move in the opposite direction) a little bit every time it renders. For example:

    float offset = 0.f;

   @Override
   public void render () {
      Gdx.gl.glClearColor(0.05f, 0.21f, 0.2f, 1.0f);
      Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

      // Move
      offset += 0.2f;
      int screenW = Gdx.graphics.getWidth();
      int screenH = Gdx.graphics.getHeight();
      int x = screenW / 2 - 50 + (int)(offset);
      int y = screenH / 2 - 50;
      spr.setPosition( x, y );

      // Draw
      batch.begin();
      spr.draw( batch );
      batch.end();
   } // render

In case you’re sprite is dropping down instead of moving to the right, bare in mind that screen can be rotated 90 degrees. But anyway, now it moves with 0.2, uh, “things per cycle”… Whatever that is. But hey! It moves!

If we aren’t happy with the size, we can arrange something there as well. Why not try this SINE function, which makes the sprite grow and shrink continuously over time? The function below will size the sprite between 150 and 250 pixels (outcome of sin being a number between -1 and +1).

    float offset = 0.f;
    float sizer = 0.f;

   @Override
   public void render () {
      Gdx.gl.glClearColor(0.05f, 0.21f, 0.2f, 1.0f);
      Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

      // Move
      offset += 0.2f;
      int screenW = Gdx.graphics.getWidth();
      int screenH = Gdx.graphics.getHeight();
      int x = screenW / 2 - 50 + (int)(offset);
      int y = screenH / 2 - 50;
      spr.setPosition( x, y );

      // Resize
      sizer += 0.1f;
      spr.setSize( sin(sizer) * 50 + 200, sin(sizer) * 50 + 200  );  

      // Draw
      batch.begin();
      spr.draw( batch );
      batch.end();
   } // render

That was short and very basic, but hey, got to start somewhere right? Next post we’ll be refining these movement and size units. Because now it moves with 0.2 and grows with 0.1…? Whether you are a Metric or Imperial guy, those units don’t make a whole lot of sense to me.