Anleitung Garry’s Mod Lua
Kapitel 3: Erster Start mit Clientseitigen Code Teil B
Name: Garry’s Mod Lua
Thema: Erster Start mit Clientseitigen Code / Teil B
Version: 1.0.0
Autor: crocstar47
© 2016 crocstar47
Websites:
http://wiki.garrysmod.com/page/Main_Page
http://wiki.garrysmod.com/page/GM/HUDPaint
http://wiki.garrysmod.com/page/GM/HUDShouldDraw
http://wiki.garrysmod.com/page/draw/RoundedBox
http://wiki.garrysmod.com/page/surface/CreateFont
http://wiki.garrysmod.com/page/draw/SimpleText
http://wiki.garrysmod.com/page/Global/ScrH
http://wiki.garrysmod.com/page/Global/ScrW
Disclaimer:
Ich übernehme keine Haftung für schäden an irgendwelchen Gegenständen von euch wie euren PC oder eurem Garry’s Mod Spiel. Das ganze macht ihr auf eigene Verantwortung!
Die Lebensanzeige sieht allerdings noch nicht ganz so gut aus. Wir fügen einfach mal ein paar Schatteneffekte hinzu und ändern die Farben ein wenig. Wir fügen eine zweite Roundedbox hinzu die einen weißen Rand hinzufügt.
Das ganze sieht jetzt schon viel besser aus.
[IMG:https://lh6.googleusercontent.com/R-O-PCl-sUfo72vBkVU07GssM65CPqhxF5BEvNc_He4MDGwWWTcBi4zMeHIyoCordR1gJBW4Z7z3N3TyTyMcdWLfeqw_cME_lR6kT4eypQf9K5q7LuG0AhhzqOHTDF0oeOTQqVS9]
Jetzt wird es ein bisschen Umfangreicher. Wir werden diesmal auch noch einen Text anzeigen. Dafür erstellen wir als erstes eine Font mit “surface.CreateFont( string fontName, table fontData )”. Dort sind alle Informationen zu der Font. Dann erstellen wir mit “draw.SimpleText( string text, string font="DermaDefault", number x=0, number y=0, table color)” den Text. Bei diesem nehmen wir das Player Objekt und dann nehmen wir von dem Player Objekt die Leben die er hat und dann wird das ganze als Text angezeigt wie viel Leben er hat.. Als zweites setzen wir unseren Fontnamen ein. Dann als drittes und viertes die X und Y Koordinaten. Dann setzen wir die Farbe für den Text.
[IMG:https://lh6.googleusercontent.com/Cy0RAw4HJAarv0N5cVxAsahT2uTE2UjDEYb_e_Zx-zjjnU77Kpl4QLRk1tKVQSBni1nZeBGUEtu89zkVt3Y9dRFnSRqFNU2xDSqsTQh8CLOX5V-g3V55NO_GHUHaUpagEAtgBhkp]
Das ganze sieht schon einmal nicht schlecht aus. Nun müssen wir allerdings die Lebensanzeige anpassbar machen. Das machen wir so wie bei dem Text. Nur dass wir das ganze an die Rounded Box übertragen.
Bei der Rounded Box die Rot ist werden wir die Spielerleben mal 3.0 rechnen und bei der Rounded Box die Weiß ist werden wir die Spielerleben mal 3.0 plus 2 rechnen. Das ganze liegt daran dass wir mit 3.0 einen guten Wert für die größe der Boxen von 100 haben. Der Wert ist sehr genau für die größe der Rounded Boxen. Wir rechnen bei der weißen Rounded Box plus zwei weil wir sonst nicht die weiße Box sehen können da sie sonst hinter der roten Rounded Box versteckt wäre. Das ganze ist sehr kompliziert ich weiß, aber es hat ein bisschen mit Mathe zu tun. Wartet nur ab bis wir mit Linearen Funktionen arbeiten. Das Thema ist sehr spannend da wir damit Animierte Lebensanzeigen erstellen können.
Jetzt haben wir die Basis aber damit falls sich Leben gecheatet wird das HUD nicht Kaputt geht werden wir eine Abfrage machen. Wir fragen ab ob die Leben vom Spieler größer als 100 sind. Falls das zutrifft bleibt das HUD einfach gleich und nur die Zahl ändert sich.
Ja ich weiß. Viel Mathematik und Berechnungen. Aber ohne Mathe kommt ihr da nicht weiter!. Hier fragen wir ab ob der Spieler mehr als 100 HP hat. Falls ja werden die Rounded Boxes erstellt die sich nicht weiter vergrößern. Falls der Spieler nicht mehr als 100 HP hat oder nicht 100 HP, werden die Rounded Boxes erstellt die sich weiter vergrößern. Das ganze beinhaltet Positionsberechnungen und mehr.
Das ganze sieht jetzt so aus:
Bei 200 HP:
[IMG:https://lh3.googleusercontent.com/UG_vimU9sOW0QUZlDXbXeUM7yKG-S82W4pJS-BZy3mlkiaWodp9IQ78YJoUPbmv99mgmXol7hwGhJSPCh0IRyQP9GLtq_7Xqzx8pErrPQ3yHfgn87Y5_I9mjDp8APwWiR1c1HcSo]
Bei 100 HP:
[IMG:https://lh3.googleusercontent.com/Ebf6LZrELiOJaDNdfS92o0P1eMZzs6wcdatjtQz2ZE3TdjSE-y03bF-BAL37tAXHBAyJOaP3BPyWKup9N8WjaN3wOhELKg_KjEovWMM7ZI428ThmkGg9MA1HbJzxjrdpLTPZ2T7C]
Bei 50 HP:
[IMG:https://lh3.googleusercontent.com/4tSy9NDIe2k7cidI0eeHzCmcVn9GUy_xfksEA7pqmxtl7A8qtjqlmt6Er2nImTsGrAC0tRUkOW_ayLA8x_KKPMCpx_yDDaOe4j1SFN8YN0c0WCXtSVZ1dPNFe4O1lzexaYcu-49m]
So und jetzt haben wir eine Lebensanzeige die sich Automatisch an die größe von dem Garry’s Mod Fenster anpasst und auch die größe ändert wenn man unter 100 HP hat. Falls man mehr als 100 HP oder 100 HP hat vergrößert sich die Lebensanzeige nicht. Das Einzige was dann geändert wird ist der Text der die HP anzeigt.
Ich hoffe ihr konntet etwas von diesem Part von meiner Garry’s Mod Lua Serie lernen. Aber wenn ihr alles schritt für schritt durchgeführt werdet ihr es hoffentlich verstehen. Falls nicht, lasst einen Kommentar dar und ich versuche euch zu helfen. Der Sourcecode wird nicht herausgegeben da ihr nicht copy und pasten sollt. Das hier ist zum Lernen und nicht zum Code klauen!
------------------------------------------------------------------------------------------------------------------------
Hausaufgabe: Fertigt eine Rüstungsanzeige an die denselben Zweck erfüllt aber in einer anderen Farbe ist. Das ganze wird in Teil 2 dann behandelt.
------------------------------------------------------------------------------------------------------------------------
Zusatzaufgabe: Lasse dir eine Lösung einfallen wie man das Problem am besten Lösen kann falls der Spieler weniger als 10 HP hat.
[IMG:https://lh4.googleusercontent.com/W13hdehw5nl1zDwQaSXIOudaYnflW9VTGO__AIiFbmsdeb_8uhWzG91lYFbvRIZDDQK-dn4SjIyVGj1Iulw3ZduuIJfqNS3gMyo5AWD3-pLEyvTmZvXl16Cqv0ywYba7ZET1TF9j]
------------------------------------------------------------------------------------------------------------------------
© 2016 crocstar47
------------------------------------------------------------------------------------------------------------------------
Kapitel 3: Erster Start mit Clientseitigen Code Teil B
Name: Garry’s Mod Lua
Thema: Erster Start mit Clientseitigen Code / Teil B
Version: 1.0.0
Autor: crocstar47
© 2016 crocstar47
Websites:
http://wiki.garrysmod.com/page/Main_Page
http://wiki.garrysmod.com/page/GM/HUDPaint
http://wiki.garrysmod.com/page/GM/HUDShouldDraw
http://wiki.garrysmod.com/page/draw/RoundedBox
http://wiki.garrysmod.com/page/surface/CreateFont
http://wiki.garrysmod.com/page/draw/SimpleText
http://wiki.garrysmod.com/page/Global/ScrH
http://wiki.garrysmod.com/page/Global/ScrW
Disclaimer:
Ich übernehme keine Haftung für schäden an irgendwelchen Gegenständen von euch wie euren PC oder eurem Garry’s Mod Spiel. Das ganze macht ihr auf eigene Verantwortung!
Die Lebensanzeige sieht allerdings noch nicht ganz so gut aus. Wir fügen einfach mal ein paar Schatteneffekte hinzu und ändern die Farben ein wenig. Wir fügen eine zweite Roundedbox hinzu die einen weißen Rand hinzufügt.
| -- Funktion für HUDPaint function DrawAllElementsOnScreen() -- Weißer Hintergrund draw.RoundedBox(0, 9, ScrH() - 61, 302, 52, Color(255, 255, 255)) -- Roter Vordergrund draw.RoundedBox(0, 10, ScrH() - 60, 300, 50, Color(230, 98, 80)) end |
Das ganze sieht jetzt schon viel besser aus.
[IMG:https://lh6.googleusercontent.com/R-O-PCl-sUfo72vBkVU07GssM65CPqhxF5BEvNc_He4MDGwWWTcBi4zMeHIyoCordR1gJBW4Z7z3N3TyTyMcdWLfeqw_cME_lR6kT4eypQf9K5q7LuG0AhhzqOHTDF0oeOTQqVS9]
Jetzt wird es ein bisschen Umfangreicher. Wir werden diesmal auch noch einen Text anzeigen. Dafür erstellen wir als erstes eine Font mit “surface.CreateFont( string fontName, table fontData )”. Dort sind alle Informationen zu der Font. Dann erstellen wir mit “draw.SimpleText( string text, string font="DermaDefault", number x=0, number y=0, table color)” den Text. Bei diesem nehmen wir das Player Objekt und dann nehmen wir von dem Player Objekt die Leben die er hat und dann wird das ganze als Text angezeigt wie viel Leben er hat.. Als zweites setzen wir unseren Fontnamen ein. Dann als drittes und viertes die X und Y Koordinaten. Dann setzen wir die Farbe für den Text.
| -- Wir erstellen die Font surface.CreateFont( "UnsereCooleHUDFont", { font = "Arial", extended = false, size = 30, weight = 500, blursize = 0, scanlines = 0, antialias = true, underline = false, italic = false, strikeout = false, symbol = false, rotary = false, shadow = false, additive = false, outline = false, } ) -- Funktion für HUDPaint function DrawAllElementsOnScreen() -- Weißer Hintergrund draw.RoundedBox(0, 9, ScrH() - 61, 302, 52, Color(255, 255, 255)) -- Roter Vordergrund draw.RoundedBox(0, 10, ScrH() - 60, 300, 50, Color(230, 98, 80)) -- Die Lebensanzeige draw.SimpleText(LocalPlayer():Health(), "UnsereCooleHUDFont", 145, ScrH() - 50, Color(255, 255, 255)) end |
[IMG:https://lh6.googleusercontent.com/Cy0RAw4HJAarv0N5cVxAsahT2uTE2UjDEYb_e_Zx-zjjnU77Kpl4QLRk1tKVQSBni1nZeBGUEtu89zkVt3Y9dRFnSRqFNU2xDSqsTQh8CLOX5V-g3V55NO_GHUHaUpagEAtgBhkp]
Das ganze sieht schon einmal nicht schlecht aus. Nun müssen wir allerdings die Lebensanzeige anpassbar machen. Das machen wir so wie bei dem Text. Nur dass wir das ganze an die Rounded Box übertragen.
Bei der Rounded Box die Rot ist werden wir die Spielerleben mal 3.0 rechnen und bei der Rounded Box die Weiß ist werden wir die Spielerleben mal 3.0 plus 2 rechnen. Das ganze liegt daran dass wir mit 3.0 einen guten Wert für die größe der Boxen von 100 haben. Der Wert ist sehr genau für die größe der Rounded Boxen. Wir rechnen bei der weißen Rounded Box plus zwei weil wir sonst nicht die weiße Box sehen können da sie sonst hinter der roten Rounded Box versteckt wäre. Das ganze ist sehr kompliziert ich weiß, aber es hat ein bisschen mit Mathe zu tun. Wartet nur ab bis wir mit Linearen Funktionen arbeiten. Das Thema ist sehr spannend da wir damit Animierte Lebensanzeigen erstellen können.
| -- Funktion für HUDPaint function DrawAllElementsOnScreen() -- Weißer Hintergrund draw.RoundedBox(0, 9, ScrH() - 61, LocalPlayer():Health() * 3.0 + 2, 52, Color(255, 255, 255)) -- Roter Vordergrund draw.RoundedBox(0, 10, ScrH() - 60, LocalPlayer():Health() * 3.0, 50, Color(230, 98, 80)) -- Die Lebensanzeige draw.SimpleText(LocalPlayer():Health(), "UnsereCooleHUDFont", LocalPlayer():Health() * 1.5, ScrH() - 50, Color(255, 255, 255)) end |
Jetzt haben wir die Basis aber damit falls sich Leben gecheatet wird das HUD nicht Kaputt geht werden wir eine Abfrage machen. Wir fragen ab ob die Leben vom Spieler größer als 100 sind. Falls das zutrifft bleibt das HUD einfach gleich und nur die Zahl ändert sich.
| -- Funktion für HUDPaint function DrawAllElementsOnScreen() if(LocalPlayer():Health() >= 100) then -- Weißer Hintergrund draw.RoundedBox(0, 9, ScrH() - 61, 302, 52, Color(255, 255, 255)) -- Roter Vordergrund draw.RoundedBox(0, 10, ScrH() - 60, 300, 50, Color(230, 98, 80)) -- Die Lebensanzeige draw.SimpleText(LocalPlayer():Health(), "UnsereCooleHUDFont", 100 * 1.4, ScrH() - 50, Color(255, 255, 255)) else -- Weißer Hintergrund draw.RoundedBox(0, 9, ScrH() - 61, LocalPlayer():Health() * 3.0 + 2, 52, Color(255, 255, 255)) -- Roter Vordergrund draw.RoundedBox(0, 10, ScrH() - 60, LocalPlayer():Health() * 3.0, 50, Color(230, 98, 80)) -- Die Lebensanzeige draw.SimpleText(LocalPlayer():Health(), "UnsereCooleHUDFont", LocalPlayer():Health() * 1.5, ScrH() - 50, Color(255, 255, 255)) end |
Ja ich weiß. Viel Mathematik und Berechnungen. Aber ohne Mathe kommt ihr da nicht weiter!. Hier fragen wir ab ob der Spieler mehr als 100 HP hat. Falls ja werden die Rounded Boxes erstellt die sich nicht weiter vergrößern. Falls der Spieler nicht mehr als 100 HP hat oder nicht 100 HP, werden die Rounded Boxes erstellt die sich weiter vergrößern. Das ganze beinhaltet Positionsberechnungen und mehr.
Das ganze sieht jetzt so aus:
Bei 200 HP:
[IMG:https://lh3.googleusercontent.com/UG_vimU9sOW0QUZlDXbXeUM7yKG-S82W4pJS-BZy3mlkiaWodp9IQ78YJoUPbmv99mgmXol7hwGhJSPCh0IRyQP9GLtq_7Xqzx8pErrPQ3yHfgn87Y5_I9mjDp8APwWiR1c1HcSo]
Bei 100 HP:
[IMG:https://lh3.googleusercontent.com/Ebf6LZrELiOJaDNdfS92o0P1eMZzs6wcdatjtQz2ZE3TdjSE-y03bF-BAL37tAXHBAyJOaP3BPyWKup9N8WjaN3wOhELKg_KjEovWMM7ZI428ThmkGg9MA1HbJzxjrdpLTPZ2T7C]
Bei 50 HP:
[IMG:https://lh3.googleusercontent.com/4tSy9NDIe2k7cidI0eeHzCmcVn9GUy_xfksEA7pqmxtl7A8qtjqlmt6Er2nImTsGrAC0tRUkOW_ayLA8x_KKPMCpx_yDDaOe4j1SFN8YN0c0WCXtSVZ1dPNFe4O1lzexaYcu-49m]
So und jetzt haben wir eine Lebensanzeige die sich Automatisch an die größe von dem Garry’s Mod Fenster anpasst und auch die größe ändert wenn man unter 100 HP hat. Falls man mehr als 100 HP oder 100 HP hat vergrößert sich die Lebensanzeige nicht. Das Einzige was dann geändert wird ist der Text der die HP anzeigt.
Ich hoffe ihr konntet etwas von diesem Part von meiner Garry’s Mod Lua Serie lernen. Aber wenn ihr alles schritt für schritt durchgeführt werdet ihr es hoffentlich verstehen. Falls nicht, lasst einen Kommentar dar und ich versuche euch zu helfen. Der Sourcecode wird nicht herausgegeben da ihr nicht copy und pasten sollt. Das hier ist zum Lernen und nicht zum Code klauen!
------------------------------------------------------------------------------------------------------------------------
Hausaufgabe: Fertigt eine Rüstungsanzeige an die denselben Zweck erfüllt aber in einer anderen Farbe ist. Das ganze wird in Teil 2 dann behandelt.
------------------------------------------------------------------------------------------------------------------------
Zusatzaufgabe: Lasse dir eine Lösung einfallen wie man das Problem am besten Lösen kann falls der Spieler weniger als 10 HP hat.
[IMG:https://lh4.googleusercontent.com/W13hdehw5nl1zDwQaSXIOudaYnflW9VTGO__AIiFbmsdeb_8uhWzG91lYFbvRIZDDQK-dn4SjIyVGj1Iulw3ZduuIJfqNS3gMyo5AWD3-pLEyvTmZvXl16Cqv0ywYba7ZET1TF9j]
------------------------------------------------------------------------------------------------------------------------
© 2016 crocstar47
------------------------------------------------------------------------------------------------------------------------
The Cake is not a Lie!
Ich freue mich dass ich dir helfen kann. 