We Keep Coding

C# - Inconsistent timing with Progress Bars and Timers

I'm trying to make a smooth progress bar that "loads" from 0 to 100 based on a time value (in seconds).
So far, I've got a method that sets up the progress bar's maximum value to 100 * loadTime. Additionally, I've got a timer in my form, and its increment is 10 milliseconds. The idea is that the progress bar's maximum, divided by the timer's increment, will equal the number of seconds the progress bar needs to load.
Unfortunately, there are some inconsistencies with my timer. For instance, if I set my timer's increment to 1000 milliseconds and the bar's maximum to loadTime, it will be somewhat consistent, but it doesn't do anything for the first second. It's also very jittery. At 100 milliseconds and 10 * loadTime, it's slightly more consistent, but still very jittery. 10 milliseconds seems to be the sweet spot in terms of smoothness, however, if for instance, loadTime is equal to 5, it will load the progress bar in approximately 7 or 8 seconds.
I have also tried setting the timer's increment to 1, and my bar's maximum to 1000 * loadTime, however, this just makes it slower, and results in times of 10-13 seconds, when it should be 5 for instance.
Why's this the case? Can anything be done about it?
DisplayTimeProgressBar.cs (credit to Crispy's answer)
[DesignerCategory("code")]
public class DisplayTimeProgressBar : ProgressBar
{
public DisplayTimeProgressBar()
{
this.SetStyle(ControlStyles.UserPaint, true);
}
protected override void OnPaint(PaintEventArgs e)
{
Rectangle rec = e.ClipRectangle;
rec.Width = (int)(rec.Width * ((double)Value / Maximum));
rec.Height = rec.Height;
e.Graphics.FillRectangle(Brushes.Aquamarine, 0, 0, rec.Width, rec.Height);
}
}
Form.Designer.cs
private System.Windows.Forms.Timer progressBarTimer = new System.Windows.Forms.Timer(this.components);
private DisplayTimeProgressBar displayTimeProgressBar = new DisplayTimeProgressBar();
Form.cs
private void loadBar(int timeToDisplay)
{
this.displayTimeProgressBar.Visible = true;
this.displayTimeProgressBar.Maximum = timeToDisplay * 100;
this.progressBarTimer.Start();
}
private void progressBarTimer_Tick(object sender, EventArgs e)
{
if (this.displayTimeProgressBar.Value >= this.displayTimeProgressBar.Maximum)
{
this.displayTimeProgressBar.Value = 0;
this.displayTimeProgressBar.Visible = false;
this.progressBarTimer.Stop();
}
else
{
this.displayTimeProgressBar.Value++;
}
}
The following is a visual demonstration of my issue. The parameter loadTime has been set to 5 (5 seconds). In this demo, the timer's increment is 10, and the bar's maximum is 500.

If you want a continous animation over a specifc duration, wouldn't you have to base it on frames per second (i.e. 40 fps), as well as taking into consideration the maximum width in pixels of the monitor, because the Value corresponds to the number of pixels filled. In other words, using 100 for the Maximum value doesn't make sense. So then sleep 25 millis, calculate the true elapsed time (current time minus start time), divide the elapsed time by the total duration. Now you have a percentage. Multiply that percentage by the Maximum value, and that is the current Value. Also, setting pb.Style = ProgressBarStyle.Continuous; seems to look better, but it may not apply to your situation since you are using a custom paint. Example:
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Form f5 = new Form();
ProgressBar pb = new ProgressBar { Dock = DockStyle.Top, Minimum = 0, Maximum = 2000 };
pb.Style = ProgressBarStyle.Continuous;
double durationSeconds = 5;
Button btnStart = new Button { Text = "Start", Dock = DockStyle.Bottom };
double fps = 40; // refreshes per second
btnStart.Click += delegate {
int maxValue = pb.Maximum;
Thread t = new Thread(() => {
DateTime utcNow = DateTime.UtcNow;
int sleepMillis = (int) (1000 / fps);
int progress = 0;
while (true) {
Thread.Sleep(sleepMillis);
DateTime utcNow2 = DateTime.UtcNow;
double elapsedSeconds = (utcNow2 - utcNow).TotalSeconds;
int newProgress = (int) Math.Round(maxValue * elapsedSeconds / durationSeconds);
if (newProgress >= maxValue) {
pb.BeginInvoke((Action) delegate {
pb.Value = maxValue;
});
break;
}
else if (newProgress > progress) {
pb.BeginInvoke((Action) delegate {
pb.Value = newProgress;
});
}
progress = newProgress;
}
});
t.IsBackground = true;
t.Start();
};
f5.Controls.Add(pb);
f5.Controls.Add(btnStart);
Application.Run(f5);

Player life is increasing per frame instead of per second

I am making a game and I added lives and score in it. Everything is ok but something I want to add is that if the score is multiple of 15 then lives increase by 1.
The problem that I am having here is that the lives are increasing per frame and not per second. 60 frames per second, so it is increasing lives by 60 instead of 1.
The part that is working it is in 'update'
public class RobotDodge
{
private Player _Player;
private Window _GameWindow;
private List<Robot> _Robots;
//private int _Lives;
private decimal _Score, _Lives;
private DateTime _Time, currentTime;
public bool Quit{
get{
return _Player.Quit;
}
}
// making our game constructor..
public RobotDodge(){
_GameWindow=new Window("Robot Dodge", 800, 800);
_Player=new Player(_GameWindow);
_Robots = new List<Robot>();
_Lives = _Player._Lives; // player lives are 5.
_Score = 0;
//_Counter = 0;
currentTime = DateTime.Now;
_Time = DateTime.Now;
}
// method that returns our new Robot object..
public Robot RandomRobot(){
float r = SplashKit.Rnd();
Boxy _Boxy=new Boxy(_GameWindow, _Player);
Roundy _Roundy=new Roundy(_GameWindow, _Player);
Boxy_v2 _Boxy_v2=new Boxy_v2(_GameWindow, _Player);
// setting up the probability to return the robot type..
if(r < 0.3){
return _Boxy;
}else if(r > 0.3 && r < 0.6){
return _Roundy;
}else{
return _Boxy_v2;
}
}
public void DrawGame(){
// clearing the window..
_GameWindow.Clear(Color.White);
//draw our robots..
for (int i = 0; i < _Robots.Count; i++){
_Robots[i].Draw();
SplashKit.DrawCircle(Color.Blue, _Robots[i].CollisionCircle);
}
// drawing our player..
_Player.DrawPlayer();
// Number of Lives..
SplashKit.DrawText($"Lives : {_Lives}", Color.Black, "Ariel", 14, 20, 20);
SplashKit.DrawText($"Score : {_Score}", Color.Black, "Ariel", 14, 20, 50);
_GameWindow.Refresh(60);
}
// update method..
public void Update(){
for (int i = 0; i < _Robots.Count; i++){
_Robots[i].UpdateRobot();
}
if (SplashKit.Rnd() < 0.02){
_Robots.Add(RandomRobot());
}
CheckCollisions();
// increase _Time by 1 second..
_Time = _Time.AddSeconds(1);
// increase score by 1 every second..
// the below condition will always be true as the difference between times is always 1 second..
if (_Time.Second - currentTime.Second == 1){
_Score += 1;
}
if (_Score % 15 == 0){
_Lives += 1;
}
}
}

This should resolve. I had to add an update for the current time variable at the top of the loop. I was under the impression you were updating that somewhere else in the code aside from your Robot constructor and I did not want to skew your activity. So add to the first line within the update method.
protected DateTime currentTime = DateTime.Now;
// default to a minimum value
private DateTime _lastTime = DateTime.MinValue;
public void Update()
{
// UPDATE THE TIME HERE based on NOW
currentTime = DateTime.Now;
// just FYI, shortcut readability to loop vs indexing loop.
// An array is an enumerable you can loop through directly
foreach (var oneRobot in _Robots)
oneRobot.UpdateRobot();
// vs what you had
// for (int i = 0; i < _Robots.Count; i++)
//{
// _Robots[i].UpdateRobot();
//}
if (SplashKit.Rnd() < 0.02)
{
_Robots.Add(RandomRobot());
}
CheckCollisions();
// if the first time ever in, just set the last time to whatever current IS and get out.
// you would never increase as score or lives on the first instance as it is basically 0
if (_lastTime == DateTime.MinValue)
{
_lastTime = currentTime;
return;
}
// subtracting one date/time
// creates a "TimeSpan" object which represents the difference between two date/time fields.
// if no full second has completed yet, get out.
if ((currentTime - _lastTime).Seconds < 0)
return;
// a second HAS completed since the last measurement. Update Score and Lives
_Score++;
if (_Score % 15 == 0)
_Lives++;
// NOW, you can adjust, but if its a 1.3 second between cycles, you would be constantly
// getting farther and farther from actual seconds. So what I am proposing is to
// take the last second and just add an absolute one second to it, so when the next
// real Second cycle is complete, it should properly hit again.
_lastTime = _lastTime.AddSeconds(1);
}

Using a timer and milliseconds to fade a form away but the duration is doubled

I am making my own little custom message box, essentially its just a small box showing up with a message for X amount of time, and then fades away for Y duration.
What is happening tho is that the fade away takes double as long as its supposed to and I cannot figure out why. Can someone look at my code and spot why its taking double the amount of time to fade the form away than it is expected?
//Initiate and set up the message bubble.
public static void InitiateBubble(String displayText, Double showTime = 1000, Double fadeTime = 2000) {
Bubble bubble = new Bubble(displayText);
bubble.showTime = showTime;
bubble.fadeTime = fadeTime;
bubble.Show();
bubble.showTimer = new Timer();
bubble.showTimer.Interval = (int)bubble.showTime;
bubble.showTimer.Tick += bubble.startFadeAway;
bubble.showTimer.Start();
}
//Leaves some time on screen before starting to fade away
private void startFadeAway(object sender, EventArgs e) {
showTimer.Stop();
fadeAwayTimer = new Timer();
fadeAwayTimer.Interval = 10;
fadeAwayTimer.Tick += fadeAway;
fadeAwayTimer.Start();
}
//slowly fades the contorle away until it disapears.
private void fadeAway(object sender, EventArgs e) {
double opacity = Opacity;
opacity -= (10 / fadeTime);
if (opacity < 0) {
Close();
}
else {
Opacity = opacity;
}
}

If the user sets the fade interval to 1 second (1000 milliseconds), and we set the timer interval to 1/10th of a second (100 milliseconds), then we need to fade the opacity by 10% every interval (since the interval is triggered 10 times per second). So we would set Opacity -= .1 on each iteration.
If the user sets the fade interval to 2 seconds (2000 milliseconds), and we still have the timer interval set to 1/10th of a second, then we need to fade the opacity by only 5% every interval, so we would set Opacity -= .05 on each iteration.
Seeing this relationship, we can discover that:
var amountToReduceOpacity = 1.0 / fadeTime * interval;
Note: as γηράσκω δ' αεί πολλά διδασκόμε mentioned above, the resolution on the winform timer is around 17 milliseconds, so if we set it to less than this, the fade will slow down dramatically because we will have calculated the rate for a very fast timer (meaning that we won't fade very much each iteration), but it will execute more slowly. On my machine, setting it to 50 looks just fine.
Now we can use this formula to always fade the form by the correct amount each interval. Here's a sample Form that does basically what you're doing above (note that I dropped a label and two timers on the form, and named them: lblDisplay, showTimer, and fadeTimer):
public partial class Bubble : Form
{
private readonly double amountToReduceOpacity;
private readonly int fadeInterval = 50;
// Custom form constructor takes in all three required settings
public Bubble(string displayText, int showTime, int fadeTime)
{
InitializeComponent();
lblDisplay.AutoSize = true;
lblDisplay.Text = displayText;
lblDisplay.Left = ClientRectangle.Width / 2 - lblDisplay.Width / 2;
lblDisplay.Top = ClientRectangle.Height / 2 - lblDisplay.Height / 2;
showTimer.Interval = showTime;
fadeTimer.Interval = fadeInterval;
amountToReduceOpacity = 1.0 / fadeTime * fadeInterval;
}
// The Shown event starts the first timer
private void Bubble_Shown(object sender, EventArgs e)
{
showTimer.Start();
}
// The shownTimer starts the fadeTimer
private void showTimer_Tick(object sender, EventArgs e)
{
showTimer.Stop();
BackColor = Color.Red; // Just so we see when the fade starts
fadeTimer.Start();
}
// The fade timer reduces opacity on each iteration until it's zero
private void fadeTimer_Tick(object sender, EventArgs e)
{
Opacity -= amountToReduceOpacity;
if (Opacity <= 0) Close();
}
}
Then on the client side we can just do something like:
private void button1_Click(object sender, EventArgs e)
{
Bubble bubble = new Bubble("Help me, I'm Fading!", 1000, 2000);
bubble.Show();
}

