Jump to content

View more

Image of the Day

WIP title screen for #DeathOfAPartisan #screenshotsaturday #gamedev https://t.co/qJNhfZCvd4
IOTD | Top Screenshots

The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

Sign up now

Superimposing player positions on an image, in a web page

4: Adsense

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
2 replies to this topic

#1 mallea   Members   


Posted 11 October 2012 - 09:47 AM

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?


#2 slicer4ever   GDNet+   


Posted 11 October 2012 - 11:49 AM

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, 11 October 2012 - 11:57 AM.

Check out https://www.facebook.com/LiquidGames for some great games made by me on the Playstation Mobile market.

#3 HappyCoder   Members   


Posted 12 October 2012 - 03:56 PM

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?
My current game project Platform RPG

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.