UI basics

Cerinte

Realizati o scena in Unity in care:

  • exista un personaj controlabil FPS
  • personajul are o arma in mana
  • in centrul ecranului este un crosshair
  • la click, arma personajului este usor animata
  • arma are un numar de gloante afisat pe ecran
  • personajul are un healthbar grafic afisat legat direct cu valoarea de health a personajului
  • exista un minimap cu buline rosii pentru inamici (de ex tower) si bulina albastra pentru player
  • un inmaic (de ex tower) cu healthbar afisat deasupra acestuia

Documentatie video

Inregistrare pe Teams

Documentatie extinsa text

Afisare de variabile text pe UI

/* Text Legacy */
 
using UnityEngine.UI;
 
public float score = 0;
public Text scoreText;
 
scoreText.text = score.ToString();
 
 
/* TextMeshPro */
 
using TMPro;
 
public float score = 0;
public TMP_Text scoreText;
 
scoreText.text = score.ToString();

Elemente de GUI

Se pot folosi atat obiecte plasate in scena, cat si partea de Canvas, in ceea ce priveste interfata grafica.

FPS Gun

Astfel, spre exemplu pentru un FPS single player, in general nu avem nevoie de caracter, ci doar de maini, sau eventual doar o arma animata. Pentru a controla usor acest aspect se poate importa un obiect texturat pentru arma, care se va atasa camerei 3D disponibile in scena si se va configura astfel incat sa arate cat mai natural.

Pentru a crea un crosshair sau o tinta se poata adauga un disc sau o imagine cu transparenta in centrul canvas-ului.

Bineinteles, se poate crea un crosshair animat si folosind 4 dreptunghiuri simple.

Healthbar

Pentru reprezentarea healthbar-ului sau a altor elemente de tip bara, se poate folosi un element de UI (gameobject) de tip Slider, asa cum este reprezentat in imaginea de mai sus.

GetComponent.<Slider>().value = myHealth;

De asemenea se mai pot folosi doua dreptunghiuri suprapuse: unul care reprezinta viata totala, si unul care reprezinta viata curenta, cel din urma fiind scalar relativ la valoare vietii personajului.

Minimap

Pentru crearea unui minimap se foloseste de regula o camera suplimentara, plasata top-down deasupra scenei.

Camera special creata va trebui sa afiseze scena intr-o textura. Pentru acest lucru vom folosi un asset de tip Render texture (Assets → Create → Render Texture) pe care o vom atasa ca Target in camera nou creata.

Pasul urmator este sa afisam Minimap-ul. Pentru acest lucru, in canvas vom crea o imagine si vom lega textura in care salvam imaginile de la camera la aceasta.

Rezultatul poate fi ibunatatit prin plasarea acestuia intr-un loc potrivit adaugarea unei masti sau a unei borduri si asa mai departe.

Layers

Pentru a defini sau actualiza Layere se paote merge la Edit → Project Settings → Tags and Layers. Putem folosi Layere pentru a delimita diverse lucruri, de exemplu care obiecte se vad pe carema, pentru care se calculeaza coliziunea etc.

Putem simplifica geometria din minimap folosind Layere si primitive simplificate.

De exemplu se poata adauga un obiect copil pentru caracter sau obietele care vreau sa apara pe harta. Setam Layerul de Minimap pentru obiect.

Adaugam si cativa inamici cu alta culoare

Urmatorul pas este sa configuram camera principala astfel incat sa nu afiseze aceste primitive.

Apoi dezactivam toate celelalte layere si lasam doar Minimap pentru camera care face Render to Texture din setarea de Culling Mask

Rezultatul este simplificat ca geometrie si urmeaza pozitiile personajelor

Crearea de animatii pentru obiecte de UI

Crearea animatiilor se poate face folosind utilitarul de animatie (Window > Animation), similar ca si pentru restul animatiilor. Similar, se poate folosi Animator Controller pentru a gestiona starile (spre exemplu tras cu arma).

GUI

Pentru afisarea elementelor de interfata relative la spatiul scenei se poate folosi atat un canvas, cat si mai multe instante de canvas.

Astfel, o varianta este sa atasati un canvas de tip WorldSpace la obiectele care au nevoie de elemente de interfata grafica (de exemplu health bar).

O alta varianta este prin scriptarea unui singur element de canvas referentiat si transpunerea lui relativ la obiectul curent (util de exemplu in cazul dialogului sau a elementelor care nu se pot afisa de mai multe ori in acelasi timp)

var target : Transform;
 
function Update ()
{
     var wantedPos = Camera.main.WorldToViewportPoint (target.position);
     transform.position = wantedPos;
}
pjv/laboratoare/2023/08.txt · Last modified: 2023/11/27 17:10 by alexandru.gradinaru
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0