Archive

Archive for the ‘XNA’ Category

Fuchs Navi Wheel – A Creative way of steering a car in a game

01/03/2011 Leave a comment


Introduction:

One day while I was studying for an exam then an idea came to my mind!
Wouldn’t it be cooler to use the touchpad to steer a moving car (instead of the boring Left\Right keys)?

I’m not a big fan of racing games but I liked the idea…
To simulate rotating a real steering wheel the player should create circles on the touchpad, counter-clockwise (ccw) to steer left, clockwise (cw) to steer right.

FuchsNaviWheel

Steering left using the touchpad

Moving the finger in such a way should continuously steer left


Read more…

XNA FuchsGUI part V

16/02/2011 6 comments

___________________________________________________

1-Introduction to the GUI.
2-Hello control :D.
3-Hello form.
4-Exporting forms easily from Microsoft Visual Studio Designer to FuchsGUI :D.
5-The future of FuchsGUI & some notes.

___________________________________________________

This part of the tutorial is the last part of the series..

I don’t know how to organize this post since it’s not a tutorial 😉 so I’ll start with some notes on FuchsGUI.

FuchsGUIDemo

A post without an image is a dull post 🙂


Textures & Fonts:

As you saw each control takes a Texture2D parameter in the constructor, well… having many textures might have a bad impact on performance, because if you first draw a Button and then a TextBox the GPU will have to change textures.

A better solution is Read more…

XNA FuchsGUI Part IV

15/02/2011 4 comments

___________________________________________________

1-Introduction to the GUI.
2-Hello control :D.
3-Hello form.
4-Exporting forms easily from Microsoft Visual Studio Designer to FuchsGUI :D.
5-The future of FuchsGUI & some notes.

___________________________________________________

Okay, if you’ve been following the tutorials, you should have noticed how creating controls is somehow uncomfortable :(…
The first place where I used my gui was an artillery simulation project in XNA.
I had to make lots & lots of modifications to the forms of the simulation, If I wrote the code for every form manually I might have lost my mind and started screaming something like “Damn! this button should be 3 pixels lower”, “ops! this textbox should be wider :(“

But before getting deep inside the gui of the simulation an idea came to my mind :D.
Why troubling myself with writing 1** lines of code for a single form while I can generate the code from Microsoft Visual Studio??

I’ll have to admit it’s a little lame to use the Visual Studio designer but I found it better than wasting time programming a designer :).


The main idea of the code generator is:
-Running a pre-made Visual Studio project (windows forms application) with a reference to the dll  FuchsGUICodeGenerator ( Looooooooong name :D).
-Creating a new Windows.Forms.Form in the project.
-In the file Program.cs choose the form you created (more details later).
-Compile & run the project.
-A pre-made form will show and ask for generation options.
-You click a button and a complete class code is generated & copied to clipboard on demand :D.

We’ll recreate the calculator from Part III.

That ends the headlines :), let’s get to the details. Read more…

XNA FuchsGUI Part III

14/02/2011 6 comments

___________________________________________________

1-Introduction to the GUI.
2-Hello control :D.
3-Hello form.
4-Exporting forms easily from Microsoft Visual Studio Designer to FuchsGUI :D.
5-The future of FuchsGUI & some notes.

___________________________________________________

In part 2, I demonstrated how to create two types of FuchsGUI controls : Button & TextBox.

Well, most FuchsGUI controls have similar constructors, this lesson should be quite simple, what we will do is a simple calculator that adds\subtracts two numbers, the reason for this is to show you how to get values from TextBoxes & how to use Forms.

So create a new XNA 4.0 game , add a reference to FuchsGUI.dll (you might wanna go back and read step a in Part II)

Add the using directive first

using FuchsGUI;

Add these fields to Read more…

XNA FuchsGUI Part II

12/02/2011 4 comments

___________________________________________________

1-Introduction to the GUI.
2-Hello control 😀.
3-Hello form.
4-Exporting forms easily from Microsoft Visual Studio Designer to FuchsGUI :D.
5-The future of FuchsGUI & some notes.

___________________________________________________

Okay! let’s get our hands dirty :D.
In part I, I talked about my GUI in theory, what we will do now is:
a-Creating a new XNA4.0 game and preparing it to use FuchsGUI.
b-Adding two Buttons and one TextBox.
c-We want to achieve the following : when a button is clicked, the text in the TextBox will change to the name of the clicked button.

Three simple steps, but first you’ll need Read more…

Categories: FuchsGUI, Graphics, Programming, XNA

XNA FuchsGUI Part I

11/02/2011 21 comments

___________________________________________________

1-Introduction to the GUI.
2-Hello control :D.
3-Hello form.
4-Exporting forms easily from Microsoft Visual Studio Designer to FuchsGUI :D.
5-The future of FuchsGUI & some notes.

___________________________________________________

Disclaimer :

-Please before reading note that this gui is for PC only, with some changes it might become runnable at the XBOX360

-The tutorials are for the XNA4.0 version, it’s just a matter of default parameters ( which are not -AFAIK- permitted in .NET3 c# ) , if you’re still using XNA3.1 maybe it’s time to move on :).

-This post doesn’t contain the FuchsGUI dll, please wait for the next post, but I really recommend reading this post if you’re willing to use my gui :).



