Programarea interfetelor grafice

Cerinte

Pentru simplitate puteti porni de la scena de MOBA creata in Lab3/Lab4, dar nu este obligatoriu

Realizati o scena care sa contina:

  • Environment: teren cu copaci
  • Personaj
    • Controlabil
    • Are un healthbar afisat
    • Are cel putin 2 atribute (de ex strength si dexterity)
    • Are un inventar cu obiecte
      • accesibil pe tasta 'i'
      • obiectele se pot adauga, utiliza sau elimina din inventar
      • obiectele sunt de cel putin 2 tipuri:
        1. consumabil: de ex la apasarea pe el se poate recupera din viata personajului
        2. echipabil: de ex la o apasare se echipeaza - cresc anumite atribute ale playerului (strength, dexterity etc.) - la o alta apasare se dezechipeaza - scad atributele definite pe item
  • Inamici care se misca pe harta
    • Inamicii trebuie sa aiba healthbar deasupa capului
  • Un minimap cu buline rosii pentru inamici si bulina albastra pentru player

Bonus:

  • NPC Dialog system

Documentatie video


Documentatie extinsa text


Sumar documentatie

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;
}

Inventar

Pentru a crea un sistem de inventar avem nevoie in primul rand de date atasate fiecarui obiect, cum ar fi nume, icon, atribute etc. Putem realiza acest lucru usor prin obiecte scriptabile (Scriptable Objects). Obiectele Scriptable sunt containere de date ce nu trebuie sa fie atasate la un GameObject intr-o scena. Ele pot fi salvate ca asset-uri in bibliteca proiectului ca mai apoi sa poata fi utilizate.

Obiectele scriptabile se definesc prin crearea unui script ce mosteneste clasa ScriptableObject.

Pentru a instantia un obiect scriptabil avem doua variante:

  • prin script: SciptableObject.CreateInstance<MyScriptableObjectClass>()
  • din mediu: CreateAssetMenu - adauga o intrare noua in meniul de create asset
[CreateAssetMenu(fileName = "New Item", menuName = "Inventory/Item", order = 1)]
public class Item : ScriptableObject {
    new public string name = "New MyScriptableObject"; //suprascrie atributul name
    public string objectName = "New MyScriptableObject";
    public bool colorIsRandom = false;
    public Color thisColor = Color.white;
    public Sprite icon;
    public Vector3[] spawnPoints;
}

Intrucat exista atribute implicite pentru un obiect scriptabil (e.g. name), putem folosi variabile diferite (e.g. objectName) sau putem suprascrie definirea acestui atribut prin folosirea metodei new (new public string name).

Mai departe, pentru un inventar vom avea nevoie de o lista de obiecte gestionabile. Pentru acest lucru vom face un script de gestiune pentru inventar (e.g InventoryManager) care gestioneaza adaugarea, eliminarea si interogarea inventarului. Pentru o accesare mai usoara si mai facila, ideal ar fi ca acest inventorymanager sa fie un Singleton. Pentru a avea un singleton trebuie sa ne asiguram ca avem o singura instanta creata pentru acest script atunci cand e accesat.

public class InventoryManager : MonoBehaviour {

  // singleton
  public static InventoryManager instance;
  void Awake() {
    instance = this;
  }
  
  //lista de obiecte
  public List<Item> items = new List<Item>();
  
  //metode pentru gestionare
  public void Add(Item item) {
    items.Add(item);
  }
  
  public void Remove(Item item) {
    items.Remove(item);
  }

}

Fiind definit ca un singleton, putem accesa acum foarte usor gestionarea inventarului:

Inventory.instance.Add(item);
Inventory.instance.Remove(item);

Inca un element util in gestionarea inventarului este definirea unei metode de a notifica atunci cand s-a produs o modificare in inventar. Pentru acest lucru putem folosi Delegates. Un Delegate este un pointer la o metode. Aceasta ne permite sa tratam metoda ca o variabila și sa o folosim pentru un callback. Cand este apelata, acesta notifica toate metodele care fac referire la delegate. Astfel putem definit o variabila pentru evenimentul de schimbare.

  public delegate void OnInventoryChanged();
  public OnInventoryChanged onInventoryChangedCallback;
  
 //metode pentru gestionare
  public void Add(Item item) {
    ...
    onInventoryChangedCallback.Invoke(); //notifica despre modificare
  }
  
  public void Remove(Item item) {
    ...
    onInventoryChangedCallback.Invoke(); //notifica despre  modificare
  }

