Why does my game interpret the mouse pointers coordinates wrong - c#

I have an monogame (2D) game I'm making and when I try to get the mouse coordinates they are wrong. I have no idea what the issue is but here is my code where I get the coordinates:
MouseState mouseState;
mouseState = Mouse.GetState();
test = new Tower(TowerTexture, new Vector2(mouseState.X, mouseState.Y));
//test is drawn where mouse pointer is thought to be and it is drawn off
Here is the tower drawing code:
foreach (Tower tower in towers)
{
tower.Draw(spriteBatch);
}
And here is the draw function for the tower:
public virtual void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Draw(texture, center, null, Color.White, rotation,
origin, 1.0f, SpriteEffects.None, 0);
}
One more thing is that as the mouse pointer, the real one is closer, to the upper left corner the offset of the supposed mouse coordinates is less but as you go closer and closer to the lower right corner of the screen the supposed mouse coordinates are farther off.
I honestly have no idea what's wrong but any thoughts on what might be wrong would be appreciated. Thank you!

This is in response to both this question and your question on hold. To fix this problem, you can scale down your image when you draw it. I'm not quite sure what the value of center is, but my guess is that it is a rectangle with its center at the mouse pointer. To scale down the image, try something like this:
Rectangle center;
public Tower(Texture2D TowerTexture, Vector2 location)
{
float scaledown = 10;
float XOffset = TowerTexture.Width / (2 * scaledown); //get an X and Y offset to center the image in the rectangle
float YOffset = TowerTexture.Height / (2 * scaledown);
this.center = new Rectangle(location.X + XOffset, location.Y + YOffset,
XOffset * 2, YOffset * 2);
}
Then Draw this image like you did previously, using center as the destination rectangle. I wrote this code without a compiler or debugging, but I think it should give you a basic idea.
HTH

What is wrong is that the resolution of my image is bigger than the resolution of my screen.

Related

Moving an object on the edge of a circle

I am working on combat mechanics in a Top Down 2D game. I want to create a circle around a player and move the object on the edge of that circle. No matter where your mouse is, the object always stays on the edge. How would I do that? I know this is related to math but I am yet inexperienced to implement it on the right way. Here is a picture of the idea and the question itself. Picture.
It would be nice to know how does the user controls the player.
Anyway, here's some piece of code that i used on a 2D project of mine. Not sure if it works on 3D, but even if it doesn't, the logic is the same
float radius = 400; //radius of circle
Vector3 playerPosition = player.transform.position; //Player's position
Vector3 centerPosition = transform.localPosition; //center of the circle
float distance = Vector3.Distance(playerPosition, centerPosition); //distance from player to the center of the circle
if (distance > radius) //If the distance is greater than the radius, it is already within the circle
{
Vector3 fromOriginToObject = playerPosition - centerPosition;
fromOriginToObject *= radius / distance; //Multiply by radius //Divide by Distance
Vector3 newPlayerPosition = centerPosition + fromOriginToObject; //all that Math
}
player.transform.localPosition = newPlayerPosition ;
I really encourage you to check the font as it have some visual explanation: https://answers.unity.com/questions/1309521/how-to-keep-an-object-within-a-circlesphere-radius.html
You will need the radius and center of the circle. Then probably some vector that defines the direction.

How to convert new Canvas ui image position to linerenderer position?

