• Advertisement
Sign in to follow this  

Superimposing player positions on an image, in a web page

This topic is 1929 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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

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?


Share this post

Link to post
Share on other sites
edit: nvm, i re-looked at your math, and i originally mistook it as being the culprit, could your provide a better detail of what's the problem your seeing? Edited by slicer4ever

Share this post

Link to post
Share on other sites
Perhaps the problem isn't calculating the right point but displaying that point correctly in the webpage.

Have you tried sampling the actual values coming out of the transform function? What happens if you attempt to render points by passing transformed values directly?

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement