Making " unit selection circle" like in RPG games

What is the suggested way to create a selection outline like one you have in RTS games?
The immediate solution i can think of is attaching a plane to object with transparent texture.

But I’ve seen some that “stick to terrain”, instead of being occluded by it. It is more advanced than that for sure.

2 Likes

I’d suggest looking at projection textures. You can tell a light to project a texture down onto your scene. That way the the texture will look like it’s mapped onto your terrain wherever your character is. So to achieve what you’d want, you’d have a light that projects a texture of a “selection circle.” Then you could move that light on top of whichever character was selected.

Here’s some documentation on projection textures:
https://doc.babylonjs.com/babylon101/lights#projection-texture

Here’s an example playground from that documentation:

This video also walks through the technique as well:

This is a fantastic idea for a future video btw! I might do one on this very subject down the road! Thanks for the idea!

Hope this helps!

1 Like

Ok so this thread definitely got me thinking that we for sure need a video on this subject. Too much cool stuff to cover.

So I went ahead and made a playground of how I would go about doing this. I’ll record a video in the coming weeks.

https://playground.babylonjs.com/#D4AERS#7

The gist of what’s happening here is that I am using this texture as a projection texture.
selectionCircle

I create a scene with a groundplane from a heightmap as in this example:
https://doc.babylonjs.com/babylon101/height_map

I then create 4 boxes, give them different colors, and give them random positions on the ground. Note that there’s a tricky bit in here where I raycast to figure out the height of the ground, to place each box on “top” of the ground.

I create a spotlight and give it the green circle texture as a projection texture, then whenever you pick a mesh that is NOT the ground (so one of the boxes), the light will shift to project over that box.

Note that the texture I’m using is a green circle with black around it. The black masks out the light projection. So the light will only project the green circle.

I know that’s a lot to digest, but hopefully it’s helpful in answering you question.

Again, I’ll do a video on this in the coming weeks!

Thanks for the awesome question!

Cheers!

5 Likes

Took me a little while but I finally made an “official” video for this as promised!

3 Likes

Really cool! How nice of you to mention my humble persona.
I see an immediate application to that solution also for magic effects like auras or so.

1 Like

Is it possible to set less transparency for the projection texture? so it becomes more like emissive green.

not really. You would need a custom shader to do this :frowning:

Is there a simple example? This is how it should kinda look:

selection circle

I would think that you could manually modify a copy of that projection texture to contain the desired transparency, couldn’t you?

I found an example on ShaderToy but I don’t know how to apply on ground (heightmap) of multiple moving units:

Edit: Here how far I got in my PG:

Edit2: Got it, just use setArray3 for unit positions.

1 Like