I have an image UI in a canvas with Screen Space - Camera render mode. What I like to do is move my LineRenderer to the image vertical position by looping through all the LineRenderer positions and changing its y axis. My problem is I cant get the correct position of the image that the LineRenderer can understand. I've tried using ViewportToWorldPoint and ScreenToWorldPoint but its not the same position.
Vector3 val = Camera.main.ViewportToWorldPoint(new Vector3(image.transform.position.x, image.transform.position.y, Camera.main.nearClipPlane));
for (int i = 0; i < newListOfPoints.Count; i++)
{
line.SetPosition(i, new Vector3(newListOfPoints[i].x, val.y, newListOfPoints[i].z));
}
Screenshot result using Vector3 val = Camera.main.ScreenToWorldPoint(new Vector3(image.transform.localPosition.x, image.transform.localPosition.y, -10));
The green LineRenderer is the result of changing the y position. It should be at the bottom of the square image.
Wow, this was annoying and complicated.
Here's the code I ended up with. The code in your question is the bottom half of the Update() function. The only thing I changed is what was passed into the ScreenToWorldPoint() method. That value is calculated in the upper half of the Update() function.
The RectTransformToScreenSpace() function was adapted from this Unity Answer post1 about getting the screen space coordinates of a RectTransform (which is exactly what we want in order to convert from screen space coordinates back into world space!) The only difference is that I was getting inverse Y values, so I changed from Screen.height - transform.position.y to just transform.position.y which did the trick perfectly.
After that it was just a matter of grabbing that rectangle's lower left corner, making it a Vector3 instead of a Vector2, and passing it back into ScreenToWorldPoint(). The only trick there was because of the perspective camera, I needed to know how far away the line was from the camera originally in order to maintain that same distance (otherwise the line moves up and down the screen faster than the image). For an orthographic camera, this value can be anything.
void Update () {
//the new bits:
float dist = (Camera.main.transform.position - newListOfPoints[0]).magnitude;
Rect r = RectTransformToScreenSpace((RectTransform)image.transform);
Vector3 v3 = new Vector3(r.xMin, r.yMin, dist);
//more or less original code:
Vector3 val = Camera.main.ScreenToWorldPoint(v3);
for(int i = 0; i < newListOfPoints.Count; i++) {
line.SetPosition(i, new Vector3(newListOfPoints[i].x, val.y, newListOfPoints[i].z));
}
}
//helper function:
public static Rect RectTransformToScreenSpace(RectTransform transform) {
Vector2 size = Vector2.Scale(transform.rect.size, transform.lossyScale);
Rect rect = new Rect(transform.position.x, transform.position.y, size.x, size.y);
rect.x -= (transform.pivot.x * size.x);
rect.y -= ((1.0f - transform.pivot.y) * size.y);
return rect;
}
1And finding that post from a generalized search on "how do I get the screen coordinates of a UI object" was not easy. A bunch of other posts came up and had some code, but none of it did what I wanted (including converting screen space coordinates back into world space coordinates of the UI object which was stupid easy and not reversibe, thanks RectTransformUtility!)

XNA 3.5 Firing a tank cannon

I have a 2D image of a tanks body (top down) that can be moved left-right across the screen.
On top, there's a second image of the tanks turret. This turret can be rotated across the screen edge following the users mouse movement along the Y axis.
When the user presses'Enter' a bullet appears and moves across the screen at the angle of the turret. However, whilst the angle is fine, the bullet's position seems to vary a lot. At times, it sites where it should (in the centre of the cannon) however, as you move the mouse it seems to get offsetted.
Edit: For some strange reason, my pictures don't seem to be showing up - so here is a direct link: http://img824.imageshack.us/img824/7093/khte.png
Edited Code:
Tank Fire
if (keyBoardState.IsKeyDown(Keys.Enter))
{
shell.Initialize(rotation, new Vector2(location.X + 25, location.Y - 15));
shell.makeAlive();
}
(It is initialized with the location of the tank (+25, -25) so it appears at the end of the turrent. having this set at the tanks location (shell.Initialize(rotation, location);) seems to make no difference to the offset.)
Bullet/Shell:
public void Update(GameTime gameTime)
{
if (alive)
{
movement.X -= speed * (float)Math.Cos(rotation);
movement.Y -= speed * (float)Math.Sin(rotation);
location.X += (int)movement.X;
location.Y += (int)movement.Y;
}
}
public void Draw(SpriteBatch spriteBatch)
{
if (alive)
{
spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
spriteBatch.Draw(texture, location, null, Color.White, rotation - MathHelper.PiOver2, new Vector2(texture.Width / 2, texture.Height / 2), 1.0f, SpriteEffects.None, 0f);
spriteBatch.End();
}
}
If you're trying to get your bullet to rotate about your tank, than I personally draw the bullet on top of the tank do the exact same thing that you do after you've fired your bullet(but with a greater magnitude) to displace it,
But if you want to use the origin parameter of SpriteBatch.Draw, than I'd imagine that it would look something like this:
given the following datapoints:
this.origin = new Vector2(texture.Width / 2, texture.Height / 2);
tank.origin = new Vector2(texture.Width / 2, texture.Height / 2);
// and this is what you'd pass into your sprite-batch.draw method
originToDraw = (tank.position + tank.origin)-(this.position + this.origin)
And you also have to initialize your bullet's position to the appropriate starting point Since I don't actually know where rotation comes from, I can't know for sure, but if it's the angle between your tank and the mouse, than I'd imagine it'd be the following
this.startingPosition = tank.position + tank.origin - this.origin
I asume that shell is a Bullet instance if yes your problem is the origin in Bullet class. It should have set this value in LoadTextures method
public void LoadTextures(Texture2D texture)
{
this.texture = texture;
this.origin = new Vector2(texture.Width, texture.Height);
}
And a little extra in Bullet.Draw method:
spriteBatch.Draw(texture, location, null, Color.White, rotation - 1.5f, origin, 1.0f, SpriteEffects.None, 0f);
change 1.5f to MathHelper.PiOver2 it is more accure when you want to rotate something 90 degrees
You have a nasty roundoff problem here.
You compute the velocity in floating point but switch to integers for the bullet's location. The problem is that while ON AVERAGE the errors even out any given bullet is going to either round up or round down every time.
Lets take an extreme case: The bullet is fired 25 degrees off the vertical axis and it's moving at two pixels per update cycle. Strangely enough the bullet flies directly down the axis.
Or an even more extreme case. The speed is 1/3 pixel per cycle. The bullet stands still.

