New UI Compass?

I was thinking about this a few days ago and have decided that this is a must-have for many games.

If I can work out how to do this efficiently and quickly, I will be releasing a small pack of functional UI-driven compasses to the Asset Store, for FREE.

Anyone who can help me achieve this will be given credit for their help in the Documentation PDF file of the pack.

List of Requirements

• Accurate, Realistic Compass
• Changeable Directionals (Choose whether the X+ or X-, Z+ or Z- will be North)
• Masking for areas over 140 degrees

What we are looking for primarily is a solution that would allow us to quickly create compasses that are visibly and functionally similar to those in games such as Skyrim and Fallout.

Images

 

bump

 

I gave you some pointers in your last thread about this, but you never responded. Can you be a bit more specific as to what kind of help you're looking for?

Also, no need to bump so soon already. =)

 

I guess its just slider thing by sliding the value between 0-1 , where 0 will be 0 degree and 1 will be 360

 

Really I need help designing the entire thing, I have no idea where to start with this thing.

 

Easiest way is possibly to create an image with N NE S SE etc...., put two of these into a horizontal layout group, add content size fitters to both images as well as the horizonal layout group and then add a mask & scroll rect on top of it. This way, you should be able to scroll through it with values 0<x<1, x=angle/360. Shouldn't take more than 5-10mins if you have the graphics.

 

Sorry it took so long to do but I have been busy, I now have the graphics for the compass.

 

Anybody know where to go from here?

 

I did exactly this a while back. Have a look at this, this should push you in the right direction.
I know this is OnGUI, but it is relatively simple.

Code (JavaScript):

1. var compTex: Texture2D;
2. var camAngle: float;
3. var texWidth: float;
4. var texHeight: float;
5.  
6. function OnGUI() {
7.     //This is the magic
8.     camAngle = Camera.main.transform.eulerAngles.y;
9.    
10.     if (camAngle > 180) {
11.         camAngle -= 360;
12.     }
13.    
14.    
15.     var compX = Screen.width / 2 - camAngle / 360 * texWidth;
16.    
17.     //This just needs to be pushed to new Unity UI.
18.    
19.     GUI.DrawTexture(new Rect(compX - texWidth, 0, texWidth, texHeight), compTex);
20.     GUI.DrawTexture(new Rect(compX, 0, texWidth, texHeight), compTex);
21. }