How to animate an image in C# - c#

I'm trying to animate an image in C#. Basically, I want to take an image and connect it to another function and based on a scale of 1 to 10, make the image move up or down. By default, the image will start out at 1. I have searched and I've found ways to make shapes move up and down on the screen, but not an actual image. The image is small, say 60x60 pixels. I feel like this should be simple, but I have yet to figure it out. I was thinking of just having an image placed on the Windows form and then basically have it move up or down the y-axis of the form, but I would like it to move smoothly.
Ok, I was able to hook a button up to a timer function and get the button to move smoothly up and down the screen. The button has to keep moving for the duration of the program running. However, I'm having a hard time writing a function that stops the timer and the image(button) from moving once the image reaches a certain location. Without that, the timer continues and the image(button) moves off the screen. I've tried messing with button.Location.Y functions, but I have yet to get it work right. Can anyone please advise? Thanks. Oh yea, once the image(button) reaches Y location of 192 or 447, it should stop moving.
An example of what I have:
private void timer2_Tick(object sender, EventArgs e)
{
button2.Top = button2.Top + 1;
if (button2.Location.Y == button2.Location.Y - 192)
{
timer2.Stop();
timer3.Stop();
}
//if (timer_limit < 100)
//{
// button2.Top = button2.Top + 1;
// timer_limit++;
//}
//else
//{
// timer2.Stop();
//}
}

Several ways to do this. You could just use a PictureBox and change its Location property. Or you could draw the image in the form's OnPaint() override and change the argument to e.Graphics.DrawImage(). You'll then have to call Invalidate() to force the OnPaint method to run. It is the cheapest way.

Related

Label.Image gradually increase with for loop

