Willkommen, angehender Roblox-Entwickler! Hast du dich jemals gefragt, wie beliebte Kampfspiele diese dynamischen „Kill Message“-Anzeigen am oberen oder seitlichen Bildschirmrand implementieren, die dir sofort zeigen, wer wen mit welcher Waffe ausgeschaltet hat? Diese sogenannten KM-Anzeigen (Kill Message) sind nicht nur ein cooles Feature, das das Spielerlebnis verbessert, sondern auch eine großartige Möglichkeit, die Interaktion und den Wettbewerb innerhalb deines Spiels zu visualisieren.
In dieser umfassenden, schrittweisen Anleitung tauchen wir tief in die Welt von Roblox Studio ein. Wir zeigen dir genau, wie du eine voll funktionsfähige und ästhetisch ansprechende KM-Anzeige von Grund auf erstellst. Keine Sorge, auch wenn du noch nicht der größte Lua-Scripting-Experte bist, führen wir dich durch jeden einzelnen Schritt – vom UI-Design über die Server-Logik bis hin zur Client-Darstellung. Mach dich bereit, deine Fähigkeiten auf die nächste Stufe zu heben!
Was ist eine KM-Anzeige und warum ist sie wichtig?
Eine KM-Anzeige ist im Grunde ein benutzerdefiniertes UI-Element (User Interface), das eine Benachrichtigung anzeigt, wenn ein Spieler einen anderen eliminiert hat. Sie liefert wichtige Informationen wie den Namen des Killers, den Namen des Opfers und oft auch die verwendete Waffe oder die Ursache des Todes. Aber warum ist das so wichtig?
- Sofortiges Feedback: Spieler sehen sofort, was passiert ist, und können ihre Strategien anpassen.
- Wettbewerb: Es fördert den Wettbewerb und die Rivalität, da Spieler sehen, wer die meisten Kills erzielt.
- Immersion: Es lässt das Spiel lebendiger und professioneller wirken.
- Information: Manchmal hilft es auch, Bugs zu identifizieren oder verdächtiges Verhalten aufzudecken.
Bevor wir loslegen, stelle sicher, dass du Roblox Studio auf deinem Computer installiert hast und mit den Grundlagen der Navigation und Objekterstellung vertraut bist. Ein grundlegendes Verständnis von Lua-Scripting (Variablen, Funktionen, Ereignisse) ist ebenfalls hilfreich, aber keine Voraussetzung, da wir alles ausführlich erklären werden.
Die Architektur unserer KM-Anzeige: Server und Client im Zusammenspiel
Um eine robuste und sichere KM-Anzeige zu erstellen, müssen wir das Zusammenspiel von Server- und Client-Seite verstehen. Kurz gesagt:
- Der Server ist für die Erkennung der Tötungen verantwortlich. Er weiß genau, wann ein Spieler stirbt und wer dafür verantwortlich ist.
- Die Clients (die Bildschirme der einzelnen Spieler) sind für die Anzeige der Nachrichten verantwortlich. Der Server muss den Clients mitteilen, dass ein Kill stattgefunden hat.
Dieses Prinzip wird durch RemoteEvents
realisiert – spezielle Objekte, die es dem Server ermöglichen, Informationen an Clients zu senden und umgekehrt. So stellen wir sicher, dass jeder Spieler die Kill Message erhält, ohne dass der Client selbst die Kills erkennen muss (was unsicher wäre).
Schritt 1: Das UI-Design – Die Leinwand für unsere Nachrichten
Zuerst benötigen wir die visuellen Elemente für unsere Nachrichten. Wir werden ein einfaches Textfeld erstellen, das wir später klonen und mit den entsprechenden Informationen füllen werden.
- Öffne dein Spiel in Roblox Studio: Gehe zu einem leeren Basisplatz oder einem vorhandenen Spiel.
-
Füge ein ScreenGui hinzu:
- Navigiere im
Explorer
-Fenster zuStarterGui
. - Klicke auf das
+
-Zeichen nebenStarterGui
und wähleScreenGui
aus. Benenne es inKillMessageUI
um. - Ein
ScreenGui
ist ein Container für alle UI-Elemente, die auf dem Bildschirm des Spielers angezeigt werden.
- Navigiere im
-
Füge einen Frame als Container hinzu:
- Klicke auf das
+
-Zeichen nebenKillMessageUI
und füge einenFrame
hinzu. Benenne ihn inMessageContainer
um. - Dieser Frame wird als Behälter für alle unsere Kill Messages dienen. Es ist eine gute Praxis, ihn so zu positionieren und zu dimensionieren, dass er nicht den gesamten Bildschirm einnimmt, sondern einen Bereich, in dem die Nachrichten gestapelt werden können (z.B. oben rechts).
- Passe die Eigenschaften im
Properties
-Fenster an:Size:
Zum BeispielUDim2.new(0.3, 0, 0.6, 0)
(30% der Bildschirmbreite, 60% der Bildschirmhöhe).Position:
Zum BeispielUDim2.new(0.7, 0, 0, 0)
(Oben rechts).BackgroundTransparency:
1
(damit der Container unsichtbar ist, nur die Nachrichten sichtbar sind).ClipsDescendants:
true
(damit Nachrichten, die über den Rand des Containers hinausgehen, abgeschnitten werden).
- Klicke auf das
-
Füge ein UIListLayout hinzu (Optional, aber empfohlen):
- Klicke auf das
+
-Zeichen nebenMessageContainer
und fügeUIListLayout
hinzu. - Dieses Layout-Element hilft uns, die Nachrichten automatisch untereinander anzuordnen.
- Stelle im
Properties
-FensterFillDirection
aufVertical
undHorizontalAlignment
aufRight
ein. Du kannst auchPadding
hinzufügen, um etwas Platz zwischen den Nachrichten zu lassen.
- Klicke auf das
-
Erstelle die Vorlage für die Kill Message:
- Klicke auf das
+
-Zeichen nebenMessageContainer
und füge einTextLabel
hinzu. Benenne es inKillMessageTemplate
um. - Dies ist unser Prototyp. Wir werden ihn später klonen, um jede neue Kill Message zu erstellen.
- Passe die Eigenschaften an (sehr wichtig für die Ästhetik!):
Size:
Zum BeispielUDim2.new(1, 0, 0.1, 0)
(100% der Breite des Containers, 10% der Höhe).BackgroundTransparency:
0.8
(leicht durchsichtig).BackgroundColor3:
Wähle eine dunkle Farbe (z.B. Schwarz oder Dunkelgrau).TextColor3:
Wähle eine helle Farbe (z.B. Weiß).Font:
Wähle eine lesbare Schriftart (z.B.GothamBold
).TextSize:
Zum Beispiel20
oder24
.TextScaled:
true
(passt die Textgröße automatisch an).TextStrokeTransparency:
0
(macht den Text umrandet und besser lesbar).TextXAlignment:
Right
(der Text soll rechtsbündig sein, da die Nachricht von rechts kommt).Text:
Lösche den Standardtext oder setze ihn auf einen Platzhalter wie „Spieler hat Spieler getötet”.Visible:
false
(dies ist eine Vorlage und soll nicht standardmäßig sichtbar sein).
- Klicke auf das
Schritt 2: Das RemoteEvent – Die Kommunikationsbrücke
Um Server und Client miteinander zu verbinden, brauchen wir ein RemoteEvent
.
-
Füge ein RemoteEvent hinzu:
- Navigiere im
Explorer
zuReplicatedStorage
. - Klicke auf das
+
-Zeichen und wähleRemoteEvent
aus. Benenne es inKillEvent
um. ReplicatedStorage
ist der perfekte Ort fürRemoteEvents
, da er sowohl vom Server als auch von allen Clients aus zugänglich ist.
- Navigiere im
Schritt 3: Server-Logik – Kills erkennen und mitteilen
Jetzt kommt der spannende Teil: Die Erkennung, wann ein Spieler stirbt, und die Ermittlung, wer ihn getötet hat. Dies geschieht auf dem Server.
-
Erstelle ein Server Script:
- Navigiere im
Explorer
zuServerScriptService
. - Klicke auf das
+
-Zeichen und füge einScript
hinzu. Benenne es inKillDetector
um. ServerScriptService
ist der ideale Ort für Skripte, die nur auf dem Server laufen sollen.
- Navigiere im
-
Füge den folgenden Code in das
KillDetector
-Skript ein:-- KillDetector (Server Script in ServerScriptService) local ReplicatedStorage = game:GetService("ReplicatedStorage") local Players = game:GetService("Players") local KillEvent = ReplicatedStorage:WaitForChild("KillEvent") -- Warte, bis das RemoteEvent verfügbar ist local function onCharacterAdded(character) local humanoid = character:WaitForChild("Humanoid") local player = Players:GetPlayerFromCharacter(character) if not player then return end local function onHumanoidDied() local killer = nil local weapon = nil -- Versuchen, den Killer zu identifizieren local tagHumanoid = humanoid:FindFirstChild("creator") -- Suche nach dem "creator" Tag if tagHumanoid and tagHumanoid:IsA("ObjectValue") then local potentialKillerHumanoid = tagHumanoid.Value if potentialKillerHumanoid and potentialKillerHumanoid:IsA("Humanoid") then killer = Players:GetPlayerFromCharacter(potentialKillerHumanoid.Parent) if tagHumanoid.Parent and tagHumanoid.Parent:IsA("Tool") then weapon = tagHumanoid.Parent.Name end end end -- Standardfall: Wenn kein Killer gefunden wurde (z.B. Fallschaden, Ertrinken, Roblox-Standardtod) if not killer then killer = "Umwelt" -- Oder jeder andere Standardtext, der angezeigt werden soll weapon = "Umgebungsschaden" -- Optional: Überprüfe auf spezielle Todesursachen, z.B. durch Explosionen local lastDamaged = humanoid:FindFirstChild("LastDamaged") if lastDamaged and lastDamaged.Value then local playerThatDamaged = Players:GetPlayerFromCharacter(lastDamaged.Value) if playerThatDamaged then killer = playerThatDamaged weapon = "Unerwarteter Tod" -- Oder ähnliches end end end local victim = player -- Der Spieler, dessen Humanoid gestorben ist -- Sende die Kill-Informationen an alle Clients if killer and victim then local killerName = (typeof(killer) == "Instance" and killer.Name) or killer local victimName = victim.Name KillEvent:FireAllClients(killerName, victimName, weapon) end end humanoid.Died:Connect(onHumanoidDied) end -- Verbinde eine Funktion mit dem PlayerAdded-Ereignis Players.PlayerAdded:Connect(function(player) player.CharacterAdded:Connect(onCharacterAdded) end) -- Wenn Spieler bereits im Spiel sind, während das Skript geladen wird for _, player in ipairs(Players:GetPlayers()) do if player.Character then onCharacterAdded(player.Character) end player.CharacterAdded:Connect(onCharacterAdded) end
-
Erklärung des Server-Codes:
Players.PlayerAdded:Connect(...)
: Dieses Ereignis wird ausgelöst, wenn ein neuer Spieler dem Spiel beitritt.player.CharacterAdded:Connect(onCharacterAdded)
: Für jeden Spieler verbinden wir uns mit demCharacterAdded
-Ereignis. Dies wird ausgelöst, wenn der Charakter des Spielers (also sein Avatar) im Spiel erscheint (z.B. beim Spawnen oder Respawn).onCharacterAdded(character)
: In dieser Funktion suchen wir nach demHumanoid
des Charakters. DerHumanoid
ist der Teil des Charakters, der seine Lebenspunkte und seinen Tod verwaltet.humanoid.Died:Connect(onHumanoidDied)
: Wir verbinden eine Funktion mit demDied
-Ereignis des Humanoiden. Diese Funktion wird ausgelöst, wenn der Humanoid stirbt.- Killer-Erkennung: Das ist der kniffligste Teil. Roblox fügt manchmal ein
ObjectValue
namens „creator” in den Humanoid des Opfers ein, wenn es von einer Waffe getötet wurde. DiesesObjectValue
verweist auf den Humanoiden des Killers. Wir überprüfen, ob dieses Tag existiert, um den Killer zu identifizieren. - Waffen-Erkennung: Wenn ein
creator
-Tag gefunden wird und sein Parent einTool
ist, nehmen wir an, dass dies die Waffe war. - „Umwelt”-Kills: Wenn kein
creator
-Tag gefunden wird (z.B. bei Fallschaden, Explosionen ohne direkten Spielerbezug oder dem Roblox-Standardtod), setzen wir den Killer auf „Umwelt” oder einen ähnlichen Platzhalter. KillEvent:FireAllClients(killerName, victimName, weapon)
: Sobald wir alle Informationen haben, feuern wir unserRemoteEvent
ab. Dies sendet die Namen des Killers, des Opfers und der Waffe an *alle* verbundenen Clients.
Schritt 4: Client-Logik – Nachrichten anzeigen und animieren
Jetzt müssen wir die Nachrichten auf den Bildschirmen der Spieler empfangen und anzeigen. Dies geschieht über ein LocalScript
.
-
Erstelle ein LocalScript:
- Navigiere im
Explorer
zuKillMessageUI
(demScreenGui
, das du in Schritt 1 erstellt hast). - Klicke auf das
+
-Zeichen und füge einLocalScript
hinzu. Benenne es inKillMessageDisplay
um. - Ein
LocalScript
läuft nur auf dem Client des Spielers, was perfekt für die Steuerung der Benutzeroberfläche ist.
- Navigiere im
-
Füge den folgenden Code in das
KillMessageDisplay
-Skript ein:-- KillMessageDisplay (LocalScript in KillMessageUI) local Players = game:GetService("Players") local ReplicatedStorage = game:GetService("ReplicatedStorage") local TweenService = game:GetService("TweenService") local KillEvent = ReplicatedStorage:WaitForChild("KillEvent") -- Warte, bis das RemoteEvent verfügbar ist local killMessageUI = script.Parent -- Unser ScreenGui local messageContainer = killMessageUI:WaitForChild("MessageContainer") local messageTemplate = messageContainer:WaitForChild("KillMessageTemplate") local maxMessages = 5 -- Maximale Anzahl gleichzeitig angezeigter Nachrichten local messageDisplayTime = 5 -- Wie viele Sekunden eine Nachricht angezeigt wird local function displayKillMessage(killerName, victimName, weapon) -- Klonen der Vorlage local newMessage = messageTemplate:Clone() newMessage.Name = "KillMessage" newMessage.Parent = messageContainer newMessage.Visible = true -- Textformatierung local messageText = string.format("%s hat %s mit %s ausgeschaltet!", killerName, victimName, weapon) newMessage.Text = messageText -- Anpassung der Textfarbe für Killer/Opfer (optional, aber cool!) local killerColor = Color3.fromRGB(255, 200, 0) -- Goldgelb local victimColor = Color3.fromRGB(255, 0, 0) -- Rot local weaponColor = Color3.fromRGB(150, 150, 150) -- Grau local formattedText = messageText formattedText = formattedText:gsub(killerName, "" .. killerName .. "", killerColor.R*255, killerColor.G*255, killerColor.B*255) formattedText = formattedText:gsub(victimName, "" .. victimName .. "", victimColor.R*255, victimColor.G*255, victimColor.B*255) formattedText = formattedText:gsub(weapon, "" .. weapon .. "", weaponColor.R*255, weaponColor.G*255, weaponColor.B*255) newMessage.RichText = true -- Wichtig, um die HTML-Formatierung zu aktivieren newMessage.Text = formattedText -- Optional: Animation (Einblenden, Verschieben) newMessage.Position = UDim2.new(1, 0, newMessage.Position.Y.Scale, 0) -- Startet außerhalb des Bildschirms rechts local info = TweenInfo.new(0.5, Enum.EasingStyle.Quart, Enum.EasingDirection.Out) local goal = { Position = UDim2.new(0, 0, newMessage.Position.Y.Scale, 0) } -- Endposition (ganz links im Container) local tweenIn = TweenService:Create(newMessage, info, goal) tweenIn:Play() -- Timer zum Ausblenden und Entfernen der Nachricht delay(messageDisplayTime, function() -- Animation zum Ausblenden local fadeOutInfo = TweenInfo.new(0.5, Enum.EasingStyle.Quart, Enum.EasingDirection.Out) local fadeOutGoal = { BackgroundTransparency = 1, TextTransparency = 1, TextStrokeTransparency = 1 } local tweenOut = TweenService:Create(newMessage, fadeOutInfo, fadeOutGoal) tweenOut:Play() tweenOut.Completed:Wait() -- Warten, bis die Ausblendanimation abgeschlossen ist newMessage:Destroy() -- Nachricht entfernen -- Optional: Überprüfe, ob zu viele Nachrichten vorhanden sind und entferne die älteste while #messageContainer:GetChildren() - 1 > maxMessages do -- -1 wegen der Vorlage local oldestMessage = nil local lowestY = math.huge for _, child in ipairs(messageContainer:GetChildren()) do if child ~= messageTemplate and child:IsA("TextLabel") and child.Position.Y.Offset < lowestY then lowestY = child.Position.Y.Offset oldestMessage = child end end if oldestMessage then oldestMessage:Destroy() end end end) end -- Höre auf das KillEvent vom Server KillEvent.OnClientEvent:Connect(displayKillMessage)
-
Erklärung des Client-Codes:
KillEvent.OnClientEvent:Connect(displayKillMessage)
: DasLocalScript
wartet darauf, dass dasKillEvent
vom Server empfangen wird. Wenn das Event eintrifft, wird die FunktiondisplayKillMessage
ausgeführt.- Klonen der Vorlage:
messageTemplate:Clone()
erstellt eine exakte Kopie unseres vorbereitetenTextLabel
. Wir setzen seineParent
aufMessageContainer
, wodurch es sofort auf dem Bildschirm sichtbar wird (dankUIListLayout
, das es automatisch positioniert). - Textformatierung:
string.format
wird verwendet, um den Text der Nachricht zusammenzusetzen. - RichText (Optional): Dies ist ein fortgeschrittenes Feature, mit dem du HTML-ähnliche Tags im Text verwenden kannst, um Teile des Textes einzufärben oder zu formatieren. Wir nutzen es, um Killer, Opfer und Waffe farblich hervorzuheben. Setze
newMessage.RichText = true
, damit es funktioniert. - Animation (Optional, aber sehr empfohlen!): Wir verwenden den
TweenService
, um die Nachricht sanft einzublenden und nach einer bestimmten Zeit wieder auszublenden. Tweens sind flüssige Übergänge von einem Eigenschaftswert zu einem anderen.TweenInfo.new(...)
definiert die Dauer und den Stil der Animation.goal
ist ein Tabellenwert mit den Eigenschaften, zu denen wir animieren möchten.TweenService:Create(...)
erstellt das Tween-Objekt.tweenIn:Play()
startet die Animation.
delay(messageDisplayTime, function() ... end)
: Nach einer festgelegten Zeit (messageDisplayTime
) wird die Nachricht ausgeblendet und zerstört.- Nachrichtenbegrenzung: Die Schleife
while #messageContainer:GetChildren() - 1 > maxMessages do
sorgt dafür, dass nicht zu viele Nachrichten gleichzeitig auf dem Bildschirm sind. Die älteste Nachricht wird entfernt, wenn das Limit überschritten wird.
Schritt 5: Testen deiner KM-Anzeige
Jetzt ist es an der Zeit, deine Kreation zu testen! Dies ist ein entscheidender Schritt, um sicherzustellen, dass alles wie erwartet funktioniert und um eventuelle Fehler zu beheben.
-
Starte den Testmodus: Klicke im Roblox Studio oben auf der Leiste auf den
Play
-Button (das kleine Dreieck). Dies startet das Spiel im Studio-Fenster. -
Simuliere Kills:
- Du kannst einen Freund bitten, deinem Spiel beizutreten und sich gegenseitig zu töten.
- Oder, um es alleine zu testen: Wähle im
Test
-Reiter oben in Studio die OptionPlayers: 2
(oder mehr) aus. Klicke dann aufStart
. Dadurch werden mehrere Spieler-Instanzen im Studio erstellt, die du steuern kannst. - Greife einen anderen Charakter an oder nutze eine Waffe, um einen Kill zu erzielen.
- Beobachte die KM-Anzeige: Achte darauf, ob die Nachrichten erscheinen, korrekt formatiert sind und nach der festgelegten Zeit verschwinden. Überprüfe die Animationen.
Häufige Probleme und Fehlerbehebung
- Nachrichten erscheinen nicht:
- Überprüfe das
Output
-Fenster in Roblox Studio auf Fehlermeldungen. - Stelle sicher, dass die Namen der Skripte,
ScreenGui
,Frame
,TextLabel
undRemoteEvent
genau mit denen im Code übereinstimmen (Groß- und Kleinschreibung ist wichtig!). - Vergewissere dich, dass das
KillDetector
-Skript inServerScriptService
und dasKillMessageDisplay
-Skript inKillMessageUI
(demScreenGui
) platziert sind. - Ist das
KillEvent
inReplicatedStorage
? - Ist
KillMessageTemplate.Visible
auffalse
gesetzt? (Sollte es sein, ist aber eine häufige Fehlerquelle, wenn man es aus Versehen auf true lässt).
- Überprüfe das
- Nachrichten erscheinen, sind aber nicht richtig formatiert:
- Überprüfe die
TextLabel
-Eigenschaften (TextScaled
,TextSize
,Font
,TextColor3
,BackgroundTransparency
). - Stelle sicher, dass
newMessage.RichText = true
im Client-Skript gesetzt ist, wenn du die Farbanpassung verwendest. - Kontrolliere die
string.format
-Zeile im Client-Skript auf Tippfehler.
- Überprüfe die
- Animationen funktionieren nicht:
- Stelle sicher, dass
TweenService
im Client-Skript richtig deklariert ist. - Überprüfe die
TweenInfo
-Parameter und diegoal
-Tabelle auf korrekte Werte.
- Stelle sicher, dass
- Zu viele Nachrichten stapeln sich / alte Nachrichten verschwinden nicht:
- Überprüfe die
delay()
-Funktion und die:Destroy()
-Aufrufe im Client-Skript. - Stelle sicher, dass die Logik zur Begrenzung der Nachrichtenanzahl (
maxMessages
) korrekt ist. - Wenn du
UIListLayout
verwendest, überprüfe dessen Einstellungen wiePadding
undHorizontalAlignment
/VerticalAlignment
.
- Überprüfe die
- "Umwelt"-Kills werden nicht korrekt erkannt oder angezeigt:
- Die Erkennung von "Umwelt"-Kills ist komplexer. Der bereitgestellte Code fängt einige Basisfälle ab. Wenn du spezifischere Todesursachen (z.B. Lava, fallende Blöcke) erkennen möchtest, müsstest du diese Fälle in deinem Server-Skript individuell behandeln, indem du Kollisionen oder andere Ereignisse überwachst, die zu Schaden führen.
Zusätzliche Anpassung und Erweiterungen
Die von uns erstellte KM-Anzeige ist ein solides Fundament. Hier sind einige Ideen, wie du sie erweitern und an dein Spiel anpassen kannst:
- Soundeffekte: Spiele einen kurzen Soundeffekt ab, wenn eine Kill Message angezeigt wird.
- Icons: Füge kleine Icons neben dem Killernamen, Opfernamen oder der Waffe hinzu.
- Spezielle Kills: Implementiere spezielle Nachrichten für Headshots, Multi-Kills oder Rache-Kills.
- Teamfarben: Wenn dein Spiel Teams hat, färbe die Namen der Spieler basierend auf ihrer Teamzugehörigkeit ein.
- Scrollende Nachrichten: Wenn du sehr viele Nachrichten hast, könntest du einen
ScrollingFrame
alsMessageContainer
verwenden. - Animationseffekte: Experimentiere mit verschiedenen
EasingStyles
undEasingDirections
für die Tweens, um einzigartige Animationen zu erstellen. Du könntest auch Partikel-Effekte oderImageLabels
als Hintergrund für die Nachrichten hinzufügen.
Fazit
Herzlichen Glückwunsch! Du hast nun gelernt, wie man eine funktionierende KM-Anzeige in Roblox Studio erstellt. Du hast die Grundlagen des UI-Designs gemeistert, das Zusammenspiel von Server- und Client-Skripten durch RemoteEvents verstanden und sogar erste Schritte in Richtung UI-Animation mit TweenService unternommen. Dieses Wissen ist nicht nur für Kill Messages nützlich, sondern für die Entwicklung einer Vielzahl interaktiver Features in deinen Roblox-Spielen.
Erinnere dich daran, Übung macht den Meister. Experimentiere mit den Werten, probiere neue Designs aus und scheue dich nicht, Fehler zu machen. Jeder Fehler ist eine Lernchance. Viel Erfolg bei der weiteren Entwicklung deiner erstaunlichen Roblox-Spiele!