Nabend,
Ich hau hier einfach mal ein kleines Tutorial in dem ich zeige wie man Tabellen verwenden kann rein.
Ich werde hier einfach mal einen dxDraw Button zeigen.
In nächster Zeit werde ich auch noch weitere Elemente zeigen denke das man diese als Grundgerüst verwenden kann.
Ich werde das Tutorial auf das geringste beschränken und nur die Grundfunktion der Elemente zeigen.
Kein groß gelaber legen wir los.
Zuerst erstellen wir die Tabelle
Jetzt basteln wir mal die Funktion zum erstellen eines neuen Buttons:
function dxButton(text,x,y,w,h,fontColor,fontSize,backColor,hoverColor,func)
-- text = Text
-- x = X Position auf dem Bildschirm
-- y = Y Position auf dem Bildschirm
-- w = Breite des Buttons
-- h = Höhe des Buttons
-- fontColor, fontSize, backColor und hoverColor sollten sich selbst erklären
--func = Die Funktion die beim Klicken des Buttons ausgeführt wird
local btns = #dxButtons
-- mit # kann man die Anzahl der einträge aus einer Tabelle erhalten
btns = btns+1 -- Hier wird die Anzahl um 1 erhöht da wir ansonsten den Letzten Button überschreiben würden
dxButtons[btns] = {} -- Hier tragen wir den neuen Button in unsere Tabelle ein auch wieder als Tabelle
-- Was jetzt passiert erklärt sich soweit von selbst
-- alle Parameter die wir der Funktion dxButton übergeben werden dem Neuen Button zugewiesen
dxButtons[btns].text = text
dxButtons[btns].x = x
dxButtons[btns].y = y
dxButtons[btns].w = width
dxButtons[btns].h = height
dxButtons[btns].fontColor = fontColor
dxButtons[btns].fontSize = fontSize
dxButtons[btns].backColor = backColor
dxButtons[btns].hoverColor = hoverColor
dxButtons[btns].func = func
return btns --Hier geben wir die "ID" des Buttons zurück
end
Alles anzeigen
Jetzt erstellen wir die Funktion zum zerstören des Buttons:
function destroyButton(button)
if dxButtons[button] then --Zuerst Prüfen ob der Button in der Tabelle Vorhanden ist wenn ja:
dxButtons[button] = nil -- Hier wird die Spalte in der sich der Button in der Tabelle befindet auf nil gesetzt
end
end
Soweit so gut.
Damit wir die Buttons jetzt auch noch Sehen können müssen wir diese mit onClientRender Zeichnen lassen.
Zuerst brauchen wir aber noch eine Funktion die Prüft ob der Cursor auf dem Button ist um den Hover darzustellen
local fullx,fully = guiGetScreenSize() -- Die Bildschirmgröße ermittlen
function isCursorOnDX(x,y,w,h)-- Wir übergeben die x und y Position und die Höhe sowie die Breite
if isCursorShowing() then --Wenn der Cursor Sichtbar ist:
local mx,my = getCursorPosition() -- Die Cursorposition ermitteln
local cursorx,cursory = mx*fullx,my*fully -- X vom Cursor * Größe X des Screens das gleiche bei Y
if cursorx > x and cursorx < x + w and cursory > y and cursory < y + h then
-- etwas Lang und verwirrend eigentlich aber Ganz simpel
-- Zuerst wird geprüft ob X des Cursor größer als x des Übergebenen Elements ist
-- Dann cursorx < x + w | mit X + W ermittlen wir die X Position mit der Breite
-- das Gleiche nochmal mit y und cursory < y + h | mit Y+H ermittlen wir die Y Position mit der Höhe
return true -- Returnt true ermöglicht eine einfache if abfrage
else
return false -- false wenn nicht :)
end
end
end
Alles anzeigen
Jetzt wirds Bunt!
function drawButtons()
for buttonID=1, #dxButtons do -- Mit der for Schleife lassen wir uns Jetzt alle einträge aus der Tabelle ausgeben
-- buttonID = die Zahl des eintrags mit der 1 fangen wir an da wir die Leere Tabelle in der Funktion zum erstellen
-- um 1 erhöhen der eintrag 0 ist somit nil
if dxButtons[buttonID].x then -- Prüfen ob die X Position des Buttons vorhanden ist
-- Hier könnte man noch einige andere Abfragen erstellen wie ob der wert eine Zahl ist aber ich denke
-- das jeder sich bewusst ist das an der Stelle eine Zahl erwartet wird :)
local color -- color verwenden wir um den Hover darzustellen
if isCursorOnDX(dxButtons[buttonID].x,dxButtons[buttonID].y,dxButtons[buttonID].w,dxButtons[buttonID].h) then
-- Hier kommt unsere Funktion isCursorOnDX() in Spiel
color = dxButtons[buttonID].backColorHover -- Die Hoverfarbe des Buttons
else
color = dxButtons[buttonID].backColor -- Die Standart des Buttons
end
dxDrawRectangle(dxButtons[buttonID].x,dxButtons[buttonID].y,dxButtons[buttonID].w,dxButtons[buttonID].h, color)
-- Hier wird der Button Gezeichnet x,y,w,h sind die Werte die wir in der Funktion zum erstellen zugewiesen haben
dxDrawText(dxButtons[buttonID].text,dxButtons[buttonID].x+20,dxButtons[buttonID].y+5, dxButtons[buttonID].x+dxButtons[buttonID].w-20,dxButtons[buttonID].y+5, dxButtons[buttonID].fontColor, dxButtons[buttonID].fontSize, "default-bold", "center", "top")
-- Hier der Text das Gleiche wie beim Rectangle
end
end
end
Alles anzeigen
Ich hoffe das Hilf dem ein oder anderen ein Wenig
Wie oben erwähnt ist das nur ein Grundgerüst auf das aufgebaut werden kann.
Es wird einige Sachen geben die man hätte schöner lösen können aber dazu komme ich villeicht später noch
MfG Pii