2d Example for Xen

Sep 23, 2010 at 7:33 PM

Hello, is there any example to show 2d graphics with Xen? Something like drawing HUD or crosshair while 3d still running.

I know how to do that in XNA (using sprite batch), but how do you do it in Xen? I really don't know where to begin.

Thank you.

Sep 24, 2010 at 3:34 AM

Look at tutorial 7 and 8, or if you want to use a shader to render your sprite, tutorial 9.

You're looking for TexturedElement (or ShaderElement).

Also, look at the interface for the TexturedElement.  You've got a Position property to, uh, position your sprite.  You can set that once in the Initialise method or update it per frame to make it move.  I've built a bunch of game engine stuff on top of Xen so my sprite animations are now just declarative tweaks, but I don't think there's any restriction when you set Position on an Element, so you could update in Draw or Update.  Update would give you the ability to set the position at a rate different from your frame rate.

Also look at HorizontalAlignment and VerticalAlignment for more on positioning, and as a hint, there's a flag called "Normalized" that's important.  Normalized positions are between 0 and 1 and are interpreted as a fraction of the screen.  Unnormalized positions are measured in pixels.

The best thing to do is go through each of the tutorials.  The early ones might not look like they're doing much, but they introduce the basics, they''re excellently documented to explain what's going on, and they build on each other so at the end you've got all the tools you need to produce the fantastic effects in the later tutorials.

Post again if you're still struggling after playing with tutorial 7 or 8 a bit.

Sep 26, 2010 at 12:33 PM


Sorry about my slow reply, I've been on holiday for a while :-)

Thanks for the reply Grabled, I appreciate it :-)
All the 2D code is located in Xen.Ex.Graphics2D. These classes are setup for exactly this type of situation, where you want to precisely align a 2D element onto the screen. So in the case of the crosshair, just create a TextureElement, set it's AlphaBlendState, and then set the vertical/horizontal alignment to centre. Call Draw() after everything else (or add it to the screen after everything else) and all going well it should draw correctly.

The only trick is that the position coordinates can be either 'normalised' or not. When normalised, the position/size values are in the range [0,1] (so 0 is left, 1 is right of the screen). Otherwise it's measured exact pixel positions. Also note the Position is an offset from the alignment - so if you set the vertical/horizontal alignment to centre, and set the position to 50,50, then it'll be 50,50 pixels offset from the centre of the screen.