How to change a picturebox once a gif ends

I have a PictueBox and I have some dice, I would like to play an animation for the "rolling" of the dice, I did a .gif with the dice, but after the dice stop rolling, I want the actual dice number that I got, I have a random funcion that handles that.
My question is, I press the "Roll Dice" button, it plays the animation and after the animation ends I should set int the picturebox the dice that actually came. but it immediately chnages to the dice number that actually came, skipping the animation;
This is how it works:
dice1.Image = Resources.DiceAnimation; //Here the gif is called to be played
int x = rollDice(); //Here I roll the dice
switch (x){
case 1: dice.Image = resources.diceFace1; //Image set depending on x
break
case 2: //etc...
}

There might be two things needed to do that.
Firstly, you may need to ensure that your PictureBox receives a gif image and it knows it. To do this, please check this answer and this answer. The posts have code to show GifImage frame by frame:
public class GifImage
{
private Image gifImage;
private FrameDimension dimension;
private int frameCount;
private int currentFrame = -1;
private bool reverse;
private int step = 1;
public GifImage(string path)
{
gifImage = Image.FromFile(path);
//initialize
dimension = new FrameDimension(gifImage.FrameDimensionsList[0]);
//gets the GUID
//total frames in the animation
frameCount = gifImage.GetFrameCount(dimension);
}
public bool ReverseAtEnd {
//whether the gif should play backwards when it reaches the end
get { return reverse; }
set { reverse = value; }
}
public Image GetNextFrame()
{
currentFrame += step;
//if the animation reaches a boundary...
if (currentFrame >= frameCount || currentFrame < 1) {
if (reverse) {
step *= -1;
//...reverse the count
//apply it
currentFrame += step;
}
else {
currentFrame = 0;
//...or start over
}
}
return GetFrame(currentFrame);
}
public Image GetFrame(int index)
{
gifImage.SelectActiveFrame(dimension, index);
//find the frame
return (Image)gifImage.Clone();
//return a copy of it
}
}
Use it like this (note that you need a Timer object):
private GifImage gifImage = null;
private string filePath = #"C:\Users\Jeremy\Desktop\ExampleAnimation.gif";
public Form1()
{
InitializeComponent();
//a) Normal way
//pictureBox1.Image = Image.FromFile(filePath);
//b) We control the animation
gifImage = new GifImage(filePath);
gifImage.ReverseAtEnd = false; //dont reverse at end
}
private void button1_Click(object sender, EventArgs e)
{
//Start the time/animation
timer1.Enabled = true;
}
//The event that is animating the Frames
private void timer1_Tick(object sender, EventArgs e)
{
pictureBox1.Image = gifImage.GetNextFrame();
}
Secondly, to know how long you want to run your GIF image, you may need to Get Frame Duration of GIF image like this:
double delayIn10Ms; //declare somewhere
//Initialize on your form load
PropertyItem item = img.GetPropertyItem (0x5100); // FrameDelay in libgdiplus
// Time is in 1/100th of a second
delayIn10Ms = (item.Value [0] + item.Value [1] * 256) * 10;
Then use the delayIn10Ms time plus, probably, a little bit more time to stop your timer. You may also want to check when was the last time your timer Ticks and store it. If it exceeds the given delay time, then you should stop your timer and start it again on dice roll, after image assignment in your switch case.
DateTime currentTick = DateTime.Min;
DateTime startTick = DateTime.Min;
private void timer1_Tick(object sender, EventArgs e)
{
currentTick = DateTime.Now;
if ((currentTick - startTick).TotalSeconds / 100 < delayIn10Ms)
pictureBox1.Image = gifImage.GetNextFrame();
else
timer1.Stop(); //stop the timer
}
//And somewhere else you have
timer1.Start(); //to start the timer
int x = rollDice(); //Here I roll the dice
switch (x){
case 1: dice.Image = resources.diceFace1; //Image set depending on x
break
case 2: //etc...
}

