C# - Getting started with graphic functions

[combatking0]

I have completed my first C# program - an updated version of Zero Encrypter, which encompasses all of my C# skills to date.

Since then, I have been researching the graphical functions of C#, but I cannot even figure out how to make it draw a line, for example:

Yabasic - line(x1,y1, x2,y2)
ActionScript - moveTo(x1,y1); lineTo(x2,y2);

There also seem to be many implementations of OpenGL for C# - if C# does not support graphical functions natively, which implementation of OpenGL would you suggest is best to use in terms of portability? So far, I have found OpenTK and Tao API. Are there any standard ones?

Or should I switch to C++ until C# is officially supported by the OpenGL group?

[Raizor]

@CK

There's lots of built in functionality for drawing lines and all sorts of other shapes in C#. Have a look at the Graphics class. which provides lots of methods for such things.

Each control in C# has a CreateGraphics() methods that will return a Graphics object (representing the surface of the control) that you can then draw onto. For playing around, I suggest creating a simple form, chucking a Canvas or PictureBox control on it and then calling CreateGraphics() on the Canvas control and try drawing some stuff.

Be aware that the controls will automatically repainted (redrawn) when they're invalidated (by moving the window off-screen and then on-screen for example, which fires the repainting of the control). If you've done some custom drawing on the surface, this will get wiped when the control is redrawn. Have a look at the Paint event for some info on overriding this behaviour or drawing your own stuff on top of the control each time it's repainted. That link also shows a basic example at the bottom which will probably prove useful to you. Once you've got the hang of this, you can draw text and images too. You can also do pixel manipulation and other stuff, but I'd leave that until you've got your head round this stuff first.

Hope this helps.

[Raizor]

Here's a tutorial I found that looks quite handy.

[combatking0]

It's so obvious now - thanks for pointing me in the right direction, Raizor. K++

(edit)
I've got it working - it's only a green circle, but its graphics. Time for something more complex

[Raizor]

It's so obvious now - thanks for pointing me in the right direction, Raizor. K++

(edit)
I've got it working - it's only a green circle, but its graphics. Time for something more complex

Good news, you're welcome. Everything seems obvious in hindsight though. There's a ton of different namespaces and assemblies in .Net, so tracking things down can be a little tricky at first. Feel free to hit me up whenever you need and I'll do my best to assist with this stuff.

On the subject of OpenGL in C#, I still thoroughly recommend the OpenTK stuff. If you want to play with DirectX, then have a look at SlimDX. It's written by lx/Frequency and looks very nice. I've not used it myself though.

[efecto]

actually alx/Frequency is now developing sharpDX on his own. I'm using it for my c# directx stuff. It works really good imho.

[Raizor]

Oops, I meant SharpDX, not SlimDX. I understand they're pretty similar though.

[combatking0]

I'll play with the built-in graphical functions for the time being, and then experiment with OpenTK and SharpDX.

Excellent advice. Thanks again

[combatking0]

For anyone else who has the same question, here is my example:

Code: [Select]

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;

namespace GFX
{
public partial class MainForm : Form
{
// Initialise objects and variables
System.Drawing.Graphics GFX;
int dispX = 0, dispY = 0;
double angle = 0;
public MainForm()
{
InitializeComponent();
// Set up timer for a framerate of 20fps
Timer timer1 = new Timer();
timer1.Interval = 50;
timer1.Tick += new EventHandler(timer1_Tick);
timer1.Start();
// Create a graphic canvas
GFX = this.CreateGraphics();
}

// Draw stuff when the timer interval has elapsed
private void timer1_Tick(object sender, EventArgs e){
double x, y;
// Clear the canvas
GFX.Clear(Color.Black);
// Rotate an angle, reset it if it goes above PI
angle += 0.01;
if(angle > Math.PI){
angle -= Math.PI * 2;
}
// Translate the angle into X/Y coordinates
x = 200 * Math.Sin(angle);
y = 200 * Math.Cos(angle);
// Convert the coordinates into integers
dispX = Convert.ToInt16(x);
dispY = Convert.ToInt16(y);
Draw a red circle at the coordinates
GFX.FillEllipse(Brushes.Red, new Rectangle(dispX + 304, dispY + 240, 32, 32));
}
}
}

Hopefully it's a simple enough example of movement.

[Hotshot]

So easy to do in C# when come making Graphics

[combatking0]

My previous sample suffered from single-buffer induced flickering. This example uses the Graphics object to draw onto a hidden Bitmap, which is then displayed in a picturebox (called "img_opt" in this example):

Code: [Select]

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;

