Minimap Render & Gui

Today I’ve decided to fully release a Minimap Gui & Renderer I created with @RainyLofi quite some time ago.

Using those tools, you’ll be able to implement a minimap in your game with ease.

GitHub
Showcase place

RobloxPlayerBeta_p8soeTAy1a

Rendering the minimap

Renderer is a heavily edited version of RoRenderV2.

I’ve added an ability to split the map into grid, so that the quality of result image(s) is satisfying and Roblox doesn’t scale the images down.

The most important part of rendering the minimap is placing down two parts representing the minimap’s corners. Renderer will always perform raycasts from the higher part’s height to the lower one’s (meaning you should place one of the parts way above the map’s parts, and the other one - under the map). Make sure that the parts’ have the same orientation and are only rotated in Y axis).

After placing the parts, setting their transparency to 1 and anchoring them it is advised to save a local backup of the place and open it.

To start rendering you should download the renderer and unpack it. You should begin with disabling game’s scripts so they don’t interrupt the rendering process. You may do that using the scripts that are already prepared in client/utility/Prepare.server.lua.

-- Delete game scripts
local ScriptServices = RenderData.ScriptServices or {
  "Workspace", "Lighting", "ReplicatedFirst", "ServerScriptService", "StarterGui", "StarterPack", "StarterPlayer", "SoundService"
}
local scriptTypes = RenderData.ScriptTypes or { "Script", "LocalScript", "ModuleScript" }
local isAnyScript = function (v)
  for _, t in ipairs(scriptTypes) do
    if v:IsA(t) and v ~= RenderDataMod then return true end
  end
  return false
end

for _, Service in ipairs(ScriptServices) do
  local iService = game:GetService(Service)
  for _, v in ipairs(iService:GetDescendants()) do
    if isAnyScript(v) then v:Destroy() end
  end
end

Afterwards you can import the renderer scripts into Roblox Studio. This can be done fast using Rojo. Enter into the client folder using cmd and run rojo serve, then use the Roblox Studio plugin to insert the scripts.

After the scripts and settings are imported, open ReplicatedStorage > RenderStats in studio. In Parts folder you should set the 1’s value to one part and 2’s - to another. Feel free to modify other properties as you wish.

Those are the most relevant ones:

  • Grid - the size of the region (in stud) one image should cover
  • Host - the ip and port of the renderer server
  • LinesPerAssign - how many pixel lines (columns) one client would be assigned at once
  • PPS - rendered pixels per stud
    (Final images’ size would be Grid * PPS x Grid * PPS)
  • RenderWater - whether water should be rendered
  • SuperSampling - whether super sampling should be used

To run the renderer server (which will fetch the pixels’ data from studio and save to image files) installing NodeJS is required. You should cd into server, run npm install to install dependencies and then run the script with node index.js.

After you are done setting up the renderer, make sure to enable HttpRequests and run Play Solo or run a server with multiple clients (to render the map faster if it’s big).

The script will automatically determine how many images are necessary and begin rendering one by one. Finished renders will be stored in server/out folder. You may track the progress in console and Roblox Studio.

You may also stop rendering at any time by stopping the studio. You may start rendering from particular image by modifying ServerScriptService > Render script (startAt variable).

Here’s an example render of the Roblox’s Pirate Island template place on default settings. (Originally those were 25 images, but had to make it into one due to Discourse’s image positioning).

image

You may now upload all the images to Roblox.

Implementing the minimap

To implement the minimap in-game you may use our open-sourced example. The minimap script may be found at StarterGui > LocalScript. You should edit the settings (StarterGui > LocalScript > Settings) to the ones you’ve used.

  • Grid - Used grid when rendering the images
  • MinimapTiles - ids of the images
  • Zoom - how much the minimap should be zoomed

To showcase the minimap’s possibilities, two features are implemented:

  • showing other players on the minimap (color is based on their team, red players are blinking and green ones are pinned [will stick on the border instead of disappearing when they’re out of bounds of the minimap])
  • showing places on the minimap (two icons and one text). You may hover the icon to see more information. The icons rotate (image’s bottom will always face the player position).

The minimap is highly customizable. You may add settings (eg. whether all / team / none players are visible), freely change icons, maximizing and zooming map in / out anytime.

In-depth tutorial and api documentation might be coming soon? (Contributions might be helpful)

31 Likes

It’s quite nice, I don’t really have any complaints about it other than it seems to take quite a while to load in.

2 Likes

Was a joy working with you on this.

3 Likes

Is there also an easy way to import it into studio without using rojo?

Download the uncopylocked game he linked for the minimap.

1 Like

Are you able to drag the map around? I’ve needed something that can do this kind of thing since I have a big map.

Yes. You can freely customize the map’s behaviour. You should be able to do it as the map is attached to a frame that can be made draggable.

I meant draggable as in you can drag the map to view certain parts of the map that aren’t in the frame, not draggable as in across the screen, sorry.

Ah gotchu!

I don’t think this would be easy to do with current module (would require some modifications for sure). That’s be an interesting feature to add though. Will let you know if it’s added by us.

Could you post a tutorial for the rendering process?