Can't figure out why image in label1 connected with imageList1 doesn't want to change more than once after pressing of a mouse button. Imagelist consists of 7 images which I want to have gradually appear in label element...that was the whole idea.
private void button1_Click(object sender, EventArgs e)
{
int number = 0;
for (int i = 0; i < imageList1.Images.Count; i++)
{
label1.Image = imageList1.Images[number++];
}
}
The default ImageIndex in label1 properties is set to 0 (first image) and after the for loop it gets to index1.
I am guessing that the last image stays? If you want the images to appear one by one with a timeout you should do something like
private async void button1_Click(object sender, EventArgs e)
{
foreach (Image image in imageList1)
{
await Task.Delay(1000); //wait for one second before changing
label1.Image = image;
}
}
Of course depending on your requirements you may want to disable the button and as pointed out by #nvoigt you may want to use some animation capabilities of the UI framework.
Your form will only repaint once the whole button event ran. That means you will only ever see the last image. Look into background workers or maybe timers to have animation. Maybe WPF is the way to go if animation is the main purpose of your program.
Your loop does assign the images OK but there is no time to show them because updating the UI is not happening before the loop is through.
You could force the UI update by inserting an Application.DoEvents()
label1.Image = imageList1.Images[number++];
Application.DoEvents();
You can try it but you should not actually use this as your solution! It has two serious issues, none of which you want:
It gives you no control over the animation speed.
Application.DoEvents can introduce serious problems in your code and you should not get into the habit of using it at all. Look it up or just believe it!
The best way to do any animation in Winforms is to use a Timer. In the Button click you set it up and start it. In its Tick you do the animation..
Have alook at this post for a button animation example! Instead of Mouse_Enter use your button click. Stop the Timer when the images have all been shown!
If all you want to do is playing around a little getting used to Timers is highly recommended and there is no need at all for WPF. If you will need a lot of high class animation WPF is indeed the way to go.
Here is the code to a minimal solution:
Timer timer1 = new Timer();
int imageIndex = 0;
private void timer1_Tick(object sender, EventArgs e)
{
if (imageIndex >= imageList1.Images.Count ) timer1.Stop();
label1.Image = imageList1.Images[imageIndex++];
}
private void button1_Click(object sender, EventArgs e)
{
imageIndex = 0;
timer1.Interval = 100; // change ms to suit your needs!
timer1.Start();
}
There are various issues with your code.
By incrementing number inside the loop, you force it to have the same value as i. If that's what you want to do, why not simply use i?
You never let the UI thread update the display. The UI thread will update the display only after the event handler finishes.
The result is that only the last image will be displayed.
To allow the UI thread to update the display, you need to use Application.DoEvents, eg:
foreach(Image image in imageList1.Images)
{
label1.Image = image;
Application.DoEvents();
}
Of course this will just go through all the images at once, so you'll just see a blur.
If you want a simple, smooth animation, use an [animated GIF2 or use WPF. Trying to do this in Windows Forms with individual images is not straightforward.
If you want to show an animation, you can put a delay as #Stilgar suggests, although this won't guarantee a smooth animation. Thread switching or high CPU load means that the delay between images will always be greater than the delay amount. The result will be a jerky animation.
You can use a timer event to update the image. This is better, but high CPU load can still delay processing of the event. Only WPF can guarantee the animation will be smooth without complex coding.

c#:WindowsForms - performance optimization when redrawing bitmap

In my program I have a picture box, containing a bitmap.(300x300 35kB .PNG file)
If 2 variables(x/z coord) are changed, I draw a new circle every second to the new position accordingly - a timer runs in the background, invoking this method.
void DrawEllipse()
{
// Retrieve the image.
bChamber = new Bitmap(global::Project.Properties.Resources.driveChamber1);
gChamber = Graphics.FromImage(bChamber);
gChamber.FillEllipse(brushChamber, VirtualViewX(), VirtualViewY(), 10, 10);
pictureBoxDriveView.Image = bChamber;
}
Now I'm looking for ways to optimize the performance. Redrawing the pic every 0.2s e.g. slows the program so much, I cant do anything else.
But ultimately I need a more fluent movement of the circle, you can Imagine how it laggs with the 1000ms refresh rate.
Is there a better way to do this, then loading the whole bitmap every time?
Use the Controls the way they were intended.
do not redraw the Bitmap yourself.
just load it 1x in the Picturebox.
handle the Paint event of the picturebox to draw the ellipse
invalidate the Picturebox whenever your coords change.
Draw the circle ONE time in a control (PictureBox)
Put the control across the 300x300 picture box.
When, and only when, the variables change, update the location of the picturebox with the circle.
This way you prevent drawing too many times.
Try setting the DoubleBuffered property of the form to true. This generally results in improved performance.
Also, you should put this
// Retrieve the image.
bChamber = new Bitmap(global::Project.Properties.Resources.driveChamber1);
In the class constructor.
Try this, it does not load the image from disk every time, so it is less expensive.
private Image _origImage = new Bitmap(global::Project.Properties.Resources.driveChamber1);
void DrawEllipse()
{
// Retrieve the image.
Image bChamber = new Bitmap((Image)this._origImage.Clone());
Graphics gChamber = Graphics.FromImage(bChamber);
gChamber.FillEllipse(brushChamber, VirtualViewX(), VirtualViewY(), 10, 10);
pictureBoxDriveView.Image = bChamber;
}

Prevent mouse from leaving my form

I've attached some MouseMove and MouseClick events to my program and next up is one of these:
Get "global" mouse movement, so that I can read the mouse location even outside the form.
Prevent my mouse from leaving the form in the first place.
My project is a game so it'd be awesome to prevent the mouse leaving my form like most other games do (ofc. you can move it out if you switch focus with alt+tab fe.) and taking a look at answers to other questions asking for global mosue movement, they seem pretty messy for my needs.
Is there an easy way to prevent my mouse from going outside my form's borders? Or actually to prevent it from going OVER the borders in the first place, I want the mouse to stay inside the client area.
Additional info about the game:
The game is a short, 5-30 seconds long survival game (it gets too hard after 30 seconds for you to stay alive) where you have to dodge bullets with your mouse. It's really annoying when you move your mouse out of the form and then the player (System.Windows.Forms.Panel attached to mouse) stops moving and instantly gets hit by a bullet. This is why preventing mouse from leaving the area would be good.
Late answer but might come in handy. You could subscribe the form to MouseLeave and MouseMove events and handle them like this :
private int X = 0;
private int Y = 0;
private void Form1_MouseLeave(object sender, EventArgs e)
{
Cursor.Position = new Point(X, Y);
}
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
if (Cursor.Position.X < this.Bounds.X + 50 )
X = Cursor.Position.X + 20;
else
X = Cursor.Position.X - 20;
if (Cursor.Position.Y < this.Bounds.Y + 50)
Y = Cursor.Position.Y + 20;
else
Y = Cursor.Position.Y - 20;
}
The above will make sure the mouse cursor never leaves the bounds of the form. Make sure you unsubscribe the events when the game is finished.
Edit :
Hans Passants's answer makes more sense than my answer. Use Cursor.Clip on MouseEnter :
private void Form1_MouseEnter(object sender, EventArgs e)
{
Cursor.Clip = this.Bounds;
}
You could free the cursor in case of any error/crash (I'm sure you could catch'em) :
Cursor.Clip = Rectangle.Empty;
You cannot trap the mouse, that would prevent the user from, say, operating the Start menu. Closest you can get is assigning the Cursor.Clip property. But it is easily defeated by the user pressing Ctrl+Esc for example, there is no notification for this.
Best thing to do is to subscribe the form's Deactivated event, it reliably tells you that the user switched to another program. The Activated event tells you when the user moved back. Of course the user will have few reasons to actually do this when the game score depends on keeping a game object moving. So don't forget to give the user an easy way to pause the game with, say, the Escape key.
I don't know a solution for your exact problem, but I have a completely different idea for you. I don't know how your game works, but based on what you told me, why not make it a step harder: Add borders to the game-area, for example 4 pixels wide rectangles, which you are not allowed to touch. If you touch them, you die and the mouse gets released.
You can use the Cursor class. For example:
int X = Cursor.Position.X;
int Y = Cursor.Position.Y;
As for preventing the user to move the mouse outside the form, the best approach would probably be if you had someway to know what is the coordinates of your form on the screen and attach a MouseMove event, and check if the mouse is inside the form rectangle.
To know the form position on the screen take a look at this question.
I wouldn't recommend the global mouse movement control for two reasons.
It's bad design, you should respect the bounds of the operating system. Make the application full screen if you want this kind of behaviour. The only applications that should perform these kind of operations are "kiosk" mode applications which lock down the entire OS (to prevent operator abuse).
Global key hooks are messy, aren't guaranteed to work and are dangerous because they affect a key part of the operating system (all controls). A bug in your code could result in requiring a reboot on the machine.
That said, last time I checked (a while ago, on Vista) SetWindowsHookEx still works (but its not officially supported IIRC), it's an unmanaged call so you'll have to pinvoke but with it you can refuse to pass on messages that would move the mouse outside of the bounds of your application. I'm not 100% sure if the OS will let you beat it to the cursor control (I've only blocked keyboards before on desktop boxes) but its probably your best shot.