You can make a timer with the Interval property set to the length of the animation and set it's Tag to 0 and in the timer write the code:
if(timer.Tag == "0")
timer.Tag == "1";
else if(timer.Tag == "1")
{
int x = rollDice();
switch (x)
{
case 1: dice.Image = resources.diceFace1; break;
case 2: //etc...
}
timer.Tag == "0";
timer.Stop();
}

Point buy system for a tabletop rpg

I'm trying to make a point buy system using numeric up/downs. Here's the idea:
There are six numeric up/downs, one for each trait (Strength, Dexterity, Constitution, Intelligence, Wisdom and Charisma). Each trait begins at 10 points. You can't bring a trait below 7 or above 18.
I'm a total noob, but I managed to do this:
private void numericUpDown1_ValueChanged(object sender, EventArgs e)
{
numericUpDown1.Maximum = 18;
numericUpDown1.Minimum = 7;
}
I did this one six times. In my form, there is now six numeric up/downs. Now I'm trying to do something which is way too much for my minuscule knowledge.
I want a system in which the value of the six numeric up downs is combined and cannot be exceeded, which means that in this case, we would have 60 points and couldn't increase any score unless we decreased one. I would add 15 points to that "Point pool", so the user doesn't have to decrease a stat straight away, in order to increase another one.
Example: I have 1 point left, and my scores go as follows: 15, 15, 14, 10, 10, 10. I increase the third score by 1 point. I now have this:
15, 15, 15, 10, 10, 10.
Now I have nothing left, but I want my fourth score at 15 points. In order to achieve this, I have to decrease the fifth and sixth score until I have 5 points freed up. I now have this:
15, 15, 15, 15, 7, 8.
Having a Lil' box in my form to display how many points are left would be a cherry on top.
I did my best to explain this. Please take note that English is not my native language and I sometimes do struggle with it.
I'm clueless as to how I can achieve this, as I barely have any knowledge of C#. What would be the code missing ?

