I'm programming a tetris clone for my C# school project. I am using Microsoft Visual Studio 2012. The game itself is implemented as a two dimensional array of blocks(List of Lists of blocks) and every block has its own texture (bmp image). I am drawing the whole array onto a PictureBox control and this is where the problem starts. When updating the image on the PictureBox (moving/rotating the active shape) the game slightly lags. I tried to draw on a Panel control instead but the result was the same. I have a rough idea what might cause the lag but I don't know exactly how to get rid of it.
This is the draw method of the game "grid":
public void Draw(Graphics g)
{
Brush brush;
Font font = new System.Drawing.Font( "Arial", 5);
for (int i = 0; i < Width; i++)
for (int j = 0; j < Height; j++)
{
brush = new TextureBrush(Blocks[i][j].Texture);
if (Blocks[i][j].Occupied==true)
g.FillRectangle(brush, i * 20, j * 20, i * 20 + Blocks[i][j].Texture.Width, j * 20 + Blocks[i][j].Texture.Height);
}
}
This is the draw method of the active tetromino:
public void Draw(Graphics g)
{
Brush brush = new TextureBrush(Blocks[0].Texture);
foreach (FullBlock b in Blocks)
g.FillRectangle(brush, b.x * 20, b.y * 20,b.Texture.Width, b.Texture.Height);
}
The game itself then use both of them (double buffering attempt):
public void GameDraw(PictureBox p)
{
Graphics g = Graphics.FromImage(gb);
gameGrid.Draw(g);
PlayingShape.Draw(g);
p.Image = gb;
p.Refresh();
}
where "gb" is a private Bitmap variable I create just once in the class constructor (to reduce (unsuccessfully) the lag).
The GameDraw method is called whenever the state of the game is changed (e.g. moving/rotating the active tetromino and every "gravity" tick)
You need Double buffering, which you did not set. Quoting MSDN:
Double buffering uses a memory buffer to address the flicker problems
associated with multiple paint operations. When double buffering is
enabled, all paint operations are first rendered to a memory buffer
instead of the drawing surface on the screen
You can enable it using Control.DoubleBuffered property
No need for picture box, add your own control:
using System.Drawing;
using System.Windows.Forms;
namespace TetrisGame
{
public sealed class TetrisControl : Control
{
private TheBlockType[][] blocks = ...;
protected override void OnPaint(PaintEventArgs e)
{
//draw your stuff here direct to the control, no buffers in the middle
//if that causes flickering, turn on double buffering, but don't bother doing it yourself
//this is your existing draw method:
Draw(e.Graphics);
}
}
}
Then on every tick or movement, do not call paint, just invalidate the control:
tetris.Invalidate();
Also, think out of the box... Rather than doing a full grid scan, you could make each of your shapes part of a linked-list and redraw them based on their position in the grid... Until your grid completely fills, you'd be doing less scanning.
Or, consider only redrawing what you need to redraw, i.e. a block drops near the top, no need to completely redraw the full grid.
Optimisation is what separates us from the animals. Apart from the platypus, who is an optimal creature.
Related
In my custom control am using nearly 1000 series with 100 points each which results in delay in drawing and even after drawn also it takes some amount time to be responsive.
Am even using Begin and End update before loading points. But no use.
I have replicated the same in a simple sample by drawing a line in a loop, which also goes to unresponsive state.
Is there any solution to overcome this.
public Form2()
{
InitializeComponent();
ControlExt controlExt = new ControlExt();
this.Controls.Add(controlExt);
}
public class ControlExt : Control
{
public ControlExt()
{
Height = 500;
Width = 1000;
}
protected override void OnPaint(PaintEventArgs e)
{
for (int i = 0; i < 1000; i++)
{
for (int j = 0; j < 100; j++)
{
using (var pen = new Pen(Color.Red, 2))
{
e.Graphics.DrawLine(pen, 400, 200, 300, 100);
}
}
}
}
}
Drawing lines is done on the main thread, and can be quite inefficient when there is many lines. Winforms is based on GDI, and this uses Immediate Mode rendering. This has a tendency to scale poorly since the processor have to send all the commands to the graphics device each frame.
The typical solution is to use fewer drawing commands, and therefore suffer less overhead. For example:
Use DrawLines if the line segments are connected in strips.
Create a graphics path for all the lines and use DrawPath
Create a Bitmap, draw to this image on a background thread, and then use DrawImage in the UI.
I'm following a snake tutorial right now and I wrote the exact thing as said, but it won't even show the rectangles of the snake and food.enter code here
I'm using Windows Form Application.
I made separate classes - Food; Snake; And the one for the form.
//Snake class
public Rectangle[] Body;
private int x = 0, y = 0, width = 20, height = 20;
public Snake()
{
Body = new Rectangle[1];
Body[0] = new Rectangle(x, y, width, height);
}
public void Draw()
{
for (int i = Body.Length - 1; i < 0; i--)
Body[i] = Body[i - 1];
}
public void Draw (Graphics graphics)
{
graphics.FillRectangles(Brushes.AliceBlue, Body);
}
public void Move (int direction)
{
Draw();
//Food Class
public class Food
{
public Rectangle Piece;
private int x, y, width = 20, height = 20;
public Food(Random rand)
{
Generate(rand);
Piece = new Rectangle(x, y, width, height);
}
public void Draw(Graphics graphics)
{
Piece.X = x;
Piece.Y = y;
graphics.FillRectangle(Brushes.Red, Piece);
You are not inheriting your body and food classes from any form of drawable context objects. So the "draw" routine would need to be explicitly called any time a change happens. You appear to be trying to mimic the structure of a WinForms UI component, where it has its own built-in Draw() method that is implicitly called any time the UI needs to update.
Also, since you are calling "Draw" without any parameters, that should be throwing an error unless you have an overload somewhere that doesn't require parameters. In which case, there would be no graphics context to draw to.
I'm no expert in doing game graphics, but I do know that constantly calling the redraw method of a UI component is exceptionally inefficient. There are overrides for the Invalidate() method where you can provide rectangles to invalidate only small portions of the entire component. That can help with improving redraw rate.
I would suggest having a single renderable UI component on screen that links to your data objects. And override the draw() method of that component so that it draws the entire game board (or portions of it based on the invalidated regions), based on the data stored in your game objects.
In my code, the output is an image each pixel of which is determined using nested loops.
1) How can I force a window to open and show the output image as it is being constructed in the loop? (The window shows up when everything is finished. I don't want this.)
2) How can I have the output be displayed line by line (or even pixel by pixel) as the loop goes on. User must have the sense of getting the output in real-time.
outImage = new Image<Hsv, Byte>(numberOfColumns, numberOfRows);
byte[,,] pixelValue = outImage.Data;
for (int i = 0; i < numberOfRows - 1; i++)
{
for (int j = 0; j < numberOfColumns - 1; j++)
{
//pixelValue[i, j, k] is determined here using some other functions
imageBox1.Image = outImage; //too slow and impossible
}
}
You can display an image pixel by pixel in real time by putting it on a separate thread and using GetPixel and SetPixel. Keep in mind though that these methods are slow and if you are displaying high resolution pictures, it will take a while.
What you'll want to do is create a form with a picture box control on it. Next, create a Bitmap object containing the image you'll want to display. You can do this using a line like this:
Bitmap _bmp = new Bitmap(Image.FromFile(#"C:\MyImage.jpg"));
Next, in your form's shown event, spin off a new task to do the work, so the GUI doesn't lock up:
private void Form1_Shown(object sender, EventArgs e)
{
Task.Factory.StartNew(ShowImage);
}
This line will spin off a new thread every time the form is displayed. The thread will fork off and call ShowImage(), which should look like this:
private void ShowImage()
{
Graphics g = pbImage.CreateGraphics();
for (int x = 0; x < _bmp.Width; x++)
{
for (int y = 0; y < _bmp.Height; y++)
{
Color c = _bmp.GetPixel(x, y);
if (pbImage.InvokeRequired)
{
var x1 = x;
var y1 = y;
pbImage.BeginInvoke((Action) (() =>
{
g.FillRectangle(new SolidBrush(c), x1, y1, 1, 1);
}));
}
else
{
g.FillRectangle(new SolidBrush(c), x, y, 1, 1);
}
System.Threading.Thread.Sleep(1);
}
}
}
If you wanted to speed this up a bit, you could spin up two or more tasks, each task working in parallel (e.g. one thread starts at the beginning, another at the end, another in the middle maybe, etc). Just make sure your threads don't "overlap".
Another way to speed this up is to use pointers instead of GetPixel() and SetPixel(). You'd have to mark your code as unsafe though.
put your code in background Worker => Do Work
A separate thread would be initiated
I am not a WinForms expert I am more of a WPF type. But I have an application running a solid 30fps and that is faster than humans can detect. I really do not quite understand what you want to do here. You have to blit each pixel individually but have display in real time? An ImageBox derives from the Windows Forms PictureBox, that won't work I do not think.
You could try moving to WPF, and use a WriteableBitmap for a ImageSource for an Image object or the background of a Canvas Object. A WriteableBitmap will let you access each pixel, but the refresh rate is controlled by WPF and the monitor refresh rate is controlled by the AC current frequency.
Doug
I try to draw a custom selection rectangle on a Picturebox, using the method below:
void _drag_UpdateView(bool clearOnly, MouseEventArgs e)
{
System.Diagnostics.Debug.WriteLine("UpdateView");
using (Graphics g = this.i_rendered.CreateGraphics())
{
g.Clear(Color.Transparent);
if (clearOnly)
return;
int px = (_drag_start.X > e.Location.X)?e.Location.X:_drag_start.X;
int py = (_drag_start.Y > e.Location.Y)?e.Location.Y:_drag_start.Y;
if (px < 0)
px = 0;
if (py < 0)
py = 0;
int wx = Math.Abs(e.Location.X-_drag_start.X);
int wy = Math.Abs(e.Location.Y-_drag_start.Y);
g.DrawRectangle(Pens.LightBlue, px, py, wx, wy);
}
}
Whenever I call:
g.Clear(Color.Transparent);
the whole picturebox turns black. However, the rectangle gets drawn over it.
If I do not call that method, the rectangles stack on itself, of course. I want to remove the old rectangle and create a new one like this.
Can anyone describe what's wrong?
Do not paint your control inside any other method than OnPaintBackground or OnPaint.
Actually you may need it for performance reasons (your won't refresh the full control, just change something on-the-fly) but it'll make your code much more tricky and you'll always need to do the same job inside the Paint event too (because it may be called for many other reasons so the output should be the same).
Inside the Paint you do not even need to use CreateGraphics, the graphics context is inside the PaintEventArgs object so change your code to:
void DoPainting(object sender, PaintEventArgs e)
{
// Do your calculations
e.Graphics.DrawRectangle(Pens.LightBlue, px, py, wx, wy);
}
As pointed by #AndersForsgren to use the CreateGraphics method is not common and usually you do not need to call it (with the exception pointed before and when, for example, you need to perform some calculations based on the graphics like for AutoSize).
i have no previous experience in plotting in winforms, in one form i want to plot ecg. or lets say a sin wave or any wave function in a specific area, but what i am doing is e.c.g.. rest of the form will be normal form with buttons and labels,
can anybody be nice enough to through in a tutorial
:)
You have few choices, you can write your own control, that will process data and render it. For more complicated plots, that can be a bit complicated, but the basics are always the same, setting X and Y values ranges and then just draw a line using GDI going from left to right, nothing fancy.
As this can get a bit complicated for more advanced features, you could use some charting controls, I'd read this post or check codeproject.com, I remember, that I saw few attempts to write some decent charting controls, which are open source, new articles will probably be coded in WPF, but you should find something older as well.
Edit:
Some links that you can find useful: Graph plotting lib that's main goal is to simulate ECG or another graph plotting lib
You need to create a custom control.
public class MyECGDrawer : Control{}
In it, you override the OnPaint event
protect override OnPaint(PaintEventArgs pe ){}
Then in the paint function, you draw your graphics the way you want it, let's say sin(x)
// refresh background
pe.Graphics.FillRectangle( Brushes.White, 0, 0, Width, Height );
int prevX = -1, prevY = -1;
for(int x = 0; x < Width; x++ )
{
if( prevX >= 0 )
{
pe.Graphics.DrawLine( Pens.Black, prevX, prevY, x, Math.sin(x) );
}
prevX = x;
prevY = Math.sin(x);
}
To force the ECG to redraw, you call the .Invalidate() function on the control. You should be able to drag and drop the control in your form from the designer.
In the end, the class would look like
public class MyECGDrawer : Control{}
In it, you override the OnPaint event
public class MyECGDrawer : Control
{
protect override OnPaint(PaintEventArgs pe )
{
// refresh background
pe.Graphics.FillRectangle( Brushes.White, 0, 0, Width, Height );
int prevX = -1, prevY = -1;
for(int x = 0; x < Width; x++ )
{
if( prevX >= 0 )
pe.Graphics.DrawLine( Pens.Black, prevX, prevY, x, Math.sin(x) );
prevX = x;
prevY = Math.sin(x);
}
}
}
I wrote up the following and tested it. It seems to do what you want, but note that it is simply plotting sin(x) in a loop with no delay - i.e. the plot for sin(x) streams off the left edge so fast you can hardly see it. You can, however, put a break on any line inside the loop and then step through the loop with F5 to see it work slowly - presumably your streaming ECG data will only arrive at some fixed speed so this should not be a problem in your implementation.
In the following, monitor is a PictureBox on a winforms form. Everything else is local.
private void drawStream(){
const int scaleX = 40;
const int scaleY = 40;
Point monitorTopLeft = new Point(0, 0);
Point MonitorTopLeftMinus1 = new Point(-1, 0);
int halfX = monitor.Width / 2;
int halfY = monitor.Height / 2;
Size size = new Size(halfX + 20, monitor.Height);
Graphics g = monitor.CreateGraphics();
g.TranslateTransform(halfX, halfY);
g.ScaleTransform(scaleX, scaleY);
g.Clear(Color.Black);
g.ResetClip();
float lastY = (float)Math.Sin(0);
float y = lastY;
Pen p = new Pen(Color.White, 0.01F);
float stepX = 1F / scaleX;
for (float x = 0; x < 10; x += stepX) {
g.CopyFromScreen(monitor.PointToScreen(monitorTopLeft), MonitorTopLeftMinus1, size, CopyPixelOperation.SourceCopy);
y = (float)Math.Sin(x);
g.DrawLine(p, -stepX, lastY, 0, y);
lastY = y;
}
}
Some additional info that may be helpful:
The origin in a picture box starts
out at the top left corner.
TranslateTransform allows you to
translate (i.e. move) the origin.
In the example, I translate it by
half the picture box's width and
half its height.
ScaleTransform changes the magnification of the picturebox - note that it even magnifies the width of the pen used to draw on the picturebox - this is why the pen's width is set to 0.01.
CopyFromScreen performs a bitblt. Its source point is relative to the screen, the destination is relative to the picturebox and the size of the rectangle to move disregards any transforms (like the scale and translation transforms we added).
Notice that the X coordinates in the DrawLine method are -stepx and 0. All drawing basically occurs right on the y axis (i.e. x = 0) and then CopyFromScreen moves the drawn portion to the left so that it "streams" off to the left.
Unless you are doing this as a learning experience, you may want to consider looking at the free Microsoft Chart Controls for .NET available here.
http://www.microsoft.com/downloads/details.aspx?FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c&displaylang=en#QuickInfoContainer
That being said, I would offer the following guidelines if you want to roll your own.
Create a user control to encapsulate the plot rendering rather than render directly on the form.
In your control, expose properties to get/set the data you wish to render and add any other properties you want to control the rendering (scaling, panning, colors, etc.)
In you control, either override the OnPaint method or create an event handler for the Paint event. These methods will have a PaintEventArgs object passed to them, which contains a Graphics object as a property. The methods of the Graphics object are used to render points, lines, etc onto the control when it needs to be painted. Most of the drawing operations require either a pen (outlines / lines) or a brush (filled areas). You can use stock objects for these operations (e.g. Pens.Black or Brushes.Red) or you can create your own (see documentation). If you create you own objects, make sure you dispose of them after using them (e.g. using the "using" statement or by calling Dispose).
There are a couple good books on GDI+. I suggest picking one up if you are going in deep.