C# - How to register onMouseClick in real time?

I am writing a silly little program (as we all do from time to time) to work on some basic C# coding. As I'm sure you can see, the mouse is clicked, the picture moves until it's at the place where the mouse was clicked. This bit works fine. I then want the picturebox to move randomly, which I have also managed! The next problem I have is that when I click, instead of moving to the new mouse coordinates, the picturebox continues to move randomly. Any help on this would be much appreciated! Here is the code I think is the problem.
Many Thanks!
John
protected override void OnMouseClick(MouseEventArgs e)
{
base.OnMouseClick(e);
int destX = e.X;
int destY = e.Y;
HasArrived = false;
while (HasArrived == false)
{
moveImage(destX, destY, pictureBox1);
if (pictureBox1.Left == destX && pictureBox1.Top == destY)
{
HasArrived = true;
while (HasArrived == true)
{
randomMove(pictureBox1);
hungry1 += 1;
}
}
}
}
You are stucked in your inner loop!
Try to put the loop in a backgroundworker,
so you can recognize the new mouseclick to set HasArrived to true.
And using the negative while statement in the positive while statemant seems very bad to me,
ive never seen that before.
I dont think thiss will work fine..
It's probably because HasArrived never gets set to false anywhere? But that will also mean you will be stuck in your Move loop as well.
EDIT: If you want to only move randomly once after you move to the position you clicked at, then remove the while around the random bit, else you'll need some other variable to know when to break out of the while.
Your inner loop seems to have a problem.
HasArrived = true;
while (HasArrived == true)
{
randomMove(pictureBox1);
hungry1 += 1;
}
Unless randomMove() can modify HasArrived, your loop never set HasArrived to false, so the while condition is always true, and you will never get out of the loop.
I looks like its because once the picture moves to its destination your program is stuck in a tight while loop from which it never escapes
First of all, you should never test equality of variables with boolean expressions. This means HasArrived == false is bad and it is better to write it like this:
while (!HasArrived)
{
// ...
while (HasArrived)
{
}
}
The problem is that your program does not give back control to the form, after the mouse has been clicked once.
Let me illustrate, what your program does as soon as the mouse has been clicked:
remember new x and y coords
while the picture has not arrived, move the image
in case the picture has arrived it's destination - move it around randomly
But it ends up moving the picture around until you kill the program, because your form does still handle the "OnMouseClicked"-event. And as long as the program does not return from your event handling method, the form is unable to record any other event (typically it should freeze, ending with "Application not responding").
So from what I think your code is supposed to do you should code your program like this:
1. Create a parallel thread to move around your image randomly
2. Pause the thread as long as your mouse-click event has not yet been handled
Also your question is wrong at all. Realtime means that your program is able to give any result in a predefined time-limit. Your method does not fit this at all, beacause the time your method takes for execution depends on how fast your image moves and which distance it should move.

C# Slow Paint Event: painting large number of objects

I have a PictureBox it serves as a canvas.
A List<RectangleObj> the array size of aprox 8000.
The "RectangleObj" is a simple rectangle class, once you invoke its Draw(Graphic g) method it will draw
the border using
g.DrawRectangle(...) and,
fill the rectangle with an alpha
transparency using
g.FillRectangle(...)
In the application Form.cs, i use the pictureBox1_Paint(...) to loop the array of RectangleObj and invoke the Draw method of that class.
Like this.
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
for (int i = 0; i < RectList.Count(); i++) //List<RectangleObj> count = 8000
RectList[i].Draw(e.Graphics);
}
Every time the mouse clicks upon a RectangleObj and drags changing its location (mouse move event) the paint event is called. since the array is large in number, the paint event does not have enough time to finish its loop and gets flooded with mouse movements. so, this makes the Paint event slow.
Can somebody advice me how to optimize this procedure.
Have you considered drawing to an in memory bitmap, then blitting that to the screen?
There are a couple of things here:
don't draw while moving. Calculate an outline for the selected elements and XOR only that outline when the mouse moves. Repaint on MouseUp.
don't draw stuff you don't need. You can run an algorithm to detect which rectangles are totally obscured and ignore them.
Make sure you have DoubleBuffered=true for your Picturebox
Work out which rectangles need to be redrawn based on the location of the moving rectangle and its prior location and only redraw those. Clip the painting to only those parts that have been invalidated.

Categories

Resources