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.
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).
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)