It would easier if you create a Character class
You could define defaults for each property in constructor, and individual methods to increase or decrease its points.
public class Character
{
private int totalPointsMax = 60;
private int maxPoints = 18;
private int minPoints = 7;
public int Strength { get; set; }
public int Dexterity { get; set; }
public int Constitution { get; set; }
public int Intelligence { get; set; }
public int Wisdom { get; set; }
public int Charisma { get; set; }
public Character()
{
// create new Character defaults...
Strength = 10;
Dexterity = 10;
Constitution = 10;
Intelligence = 10;
Wisdom = 10;
Charisma = 10;
}
private int GetTotalCharacterPoints()
{
return Strength + Dexterity + Constitution + Intelligence + Wisdom + Charisma;
}
//example of method to increase Strength
public void IncreaseStrength()
{
int availablePoints = totalPointsMax - GetTotalCharacterPoints();
if (availablePoints > 0 && Strength < maxPoints)
Strength++;
}
//example of method to decrease Strength
public void DecreaseStrength()
{
if (Strength >= minPoints)
Strength--;
}
//missing the other increase/decrease methods for the rest of features...
}
You just need to instance at beginning and your UI buttons only need to invoke the CharacterFoo.IncreaseStrength() or CharacterFoo.DecreaseWisdom() ... etc.
Also, with this option you can allways reuse this in any part of the game..
(ex: if your character finds any special potion .. then CharacterFoo.IncreaseStrength() )
Hope this helps...

