Garry's Mod Lua | Kapitel 3: Erster Start mit Clientseitigen Code / Teil B

    • Garry's Mod Lua | Kapitel 3: Erster Start mit Clientseitigen Code / Teil B

      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.

      -- 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!