Introduction:

An important thing any game or simulation needs is a good, reliable & simple graphical user interface (GUI), of course you can use System.Windows.Forms to create a gui for your XNA game but to me I prefer a gui from within the game, XNA code only :D, with this you can place the gui controls anywhere in the game window (I don’t know if it’s possible with Windows forms).

-ALRIGHT get to the the point already!!!
The point is that I’ve recently programmed a simple yet powerful gui library for both XNA3.1 and XNA4.0, The project started with XNA3.1 then was completed in XNA4.0

Here’s a teaser screenshot where I used my gui for an artillery simulation I programmed with two of my colleagues 😀

GUIDemo

Please note that blurry text issue is now fixed, check the last part of the tutorial to download the fixed version

might not be that eye-catching cuz I created the textures in a hurry & using only mspaint



The beginning of the project started with Read more…

XNA Picking Tutorial Part III

16/12/2010 7 comments

Welcome to the third picking tutorial! 😀
1- Ray picking.
2- RTS style selection box (two approaches).
3- Projection and why you need it.

Introduction:

This tutorial is really short..It’s not actually about picking but somehow related to it, I wanted to write this in the same post as Part II but Part II was already long enough.. 🙂

Another use for Viewport.Project:

In part II we used Viewport.Project to get the positions of 3D objects on the 2D screen, well.. that was useful for picking…Another excellent use of Viewport.Project is displaying 2D elements over 3D objects such as units names in a game or the health bar for example…

Generals Contruction Dozer

Read more…

XNA Picking Tutorial Part II

09/12/2010 4 comments

Introduction:

Hello & welcome to the second picking tutorial!
1- Ray picking.
2- RTS style selection box (two approaches).
3- Projection and why you need it.

In part I, I talked about picking single objects, In many cases such as RTS games that’s not enough…

You’ll need to select multiple units together using some sort of a rectangle or selection box that you make by clicking and dragging with your mouse.

Two approaches I know:
1- Unprojecting your selection box and check for collisions in 3D world space.
2- Projecting your 3D objects and perform simple 2D rectangle collision detection.

First approach, Unprojecting a rectangle ( A little tricky ) :

If you unproject a point the result should be a ray ( Part I discussed this issue in some detail) , If you unproject a rectangle the result depends on your projection matrix, We’ll assume it’s a perspective projection matrix, so the result of unprojecting a rectangle is a frustum (BoundingFrustum in XNA), in most cases this BoundingFrustum is not a scaled version of the view frustum, it’s some sort of irregular frustum, images are better than words:

SelectionFrustum

Click on image to see full size

Now how do we get this frustum? Read more…

XNA Picking Tutorial Part I

25/11/2010 16 comments

Introduction:

In the following three or four articles I’m gonna discuss XNA picking related issues including:
1- Ray picking.
2- RTS style selection box (two approaches).
3- Projection and why you need it.

I’m not an XNA professional so I might make some mistakes, please if you think any thing is wrong tell me and I’ll be happy to respond 😀

What is picking?

Well.. in short, picking is something you’ll need if you want to know what 3D object the mouse cursor is over! in other words picking lets you “pick” a 3D object with your mouse, if you have ever played a 3D RTS (real time startegy) game like C&C Generals, selecting a unit with you mouse is called picking!

In a 2D game knowing what’s the mouse is over – in most cases – is simple, just check if the mouse is inside a rectangle or a circle for example, in a 3D world it’s a little trickier!.

In a previous post I visualized how picking 3D objects works in XNA. (no need to check the old post, every thing you want is here…)
Today I’m gonna explain how the operation works, the official picking sample is great, and much of my explanation is taken from there…
Picking will be explained step by step in addition to some other picking issues…

1-Ray Picking:

A ray goes from a specified point towards a specified direction ( it doesn’t have an ending point).
XNA provides a Ray struct with some good intersection detection methods, you can check ray intersection against bounding volumes (BoundingBox, BoundingSphere, BoundingFrustum) and Planes.
The main idea of picking is to create a ray that goes from a point in the near plane of the camera frustum towards another point in the far plane of the camera frustum, these two points are specified using the mouse screen coordinates (mouse x and y), once we have that ray we can check for intersections with 3D objects using there bounding spheres for example..

near, far points

Click on image to see full size

Whenever you draw a 3D object to your 2D screen it has to be projected using the matrices  world, view and projection, multiplying the 3D position of a vertex with these three matrices produces the 2D position of the vertex in the viewport. this operation is called projection, transforming from world coordinates to screen coordinates.

When picking we want to do the opposite : transform from screen coordinates (mouse position on the screen) to world coordinates, This operation Read more…

Space Defender game updated to XNA 4.0

23/11/2010 Leave a comment

It’s been a while since my last post.. Anyway, just wanted to note that my XNA game Space Defender has been updated to XNA4.0 🙂

It didn’t take much work to update, the code hasn’t changed much, Although I have some improvements in my mind but I don’t actually enjoy modifying old projects 😦

You can find the main game post here with the new links added…

Right now I’m working on some picking articles 😀

See ya 😀