There's a couple of ways to do it.
Firstly, move these outside of the event function:
numericUpDown1.Maximum = 18;
numericUpDown1.Minimum = 7;
My recommendation would be to set a variable with the maximum points:
private int MAX_POINTS = 60;
Then when one of them is changed, you can call another method that adds up all of the current boxes, and determines whether it is over the limit or not:
private bool TotalOfStatsIsOverLimit() {
int total = GetTotalOfStats();
return total > MAX_POINTS;
}
private int GetTotalOfStats() {
int total = 0;
// TODO: Go through each number box and add to the total
return total;
}
private void numericUpDown1_ValueChanged(object sender, EventArgs e) {
if(TotalOfStatsIsOverLimit()) {
// TODO: Decrease the value of the stat box that was updated
}
}
One advantage of doing it this way, is that you can reuse the same event method numericUpDown1_ValueChanged for all 6 of your stat boxes.

If I were you, I would go with a class for character since it will greatly simplify your future works, though if you are new, it may be harder at the start.
Still, you can follow up the basic approach as follows:
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
private const int totalPoints = 60 + 15; // sum of each trait plus the pool bonus
public Form1()
{
InitializeComponent();
foreach (Control control in this.Controls)
{
if (control is NumericUpDown)
{
NumericUpDown numControl = control as NumericUpDown;
numControl.Minimum = 7;
numControl.Maximum = 18;
numControl.Value = 10;
numControl.ValueChanged += nud_ValueChanged;
lblPointsLeft.Text = "15"; // bonus points
}
}
}
private void nud_ValueChanged(object sender, EventArgs e)
{
int sum = (int)(nudCha.Value + nudCon.Value + nudDex.Value + nudInt.Value + nudStr.Value + nudWis.Value);
int pointsLeft = totalPoints - sum;
NumericUpDown nudSender = (NumericUpDown)sender;
if (pointsLeft < 0)
{
MessageBox.Show("No points left");
// restore last change
// undo the last change
nudSender.Value = nudSender.Value - 1;
pointsLeft++;
}
lblPointsLeft.Text = pointsLeft.ToString();
}
}
}

Here's some Pseudocode:
You want to create a variable to hold your current points. Create some labels to hold that variable, and make sure you do AJAX calls, otherwise every time you update you are going to be calling this from the server again. This is probably better done in Javascript/Jquery.
int pointsUsed = numericUpDown1.value + numericUpDown2.value + numericUpDown6.value; //add all 6 of your values.
//for your textbox:
label1.text = "points left is:"
label2.text = 75 - pointsUsed;
private void checkBox1_Click(Object sender, EventArgs e)
{//to add points
if (pointsUsed < 75)
{
numericUpDown1.Value += 1;
pointsUsed += 1;
}
}
Check MSDN NumericUpDown for more info.