Custom text UI

Question

I have this custom ASCII table that I want to use in a dialogue UI, for when characters are talking to each other. It's a .png image and each letter takes up 8x8 pixel spaces, so just set it as sprite (2D and UI) and put the sprite mode to multiple and split them all and set the Pixels Per Unit to 8. (its suppose to look like a retro UI for gameboy)

Now, is there any way I can set it all up so that each sprite is designated a letter so that I can put text in without having to create a tilemap of each dialogue that shows up? or will i have to painstakingly just make a tilemap of each dialogue. here is what im using: alt text

Answer 1

you can easy search a font that match with console type but, to make it complex, I took the challenge to automate the creation of each letter on the UI

to set up this you need to:

create a prefab with a raw Image component
create a object in the canvas with the following script and a GridLayoutGroup component attached
fill the field CustomTexture with the sprite texture that you show there
fill the field LetterPrefab with the prefab that you created

the script component, required GridLayoutGroup on the same object:

 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
 using UnityEngine.UI;
 
 [RequireComponent(GridLayoutGroup)]
 public class CustomText : MonoBehaviour {
 
     public string text;
     public Texture CustomImage;
     public RawImage LetterPrefab;
     // Use this for initialization
     void Start () {
         foreach (char letter in text) {
             CreateLetter (letter);
         }
     }
 
     RawImage letterInstance;
     void CreateLetter(char ch){
         letterInstance = Instantiate (LetterPrefab, transform);
         letterInstance.texture = CustomImage;
         SetLetter(letterInstance, ch);
         letterInstance.uvRect = _uvRect;
     }
 
     GameObject Letter;
     Rect _uvRect = new Rect(0f,0f,.06f,.07f);
     void SetLetter(RawImage Img , char a){
         switch (a) {
         case ' ':
             _uvRect = SetRect (_uvRect,0);
             break;
         case '!':
             _uvRect = SetRect (_uvRect,1);
             break;
         case '"':
             _uvRect = SetRect (_uvRect,2);
             break;
         case '#':
             _uvRect = SetRect (_uvRect,3);
             break;
         case '$':
             _uvRect = SetRect (_uvRect,4);
             break;
         case '%':
             _uvRect = SetRect (_uvRect,5);
             break;
         case '&':
             _uvRect = SetRect (_uvRect,6);
             break;
         case '\'':
             _uvRect = SetRect (_uvRect,7);
             break;
         case '(':
             _uvRect = SetRect (_uvRect,8);
             break;
         case ')':
             _uvRect = SetRect (_uvRect,9);
             break;
         case '*':
             _uvRect = SetRect (_uvRect,10);
             break;
         case '+':
             _uvRect = SetRect (_uvRect,11);
             break;
         case ',':
             _uvRect = SetRect (_uvRect,12);
             break;
         case '-':
             _uvRect = SetRect (_uvRect,13);
             break;
         case '.':
             _uvRect = SetRect (_uvRect,14);
             break;
         case '/':
             _uvRect = SetRect (_uvRect,15);
             break;
         case '0':
             _uvRect = SetRect (_uvRect,16);
             break;
         case '1':
             _uvRect = SetRect (_uvRect,17);
             break;
         case '2':
             _uvRect = SetRect (_uvRect,18);
             break;
         case '3':
             _uvRect = SetRect (_uvRect,19);
             break;
         case '4':
             _uvRect = SetRect (_uvRect,20);
             break;
         case '5':
             _uvRect = SetRect (_uvRect,21);
             break;
         case '6':
             _uvRect = SetRect (_uvRect,22);
             break;
         case '7':
             _uvRect = SetRect (_uvRect,23);
             break;
         case '8':
             _uvRect = SetRect (_uvRect,24);
             break;
         case '9':
             _uvRect = SetRect (_uvRect,25);
             break;
         case ':':
             _uvRect = SetRect (_uvRect,26);
             break;
         case ';':
             _uvRect = SetRect (_uvRect,27);
             break;
         case '<':
             _uvRect = SetRect (_uvRect,28);
             break;
         case '=':
             _uvRect = SetRect (_uvRect,29);
             break;
         case '>':
             _uvRect = SetRect (_uvRect,30);
             break;
         case '?':
             _uvRect = SetRect (_uvRect,31);
             break;
         case '@':
             _uvRect = SetRect (_uvRect,32);
             break;
         case 'A':
             _uvRect = SetRect (_uvRect,33);
             break;
         case 'B':
             _uvRect = SetRect (_uvRect,34);
             break;
         case 'C':
             _uvRect = SetRect (_uvRect,35);
             break;
         case 'D':
             _uvRect = SetRect (_uvRect,36);
             break;
         case 'E':
             _uvRect = SetRect (_uvRect,37);
             break;
         case 'F':
             _uvRect = SetRect (_uvRect,38);
             break;
         case 'G':
             _uvRect = SetRect (_uvRect,39);
             break;
         case 'H':
             _uvRect = SetRect (_uvRect,40);
             break;
         case 'I':
             _uvRect = SetRect (_uvRect,41);
             break;
         case 'J':
             _uvRect = SetRect (_uvRect,42);
             break;
         case 'K':
             _uvRect = SetRect (_uvRect,43);
             break;
         case 'L':
             _uvRect = SetRect (_uvRect,44);
             break;
         case 'M':
             _uvRect = SetRect (_uvRect,45);
             break;
         case 'N':
             _uvRect = SetRect (_uvRect,46);
             break;
         case 'O':
             _uvRect = SetRect (_uvRect,47);
             break;
         case 'P':
             _uvRect = SetRect (_uvRect,48);
             break;
         case 'Q':
             _uvRect = SetRect (_uvRect,49);
             break;
         case 'R':
             _uvRect = SetRect (_uvRect,50);
             break;
         case 'S':
             _uvRect = SetRect (_uvRect,51);
             break;
         case 'T':
             _uvRect = SetRect (_uvRect,52);
             break;
         case 'U':
             _uvRect = SetRect (_uvRect,53);
             break;
         case 'V':
             _uvRect = SetRect (_uvRect,54);
             break;
         case 'W':
             _uvRect = SetRect (_uvRect,55);
             break;
         case 'X':
             _uvRect = SetRect (_uvRect,56);
             break;
         case 'Y':
             _uvRect = SetRect (_uvRect,57);
             break;
         case 'Z':
             _uvRect = SetRect (_uvRect,58);
             break;
         case '[':
             _uvRect = SetRect (_uvRect,59);
             break;
         case '\\':
             _uvRect = SetRect (_uvRect,60);
             break;
         case ']':
             _uvRect = SetRect (_uvRect,61);
             break;
         case '^':
             _uvRect = SetRect (_uvRect,62);
             break;
         case '_':
             _uvRect = SetRect (_uvRect,63);
             break;
         case '`':
             _uvRect = SetRect (_uvRect,64);
             break;
         case 'a':
             _uvRect = SetRect (_uvRect,65);
             break;
         case 'b':
             _uvRect = SetRect (_uvRect,66);
             break;
         case 'c':
             _uvRect = SetRect (_uvRect,67);
             break;
         case 'd':
             _uvRect = SetRect (_uvRect,68);
             break;
         case 'e':
             _uvRect = SetRect (_uvRect,69);
             break;
         case 'f':
             _uvRect = SetRect (_uvRect,70);
             break;
         case 'g':
             _uvRect = SetRect (_uvRect,71);
             break;
         case 'h':
             _uvRect = SetRect (_uvRect,72);
             break;
         case 'i':
             _uvRect = SetRect (_uvRect,73);
             break;
         case 'j':
             _uvRect = SetRect (_uvRect,74);
             break;
         case 'k':
             _uvRect = SetRect (_uvRect,75);
             break;
         case 'l':
             _uvRect = SetRect (_uvRect,76);
             break;
         case 'm':
             _uvRect = SetRect (_uvRect,77);
             break;
         case 'n':
             _uvRect = SetRect (_uvRect,78);
             break;
         case 'o':
             _uvRect = SetRect (_uvRect,79);
             break;
         case 'p':
             _uvRect = SetRect (_uvRect,80);
             break;
         case 'q':
             _uvRect = SetRect (_uvRect,81);
             break;
         case 'r':
             _uvRect = SetRect (_uvRect,82);
             break;
         case 's':
             _uvRect = SetRect (_uvRect,83);
             break;
         case 't':
             _uvRect = SetRect (_uvRect,84);
             break;
         case 'u':
             _uvRect = SetRect (_uvRect,85);
             break;
         case 'v':
             _uvRect = SetRect (_uvRect,86);
             break;
         case 'w':
             _uvRect = SetRect (_uvRect,87);
             break;
         case 'x':
             _uvRect = SetRect (_uvRect,88);
             break;
         case 'y':
             _uvRect = SetRect (_uvRect,89);
             break;
         case 'z':
             _uvRect = SetRect (_uvRect,90);
             break;
         case '{':
             _uvRect = SetRect (_uvRect,91);
             break;
         case '|':
             _uvRect = SetRect (_uvRect,92);
             break;
         case '}':
             _uvRect = SetRect (_uvRect,93);
             break;
         case '~':
             _uvRect = SetRect (_uvRect,94);
             break;
             //continue adding characters if you want, I stopped on 6 row, 13 column
         default:
             _uvRect = SetRect (_uvRect, 0);
             break;
         }
     }
 
     Rect SetRect(Rect rect, int charNum){
         int x = charNum % 16;
         int y = charNum / 16;
         rect.x =  (x)/16f;
         rect.y =  (13 - y)/14f ;
         return rect;
     }
 }

if you have any questions just ask.

Custom text UI

1 Reply

Your answer

Follow this Question

Related Questions