How to do fast smooth animation in C# using WPF - c#

I'm currently programming a game of Pong. I have the majority of the game completed but I've run into an annoying problem. I'm using a dispatcherTimer with priority set to Send and time span set to 1 millisecond. I'm animating the rectangle using up to dx=9 and dy=9 in order to make the ball move fast enough. Because of the large pixel jumps the ball appears skip across the screen instead of a smooth travel. According to math in 1 millisecond per cycle this ball should be moving MUCH faster than it is. I need to update the ball more often and move it by less...
Are there any suggestions on a better method to do this? Here is a snippet of what I have...
pongballTimer = new DispatcherTimer(DispatcherPriority.Send);
pongballTimer.Tick += new EventHandler(pongballTimer_Tick);
pongballTimer.Interval = new TimeSpan(0, 0, 0, 0, _balldt);
private void pongballTimer_Tick(object sender, EventArgs e)
{
double pongtop = Canvas.GetTop(PongBall);
double pongleft = Canvas.GetLeft(PongBall);
double paddletop = Canvas.GetTop( RightPaddle );
double paddleleft = Canvas.GetLeft( RightPaddle );
if (pongleft + PongBall.Width > paddleleft)
{
if (((pongtop < paddletop + RightPaddle.Height) && (pongtop > paddletop)) ||
((pongtop + PongBall.Height < paddletop + RightPaddle.Height) &&
(pongtop + PongBall.Height > paddletop)))
{
_dx *= -1;
SetBalldy(pongtop, PongBall.Height, paddletop, RightPaddle.Height);
_rightpoint++;
lblRightPoint.Content = _rightpoint.ToString();
meHitSound.Play();
}
else // The ball went past the paddle without a collision
{
RespawnPongBall(true);
_leftpoint++;
lblLeftPoint.Content = _leftpoint.ToString();
meMissSound.Play();
if (_leftpoint >= _losepoint)
LoseHappened("You Lost!!");
return;
}
}
if (pongleft < 0)
{
meHitSound.Play();
_dx *= -1;
}
if (pongtop <= _linepady ||
pongtop + PongBall.Height >= PongCanvas.Height - _linepady)
{
meDeflectSound.Play();
_dy *= -1;
}
Canvas.SetTop(PongBall, pongtop + _dy);
Canvas.SetLeft(PongBall, pongleft + _dx);
}

Instead of doing the movement in a timer callback, you may use one of the animation techniques that are built into WPF.
Start reading Property Animation Techniques Overview, perhaps with special attention to the last section Per-Frame Animation: Bypass the Animation and Timing System.
Then you may proceed to How to: Render on a Per Frame Interval Using CompositionTarget.

Related

Smooth velocity scroll

I'm trying to implement a smooth slow down scroll based on the velocity of the user gesture.
I'm using MR.Gestures to handle the pan gesture and obtain the velocity, then I'm running an animation loop to perform the deceleration but it's very jerky and I'm not sure what I can do to make it smooth.
_velocityX = (velocityX / (1000 / SCROLL_INTERVAL));
_velocityY = (velocityY / (1000 / SCROLL_INTERVAL));
I have SCROLL_INTERVAL set to 16 to scroll at roughly 60fps. My _friction variable is currently 0.98f.
In my animation loop I have the following:
var distance = new Point
{
X = 0,
Y = 0
};
if (Math.Abs(_velocityX) > 0)
{
distance.X += _velocityX;
_velocityX *= _friction;
}
if (Math.Abs(_velocityY) > 0)
{
distance.Y += _velocityY;
_velocityY *= _friction;
}
<snip>code here moves the camera by the values in distance.X and distance.Y</snip>
Now, this works but is very jerky and the issue appears to be that it may be moving by 10+ pixels at the start of the animation.
I believe based on this that my approach is incorrect but I can't find anything to help me change the approach.
Is there a better way to do this? Or a way to make this more smooth?

How to use update to use mouse in my game properly

