Xna game studio draw line

In the game, I need to be able to make circles of arbitrary, random sizes. I looked into doing this with textures, starting with a circle bitmap and scaling it up or down, but we all know what happens when you start scaling bitmaps. Although it was a worthy experiment, it came out about as crappy as I expected it would. What I really needed was a way to dynamically draw a primitive circle. In Objective-C, I had to use some Core Graphics stuff, which, while a bit verbose like all Objective-C , was eventually pretty straightforward.

XNA, on the other hand, was really designed more for drawing textures, i. Once you get into drawing primitives like lines and circles, you need to code a lot closer to the metal. It took digging through a bunch of samples and forum and blog posts, but I think I finally distilled the core actions necessary to draw primitives. On a side note, I think one of the reasons that people at least seem to like my tutorials, books, etc. I personally find it difficult to find a lot of tutorials on the web that do that.

For example, the primitive drawing sample code I learned most of this from gives you a class with hundreds of lines of code wrapping all the primitive drawing functions, and tells you to use this class. The first and most important concept you need to grasp is that all the primitive drawing stuff is really working with DirectX 3D drawing code. In other words, if I draw a line from 0, 0, 0, to , , 0 in the 3D space, it will draw that line from 0, 0 to , on my screen.

Scared yet? Yeah, so was I, until I realized that there are shortcuts for all this stuff. Of course, if you want to understand it, by all means, dig in and learn more. But most of that is really only important when you start doing more complex 3D rendering.

For drawing primitives in 2D, you really just need to know what to tell the system to make it work. The basicEffect is where we set up our drawing properties — the viewport, how things are rendered, the shaders, etc.

The vertices is an array of points. Now, jump down to the Initialize method. GraphicsDevice ; basicEffect. CreateOrthographicOffCenter 0, graphics.

Black; vertices[1]. First we create a new BasicEffect, passing in the graphics device. We tell it that we want to use colored vertices, so each point can have its own color assigned. Then we create our projection. This is what I was talking about making the 3D world look like a simple 2D plane. The Matrix. CreateOrthographicOffCenter function takes care of this for us. We pass it in the left, right, top and bottom coordinates of the area we want to look at, and a near and far plane.

For this we use the coords of our physical screen, and 0 and 1 for the planes. That part is done. See, not so scary. Then we create two colored vertices. One is at , on x, y and the other at , Both have a z index of 0 and a color of black. Now onto the Draw method. Despite how scary I may have made it sound, you only need to write two lines of code to draw a line between these two points. Clear Color. CornflowerBlue ;. Apply ; graphics.

DrawUserPrimitives PrimitiveType. LineList, vertices, 0, 1 ;. The first line after clearing the screen tells the basicEffect to apply whatever techniques it already has set up for drawing.

This sets up the vertex and pixel shaders, etc. Only vaguely. So you better do it. The next line is where the drawing happens.

We pass this in the type of primitive we are are drawing. This can be a line list, line strip, triangle strip, or triangle fan. A line list is just that, a list of lines. The data in the vertices array is interpreted as pairs of points.

It will draw a line between each pair. Then we pass the array of vertices itself, where to start drawing 0 means the first element in the array , and how many primitives to draw. Here we say 1, since we are drawing 1 line. Anyway, if you have that all right, you should be able to run this in the simulator and see a line on the screen. An interesting point is that because each vertex has a color, you can get an automatic line gradient just by changing the color of one of the vertices.

Try it:. Red; vertices[2]. Black; vertices[3]. Again, this is the tricky part. Remember that a line list takes the vertex array as a list of pairs of elements. So it looks at the first two vertices and draws a line between them. Then it takes the next two and draws a line between them. If we want to draw a continuous line between all the points, we should use a LineStrip. This takes the first vertex as the starting point, much like a moveTo in AS3, and each additional vertex will function as a lineTo.

In this case, your number of primitives will be one less than the total number of points. There is no built in circle drawing function, so we have to roll our own. Luckily circles roll pretty well. There you go, a perfect circle.

Color ;. The simplest best way, I think, is to get the image of just a white pixel then stretch that pixel in a rectangle to look like a line. I wanted to draw rays so that I could debug rays created by explosions and where they intersect objects. This will draw a single pixel thin line between two points. This is what I did:. Class to store some simple ray data. The XNA default ray class could work, but it doesn't store the length of the ray to intersection.

Create a BasicEffect and pass it a "Matrix. It's pretty simple It possibly looks way more complicated than it is and it'd be easy to put it into a separate class that you never have to think about again. It also lets you draw a whole lot of lines at once. I encountered this problem my self and decided to make a class called LineBatch. LineBatch will draw lines without needing a spriteBatch or dots. The class is below. Here is a simple way that I use to make lines by specifying a start coordinate, an end coordinate, width, and color of them:.

NOTE: you must add a file named "dot" to the content directory the line will be made out of these. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams?

Collectives on Stack Overflow. Learn more. How do I draw lines using XNA? Ask Question. Asked 13 years, 2 months ago. Active 1 year, 8 months ago. Viewed 63k times. Improve this question.

Add a comment. Active Oldest Votes. Improve this answer. FlySwat FlySwat k 71 71 gold badges silver badges bronze badges. Jonathan Holland, Thanks for the link and explanation. The link is broken — daglundberg.

Following NoHayProblema's answer I cannot comment yet. Draw SimpleTexture, new Rectangle 20, 50, , 1 , Color. Blue ; Take into account that the way you write the data into pixel must be consistent with the texture's SurfaceFormat. Draw like this: this. Draw SimpleTexture, new Rectangle 0, 0, , 1 , null, Color. Blue, - float Math. None, 1f ;. Elideb Elideb Simpler than editing the pixel data as a hex value is using Color as the texture data. Black; vertices[1].

Red; vertices[2]. Black; vertices[3]. Red; GraphicsDevice. LineList, vertices, 0, 2 ; have fun and vote up if this helped you. ColacX ColacX 3, 5 5 gold badges 30 30 silver badges 34 34 bronze badges. Well, you can do it in a very simple way without getting into the 3D horrible vector stuff. Color ; And then just draw a line using that texture: this. Draw SimpleTexture, new Rectangle , , , 1 , Color. Blue ; I hope this helps. No hay Problema No hay Problema 1 1 gold badge 9 9 silver badges 12 12 bronze badges.

Only works for horizontal and vertical lines, of course. OP wants to rotate them, and so this probably won't help him. TorHaugen spriteBatch. Draw supports drawing sprites at an angle — Zorgarath. Didn't show up until i added SimpleTexture. X, p1. Y, p2. X, p2. X, int p1. Draw pixel, rect, null, color, rotation, new Vector2. Zero, SpriteEffects. None, 0. ToDegrees float Math. Viviano Cantu Viviano Cantu 5 5 bronze badges. This class is very helpful for my debugging.

Luke Quinane Luke Quinane This is what I did: Class to store some simple ray data. Apply ; GraphicsDevice. Intersects solid. NuBc4k3 NuBc4k3 21 2 2 bronze badges. CreateTranslation -GraphicsDevice.

CreateOrthographic GraphicsDevice. Width, -GraphicsDevice. Height, , 10 ; effect. X, rectangle. Y , new Vector2 rectangle.