Urmatorul pas este crearea unei interfete grafice si legarea interfetei de functionalitatea InventoryManger-ului. Pentru interfata grafica, putem folosi, ca si pana acum, canvas-ul oferit de Unity, structurat astfel incat sa avem un panou general pentru inventar, si mai multe slot-uri pentru obiectele din acesta. Pe fiecare slot putem defini urmatoarele aspecte:

  • un gameobject
  • un buton de accesare : pentru folosirea obiectului, echipare etc.
  • un buton de eliminare : pentru eliminarea din inventar
  • o imagine: icon pentru obiectul in inventar
  • script de gestionare: pentru fiecare slot putem avea un script de gestionare care va actualiza interfata slotului respectiv (nume, icon etc).

Pentru sloturile de inventar este indicat sa folositi un prefab sau un template.

Interfata grafica a inventarului are nevoie si de un script de gestionare. Astfel vom aveam un script care asculta (subscribe) evenimentul definit (delegate) la actualizarea inventarului, si actualizeaza fiecare slot din interfata grafica:

void Start() {
  inventory = Inventory.instance;
  inventory.onInventoryChangedCallback += UpdateUI; //definesc o metoda ca se apeleaza la aparitia unui eveniment delegat
  
  slots = GetComponentsInChildren<InventorySlot>(); //fiecare slot din inventar
}

void UpdateUI() {
  
  //actualizare fiecare slot
  for(i=0; i < slots.Length; i++)
  {
    if(i<iventory.items.Count) slots[i].AddItem(..)
    else slots[i].RemoveItem(..)
  } 

}

Bineinteles, in inventar se pot pune diferse restrictii si interactiuni (cum ar fi dimensiunea maxima a inventarului)

bool AddItem() {

if(items.Count >= space)
//no more room
return false

else return true;
}

if(Inventory.instance.Add(item)) Destroy(gameObject);

Similar se poate face si gestiunea altor interfet: de quest pentru player, de echipament / arma, skilltree etc.

NPC

In ceea ce priveste NPC-urile, acestea de obicei interactioneaza cu player-ul prin dialog: oferirea de informatii, gossip, quest-uri etc.

Sistemele de dialog si de quest-uri pot fi foarte complexe, iar posibilitatile nelimitate. In continuare voi prezenta cateva lucruri de baza prezente in aceste sisteme.

Din punct de vedere programatic, NPC-urile sunt tot un tip de obiect cu care se poate interactiona, astfe ca se poate folosi aceasi paradigma din laboratorul precedent, de InteractionObject.

Primul punct important in interactiunea cu NPC-urile este sistemul de dialog.

Dialog System

Pentru crearea unui sistem de dialog, se folosesc elemente de UI Canvas: Panel, Button, Image etc.

Mai departe, putem face un DialogManager, tot sub format singleton, pentru a putea referentia elementele de UI mai usor, o singura data. In acest manager putem configura diverse linii de dialog, numele NPC-ului care sa apara in caseta de dialog etc. De asemenea, va trebui sa tinem minte si in ce moment, sau la care linie de dialog ne aflam.

public class DialogManager : MonoBehaviour {
  
  public static DialogManager instance;
  public GameObject panel;
  public string NPCName;
  public List<string> sentences = new List<string>();
  
  Button continueButton;
  Text dialogeTextContainer, NPCNameContainer; 
  
  int lineIndex;
    
  void Awake()
  {
    //get child components
    dialogeTextContainer = ... 
    NPCNameContainer = ...
    continueButton = ...
    continueButton.onClick.AddListener(delegate { ContinueDialog(); });
    
    instance = this;
  }
  
  public void AddNewDialogue(string[] lines, string NPCName)
  {
    //initializeaza dialogul curent din NPC
    lineIndex=0;
    ...
  }
  
  public void showDialog()
  {
    dialogeTextContainer.text = sentences[lineIndex]; //afiseaza linia de dialog curenta
    NPCNameContainer.text= NPCName;
    panel.SetActive(true);
    
  }
  
  public void ContinueDialog()
  {
    lineIndex++;
    showDialog();
  }
  
}

Apoi, in clasa NPC-ului, putem instantia un dialog personalizat pentru NPC-ul respectiv:

public class NPC : InteractionObject {

  public string[] sentences; //se pot configura liniile de dialog in editor
  public string name;
  
  public override void Interaction()
  {
    base.Interaction(); // se apeleaza metoda parinte

    DialogManager.Instance.AddNewDialog(sentences, name);
  }

pjv/laboratoare/2022/05.txt · Last modified: 2022/11/23 13:23 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