Scaling a Texture2D in XNA

I have a 160 x 80 button in a window with resolution of 1280 x 720. I draw it as followed(I paraphrase a bit here):
currentwindowwidth = 1280;
// The scale in this instance would be 1.0f
scale = currentwindowwidth / 1280f;
b.position = new Vector2(640, 650) * scale;
b.origin = new Vector2(80, 40) * scale;
spriteBatch.Draw(b.texture, b.pos, null, Color.White, 0, b.ori, scale, SpriteEffects.None, 0);
When I draw the window at 1280 x 720, the button is drawn in the correct location and the button detection:
if (mousepos.X >= b.pos.X - b.ori.X && mousepos.X <= b.pos.X + b.ori.X)
{
if (mousepos.Y >= b.pos.Y - b.ori.Y && mousepos.Y <= b.pos.Y + b.ori.Y)
{
HandleButton(b);
}
}
works 100%. The button detects my mouse clicks to pixel perfect precision, and the texture2d is drawn faithfully to the detection box.
However, when I scale up to 1920 x 1080 (same aspect ratio), the button is drawn in the incorrect location:
currentwindowwidth = 1920;
// The scale would be 1.5f here
scale = currentwindowwidth / 1280f;
b.position = new Vector2(640, 650) * scale;
b.origin = new Vector2(80, 40) * scale;
spriteBatch.Draw(b.texture, b.pos, null, Color.White, 0, b.ori, scale, SpriteEffects.None, 0);
This will now give me a position vector of (960, 975) and an origin of (120, 60)(<-- which I find in the "Locals" tab in visual studio). After doing some calculations these are the correct values, and the button detection works exactly where I want it to work. HOWEVER the sprite is not drawn in the correct location, it is drawn (-60, -30) pixels offset from where it should be. When scaled up the button detection works in the correct location(840-1080, 915-1035) but the texture2d is drawn in the wrong place.
This happens as well when I scale the screen to another 16:9 resolution such as 1366 x 768, except not (-60, -30) off but proportionally (-8.0625, -4.03125) and (-30, -15) at 1600 x 900.
This effect is also witnessed when I use resolutions smaller than 1280 x 720 (854 x 480), but in the opposite direction (a positive offset vector instead of a negative one).
In every 16:9 resolution the button detection works as calculated, but when I scale the texture2d it is drawn in the incorrect place. My only guess is that the scale scale's the texture2d in ways I am not aware of.
If anybody else has any experience on the issue I would much appreciate it,
Ken
The origin parameter is specified in pixels from the top-left corner of the sprite texture. It gets applied before the sprite is scaled or positioned - you don't need to scale origin with the screen!
Also, it may be worth considering passing a scaling matrix to SpriteBatch.Begin, to scale up your entire scene, instead of manually scaling and positioning every sprite.
You will probably need to re-work your maths for figuring out the click-bounds in either case.
Note that if you use a matrix for scaling your whole scene, that matrix can be inverted to go back from screen (client) coordinates to scene (world) coordinates.

Having the Background or Camera "Scroll" based on charcter position

