# Guide: UI i Unity (text-element)

Ofta vill vi lägga till text, bilder och knappar som en del av en "user interface" (UI). Dessa element ligger framför varje spelet och kan vara saker som visar liv eller poäng, eller menyer med knappar och bilder.

I den här guiden ska vi lägga till en text på skärmen som visar antalet liv hos en spelare. Det innehåller flera steg:

1. Skapa ett text-GameObject
2. Positionera den på skärmen
3. Få tag på Text-komponenten i kod
4. Ändra själva texten utifrån spelarens liv.

### 1 - skapa ett text-GameObject

För att skapa en text-GameObject gör vi precis som för vilket annan typ av GameObject: högerklicka i scenen och gå till create. UI-object hittar vi under UI och för en text väljer vi TextMeshPro.


Nu skapas det ett GameObject för texten, och den hamnar automatiskt under en "Canvas". Canvasen är ett objekt som innehåller alla UI-element och gör att de hamnar på rätt ställe. UI-element har en x- och y-position som beskrivs i antal pixlar istället för Unity-enheter.

### 2 - positionera texten

Vi kan positionera texten med hjälp av `Rect Transform` som finns på alla UI-element. Här skriver vi in en Pos X och Pos Y samt storlek på textrutan. Vi kan också sätta från vilken punkt på skärmen vi ska utgå från genom att klicka på rutan "Anchor presets". Till exempel om vi vill sätta den i övre vänstra hörnet väljer vi "top left". Håller vi även inne alt hoppar element direkt dit. Annars får vi sätta Pos X och Pos Y till 0.



Vi kan kolla att den har hamnat rätt om vi växlar till game-tabben.

### 3 - jobba med text-komponenten

Text-objekten har en komponent som heter TextMeshPro som dels innehåller själva texten, dels massa inställningar för att ändra utseendet. Vi kan ändra de driekt i i inspectorn, men vi vill också kunna komma åt den via kod.


Vi kommer åt den i kod genom att använda `GetComponent` på text-objektet. Textkomponenten är av typ `TextMeshProUGUI` och vi kan spara den i variabel Till exempel kan vi skriva:

[SerializeField]
GameObject textGameObject;

TextMeshProUGUI textComponent;

void Start(){
    textComponent = textGameObject.GetComponent<TextMeshProUGUI>();
}

Nu har vi i skriptet tillgång till textkomponent och vi kan i kod ändra både text och inställningar via variabeln `textComponent`.

### 4 - ändra texten utifrån spelarens liv

Sista steget är att ändra texten utifrån någon logik i spelet. Exakta koden beror ju självklart på vad texten ska visa. Men ett vanligt exempel är att man vill visa hur många liv spelaren har.

Vi vill då sätta texten på `textComponent` till en text som innehåller spelarens liv. Texten är en vanlig string och vi kan skapa strängen utifrån en variabel med ett plustecken. Vi skapar strängen och sätter texten på `textComponent` i `Update`-metoden så att den ändras när antalet liv ändras.

Till exempel kan det se ut så här:

public class Player : MonoBehaviour
{
    int lives = 3;

    [SerializeField]
    GameObject textGameObject;

    TextMeshProUGUI textComponent;

    void Start(){
        textComponent = textGameObject.GetComponent<TextMeshProUGUI>();
    }
    
    void Update(){
        string livesText = "Lives: " + lives;
        textComponent.text = livesText;
    }
    
}