Hex Screen
Intro:
Hello, it’s been more than three months since my last post, it’s also been more than three months since I last opened Visual Studio :(. A few days ago I decided that I should write something with XNA, that’s when I decided to write Hex Screen :D.
Hex Screen?
Hex screen is a 3D screen made up from hexagons, the cool thing about this screen is that hexagons can be animated to give nice effects, hexagons can be rotated, moved and scaled.
A screen made up of 42*20 Hexagons
Another screenshot 😀 :
Scattering Effect (Better seen in a video)
Although I liked the hexagons but I added two more models, one of them is the panel:
Scaling effect while using panels instead of hexagons
I bet you’re wondering about the uses of such a thing :), I guess I’ll be using it as a 3D game menu or as an animated background for a game menu, I might even play video on it. It would be much cooler than an ordinary 2D menu :D.
Here’s a short video (2:13) I uploaded to Youtube, it shows the capabilities of Hex Screen, it’s really worth watching since it’s easier to demonstrate with a video that than using words.
HexScreen Controls:
Screen controls:
- Space : Switch to next texture, a line will scan the screen, everything above this line will render the new texture.
- R : Rotate cells in place.
- E : Scattering effect.
- V: Toggle wave effect.
- P : Toggle screen rotation, screen rotation is related to mouse position.
- I : Toggle cells scaling effect, cells are scaled to a position specific amount.
- Backspace : Next cell model.
Camera controls:
- W\S : Move forward\backward.
- A\D : Strafe left\right.
- LShift\LCtrl : Levitate up\down.
- Move mouse while holding right mouse button to free look
Downloads:
HexScreenLab Source Code (216 KB) – Visual Studio 2010 + XNA4.0
The source code is commented, I hope that helps anyone interested in the code.
HexScreenLab Executable (621 KB) – Visual Studio 2010 + XNA4.0
(XNA4 Redistributable is required if you don’t have XNA4 Game Studio Installed.)
This demo contains HexScreenLib.dll
As always :D, do whatever you want to do with the code just don’t claim that you wrote it 😀
Please don’t hesitate to give your opinions :D.
What do you think?
Ghoscher's Blog 
Great post, this is almost exactly what I wanted to do to learn XNA. I have a question (several actually), but first off, how did you make your models? What tools did you use? Perhaps you could go over how to create a model in some tool and how to work with texture coordinates etc.? I would really like to know how you defined the texture coordinates for the hex models
Okay :), I’ll give you more details here.
The models here are really simple ones, a hexagon, a cylinder and a panel, very easy to make in any modeling tool like 3DS Max, or Blender.
These models do NOT contain texture coordinates!, Texture coordinates are calculated in the vertex shader and passed to the pixel shader, having the texture coordinates being hard-coded isn’t gonna work in such an application, especially when the cells count isn’t fixed.
If you’ve ever tried terrain rendering you will find that calculating the texture coordinates here is similar to calculating it for the terrain.
The top left corner of the hex screen must have the texture coordinates (0,0) and the bottom right corner must have the texture coordinates of (1,1), so if you know the world position of the corners you can calculate the texture coordinates of any vertex inside the screen, it just like mapping the ranges ([minX, maxX],[minY, maxY]) to the ranges ([0,1], [0,1]).
The code is commented well I guess,
The file HexScreenLabContent\HexScreen\Effect.fx contains the shaders code.
You might want to use a pen and a paper to find out how to do the calculations yourself, since usually it’s not that easy to examine other’s code :).
Thanks so much for the detailed reply, after I posted that question I knuckled down and went through heaps of tutorials and found out how you did things. I think its very clever! And the theory is actually quite simple. I suppose I got a little lost because your app/game has a fair few features and the simple details get lost in all the calculations for the waves/effects/etc but I can see know where it all comes from.
My next step is to run through your ray picking samples and get mouse hover states/animations working.
Your transition class looks very useful, is this something you use a lot in your projects? Have you every had to deal with animations that were not linear, such as cubic movement?
I told you it was simple :), that’s why I recommended using a pen & a paper to find the calculations yourself instead of being distracted by other stuff in the code.
About picking, you could run a collision test between the mouse ray and a rectangle (in 3D space) representing the screen, then use the intersection coordinates to find out which cell was picked, this way you don’t need to test for collision with each cell.
The transition classes are just wrappers to handle timing, just to avoid having multiple if\else statements all in the main update method, I only used them for this project.
About the cubic movements, I don’t remember messing with them 🙂