Our team is a working on a project that requires interacting with a fullscreen Map
This map will be split up into different “zones” with some level of interactivity:
Highlight on hover
Separate actions on click
A label centered in the zone
Greyed out
Dynamic changes (the zone areas can be changed at runtime and are not known before being rendered)
We’re wondering what’s the best way to approach this feature before starting developing it
Should we keep a single plane with the whole map texture and apply some kind of overlay to it ?
Or split it up using CSG to allow each zone to be completely independent ?
Or maybe another option we haven’t thought about ?
Does this mean the map (and its rendered texture) is procedural?
In which case, I believe a procedural texture with a layer to detect areas through the texture would work.
If the map is always the same, a simple pick from an overlay would be ok, I suppose.
I’m not sure how CSG came into the thinking? Is it a 3D map?
Does this mean the map (and its rendered texture) is procedural?
Yup, both the texture and the paths splitting it can be edited either by the “player” or programmatically.
They will both be stored and synced on our backend
I’m not sure how CSG came into the thinking? Is it a 3D map?
It’s only a 2D map, I was thinking CSG may help in making custom 2D meshes from a sliced plane
I’m not sure I’m the best person to answer but I think we (I or someone) will need to know a little bit more before answering.
So, going back into the process of the map/world generation, how does it work? The map is a procedural terrain? Is it built from tiles?
Then how are the regions defined? If I understand correctly the user can (through editing) split the map and create new regions, is it?
Then, the 2D map/texture is generated from the 3D world, is it?
I suppose solutions would go around assigning either an id to the tiles (if tiles) to make them part of a region - or - use the selection of a region made by the user to include it in a region. Then, probably you could use UVsets for each region and pass them in a procedural texture and create picking from the uv sets. Very high level at this point. As I said, it would be best if you could explain the process a bit further. Next I would call-in some people more knowledgeable than me to try give you a suitable approach for it… cc @PirateJC cc @PatrickRyan .
We’re making an online tabletop RPG builder.
This question is about the Game Master ability to submit and create maps themselves.
They will have to submit a 2D image that will be used as a map, the image itself can only be changed to a new image, they cannot edit only “parts” of it.
There is no 3D world
After uploading this map, they will have to place key points, characters and indicates the different zones on this map. This is the fully dynamic part, they will have to draw the lines separating the zones themselves and will be allowed to change them whenever they want.
In the future, we might add an algorithm proposing a given splitting based on the map’s content.
Once the splitting is done, other players will be able to interact with the map and its zones
Hovering on a zone shows its name in the middle of it, some zones will be accessible and others won’t, some will be visible and others not (like an RTS game)
Thanks, yes it does help.
Still a couple of questions just to make this clear:
The input is a 2D texture/map projected on a plane. The user uploads an image and can change its layout (including region definition) only by uploading a new image/texture, correct?
This texture/map is projected on a simple plane that becomes the game board, correct?
Assuming the above understanding of mine is correct, what you need is the ability to make selections/interactions from this uploaded texture/map, correct?
Thanks for your additional input. I’m sure this will help you get more accurate suggestions/solutions…
Meanwhile, have a great day
Edit: Assuming my assumptions above are correct, can we imagine having the dungeon master add a second format image that would serve as the base for interactive areas and regions?
Thank you for your answers, the question should be way more clear now
Assuming my assumptions above are correct, can we imagine having the dungeon master add a second format image that would serve as the base for interactive areas and regions?
That could also work, although this sounds way harder to make for the DM (unless you know about specific tools)
We’ll try to keep it as simple to use as possible
Well, simply put, we need some way to detect the regions and interactive areas/objects. So either this is done through some sort of ‘markers’ in the input – OR – through an overlay/editor in BJS?
Ok, fair enough. I’ll think about it and tomorrow, on monday, likely someone from the team will also read the post and we’ll see how the big brains would handle this Meanwhile, enjoy your sunday
Edit: Me again, was just thinking (while having my sunday beer ) since the plane is a game board, is it subdivided to form tiles? I mean, it has to be, no? If so we could have the user simply make a selection of tiles to form a region or click on a tile/subdivision to add any type of interaction to it?
Hmm since you mentioned the DM will indicate which areas are interactive, they could do so by drawing a polygon (such as the one you drew in Paint), you store the coordinates of the points along it, and every time the user moves the mouse, do a point-in-polygon check: Point in polygon - Wikipedia to see if they are inside one of the interest areas? And then, to highlight it, draw the polygon as an overlay to the map plane.
@Treycos, since you are relying on the user to supply the map, you will be somewhat constrained by the texel density of the texture that is uploaded, so if you are thinking about splitting a quad based on the line drawn by the user, you could end up with sections where pixels of the map stretch across two different sections. It makes more sense to me to stick with the pixels of the image and create a more 2D solution to this.
This may not seem like a parallel example, but I think this demo on dynamic textures gives us some of the tools we could use for an approach here. You can allow your users to “paint” the areas of their map to separate the content. If you are using a locked camera and utilizing a set part of the screen to display the user’s map, you can rely on scene.pointerX and scene.pointerY to know where the mouse is hovering on the map. Clicking and dragging the cursor could be drawing pixels into a dynamic texture that we will use as an overlay. This could be a secondary texture in a shader (much like the skateboard demo) that is used to show the user where they are painting. Once they are done with the edit, you can also use mouse pointer position when over the map to determine the color of the user painted “key” and use that to pass a mask to the glow layer with a color to make the section of the map glow when hovered.
This way you retain the original texel density of this user’s uploaded map and get a pixel perfect representation of the highlight. Hope this helps with your brainstorm, but feel free to ping with questions.
How funny, I was thinking the same Thanks a lot for taking the time to answer. You input is always a joy for me to read and learn from you.
@Treycos : So, is your board divided into tiles or isnt’it? I would assume the player moves on the board using ‘movement points’ and likely these movement points would be tiles? I mean, that’s the traditional way I know of but may be you are doing something completely new?
If the map would be divided in tiles, I believe it would be fairly easy to let the DM draw tiles to create a selection or pick a tile to add whatever interaction to this tile… wouldn’t it?
would handle this 
Meanwhile, enjoy your sunday 
) since the plane is a game board, is it subdivided to form tiles? I mean, it has to be, no? If so we could have the user simply make a selection of tiles to form a region or click on a tile/subdivision to add any type of interaction to it?
Thanks a lot for taking the time to answer. You input is always a joy for me to read and learn from you.