Creating tracing line that perfectly follows your mouse and the object from where your drag began is tough

I am wanting to create a tracing line like the sample pictures below wherein the line starts from where I hold down the mouse-click and follows my mouse.

To accomplish a similar effect, I discovered offset with tiles (that will make the arrow move similar to how it is shown in the video). Now I am trying to solve a few problems and I am hoping the geniuses on here can help me.

Problem 1: Angle We know that the slope formula is (y2 - y1) ÷ (x2 - x1). We also know that 1 on a graph has a 45° angle. So my initial formula was:

45 x ( Cursor.Y() - Object.Y() ) ÷ ( Cursor.X() - Object.X() )

However, this is not working perfectly. Especially when my mouse is to the left of the object. So negative numbers are worse.

Problem 2: Origin The angle rotates (fulcrum point) is the center instead of the Origin (top-left). This makes it so that the tracer disjoints from the object. So I will need to find a way to keep adjusting the X and Y point of the tracer with respect to its angle and size.

Problem 3: Size Given the tracer is a tile, it can only have width adjustment (as height adjustment will result in having multiple lines / lanes / rows of arrows). The formula I am using to figure out the size / width of the tracer is:

(CursorX() - Object.X()) + (CursorY() - Object.Y())

Once again, this works ok when there is no Y movement but becomes hoaky the moment verticle mouse movement is in play.

Thank you so much!!!

Sounds like you want to first change the angle and width of the tracer, then move the center of the tracer to the midpoint of your line with (X1 + X2) / 2 and (Y1 + Y2) / 2.

To get the angle and distance you can just use AngleBetweenPositions() and DistanceBetweenPositions().

You can use the action to change object position by its center to avoid calculating from the origin.

Thank you - can you elaborate on the last part. I am also stuck on that. It rotates from the center and I want it to rotate from the top left.

To elaborate - changing the center points is not a feature of tiles - which is being utilized in this example.

Are you referring to a tiled sprite, or a tileMAP?

In any case, I don’t know why you would need to rotate from the origin. The angle of rotation should be set to the angle between start and end. The center should be set to the midpoint ((X1 + X2) / 2, (Y1 + Y2) / 2). There’s a separate action for changing position by an object’s center, rather than the origin.

The reason why we are doing so much manipulation is because unfortunately there is no way to change the center point of tiles. You can do it on sprites but you can’t for tiles.

The reason why we are wanting to rotate from origin (rather than center) is because otherwise it breaks / disconnects from the object where you began dragging.

The reason why we are wanting to use tiles is because trail stretching should not stretch the arrow but duplicate it (and using offset on tile gives the animation of it moving indefinitely).

Hope this helps. Also if you are aware of a more elegant way of rotating / angle a tile from the top-left or a defined point, please share here.

If this is what you want

Then as mentioned, place the object in the center of the 2 points or an object and the cursor and rotate and size the object.

I used the position object based on center action.

I also rotated and resized the tile sprite first before changing the position. Otherwise, it was a bit off if you moved the cursor quickly.

You can do it for tiled sprites. I’m looking at the editor right now and if I select a tiled sprite and then type ‘position’ in the middle search bar, I see both “Position” and “Center Position” actions. I’m not sure if you can do it with a tilemap, but even if you could, this would be an odd choice of object type for this application.

This still doesn’t work even if you center it :(.

Below is the code as well as the result. We want this to stay tethered to the mouse and the green drop.

Concern

Try centering trail between the cursor and drop.

1 Like

Before changing any more events, can you show us the points on your animated line sprite?

I copied this entire thing and it almost works. We are getting closer.

Screen recording 2025-01-27 8.25.43 PM

TileSprite do not have points.

I think you need the change position using center action. Also, my drop object has the origin and center points in the center.

Can you elaborate on the change position using center action one. I changed drop object’s origin and center points now.

1 Like

If it’s a tile sprite I’m unsure how you’re going to make this work, because the origin will be on the upper left corner. Realistically for what you’re trying to do, you need it to be starting from the leftmost point like origin…but in the center of the left side.

You might be able to do it mathematically, though, and I think you’re getting close.

OMG! You are a magician.

Screen recording 2025-01-27 9.41.50 PM

3 Likes

Tile sprites still have “from Center” actions, even if you can’t edit the points, so it is not necessary to calculate from origin. Feel like this has been said quite a few times in the thread lol :stuck_out_tongue:

Just to clarifiy, Center is center of the object width and height. Which doesnt help much if you want to calculate from the leftmost center of the object’s width, which is what was shown as the goal throughout the thread.

It would also lead to completely different angle calculations.