How do I create walls by clicking and dragging?

Hi everyone.

I was wondering if anyone would be able to offer me some some hints/tips on how to go about creating a wall placement system, like the kind you would see in games like Prison Architect, Rimworld, or even The Sims.

What I have so far is a setup that will place wall tiles down wherever I'm dragging, which isn't right but that's as far as I've gotten with it so far.

Ideally, I would want to click with the left mouse button and drag out a wall (at this stage it would appear as like a ghost version of the wall) then, when I let go of the mouse button the wall would then be placed.

Another question I have is how do you ensure that wall tiles only drag out horizontally or vertically instead of just going wherever the cursor is?

Thanks for any help you can give me!

I did something like this long ago, when I was ambitious and dreamt to clone Dwarf Fortress, in Space (this was a few years before Rimworld, back when I first toyed with the free version of Contruct 2). The good thing that came out of that foolish quest was learning how to do construction UI and how to use arrays to store jobs/orders for multiple units such as resource harvesting>go to stockpile when full>go harvest some more (with finding idle units and prioritizing them at that). Also I did some wall auto-tiling, fun times.

The trick is to use a tiled background (unless you are using anything other than a square grid) for the build cursor*, but set its position to the grids used by your tilemap by calculating the closest grid-aligned position (gridsize*round(mouse.x/gridsize)). You stop the cursor from following the mouse when the button is held and you set the width and height as a multitude of your grid width/height depending on mouse position versus build cursor position. Once the button is released, you calculate the direction and number of walls to be generated and plug the values into a wall creating loop.

https://www.dropbox.com/s/1njelck019iqk ... .capx?dl=1

EDIT:

*For other grid shapes, including isometric or hex, things get trickier. In such cases you would need to dynamically spawn wall section cursor (ghost) sprites when dragging along a given axis. Or, if you are feeling clever, you could create the maximum visible number of such sprite, index them from 1 to whatever, and set them to invisible by default. Then, whenever dragging is on, you would arrange as many sprites as needed along the line that has been dragged and make them visible after they are positioned. Once dragging is finished you make the invisible. Less messy than creating/destroying ghost wall sections all the time.

Hey thanks a lot!

That's really quite helpful actually, I'm going to play with that a bunch and see what makes it tick. I think I understand what you did for the most part.

I didn't mention it in my original post because I didn't want to bog it down with details but I am indeed trying to make something like this work with an isometric grid So yeah, this will take some research and study. This is a great help.

Again, thanks. Appreciate you taking the time to help

I didn't mention it in my original post because I didn't want to bog it down with details but I am indeed trying to make something like this work with an isometric grid So yeah, this will take some research and study. This is a great help.

Again, thanks. Appreciate you taking the time to help

No problem. I might throw you an isometric grid solution today after I get back from work. I have a fairly good idea to do it, as outlined under the EDIT in my previous post.

Kazan I found a fairly simple way of doing this for an isometric grid, probably far simpler than my original solution. It involves drawing a ray for overlapping tiles. It is possible to make "rigid" directional dragging by setting the ray's angle to the closest "approved" angle based on the one calculate from angle(mouse.x,mouse.y,buildcursor.x,buildcursor.y), so that walls only go along a straight line perfectly aligned with isometric grid lines.

Might do a tutorial on this in the future. Could be useful if somebody wants to do a level editor.

https://www.dropbox.com/s/au5wupgkvwdbx ... .capx?dl=1

Pulstar

That's...amazing, that's pretty much all I needed.

Thanks so much, man

That's a pretty clever way to draw a ray btw. I mess with UE4 on occassion and always wished C2 had the equivalent in certain scenarios. I'll definitely remember that for later.

There is also interactive (adaptive) sprite/tilemap example for level editor:

There is also interactive (adaptive) sprite/tilemap example for level editor:

Yes, but it does not show the "drag to show positions before creating" mechanic used commonly in strategy/simulation games for building roads or walls (which the OP wanted to know how to do), such as that found in Rimworld, SimCity and the rest mentioned by the OP. You end up with lots of "accidental" wall/road tiles the way that example works and that is just annoying for the end user.

It is still a very cool interactive example for bitwise auto-tiling though and the tile creation method is sufficient to show how auto-tilign works.

i didnt really understand how :/

....