namespace GFX
{
/// <summary>
/// Description of MainForm.
/// </summary>
public partial class MainForm : Form
{
int dispX = 0, dispY = 0;
double angle = 0;
//TextureBrush myBrush = new TextureBrush(new Bitmap(@"C:\p\cSharpProjects\GFX\icon.gif"));
HatchBrush myBrush = new HatchBrush(HatchStyle.DiagonalBrick, Color.FromArgb(255,255,127,0), Color.FromArgb(255,200,200,0));
Bitmap buffer = new Bitmap(640, 512);
Graphics bfr;

public MainForm()
{
//
// The InitializeComponent() call is required for Windows Forms designer support.
//
InitializeComponent();

//
// TODO: Add constructor code after the InitializeComponent() call.
//
Timer timer1 = new Timer();
timer1.Interval = 20;
timer1.Tick += new EventHandler(timer1_Tick);
timer1.Start();
bfr = Graphics.FromImage(buffer);
bfr.TranslateTransform(320, 256);
}

private void timer1_Tick(object sender, EventArgs e){
//Random rndm = new Random();
//byte[] bytes = new byte[4];
//rndm.NextBytes(bytes);
double x, y;
angle += 0.01;
if(angle > Math.PI){
angle -= Math.PI * 2;
}
x = 200 * Math.Sin(angle);
y = 200 * Math.Cos(angle);
dispX = Convert.ToInt16(x);
dispY = Convert.ToInt16(y);

bfr.Clear(Color.FromArgb(255,63,127,255));
Pen blackPen = new Pen(Color.Black, 3);
Point point1 = new Point(-320, -256);
Point point2 = new Point(320, 256);
bfr.DrawLine(blackPen, point1, point2);
point1 = new Point(320, -256);
point2 = new Point(-320, 256);
bfr.DrawLine(blackPen, point1, point2);
bfr.FillEllipse(myBrush, new Rectangle(dispX-32, dispY-32, 64, 64));
this.img_opt.Image = buffer;
}
}
}

The flickering is gone, but I imagine this uses more system resources than its C++ equivalent of simply drawing the pre-rendered bitmap into the window.

I found that the built-in double-buffering settings didn't get rid of the flickering, but this works.

Hopefully C# beginners will be able to use this as the basis for their first graphics functions if they are having difficulties.

[Hotshot]

Nice to see that you put picture on the screen.

You will making own Colisions in no time.....doing C++ would be nightmare just putting image on the screen(unless if you were using SDL or Allegro for C++) and then do manual Collisions!

[combatking0]

I imagine collisions would be tricky in C# - with Flash8, you work with separate graphical objects and check for overlaps.

With C#, I'm working with 1 graphical object. I could create multiple images, and move them round dynamically (in theory, I'll have to check), but there could still be no way of checking if the images have overlapped using the built-in functions.

This leaves us with checking the sizes of the two objects being collided, and how close they are in code. It's one of the things I must learn if I am going to improve as a coder.

[Raizor]

I imagine collisions would be tricky in C# - with Flash8, you work with separate graphical objects and check for overlaps.

With C#, I'm working with 1 graphical object. I could create multiple images, and move them round dynamically (in theory, I'll have to check), but there could still be no way of checking if the images have overlapped using the built-in functions.

This leaves us with checking the sizes of the two objects being collided, and how close they are in code. It's one of the things I must learn if I am going to improve as a coder.

One way to do this is have some virtual sprites, each with a rectangle representing its bounds. You draw your virtual sprite image onto your canvas at the sprite position and then use the C# Rectangle class to determine if the sprites bounding rectangles intersect each other. You could move pictureboxes around to represent the sprites, but handling the drawing yourself will be faster.

[combatking0]

Thanks Raizor - there's always something new to discover with C#.

[Raizor]

You're welcome CombatKing. A little off-topic maybe, but this has some handy links that might interest you. I totally forgot to mention XNA before, it's a nice way of getting at DirectX via C# and from what I've seen of it, very easy to get into.

When I first started playing around with synth stuff, I came across this tutorial for writing a basic synth in C# using XNA. It's worth a look at some point if you ever get the synth bug

[Kirl]

I imagine collisions would be tricky in C# - with Flash8, you work with separate graphical objects and check for overlaps.

With C#, I'm working with 1 graphical object. I could create multiple images, and move them round dynamically (in theory, I'll have to check), but there could still be no way of checking if the images have overlapped using the built-in functions.

This leaves us with checking the sizes of the two objects being collided, and how close they are in code. It's one of the things I must learn if I am going to improve as a coder.

I rarely use the hittest functions anymore after I discovered bitmaps for the image processing challenge. Checking a pixel color (to discern between background and walls/objects) is more acurate and faster too!

I'm betting C# has some sort of functions for checking a pixel color too?

[combatking0]

bitmapName.GetPixel(int X, int Y); should do the job - checking the pixel colour for collision detection sounds like a good idea.

I'm not sure how it works, so I will research it.

[Kirl]

Usually your interested in checking for a circle or square collision, so I calculate the offset of the points relative the the object origin once at the start of the program. Then you can loop through the collision points with a pixelcheck after moving the object. If the pixel color != background color you know that point is colliding with something.

For a ball/circle you can even pre-calculate the bounce angle for every point as well to save even more cpu power. Or you can use multiple points to calc the normal of the surface at collision; If you calc the angle of the outer most points that collide and then get the angle perpendicular to that one in the direction of the ball, you got the surface normal which you can use as a bounce angle.

In Flash this is a huge optimisation compared to hittest, you can do lots of collisions more acurately and much faster. Great!

[combatking0]

K++ for the explanation, Kirl.

I have attached my first attempt at 3D graphics in C# - it's a port of the same code I used in the Quaternion tutorial, so it's probably more CPU intensive than the equivalent OpenTK / SharpDX equivalent.

Now to switch to one of these API's.