How to create 2d grid placement system ( newbie )

Hello once again mates !

I have wondering what would be the best method to do 2d grid placement system, for example like in this game Legion TD 2 - Multiplayer Tower Defense Gameplay (PC UHD) [4K60FPS] - YouTube.

What are my ideas, and what have I tried as a whole for now.

  1. Export blender grid meshes on places where we want towers to be placed ( make plane in blender, subdivide it and make copy, place it near other, that gives you control over placements if you have predefined towers for example)
    Pros:

    • Each element is for itself and you have control over each grid element
    • You can create standartized template, and use grid logic to read and easy apply predefined functionalities
    • More complex geometries

    Cons:

    • If you have 5-6 big grid systems you will always load all verticies. ( you cannot for example say to load 1,2 as it is if we dynamically generate them with code )
    • We must check alot elements each frame for overlapping ( when user have selected tower, which may be performance killer, instead of smooth experience )
    • We don’t have full control of width/height, every time when there is a change, add or remove of grid we must go in blender and do it…
  2. Make TIle map in babylon
    Pros:

    • We have control over width/height/placement/ number of grids.
    • We load won’t load unnecessary verticies, always ( for example if max players that can play the map are 10 and we have only 3 it won’t load all grids)

    Cons:

    • Harder to create/ manage
    • Act as a one whole unit ( atleast I still cannot do it to recognize each square for itself ).

What exactly is my idea from the tries that I have mentioned up.
When map is loaded, we will scan the number of users and get random ( for now ) poitnts and parameters for creating grid system on given place with given height/width/ squares numbers from object.

  1. User Gui loads and user clicks on button to choose given tower, we are making active the grid and adding raycast on mouse cursor.
  2. When it intersects with the grid, we are calculating (1 tower should be placed on 4 squares, still not sure how to calculate it…) if tower can be placed on that spot (eg. tower are intersecting with another tower or not fully into the grid)
  3. User clicks and mesh is added to position of those 4 mesh squares.

Questions.

  1. Will the main idea work ?
  2. Is it better to make predefined grid in blender, or go and keep trying my main idea ( generate grids from predefined parameters after map load ) ?
  3. Any idea how to calculate sibling squares if there is some obstacle which prevent tower from being placed there ?
  4. If there is a book/ forum or anything for those kind of systems can you please share it ? ( internet is full of information for different kind of grid systems and I am confused at the moment )

Thanks in advance ! Have an awesome day !

Hello! :slight_smile: This is quite a complex scenario, so I’ll answer the parts I’m able to :sweat_smile: From what I understand, your Blender grid idea would consist of creating a subdivided plane with vertices on the points you want to be able to place towers? I think both it and generating a grid on code would work, each one with its pros and cons. Creating a grid on Blender might be easier in cases where your stage has a more complex geometry, but it will also require more vertices to be exported.

Other forum users might have some good ideas :slight_smile:

Yep mate that is exactly what I want to do. Didn’t think of the case with more complex geometries, I thought only for square planes, but its definitely going in my pros list, thanks !

Is it just me or wouldn’t it be easier and in the end more manageable to generate the grids straight in BJS. I believe grids in BJS could very easily be defined so that non-active/obstacle cells would be left out. In short, the mapping and the logic would be made in BJS, whereas the design and objects would come from Blender. But may be, I’m missing something here?

Well yea, the main idea is that, just for me its harder because I didn’t find a way to generate this kind of ‘cells’ that you are writing about, I have generated tiled ground but it acts as a whole object, don’t know how to make each cell act individual.

Sadly, I’m not much of a game dev, so if it was me I would do it in a way I know I can master (but then I don’t know if it’s the right way or the way). What I had in mind is to create a map overlay with an ADT grid. Feed the grid with rectangles for my obstacles, eventually also rectangles for active cells. Next, I would check on which cell/rectangle my mouse/picked item is hovering and allow or refuse placement on this cell/rectange/coordinates.
The advantage I see here is that it is ‘ez as pie’ to create even complex/multi grids on a map and in case they are done with the GUI Editor, it’s even easier to edit them and update everything instantly. I’m just not sure about the impact on performance but I’d rather think it should be low.
May be others know of a better solution @PolygonalSun @Blake @PatrickRyan ?

Edit: Forgot to mention that I’m eager to see these TD games come to BJS. I’m a huge fan of tower defense gameplay :smile:

@Iordan_Iordanov, if your goal is to map a square grid in texture over an in-game mesh, you can accomplish this with a custom node material. Your geometry will have your normal texture set using PBR, blinn-phong, or custom lighting models, but you also add in another layer into the shader to create your grid. This can be a simple matter of adding grid lines in the shader math, which will give you the control of changing the size of the grid on the fly if you want (or changing it based on the underlying geometry).

Then you can simply do a raycast and get the UV coordinate of wherever the raycast hits the mesh to know what cell should be highlighted in the shader. You could even pass part of one of your textures (an unused channel like alpha on a normal texture or metallic/roughness texture) to pass a map of eligible spaces for placement.

For example, if you have a piece of geometry that has a bridge on and water beneath the bridge, maybe you only want to be able to place units on the bridge. You can use an alpha texture to differentiate between valid and invalid spaces where your bridge is white in the alpha channel and all other parts of the texture are black. Then you can simply use that key when rendering your grid to show where your grid cells should or should not be placed. That way you can customize the grid per piece of geometry rather than needing to build your geometry to the grid.

If you approach it this way, the cost is negligible in that you have some more work to do in the shader, but no additional meshes to load. Here are a couple of examples of using a shader to create a grid on a mesh. Neither of these are an exact solve for what you are doing, but they both can be used as reference for your custom solution.

Hex grid post and playground
How to light hexagon (or an specific zone) in height map floor? - Questions - Babylon.js (babylonjs.com)
Node Material Hex Grid Highlighting | Babylon.js Playground (babylonjs.com)

Square grid on sphere thread and playground:
Creating quad sphere - Questions - Babylon.js (babylonjs.com)
Rubik’s Sphere | Babylon.js Playground (babylonjs.com)

5 Likes