How do I recreate a puzzle from the Witness?

I'm interested in recreating a puzzle from The Witness, a fantastic indie game that just came out recently.

.

Here's an example of what the basic puzzles look like:

I'm struggling with how to make a line that is drawn and follows a path dynamically as the player moves their mouse or finger (touch).

The line needs to erase itself when moved backwards and cannot go through or overlap itself.

I've tried using the Canvas plugin, but there's no way to make the line move backwards I can think of. It still draws a nice line I can pin to a different object that is forced to stay within the bounds of various solids, but I can't make it rewind really.

I tested using custom movement and moving a point towards the cursor/touch every tick, but it ends up being very jittery and gets stuck on corners between squares. I tried pathing as well, but it doesn't seem suited for this really.

I suspect there's a more straight-forward way to accomplish this specific visual aspect. How would anyone else approach this?

An invisible scaling object that changes in size as needed on each intersection? I'm not sure if that'd work well, but it'd be my first attempt.

Unless of course you've already tried that, then I'll go and feel dumb in a corner.

I'm not quite able to get your idea to work Gumball. The objects would eventually overlap intersections that haven't been drawn yet. I'm still trying to think of a way to tell them when to stop scaling and let a new intersection take over while still letting it know which direction to come from (since you can go through intersections multiple ways).

Collision could be enabled, and on overlap you could disable the visible one, and let the invisible one take over (in turn making it visible)?

Alternatively, could could have nodes in each intersection, and upon crossing one create a new object that scales towards the current location of the player's finger/mouse and stops at the next node. Almost the same concept, but without pre-existing objects.

Excuse the lackluster explanation, I'm not sure how else to explain it.

I think gumball's idea should work. It's just using a sprite to make a line, but that part can be dealt with later.

The first task would be to get the motion working in tight spaces like that, and not get snagged at intersections. I think a pacman tutorial would probably help with this, since the motion is similar. Aka. Motion in tight corridors.

To keep the object from crossing it's own path is the next problem. Basically you could have a square at each intersection and make them solid as needed.

To do this you can use an array as a list of corners. The list starts with just the starting corner in it.

When the distance between the player and the last corner in the list gets big enough, then the last corner the player overlapped is added to the list. The idea here is if the distance is bigger than the distance between corners then the player passed a corner.

To do the backtracking, the distance between the player and the 2nd from last corner of the list is compared, and if it's less than a edge length, remove the last corner from the list.

So now that gives you a list of corners. If you keep all of them but the last one solid, then you can keep the player from crossing it's path.

Finally you can take that list and make lines between them all and from the last to the player. You could either use gumball's idea or the canvas plugin I suppose.

Anyways that's the idea at least, I was going to try to type out events but it seemed more understandable describing it. I haven't tested the idea yet but it should at least be a start.

Here's a capx of the idea:

https://dl.dropboxusercontent.com/u/542 ... clone.capx

The movement still needs improving.

R0J0hound, that's amazing. Thank you!

I spent six hours yesterday trying to force a laughably simpler version. I was honestly intimidated by arrays.

I broke down what you made to help force myself learn how they work better. I only have a couple specific questions regarding it, if you wouldn't mind helping me understand it better:

1. How are the lines allowed to exist if they are also being destroyed every tick?

2. Does the System loop to generate lines that goes through each corner in the array automatically run every time the size of the array is changed?

(Updated capx)

Lastly, I reviewed the Cloning the Classics: Pacman Tutorial. I don't think grid-based movement would be ideal for what I'm actually intending to accomplish. Most of the Witness puzzles occur in a grid-like space, but many are more organic as well.

I didn't find anything searching the forums for motion/tight/corridors. Would I be more successful trying to implement basic physics and experimenting with friction and/or torque values (so it can roll around corners)? I did this in my laughably simple test, but am still getting the hang of the behavior. It seemed to seizure around somewhat.

I'm on my cell so I can't write a whole lot but:

1.

All the old lines are destroyed, and new ones are created every tick.

2.

It's done every tick Regaudless.

Another thought, the variable I had "px" is short for previousX instead of playerX. It better represents what they do. Also the every tick event relates more with event 6 so I had it right above it as I recall.

In events 4 and 5 the corner that is being added or removed aren't the ones being compared with the distance.

In event 6 it's looping from the corner that was last added to the one that was first added. I went that way so I could set px before the loop started. So the lines would be created between the locations player,corner,corner...

I can maybe make up a picture to explain all of it better.

Edit:

The motion bit would be best done manually I think. The physics or any of the behaviors aren't really suited for it.