# mallea

Member

1

101 Neutral

• Rank
Newbie
1. ## Superimposing player positions on an image, in a web page

Hi, I've been having some difficulty, and was hoping someone could shed some light. I'm new here, so apologies in advance if this post isn't on-topic in this sub-forum. My problem is math-related. I wrote a plugin for Half-Life 2 (HL2), which continuously broadcasts each player's world space coordinates to an external system, which uses that data to superimpose each player's position on a bird's-eye-view image of the level they are playing on (Using SVG, a simple circle is drawn, for each player, indicating where they should be at in-game). This image is 1024x1024, but ultimately I would like to use any size 1:1 image. I've read that HL2's world space is -4096 to 4096, for each axis (x,y,z), with the 0,0 origin at the center. The web page's 0,0 origin is at the top-left. Here's what I've tried (using JavaScript; this is the browser): [source lang="jscript"]function scalePosition (targetWidth, targetHeight) { // get in-game coordinates var gamePosition = getCoordinates(); var MAX_X = 8192, MAX_Y = 8192; // Flip y gamePosition.y = -gamePosition.y; // Ensure game coordinates are only positive values // In game = -4096 < x|y < 4096 (0,0 = center) // Browser = 0 < x|y < 8192 (0,0 = top-left) gamePosition.x += 4096; gamePosition.y += 4096; // Target image dimensions (default to 1024 if not specified) targetWidth = (targetWidth || 1024), targetHeight = (targetHeight || 1024); // Find scale between game dimensions and target dimensions var xScale = MAX_X / targetWidth, yScale = MAX_Y / targetHeight; // Convert in-game coords to target coords var targetX = gamePosition.x / xScale, targetY = gamePosition.y / yScale; return { x: targetX, y: targetY }; }[/source] This code doesn't properly scale to the image as-is. To make things even more interesting, the level may not be centered in the world space, and could have some arbitrary offset, e.g. the level I've been testing on has an upper-left world coordinate of -2440, 3383 (which the code above doesn't take into account). What's the correct way to calculate the in-game coordinates' position on a 1:1 bird's eye image, taking into account the upper-left world coordinate as a possible offset? Thanks