Map Grid

[Sparky]

Hi,

 

First of all, I'm new to WebGL and Babylon, so apologies for any noobisms. 

 

Basically, i'm trying my hand at an RTS, I've done a bunch of reading on Babylon and at the moment I'm just getting to grips with some of the basics. My plan is to get a very simple world in babylon that I can use to test and code some of the game mechanics.

 

I've so far created a simple world with a heightmap and texture as per the example in the tutorials. Where I'm struggling is how to approach setting that world to a grid. So any buildings etc have to snap to grid when being placed. I'll also want to be able to detect clicks on grid squares so I can display information about what's there, resources etc.

 

Really, I'm just looking for help with approach here. Should I be looking at a tiled ground? (I'm not sure how that would work, splitting up the height map image etc.) or should all the work be done with the detection of the mouse cursor and the grid can just be aesthetic only? 

 

Thanks for any help you can give!

 

(p,s> I've also looked at a bunch of examples, but haven't yet found anything that does what i'm after). 

[jahow]

Hi Sparky and welcome,

 

What you're describing has much in common with a project I've worked on, take a look at it here: http://www.html5gamedevs.com/topic/6557-babylon-projects/?p=87090

 

My approach was to subdivide the game world into cells, each cell having its own set of meshes (ground layer, water layer, building, etc.). Basically, nothing can exist out of those cells (it's not exactly true because there are vehicles). Each cell is then referenced with a set of (x,y) coordinates in the grid.

 

When you need to access game data, for example "is there a building on the cell next to me", you can just look up the cell at (x-1, y) and access its set of data. It can be the type of building it holds, terrain data, or any other thing.

 

Also, rendering is theoretically simple, because you can just attach any mesh you want to the cell parent node. If something on the cell is changed, it can change its set of meshes on its own to reflect that. In fact things are a bit more complicated for performance reasons, but I could give you more details if you like.

 

For click detection, I associated an invisible box to each cell, and when doing the "picking" in the scene (i.e. finding out what is under the cursor) I only check these invisible boxes, also for performance reason. It works quite well. You can even add more precise boxes, for example if you have a building that's tall and you want to be able to select it on all its height.

 

That was my general approach, not the only one for sure but it worked reasonably well. Hope that helped!

[Sparky]

Hi jahow,

 

Thanks for sharing, I'm going for a completely different MO, but the general gameplay will share a lot of features with what you're building (managing resources, buildings etc). I'm going for a more co-op vibe where it's all about the player interaction.

 

What you've built so far looks great, I'm definitely going to have a play when I get home from work and see what you've managed to get going so far. Should be a great help to me, thanks!

 

I'd be keen to hear whatever detail you've got, I'm desperately trying to get the babylon side of things to the state where I can start talking to a server and this work on the co-op mechanics. I'll have a look at your code and see if I can figure out the cells approach.

 

Cheers!

[jahow]

One of the things that caused me the most trouble was achieving acceptable performance with many cells. I used a 32x32 grid which is not that big, and it amounted to 1024 cells.

 

Now, my first method was attaching meshes by layers on each cell: one parent (empty) mesh, one mesh for the terrain, one for water, one for the current building, one for vegetation. and one for the picking detection.

 

The thing is, because some of these layers were actually composed of several meshes, I often had around 10k meshes in the scene, and it was bringing the FPS down. Note that this was not related to how many polygons the meshes had. So I ended up merging as many meshes together as possible, and it worked, although I had to code a way to "unmerge" a mesh, for example if a cell's terrain changed from ground to water.

 

Bottom line is: you need to think early of a way to have as few meshes in your scene as possible. 10, 100 is OK, but a thousand and above will probably cause you trouble.

[Sparky]

Good to know, being a multiplayer, I want to have a fairly large map. I'm hoping only loading visibile parts of the scene will help with that. For now I really just need a workable test world that I can use to build on my ideas for how the multiplayer works and then I'll go back to the game world and optimise that once my 3D buddy has had time to put some buildings etc together.

 

I had a bit more of a go on your game, it's cool, love the vehicles. I just couldn't figure out what to do! I guess that's just the joys of a demo. Makes you realise how useful the first-use tutorials really are!

 

P.S> Love the construction animation .

[jahow]

Yeah, there's not much to do... well there are things to do, but not a proper goal (yet)

 

Anyway, putting together a simple map to test multiplayer shouldn't be a problem, there's a ton of knowledge lying in these forums and also a complete documentation for BJS: http://doc.babylonjs.com/page.php?p=29

[Sparky]

Yeh, I got the little vehicles running about, but they stopped and I've no idea why! They are cool though!

 

Cheers, have been looking at the docs, just when you're new to this, working out which bit to read is the hardest step . It's like a whole new vocabulary. I'm sure after a flick through your code and the doc's for the bits you've used, I'll be flying . Then I can give my server buddy a nudge to get his end up and running so I can start sending him data.