Monday, June 29, 2015

Tutorial: Crosshairs

The cross hairs are actually one of the more simpler scripts. In fact its only 29 lines.

First thing we need some cross hairs, unfortunately the assets store doesn't have any free ones. So, google cross hairs, try and fine one that is in the .png format. This is because the .png format supports  transparency. This is important, because we want to be able to see through the cross hairs and not have surrounding colors take up screen space. You can usually tell if its transparent in the google search because if you click the image it will show a checkered white and grey background, secondly when you save the image to the desktop, you should just see the image, and no other background. If you do need to make your image transparent i would suggest the online image editor: http://www166.lunapic.com/editor/ 

Now import your image(ill leave that to you). Click the image and look in the Inspector tab. Under Texture Type select Texture. 






Lets get to coding. We will need a public Texture2D, because the cross-hair image is 2D.
Now when we have your game playing we don't want to have our mouse cursor present, its a distraction. So the first thing we have to do is make it invisible: Cursor.visible = false; 
Now not only do we want it invisible, but we want it in the game. Consider playing it in windowed mode rather than full screen, you don't want it leaving the game where you could accidentally click something. Same applies when you are testing your game in Unity you dont want it to exit the game screen and exit the editor with out saving. So go ahead type: Screen.lockCursor = true;

Now, we wont use the Update() because we have noting to update. All we need is the cross-hairs to be on the screen and unmovable. We will need to make a function that is intrinsic to Unity: OnGUI(), it returns no primitive variable so makes sure its void OnGUI()
<*NOTE: Whenever you are trying to make cross hairs or a HUD you will almost always use the OnGUI() function.>
<*NOTE: its OnGUI() not OnGui()>

Before i give the last three lines of code i want to explain how it works.

float xMin = (Screen.width / 2) - (currentTex.width / 2);
float yMin = (Screen.height / 2) - (currentTex.height / 2);/

GUI.DrawTexture(new Rect(xMin, yMin, currentTex.width, currentTex.height), currentTex);

Picture the screen as a Cartesian coordinate plane with the Origin(0,0) at the center of the screen. float xMin and float yMin are the x and y coordinates. What you are doing is taking the size of the screen dividing it in half, and doing the same to your cross hairs. Then subtracting your new cross hair dimensions from the new screen dimensions.
Next, you call the GUI.DrawTexture(new Rect()); This is an intrinsic function part of the Unity code. You pass your X&Y coordinates, the dimensions of your cross hairs texture(NTOE: these are the original dimensions) and the actual texture file, and thats it. The function will do the rest.

EDIT: Forgot to add, add the script to your main camera.
EDIT-2: Drive link:

Crosshairs.cs

No comments:

Post a Comment