How to show numbers in unity

Questions & Answers
1

Hi,

I need to show winning amount on the screen. These value can be of any digit like 5,15,100 (any digit). Please tell me how to show these numbers on screen. I have images for the number 0 to 9. But I I don’t know how to do this. Please help. I am new to unity. Its Urgent.

3

A custom font would be exactly what you need:

  • Just create a custom font in Unity by selecting create–>custom font in your project view.
  • You should put all your number images into one texture in a grid pattern. For numbers it’s best to use just one line.
  • Set the font tiling (if you have all characters in one line y=1 x=10)
  • Your number images need to be in ascii code order: “0 1 2 3 4 5 6 7 8 9”
  • The ascii code for “0” is 48 so set your Ascii start offset to 48.
  • Create a material with your texture and assign it to the fonts default material variable.
  • Finally you can adjust the default kerning or add per character kerning to adjust the space of individual characters.

Keep in mind when you use this font you can only display strings which contains the numbers from 0 to 9. If you try to use any other character it will display garbage.

This font can be used in any guistyle that displays text. It’s probably the best to create a custom GUISkin and create a custom style for your font. Use the skin by assigning it to GUI.skin in OnGUI and just use a GUI.Label with your custom style to display the number.

//C#
public GUISkin mySkin; // assign in the inspector
public int myNumber = 230;

void OnGUI()
{
   GUI.skin = mySkin;
   GUILayout.Label(""+myNumber, "myCustomStyleName");
}

edit
This is from a 2 week android project which has never been bublished. We used this font texture (created by our pixel artist ;)). It’s a transparent png so the numbers don’t have a background, it just looks white here but it isn’t :wink:

In the top inspector you see the custom font itself. We used additional characters for the colon(:), the “x”(:wink: and the infinity sign(<). The characters i’ve wrote in brackets are the characters you have to use to display the particular char (See ascii characters).

The bottom inspector shows a GUIText component which directly uses the font. As material shader we used a transparent cutout shader.

We just had to adjust the kerning for the special characters, all numbers have the default kerning of 0.5 in our case.

Custom Font

second edit
I’ve just created a custom font by using a texture i’ve found somewhere on the net. It’s just roughly aligned and has some artefacts at the edges, but it should explain how it works :wink: The image source might even be copyrighted so you should use your own.

Here’s the package.

2

This is Not an ideal method , but it should get you going. (personally I would create one material with all the numbers on it , then swap the UV to display the correct number).

First create the textures (images/pictures) 0 - 9.

Then make 10 materials , and apply each picture to a material.

create a cube , then create a script , and attach the script to the cube.

Copy and paste the below script in your cube script.

in the cube’s inspector, drag and drop each material to the correct place in the inspector at Mat 0, Mat 1, etc

Hit play =]

every 1.5 seconds , the number on the cube should change.

here is what’s happening :

each material is stored in a variable : public var mat0 : Material; etc

then an array of these materials is made : materialsArr = [mat0, mat1, mat2, mat3, mat4, mat5, mat6, mat7, mat8, mat9];

the material is being changed by this command : renderer.material = materialsArr[currentMaterial];

play around with putting different materials into variables , then change the material in the script with :

renderer.material = materialVariable ;

oh , here’s the script :

public var mat0 : Material;
public var mat1 : Material;
public var mat2 : Material;
public var mat3 : Material;
public var mat4 : Material;
public var mat5 : Material;
public var mat6 : Material;
public var mat7 : Material;
public var mat8 : Material;
public var mat9 : Material;

public var materialsArr : Material[];

public var currentMaterial : int = 0;

function Start() 
{
	materialsArr = [mat0, mat1, mat2, mat3, mat4, mat5, mat6, mat7, mat8, mat9];
	currentMaterial = 0;
	renderer.material = materialsArr[currentMaterial];
	InvokeRepeating("ChangeMaterial", 1.5, 1.5);
}

function ChangeMaterial() 
{
	currentMaterial++;
	if (currentMaterial == 10) {currentMaterial = 0;}
	renderer.material = materialsArr[currentMaterial];
}
4

hi Bunny83 .
i did all your tutorial levels and it worked good on guiText and 3d Text but when i try to use it in OnGUI function it show nothings . can you help me ? thank you .