I'm building a chess game now, and I have a problem.
I have this update function for the pawn:
public void update(GameTime gameTime)
{
MouseState ms = Mouse.GetState();
if (ms.LeftButton == ButtonState.Pressed)
{
if ((float)ms.X / 50 >= location.x && (float)ms.X / 50 <= location.x + 1 && (float)ms.Y / 50 >= location.y && (float)ms.Y / 50 <= location.y + 1)
{
if (!draw_spots)
{
draw_spots = true;
}
else
{
draw_spots = false;
}
}
else
{
spot sp = new spot(ms.X / 50, ms.Y / 50);
if (draw_spots)
{
draw_spots = false;
}
}
}
what it is supposed to do is to put draw_spots to true (meaning that the possible moving locations and eating location should be drawn) when pressing the left mouse click. change it to false when i press again so it should stop drawing those. the function work, but sometimes the squares that should turn to blue just flicker and turn off. My guess is that I press the left mouse button for an even number of update sequences (which makes it turn on and then off). any idea on how to solve it?
Thanks!
a video of the problem: https://www.youtube.com/watch?v=Awb4V1giV2Y&feature=youtu.be
you can see some presses that make the blue line appear and then disappear even though i pressed once
When you write code in an Update method you need to think about it as if it was inside an infinite loop like this:
while(true)
{
if (!draw_spots)
{
draw_spots = true;
}
else
{
draw_spots = false;
}
}
When you look at the logic in that simplistic manner it should be easy to see why you're getting the flickering behaviour. It's literally toggling the draw_spots variable on and off over and over again.
To keep with the infinite loop analogy lets take a look at what the code should be doing instead. There's essentially two things that should both be true when you want to "draw spots".
The left mouse button is pressed
The mouse cursor is within the square
Now, lets translate this logic into code.
while(true)
{
var ms = Mouse.GetState();
var leftButtonPressed = ms.LeftButton == ButtonState.Pressed;
var mouseInsideSquare = (float)ms.X / 50 >= location.x &&
(float)ms.X / 50 <= location.x + 1 &&
(float)ms.Y / 50 >= location.y &&
(float)ms.Y / 50 <= location.y + 1;
if (leftButtonPressed && mouseInsideSquare)
draw_spots = true;
else
draw_spots = false;
}
By keeping things as simple as possible and naming your bits of logic with extra variables the code gets a lot easier to read and understand.
I would even go as far as pulling out even more bits of logic into variables and simply set the value of draw_spots to the result like this:
var ms = Mouse.GetState();
var leftButtonPressed = ms.LeftButton == ButtonState.Pressed;
var mx = ms.X / 50f;
var my = ms.Y / 50f;
var mouseInsideSquare = mx >= location.x &&
mx <= location.x + 1 &&
my >= location.y &&
my <= location.y + 1;
draw_spots = leftButtonPressed && mouseInsideSquare;
It's a matter of taste which version of the above code you prefer. The point is to break your code up in a way that makes it easier to understand. I hope that helps.
The only other weird bit of your code is this line:
spot sp = new spot(ms.X / 50, ms.Y / 50);
but since the sp variable goes out of scope before it's used I'm going to assume you left it there while debugging something and it can be safely deleted.
I was able to fix this myself, what i did was as follows.
add a variable called oldms that saves the mouse state from the last update.
then in the if statement I asked if the mouse left key is not pressed, and also if mouse left key was pressed last update. which means, i pressed the mouse and i want it to draw now.

Mouse Drag - C# bot

First time doing this. I am currently building a bot using C# and want my bot to be able to move the mouse to a given point in a way that looks human. By this I am referring to the dragging of the mouse when a human moves the cursor to a point they are trying to click on. Currently my C# bot moves the mouse instantly to the location which doesn't look human.
private static Point[] FindColor(Color color)
{
int searchValue = color.ToArgb();
List<Point> result = new List<Point>();
using (Bitmap bmp = GetScreenShot())
{
for (int x = 0; x < bmp.Width; x++)
{
for (int y = 0; y < bmp.Height; y++)
{
if (searchValue.Equals(bmp.GetPixel(x, y).ToArgb()))
result.Add(new Point(x, y));
}
}
}
return result.ToArray();
}
// FUNCTIONS OCCUR BELOW
// Error message if program could not find bitmap within screenshot show error message
Color myRgbColor = new Color(); // Creates new colour called myRgbColor
myRgbColor = Color.FromArgb(51, 90, 9); // This colour equals the RGB value
Point[] points = FindColor(myRgbColor); // Create an array called points which list all the points found in the screen where the RgB value matches.
if (points.Length > 0)
{
Cursor.Position = points[2]; // Move mouse cursor to first point (Point 0)
Thread.Sleep(0200);
MouseClick();
}
if (points.Length == 0)
{
MessageBox.Show("No matches!"); // Return error
goto checkore;
}
You're going to want to use some kind of Timer with a callback, to move the mouse incrementally, step by step. As for the movement itself, you have a world of possibilities, but it's all maths.
So, let's decompose the problem.
What is a natural mouse movement?
Position change rate
It doesn't necessarilly looks like it, but when you move your mouse, you're simply setting its position multiple times per seconds.
The amount of times the position changes per second is equivalent to the polling rate of your mouse. The default polling rate for USB mice is 125Hz (or 125 position changes per second, if you will). This is the value we'll use for our Timer: its callback will be called 125 times per second.
var timer = new Timer(1000 / 125d);
timer.Elapsed += MoveMouse;
void MoveMouse(object sender, ElpasedEventArgs e) { }
Speed and acceleration
When you move your mouse, the distance between two cursor positions is not constant, because you're fast when you start moving your mouse, but you slow down when you get close to the item you want your cursor to be on.
There are also two ways I personally usually move my mouse depending on the context/mood:
One fast uniform movement to get close to the destination, then one slow to correct and get on it (I'll usually go past the destination during the first move)
One medium-slow movement with a small deceleration, follow by a stronger deceleration at the end
The overall speed of the movement also depends on three factors:
The distance between your cursor and the destination
The size of the destination area
Your personal speed
I have absolutely NO IDEA how to work out the formula based on these factors, that's gonna be a work of trial and error for yourself.
This one is purely math and observation based, and will be tricky to get perfectly right, if ever; every person moves their mouse a different way.
The solution I can offer you is to simply forget about deceleration, correction and so on, and just divide your movement into equal steps. That has the merit of being simple.
using System;
using System.Timers;
using System.Drawing;
public class Program
{
static int stepCount = 0;
static int numberOfSteps = 0;
static float stepDistanceX = 0;
static float stepDistanceY = 0;
static PointF destinationPoint;
static Timer timer;
public static void Main()
{
int timerStepDurationMs = 1000 / 125;
PointF currentPoint = Cursor.Position;
destinationPoint = new PointF(2000, 1800); // or however you select your point
int movementDurationMs = new Random().Next(900, 1100); // roughly 1 second
int numberOfSteps = movementDurationMs / timerStepDurationMs;
stepDistanceX = (destinationPoint.X - currentPoint.X) / (float)numberOfSteps;
stepDistanceY = (destinationPoint.Y - currentPoint.Y) / (float)numberOfSteps;
timer = new Timer(timerStepDurationMs);
timer.Elapsed += MoveMouse;
timer.Start();
while (stepCount != numberOfSteps) { }
}
static void MoveMouse(object sender, ElapsedEventArgs e)
{
stepCount++;
if (stepCount == numberOfSteps)
{
Cursor.Position = destinationPoint;
timer.Stop();
}
Cursor.Position.X += stepDistanceX;
Cursor.Position.Y += stepDistanceY;
}
}
Note that I haven't tested with "Cursor", but with some PointF variable instead. It seems to work fine here: dotnetfiddle.

XNA, smoother jumping animations

I'm trying to make jumping functionality in my Movement test. My character jumps and comes back down, but it's very choppy and not smooth at all.
What happens is he juts up to his max height, then comes down smoothly.
I can spot the problem, the for loop doesn't want to play nicely with the code. However, I don't know how to circumvent this. Is there any way to keep the button press and have him jump up nicely?
Code:
if (leftStick.Y > 0.2f && sprite.Position.Y == position.Y || isPressed(Keys.Up) == true && sprite.Position.Y == position.Y)
{
if (wasLeft == true)
{
sprite.CurrentAnimation = "JumpLeft";
}
else if (wasLeft == false)
{
sprite.CurrentAnimation = "JumpRight";
}
//This for loop is my issue, it works but it's jumpy and not smooth.
for (movement.PlayerHeight = 0; movement.PlayerHeight < movement.PlayerMaxHeight; movement.PlayerJump())
{
sprite.Position.Y -= movement.PlayerJump();
}
}
sprite.StartAnimation();
}
else
{
leftStick = NoInput(leftStick);
}
private Vector2 NoInput(Vector2 leftstick)
{
if (sprite.Position.Y < position.Y) //(movement.PlayerSpeed > 0)
{
sprite.Position.Y += movement.PlayerHeight;
movement.PlayerHeight -= movement.Player_Gravity;
//sprite.Position.Y += movement.PlayerSpeed;
//movement.PlayerSpeed -= movement.Player_Decel;
}
else
{
sprite.Position.Y = position.Y;
}
}
Movement class:
public float PlayerMaxHeight = 15f;
public float PlayerHeight = 0;
public float Player_Gravity = 0.01f;
private const float Player_Jump = 0.35f;
public float PlayerJump()
{
PlayerHeight += Player_Jump + Player_Gravity;
if (PlayerHeight > PlayerMaxHeight)
{
PlayerHeight = PlayerMaxHeight;
}
return PlayerHeight;
}
The best way to do jumping I found is to implement a property that will deal with acceleration.
A brief list of what to do:
Create a property that stores the current Y velocity.
Increment the Y velocity by a set amount each step - generally represented by a gravity property somewhere.
Increment1 the Y position by the Y velocity each step.
When you jump, simply subtract1 a said amount from the Y velocity - which will cause your player to jump up in an easing-out motion (start fast and slow down as he reaches the high of the jump). Because you're always incrementing the Y velocity, you will eventually reverse direction and return back to the surface.
When touching a surface, reset the Y velocity to zero.
1 Pretty sure that the Y axis is inverted in XNA (I work in Flash), so where I say increment the Y velocity you may need to decrement it instead - same deal for subtracting from it to jump.
My general approach to get a jump really quickly is to use a bleed off value to make slightly smoother looking movement. I can't look at any code/xna right now but my first thought would be something like below.
Define variables:
float bleedOff = 1.0f;
bool jumping = false;
Input update:
if(input.JumpKey())
{
jumping = true;
}
Jumping update:
if(jumping)
{
//Modify our y value based on a bleedoff
//Eventually this value will be minus so we will start falling.
position.Y += bleedOff;
bleedOff -= 0.03f;
//We should probably stop falling at some point, preferably when we reach the ground.
if(position.Y <= ground.Y)
{
jumping = false;
}
}
bleedOff = MathHelper.Clamp(bleedOff, -1f, 1f);
Obviously the bleedOff value should be calculated with a bit more randomness, probably using a gravity value, to it to make it look right but this will give the illusion of acceleration/decceleration with the jump as they rise and fall.
Rising very fast to begin with and slowing down and eventually starting to fall again and that will speed up. The clamp at the bottom will be your maximum vertical velocities.
I just wrote this off the top of my head at work so apologies if it's not quite what your looking for but I tried to keep it a bit more general. Hope it helps.

Xna adding gravity to a 2d sprite

I am trying to simulate gravity in my first xna 2d game. I have the following
//Used for Jumping
double elapsedAirTime = 0.0;
double maxAirTime = 8.35;
//End Jumping
So I am trying to move the sprite up by a certain amount while the elapsedAirTime < maxAirTime
However, there is some issue where my code only seems to move the sprite up once and not multiple times during this segment of time. here is the code in my "player.cs" class, or the update method of the class.
if (newState.IsKeyDown(Keys.Space))
{
if(oldState.IsKeyUp(Keys.Space))
{
//if we are standing or jumping then change the velocity
if (playerState == PlayerStates.Standing)
{
playerState = PlayerStates.Jumping;
this.position.Y -= (float)(30.0 + ((1.2)*elapsedAirTime)*elapsedAirTime);
}
}
}
//if we are jumping give it some time
if (playerState == PlayerStates.Jumping)
{
if ((elapsedAirTime < maxAirTime) && position.Y < 3)
{
this.position.Y -= (float)(30.0 + ((1.2) * elapsedAirTime)*elapsedAirTime);
elapsedAirTime += gameTime.ElapsedGameTime.TotalSeconds;
}
//otherwise time to fall
else
{
playerState = PlayerStates.Falling;
}
}
//add gravity to falling objects
if (playerState == PlayerStates.Falling || playerState == PlayerStates.Standing)
{
//if we are above the ground
if (this.position.Y < windowBot - 110)
{
//chnage state to falling
playerState = PlayerStates.Falling;
this.position.Y += 3.0f + ((float)(gameTime.ElapsedGameTime.TotalSeconds));
}
else
{
playerState = PlayerStates.Standing;
elapsedAirTime = 0.0f;
}
}
Any help is much appreciated, please and thank you!
To give your sprite the feel of gravity, you should add velocity and acceleration to your Sprite class. Then, create an Update method for the Sprite, and have acceleration be added to your velocity every update, and velocity added to position every update. Position should not be based on the amount of elapsed air time. You can set the acceleration to a constant gravitational value, and then add to the velocity of the Sprite whenever you jump. This will create a flowing parabolic jump that looks nice. If you want to include timing, you can pass the GameTime into the Sprite's Update method, and use it as a modifier on the velocity. Here is an example Update method:
void Update(GameTime gt)
{
int updateTime = gt.ElapsedGameTime.TotalMilliseconds - oldgt.ElapsedGameTime.TotalMilliseconds;
float timeScalar = updateTime / AVG_FRAME_TIME;
this.velocity += this.acceleration * timeScalar;
this.position += this.velocity;
oldgt = gt;
}
If you use timing, this method is a little complicated. You have to keep track of how much time the update took, then divide it by the average amount of time an update or frame should take to get the amount you should adjust your velocity by. Without timing, the method is very simple:
void Update()
{
this.velocity += this.acceleration;
this.position += this.velocity;
}
I would suggest using the simpler method until you understand exactly how timing works and why you need to implement it.
It looks like this line is at fault:
this.position.Y -= (float)(30.0 + ((1.2) * elapsedAirTime)*elapsedAirTime);
I think you will find that this updates the sprites position quicker than you imagine, the sprite will move 330 pixels up the screen in 10 updates (assuming Game.IsFixedTimeStep == true) that is 1 tenth of a second realtime
It is likely that this is just updating so quickly that you don't get a change to see it rise before the && position.Y < 3 condition kicks in and changes the playerState.
It looks like you are trying to say - jump at a rate of x pixels per second for upto 8.5 seconds so long as space is held.
What you need for that is to change the calculation to this.position.y -= (float) (30 * gameTime.ElapsedGameTime.TotalSeconds), this will give a very liner movement to the jump action but it will mean that the sprite jumps at exactly 30 pixels per second.
If Game.IsFixedTimeStep == true - which is the default - the update gets called 60 times per second so gameTime.ElapsedGameTime.TotalSeconds is going to be about 0.1 every update. If something happens to cause an update to skip (rendering issues for example) then update will get delayed and gameTime.ElapsedGameTime.TotalSeconds may be 0.3 (the 2 updates skipped) but the formular still works out the correct jump rate.

Categories

Resources