I'm working on an RPG game that has a Top-Down view. I want to load a picture into the background which is what the character is walking on, but so far I haven't figured out how to correctly have the background redraw so that it's "scrolling". Most of the examples I find are auto scrolling.
I want the camera to remained centered at the character until you the background image reaches its boundaries, then the character will move without the image re-drawing in another position.
Your question is a bit unclear, but I think I get the gist of it. Let's look at your requirements.
You have an overhead camera that's looking directly down onto a two-dimensional plane. We can represent this as a simple {x, y} coordinate pair, corresponding to the point on the plane at which the camera is looking.
The camera can track the movement of some object, probably the player, but more generally anything within the game world.
The camera must remain within the finite bounds of the game world.
Which is simple enough to implement. In broad terms, somewhere inside your Update() method you need to carry out steps to fulfill each of those requirements:
if (cameraTarget != null)
{
camera.Position = cameraTarget.Position;
ClampCameraToWorldBounds();
}
In other words: if we have a target object, lock our position to its position; but make sure that we don't go out of bounds.
ClampCameraToBounds() is also simple to implement. Assuming that you have some object, world, which contains a Bounds property that represents the world's extent in pixels:
private void ClampCameraToWorldBounds()
{
var screenWidth = graphicsDevice.PresentationParameters.BackBufferWidth;
var screenHeight = graphicsDevice.PresentationParameters.BackBufferHeight;
var minimumX = (screenWidth / 2);
var minimumY = (screnHeight / 2);
var maximumX = world.Bounds.Width - (screenWidth / 2);
var maximumY = world.Bounds.Height - (screenHeight / 2);
var maximumPos = new Vector2(maximumX, maximumY);
camera.Position = Vector2.Clamp(camera.Position, minimumPos, maximumPos);
}
This makes sure that the camera is never closer than half of a screen to the edge of the world. Why half a screen? Because we've defined the camera's {x, y} as the point that the camera is looking at, which means that it should always be centered on the screen.
This should give you a camera with the behavior that you specified in your question. From here, it's just a matter of implementing your terrain renderer such that your background is drawn relative to the {x, y} coordinate specified by the camera object.
Given an object's position in game-world coordinates, we can translate that position into camera space:
var worldPosition = new Vector2(x, y);
var cameraSpace = camera.Position - world.Postion;
And then from camera space into screen space:
var screenSpaceX = (screenWidth / 2) - cameraSpace.X;
var screenSpaceY = (screenHeight / 2) - cameraSpace.Y;
You can then use an object's screen space coordinates to render it.
Your can represent the position in a simple Vector2 and move it towards any entity.
public Vector2 cameraPosition;
When you load your level, you will need to set the camera position to your player (Or the object it should be at)
You will need a matrix and some other stuff, As seen in the code below. It is explained in the comments. Doing it this way will prevent you from having to add cameraPosition to everything you draw.
//This will move our camera
ScrollCamera(spriteBatch.GraphicsDevice.Viewport);
//We now must get the center of the screen
Vector2 Origin = new Vector2(spriteBatch.GraphicsDevice.Viewport.Width / 2.0f, spriteBatch.GraphicsDevice.Viewport.Height / 2.0f);
//Now the matrix, It will hold the position, and Rotation/Zoom for advanced features
Matrix cameraTransform = Matrix.CreateTranslation(new Vector3(-cameraPosition, 0.0f)) *
Matrix.CreateTranslation(new Vector3(-Origin, 0.0f)) *
Matrix.CreateRotationZ(rot) * //Add Rotation
Matrix.CreateScale(zoom, zoom, 1) * //Add Zoom
Matrix.CreateTranslation(new Vector3(Origin, 0.0f)); //Add Origin
//Now we can start to draw with our camera, using the Matrix overload
spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend, SamplerState.LinearClamp, DepthStencilState.Default,
RasterizerState.CullCounterClockwise, null, cameraTransform);
DrawTiles(spriteBatch); //Or whatever method you have for drawing tiles
spriteBatch.End(); //End the camera spritebatch
// After this you can make another spritebatch without a camera to draw UI and things that will not move
I added the zoom and rotation if you want to add anything fancy, Just replace the variables.
That should get you started on it.
However, You will want to make sure the camera is in bounds, and make it follow.
Ill show you how to add smooth scrolling, However if you want simple scrolling see this sample.
private void ScrollCamera(Viewport viewport)
{
//Add to the camera positon, So we can see the origin
cameraPosition.X = cameraPosition.X + (viewport.Width / 2);
cameraPosition.Y = cameraPosition.Y + (viewport.Height / 2);
//Smoothly move the camera towards the player
cameraPosition.X = MathHelper.Lerp(cameraPosition.X , Player.Position.X, 0.1f);
cameraPosition.Y = MathHelper.Lerp(cameraPosition.Y, Player.Position.Y, 0.1f);
//Undo the origin because it will be calculated with the Matrix (I know this isnt the best way but its what I had real quick)
cameraPosition.X = cameraPosition.X -( viewport.Width / 2);
cameraPosition.Y = cameraPosition.Y - (viewport.Height / 2);
//Shake the camera, Use the mouse to scroll or anything like that, add it here (Ex, Earthquakes)
//Round it, So it dosent try to draw in between 2 pixels
cameraPosition.Y= (float)Math.Round(cameraPosition.Y);
cameraPosition.X = (float)Math.Round(cameraPosition.X);
//Clamp it off, So it stops scrolling near the edges
cameraPosition.X = MathHelper.Clamp(cameraPosition.X, 1f, Width * Tile.Width);
cameraPosition.Y = MathHelper.Clamp(cameraPosition.Y, 1f, Height * Tile.Height);
}
Hope this helps!

Categories