# How do I make my character only stop on whole tiles?

**URL:** https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031
**Category:** Beginners
**Created:** [October 1, 2022, 3:25pm UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031 "2022-10-01T15:25:34Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Marfmamow](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@Marfmamow](https://discourse.processing.org/u/Marfmamow)
#### Post date: [October 1, 2022, 3:25pm UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031/1 "2022-10-01T15:25:34Z")

</div>

I’ve managed to make my sprite move, and it currently moves 2 positions each press of the arrow key.  
My map is made up of grids of 20x20 pixels, and I’d like my character to only stop on whole tiles, to prevent any collision bugs.  
I can’t seem to figure out how to do this. I want the character to move to the next tile in the direction it was moving in, even if its only 2 tiles over the previous

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 1, 2022, 3:57pm UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031/2 "2022-10-01T15:57:18Z")

</div>

Do you use keyPressed as a function? Then only ONE key press is registered, and not many.

You can add the width of one tile when the player starts at the middle of a tile

---

<div class="post-metadata">

### Author: ![Marfmamow](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@Marfmamow](https://discourse.processing.org/u/Marfmamow)
#### Post date: [October 1, 2022, 4:18pm UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031/3 "2022-10-01T16:18:13Z")

</div>

Yeah, I have each key press adjust x or y by 2. When I hold an arrow key down, I think it just treats it as multiple key presses

How do I make it so that when the key is released, the character will continue moving in the same direction until it’s in the middle of the next tile?  
Would I use keyReleased, and then calculate where the character is, then move it?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 1, 2022, 4:41pm UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031/4 "2022-10-01T16:41:51Z")

</div>

Only add the width of a tile  
instead of 2

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [October 1, 2022, 11:37pm UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031/5 "2022-10-01T23:37:20Z")

</div>

I’ve found the easiest way to do simple on-grid movement is like this:

```auto
int px = 10, py = 10, ox = 0, oy = 0; 

void setup() {
  size(400, 400);
  ellipseMode(CENTER);
}

void draw() {
  background(0);
  noFill();
  stroke(128);
  for (int j = 0; j < 20; j++) {
    for (int i = 0; i < 20; i++) {
      rect(20*i, 20*j, 20, 20);
    }
  }
  noStroke();
  fill(200);

  ellipse(px+ox, py+oy, 18, 18);
  if (ox > 0) ox-=2;
  if (ox < 0) ox+=2;
  if (oy > 0) oy-=2;
  if (oy < 0) oy+=2;
}

void keyPressed() {
  if ( ox != 0 || oy != 0) {
    return;
  }
  if ( keyCode == DOWN ) {
    py += 20;
    oy = -20;
  }
  if ( keyCode == UP ) {
    py -= 20;
    oy = 20;
  }
  if ( keyCode == LEFT ) {
    px -= 20;
    ox = 20;
  }
  if ( keyCode == RIGHT ) {
    px += 20;
    ox = -20;
  }
}

```

p for position, o for offset.  
if there’s no offsets, a key press moves the circle to the correct new position, but then adjusts the offset so it looks like it still is where it was. The offsets, of course, shrink to 0 every frame, so the circle appears to move.

---

<div class="post-metadata">

### Author: ![Marfmamow](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@Marfmamow](https://discourse.processing.org/u/Marfmamow)
#### Post date: [October 2, 2022, 7:53am UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031/6 "2022-10-02T07:53:15Z")

</div>

Is there any way to make the circle move by 2 pixels per frame while still making each tile 20x20?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 2, 2022, 8:59am UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031/7 "2022-10-02T08:59:35Z")

</div>

I guess so

For example use lerp()

OR Just let it move until it reaches the center of a cell

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [October 2, 2022, 9:48am UTC](https://discourse.processing.org/t/how-do-i-make-my-character-only-stop-on-whole-tiles/39031/8 "2022-10-02T09:48:24Z")

</div>

The circle in my example is moving two pixels per frame.  
Each tile is 20x20 pixels.  
The code I posted already does both of these things.
