Translating in game coordinates to a javascript map

Help and Feedback Scripting Support
,
#1

I’m attempting to translate in-game coordinates using a player’s Vector3 position into a 800x800 gui version of a map on my website.

WEBSITE VIEW: https://gyazo.com/1744fd963f86f31db14eb947c07c6f6d
IN GAME VIEW: https://gyazo.com/b29fc2396dd88938c4cab9b1be20e5c9

I have the web based code and the 800x800 map with bounds set on it, but obviously when I take the position from in-game and attempt to place it into that, its not a direct translation.

Has anyone had experience with this before or have any tips/solutions?

#2

I think the first thing we need to do is establish exactly the size of the player area. For this, I’d just use a Vector2. The following code sets the map to be 100 studs by 100 studs. You can change this to however large your map size is.

local MapSize = Vector2.new(100, 100)
local WebSize = Vector2.new(800, 800)

The game world’s coordinates differ from the website’s in that in the game world, the center would be (0, 0) while the website’s would be (400, 400). So, we’d have to convert the game’s to the website’s. To do this, we’ll have to scale the game’s smaller (or larger) map size to match that of the website’s 800x800. We could write a function that does just that, and then also converts the game coordinates to the web’s representation like so:

function ConvertGameToWebsite(GameCoords) -- GameCoords is a Vector2 value in this example
    -- First, move the GameCoords to where (0,0) is the top left corner of the game to match the website
    local RelativeGameCoords = {
        X = GameCoords.X - (MapSize.X / 2),
        Y = GameCoords.Y + (MapSize.Y / 2)
    }
    
    -- This now converts the game position to the equivilant position of the website.
    local WebCoords = {
        X = (RelativeGameCoords.X * WebSize.X) / MapSize.X,
        Y = (RelativeGameCoords.Y * WebSize.Y) / MapSize.Y
    }
    
    return Vector2.new(WebCoords.X, WebCoords.Y)
end

This function takes a Vector2 input of the coordinates in game and converts it to a Vector2 representation of the coordinates of the website. If the center of your game isn’t at exactly (0, 0) then additional code may need to be written with another Vector2 of your map’s center during the initial conversion stage of that function.

I have not tested any of this code, but it should provide a rough outline of what could be done in this case. Basically, it’s a lot of coordinate-based algebra that needs to be done to convert from one coordinate space to another.

Let me know if you have any other questions or if I’ve helped. I’m happy to assist!

1 Like