UI_engine este o bibliotecă statică C++ care permite dezvoltatorilor să creeze interfețe utilizator din codul C++ folosind SDL (Simple DirectMedia Layer). Această documentație vă va ghida prin configurarea bibliotecii, crearea unui proiect simplu și înțelegerea diferitelor componente ale codului.
Pentru a începe cu UI_engine, urmați acești pași:
- Creați un director de proiect nou și navigați la acesta folosind terminalul sau linia de comandă.
- Clonați depozitul UI_engine de pe GitHub folosind următoarea comandă:
git clone --recurse-submodules https://github.com/boroicamarius/UI_engine.git- Creați un fișier CMakeLists.txt în directorul rădăcină al proiectului cu următorul conținut:
cmake_minimum_required(VERSION 3.26)
set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED YES)
set(CMAKE_CXX_EXTENSIONS OFF)
project(app)
add_subdirectory(UI_engine)
add_executable(runnable main.cpp)
target_link_libraries(runnable PUBLIC UI_engine)- Creați un fișier main.cpp în directorul proiectului cu elementele UI dorite și codul de gestionare a evenimentelor. Pentru un exemplu de bază, consultați Crearea unui Proiect Simplu.
Hai să creăm un proiect simplu care afișează o fereastră cu o ramă neagră folosind UI_engine. Iată fișierul main.cpp:
#include <UI_engine/UI_engine.h>
using namespace UI_engine;
int main(int argc, char* argv[]) {
UI_window window("exampleWindow",
SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED,
400, 400, SDL_WINDOW_SHOWN, SDL_RENDERER_ACCELERATED,
144.0);
UI_frame frame_example(0.0f, 0.0f, 35.0f, 35.0f, 1.0f, { 0,0,0,255 });
frame_example.fill();
window.add(&frame_example);
processEvents(&window);
return 0;
}Acest cod creează o fereastră intitulată "exampleWindow" cu o ramă neagră la colțul din stânga sus.
Clasa UI este clasa de bază pentru toate elementele UI. Aceasta oferă funcționalități comune precum poziționarea, dimensiunea, transparența și gestionarea evenimentelor.
Clasa UI reprezintă un element de bază pentru interfața utilizator care poate fi afișat și manipulat într-o fereastră.
Constructorul inițializează elementul UI.
Destructorul curăță elementul UI.
Returnează lățimea elementului UI.
Setează lățimea elementului UI.
Returnează înălțimea elementului UI.
Setează înălțimea elementului UI.
Returnează valoarea de transparență a elementului UI.
Setează valoarea de transparență a elementului UI.
Returnează coordonata X a elementului UI.
Setează
coordonata X a elementului UI.
Returnează coordonata Y a elementului UI.
Setează coordonata Y a elementului UI.
Face elementul UI vizibil.
Ascunde elementul UI.
Randare elementului UI.
Distruge elementul UI și curăță resursele alocate.
Returnează coordonata X absolută a elementului UI în cadrul părintelui său.
Returnează coordonata Y absolută a elementului UI în cadrul părintelui său.
Comută primirea evenimentelor de la elementul UI (de ex. clicuri de mouse, apăsări de taste).
Execută gestionarea evenimentelor pentru elementul UI.
Inițializează elementul UI.
Curăță resursele utilizate de elementul UI.
class UI {
public:
UI();
virtual ~UI();
float width();
void width(float w);
float height();
void height(float h);
float transparency();
void transparency(float t);
float x();
void x(float x);
float y();
void y(float y);
void show();
void hide();
void render();
void destroy();
float getParentPosX();
float getParentPosY();
void toggleEvents();
void execute_event(UI_window* _window, const SDL_Event& _event);
void init();
void finit();
};Clasa UI_collection vă permite să grupați mai multe elemente UI într-o singură unitate. Ajută la gestionarea poziționării și randării elementelor grupate.
class UI_collection : public UI
Clasa UI_collection reprezintă un container pentru gruparea mai multor elemente UI.
Constructorul creează o nouă colecție UI cu poziția și transparența specificate.
Destructorul curăță colecția UI.
Crește lățimea tuturor elementelor UI din colecție cu un procentaj.
Crește înălțimea tuturor elementelor UI din colecție cu un procentaj.
Returnează un pointer către un element UI din colecție cu numele personalizat dat.
Returnează un pointer către un element UI din colecție în funcție de poziția sa.
Returnează numărul de elemente UI din colecție.
Adaugă un element UI la colecție cu un nume personalizat.
Returnează lățimea colecției UI.
Returnează înălțimea colecției UI.
Distruge colecția UI și toate elementele sale UI.
Execută gestionarea evenimentelor pentru colecția UI.
Randare unui element UI relativ la poziția sa în cadrul colecției.
Setează înălțimea colecției UI.
Setează lățimea colecției UI.
class UI_collection : public UI {
public:
UI_collection(float x, float y, float t);
~UI_collection();
void increaseWidth(float percent);
void increaseHeight(float percent);
UI* object(std::string name);
UI* object(int number);
int objects();
void addWithCustomName(std::string name, UI* ui);
float width();
float height();
void destroy();
void execute_event(UI_window* _window, const SDL_Event& _event);
void renderRelative(UI* ui);
void height(float h);
void width(float w);
};Clasa UI_frame reprezintă o ramă simplă cu capacități opționale de umplere. Poate fi utilizată pentru a desena dreptunghiuri cu diferite culori.
Clasa UI_frame reprezintă o
ramă sau chenar pentru un element UI.
Constructorul creează o nouă ramă UI cu poziția, dimensiunele, transparența și culoarea specificate.
Destructorul curăță rama UI.
Returnează culoarea ramei UI.
Setează culoarea ramei UI.
Randare ramei UI.
Distruge rama UI și curăță resursele alocate.
Setează valoarea de transparență a ramei UI.
Umple rama UI cu culoarea sa.
Elimină umplutura ramei UI.
class UI_frame : public UI {
public:
UI_frame(float x, float y, float w, float h, float t, SDL_Color color);
~UI_frame();
SDL_Color color();
void color(SDL_Color c);
void render();
void destroy();
void transparency(float t);
void fill();
void unfill();
};Clasa UI_image vă permite să afișați imagini pe UI. Suportă SDL_Texture și SDL_Surface ca surse de imagini.
Clasa UI_image reprezintă un element de interfață utilizator pentru imagini.
Constructorul creează o nouă imagine UI cu poziția, dimensiunile și transparența specificate.
Destructorul curăță imaginea UI.
Setează sursa imaginii pentru imaginea UI dintr-un SDL_Surface.
Setează sursa imaginii pentru imaginea UI dintr-un SDL_Texture.
Returnează sursa imaginii pentru imaginea UI.
Setează secțiunea imaginii de randat.
Randare imagine UI.
Distruge imaginea UI și curăță resursele alocate.
class UI_image : public UI {
public:
UI_image(float x, float y, float w, float h, float t);
~UI_image();
void source(SDL_Surface* _imageSurface);
void source(SDL_Texture* _imageTexture);
SDL_Texture* source();
void setRenderSection(int x, int y, int w, int h);
void render();
void destroy();
};Clasa UI_text este utilizată pentru afișarea de texte pe UI. Puteți seta fontul, dimensiunea și culoarea textului.
Clasa UI_text reprezintă un element de interfață utilizator pentru text.
Constructorul creează un nou element UI pentru text cu poziția, dimensiunile și transparența specificate.
Destructorul curăță elementul UI pentru text.
Setează fișierul fontului pentru elementul UI pentru text.
Setează dimensiunea fontului pentru elementul UI pentru text.
Setează culo
area elementului UI pentru text.
Setează conținutul textului pentru elementul UI pentru text.
Randare element UI pentru text.
Distruge elementul UI pentru text și curăță resursele alocate.
class UI_text : public UI {
public:
UI_text(float x, float y, float w, float h, float t);
~UI_text();
void font(std::string path);
void fontSize(int size);
void color(SDL_Color c);
void text(std::string content);
void render();
void destroy();
};Clasa UI_window reprezintă fereastra principală a aplicației. Gestionează randarea tuturor elementelor UI și gestionarea evenimentelor SDL.
class UI_window
Clasa UI_window reprezintă fereastra principală a aplicației.
Constructorul creează o nouă fereastră UI cu titlul, poziția, dimensiunea, indicatorii și scara specificate.
Destructorul curăță fereastra UI.
Returnează scara ferestrei UI.
Setează scara ferestrei UI.
Adaugă un element UI la fereastra UI.
Înlătură un element UI din fereastra UI.
Elimină toate elementele UI din fereastra UI.
Randare fereastră UI și toate elementele sale UI.
Execută gestionarea evenimentelor pentru fereastră UI și toate elementele sale UI.
Comută fereastra UI între modul fullscreen și modul fereastră.
class UI_window {
public:
UI_window(std::string title, int x, int y, int w, int h, int flags, int rendererFlags, float scale);
~UI_window();
float scale();
void scale(float s);
void add(UI* ui);
void remove(UI* ui);
void clear();
void render();
void execute_event(const SDL_Event& _event);
void fullscreen(bool enable);
};Namespace Globals conține variabile globale utilizate în bibliotecă.
Namespace Globals conține variabile globale utilizate în bibliotecă.
Variabilă globală pentru fontul implicit utilizat de elementele UI pentru text.
Variabilă globală pentru renderizatorul utilizat pentru randarea elementelor UI.
Namespace UI_engine conține funcții utile pentru configurarea și gestionarea bibliotecii.
Namespace UI_engine conține funcții utile pentru configurarea și gestionarea bibliotecii.
Inițializează SDL și alte biblioteci necesare pentru funcționarea bibliotecii UI_engine.
Curăță resursele și închide biblioteca UI_engine.
Procesează toate evenimentele SDL pentru fereastra specificată.
Randare cadrul pentru fereastra specificată.
Actualizează dimensiunea ferestrei specificate.
Actualizează pozițiile tuturor elementelor UI în fereastra specificată.
namespace Globals {
extern TTF_Font* defaultFont;
extern SDL_Renderer* globalRenderer;
}
namespace UI_engine {
bool init(int flags);
void finit();
void processEvents(UI_window* _window);
void renderFrame(UI_window* _window);
void updateWindowSize(UI_window* _window, int w, int h);
void updateElementPositions(UI_window* _window);
}Felicitări! Acum sunteți familiarizați cu biblioteca UI_engine și puteți începe să creați interfețe utilizator personalizate folosind această bibliotecă în proiectele dvs. Cu componente precum UI_frame, UI_image și UI_text, puteți crea interfețe flexibile și atractive pentru aplicațiile dvs. Cu cât explorați mai multe funcționalități ale bibliotecii, cu atât veți putea crea interfețe mai complexe și sofisticate. Luați în considerare să consultați documentația oficială a SDL pentru a înțelege mai bine interacțiunea dintre SDL și UI_engine.
Dacă aveți întrebări sau întâmpinați probleme, nu ezitați să verificați depozitul oficial de pe GitHub pentru probleme deschise sau să adăugați propriile probleme. Sperăm că veți avea o experiență plăcută lucrând cu UI_engine și că veți construi interfețe utilizator uimitoare pentru aplicațiile dvs.!