Minimap: Stick Cameras and split PointerObserver by Camera

Hello community,

I’m working on a minimap for real-time strategy game. Where you click on minimap and the main camera moves to that point in world. My issues on it are:

  1. How to stick main game camera and map camera, just that map camera always looks from top.
  2. How to split pointer observers for each viewport/camera without the need of 2 scenes? Because on main camera you should be able to pick meshes, while on map camera you can swing main camera to world position.
  3. For now I only get it working by using arc rotate camera for map, but is there another camera that more performant and would also work?

Edit: Or is there a completely different approach for 2D minimap?

How it could look like:
minimap example

My playground so far (simplified version):



1 Like

Heya I haven’t made mini map yet (on my TODO list), but maybe you could do a pick using the map camera like below and then if it hits a mesh maybe zoom/swing the main camera to the picked point? :thinking:

Yo, Blake thanks for your time. I guess for performance reasons it would be better to have a 2D minimap? Like using a background texture as terrain and somehow place 2D icons (+rotation) for meshes that are displayed on minimap. Currently I remembered that I used pagemapJS once, but I struggle to combine with babylonjs.

Current PG:

Yes, I think for performance reasons it’s much better to do it that way, you don’t want to rerender the whole scene from top. I guess you can use the 2D GUI and use images that you move/rotate to show the elements of the game.

Note there have been some threads in the forum related to this subject, maybe there are some interesting answers there.


You are right. It would be an option for me to use 2D GUI, but I even wanted to create common html elements, to let it be more independent and performant. I think there is quite some stuff on 2D GUI that is unnecessary for the minimap?

I feel it won’t be bad idea to wait for your minimap, do you plan to do it in next couple of months (~1-3)?
I can offer my small help if you want, just to speed it up, but what could be more helpful for you is my list of what I thought, so far, it should be capable of:

  • multiple groups of meshes, that is variable of runtime (one group per image)
  • a class or simple object per mesh to be able to loop through all with associated static/variable color (i.e. objectives [Capture the Flag], allies, enemies or neutral)
  • background image as terrain map
  • border of current camera view on minimap
  • interactive minimap (camera swing on clicked/dragged point, maybe even selected meshes moves to right click?)

Maybe you can improve some of my ideas, it were just the things that came into my head since yesterday.

Edit: My original plan was to see how easy someone could make a RTS game on BabylonJS, while doing it myself. So what I found/made so far was a RTS-Camera and Rectangular Mesh Selection. What was missing is a minimap and GUI for selected meshes (like units, squads). Last won’t need a template I guess.

Edit2: Are there already formation of group of meshes, if you want to move them on i.e. space or mountain map?

1 Like

Well it will prob be one of the last things I add on at the end, so at least a few months away before I would dig into it much. In my case it’s not for an RTS game but a battle arena game thou, so mainly just to know where other combatants are. :robot:

I’m vaguely thinking to try using their positions to create a simple dynamic texture but it would be great to also try out using rendered meshes instead to see if it looks nicer without being too costly perf wise or dev time wise. :slight_smile:

So it’s def on my radar to be thinking about but not too deeply yet hah. :wink: For now I’ll def be following your progress in this thread thou and check back in with it all later down the road. :beers:

1 Like

Oh, I see. So it won’t work for RTS game i guess, because you can’t move camera view on map (yours will be sticked to main character?).

I wanted to improve this tutorials, to encourage RTS developments in BabylonJS. But from what I saw about minimap it is over my capabilities. And I am not in a hurry, there is a lot that Babylon might need to simplify RTS development. Currently looking into movement of unit formations. I wanted to help revive this, because it is 6 years old:

Interesting approach. As much as combining it with the 2D GUI. This is a fun and challenging scenario, I will bookmark it. If by any chance I have some time to spend, I will also try have a look at it.
@Takemura I believe you uncovered something here. And same as you, I’d luv to see some RTS games come to BJS :smiley:

1 Like

Yeah, I wonder how/if I can make modular parts of RTS game, so developers could (re-)use and do slight changes to their game needs. Even though my current knowledge is by far not enough to do the whole RTS template, I will try out to work on parts. So any help is welcome. Currently looking into unit formation on fixed y, but I think it is better to also have formation of unit groups, i.e. infantry squad instead of single units and consider ground level (y unfixed). Maybe I should create another topic for this?

I’d say yes. This is a completely different topic and may be some people with knowledge on this part will also kick-in. Are you looking into fixed formation or giving some randomness to them (like when they split and then regroup?). I was once experiencing with imposters along an (invisible) rope material and got some results. It was more suitable for a herd or a group of chickens :thinking: but it was quite an interesting result you wouldn’t expect from using something like a rope :stuck_out_tongue_winking_eye:

1 Like