How to move an object as far as it will go before hitting a wall

#1

im making a game and i need to figure out how far i can move something in a line before it hits something else

#2

if your walls are horizontal or vertical I’d check the object against wall x or y positions even before moving the object.
if the walls are in random positions and anglea you can hittest to see if your object is on a wall after movement and move it back to previous position to avoid overlap

#3

i need it to move instantly

#4

the walls and stuff move
i tried to do that but it moves slowly

#5

Are you making a scrolling type game? character fixed in central position and all the scene moving?

#6

no
why would i need this if i were making a scrolling game

#7

You have to move the object in the direction you want to go while it isn’t intersecting with any walls.

var walls; // array of wall clips
var dirx; // x direction object will move per iteration
var diry; // y direction object will move per iteration

var wallhit = null;

// move in direction defined by dirx and diry
// until it hits a wall
wall_loop: while (true) {

    // check if it is intersecting with any wall
    for (let wall of walls) {

        // if it is, then get out of wall_loop
        if (this.hitTest(wall)) {
            wallhit = wall;
            break wall_loop;
        }
    }

    // if the code reaches here, then that means
    // it hasn't hit a wall yet.
    this.x += dirx;
    this.y += diry;
}

even though this isn’t tested i’m fairly confident this will work. you just have to define the walls, dirx, and diry variables.

there is a small problem with this though. once the object hits the wall it might have penetrated the surface of it. this problem gets amplified the larger dirx and diry are. one way to fix this is to use the bounding box of the wallhit variable after wall_loop, as well as the width and height of the object’s bounding box, to snap the object outside the wall’s bounding box

#8

i thought you couldnt use while true loops

#9

there is a break inside the loop

#10

ok thanks
ill try it

#11

uhhh
i tried it and it just crashed
can you send a wick file?

#12

i tried something simple
while(true){
this.x += 10
if(this.hitTest(wall)){
break;
}
}
but it doesnt work for some reason

#13

Oh right wick only updates the bounding boxes between each frame. Haha.

use this

var walls;
var dirx;
var diry;

var wallhit = null;

// function that determines whether two clips are intersecting or not
// use this instead of the built-in hits function
// because internal bounding boxes only update at between each frame
function hits(a, b) {
    var aw = a.width / 2;
    var ah = a.height / 2;
    var bw = b.width / 2;
    var bh = b.height / 2;
    
    return (
        a.x + aw > b.x - bw &&
        a.x - aw < b.x + bw &&
        a.y + aw > b.y - bw &&
        a.y - aw < b.y + bw
    );
}

// move in direction defined by dirx and diry
// until it hits a wall

wall_loop: while (true) {

    // check if it is intersecting with any wall
    for (let wall of walls) {

        // if it is, then get out of wall_loop
        if (hits(this, wall)) {
            wallhit = wall;
            break wall_loop;
        }
    }

    // if the code reaches here, then that means
    // it hasn't hit a wall yet.
    this.x += dirx;
    this.y += diry;
}

also make sure it has a wall to go to otherwise it’ll just search for a wall indefinitely therefore crashing. you can add a limit to the number of iterations done.

#14

uhh
so this is just the same but you use a function instead of hitTest

#15

wow
you have no idea how long ive tried to solve this

#16

i know this is a dumb question but what do i put after var walls
ive spent too long trying random stuff

#17

it would be useful to have a hit test between a clip and a single point.
Looks like paper.js has something like that

#18

can you put it in update?