Streaming: League of Legends Ingame Alerts

League of Legends ist nach wie vor das meistgestreamte Spiel auf Twitch. Durch die geringen Systemanforderungen und das sehr gute Free-to-Play Modell zieht das Spiel extrem viele Spieler und somit auch Streamer an. Mit unserem neuen Tool können wir Ingame Alerts erstellen, die durch Ereignisse im Spiel ausgelöst werden!

Installation

Das Tool selbst benötigt keine Installation. Um den Webserver direkt zu starten, müssen wir einfach nur die .exe-Datei im entpackten Ordner öffnen. Das Konsolenfenster zeigt uns dann, unter welcher Adresse die Seite erreichbar ist. Falls wir das Tool nicht bei jedem Stream manuell starten wollen oder das Konsolenfenster stört, können wir auch einen dauerhaften Server in Windows einrichten. Die Vorgehensweise dazu ist im Abschnitt „IIS Einrichtung“ beschrieben.

Für die Ausführung des Tools benötigt lediglich ihr .NET 6 von Microsoft.
Download .NET 6

Einrichtung

Die Konfiguration des Tools läuft komplett über den Webbrowser. Je nach Installationsart (.exe-Datei oder IIS) lässt sich die Weboberfläche über https://localhost:5001 oder http://localhost:80 (80 entspricht dabei dem Port, den wir im IIS-Manager festgelegt haben).

In der linken Menüleiste finden wir den zwei Menüpunkte:

Live

Die Live-Seite wird später in OBS eingebunden. Hier findet das Auslesen sowie die Darstellung der eingestellten Alerts und Informationen statt. Außerdem kann es durch die Konsole auch zur Fehlersuche verwendet werden, wenn etwas nicht so funktioniert wie gewünscht.

Settings

Auf der Settings-Seite hinterlegen wir sowohl unsere allgemeinen Einstellungen als auch die hinterlegten Konfigurationen für die Trigger und Displays. Ein Trigger legt die Regeln fest, die erfüllt sein müssen, damit ein Alert ausgelöst wird. Ein Display ist eine „Formel“, die bestimmte Informationen aus dem laufenden Spiel dauerhaft darstellt.

Allgemeine Einstellungen

In den allgemeinen Einstellungen können wir das Intervall für den Abruf der Daten hinterlegen. Hier empfiehlt sich ein Wert von 500ms. Das Tool fragt dann zwei mal pro Sekunde die Daten von der Game-Schnittstelle ab und kann recht schnell auf eingehende Events reagieren. Außerdem können wir festlegen, dass die Live-Seite automatisch startet, sobald sie aufgerufen wird. Für das Einbinden in OBS ist diese Einstellung Pflicht, weil sonst keine Daten abgerufen werden und auch nicht angezeigt werden.

Trigger

Trigger prüfen, ob die eingestellten Voraussetzungen erfüllt sind, um ein Bild, Gif oder Video abzuspielen. Die Konfiguration erfolgt mithilfe der Event-Daten von der Game Schnittstelle. Riot Games hat ein Beispielfile bereitgestellt, um die möglichen Werte der einzelnen Felder einzusehen.

Event-Beispieldaten

Falls wir viele Trigger-Dateien haben, können wir diese auch manuell in den Ordner verschieben, anstatt über den Upload-Button zu arbeiten. Die Dateien müssen in den Ordner wwwroot/triggerfiles. Hier können wir auch nachsehen, welche Dateien bereits vorhanden sind oder falls wir einen Dateinamen vergessen haben.

Die Felder „EventName“ bis „AcingTeam“ sind dabei die Felder für die Schnittstelle, die Felder „File“, „IsVideo“ und „Duration“ sind die Felder des Tools.

Im Feld „File“ wird der Dateiname der zuvor über den Upload-Button hochgeladenen Datei eingegeben. Falls es sich dabei um ein Video handelt, muss zusätzlich der Haken bei „IsVideo“ gesetzt werden. Die „Duration“ bestimmt, wie lange die Datei angezeigt werden soll.

Wenn wir nun einen Alert erstellen wollen, der bei einem Pentakill von uns das Bild „Pentakill.jpg“ für 5 Sekunden anzeigt, müssen wir folgende Felder befüllen:

EventName: Multikill
KillerName: [me]
KillStreak: 5
File: Pentakill.jpg
Duration: 5000

Wenn wir diesen Alert zusätzlich nur dann abspielen wollen, wenn wir Yasuo spielen, müssen wir bei KillerName das [me] durch [me(Yasuo)] ersetzen.

Displays

Displays können auf die gesamten Daten der Schnittstelle zugreifen. Hiermit lässt sich beispielsweise eine CS/Minute Anzeige oder die Live-Berechnung der K-D-A realisieren. Dies funktioniert über Formeln. Eine Formel hat folgende Elemente:

Schnittstellendaten: Diese Daten kommen von der Schnittstelle und werden in [eckigen Klammern] definiert.
Mathematische Ausdrücke: Damit können die ausgelesenen Daten „gerechnet“ werden. Die Definition erfolgt in {geschweiften Klammern}.

Für eine CS/Min- Anzeige würde die Formel so aussehen:

{[activePlayer.scores.creepScore]/([gameData.gameTime]/60)} CS/Min

Wir lesen also den aktuellen CS-Wert aus und teilen ihn durch die Spielzeit in Sekunden geteilt durch 60, um die Minuten zu erhalten.

Auch für die gesamten Daten der Schnittstelle hat Riot Games wieder eine Beispieldatei bereitgestellt.

Leider liefert der CreepScore-Wert von der Schnittstelle aktuell nur die Werte abgerundet auf 10. Die Entwickler sind darüber informiert, wir wissen aber nicht, ob in Zukunft exakte Werte zurückgegeben werden.

Quelle in OBS hinzufügen

Um die konfigurierten Bereiche in OBS (oder Streamlabs OBS) sichtbar zu machen, arbeiten wir mit der Quelle „Browser“. Diese Quelle stellt eine Website direkt in der Szene dar und ist somit ideal für externe Inhalte. Wir fügen also über das „+“-Symbol eine neue Browser-Quelle hinzu und vergeben einen beliebigen Namen.

Unter URL tragen wir die Adresse (inkl. Port) unserer Live-Seite ein. Bei Breite und Höhe sollten wir die Größe unserer OBS-Leinwand verwenden. In den meisten Fällen ist dies 1920×1080. Um bei Verwendung von Video-Files die Lautstärke über OBS steuern zu können, sollten wir außerdem den Haken bei „Audio über OBS steuern“ setzen. Nach einem Klick auf Okay sieht das Resultat in OBS etwa so aus:

OBS setzt den Hintergrund automatisch auf Transparent, dadurch sieht das Resultat erstmal etwas befremdlich aus. Um die Anzeige auf den Alert-Bereich zu begrenzen, müssen wir den Darstellungsbereich der BrowserSource zuschneiden. Dazu ziehen wir mit gedrückter Alt-Taste (wie im OBS Basis Guide beschrieben) an den äußeren Griffpunkten nach innen. Solange kein Alert aktiv ist, ist der Bereich dann transparent und zeigt erst dann einen Inhalt, wenn ein Trigger ausgelöst wurde. Nun können wir den Bereich beliebig verschieben.

IIS Einrichtung

Um den Server dauerhaft im Hintergrund laufen zu lassen, benötigen wir den IIS von Microsoft. Dieser lässt sich ganz einfach über die Windows Features installieren. Hierfür setzen wir den „Haken“ (bzw. Kasten) bei Internetinformationsdienste.

Damit der IIS auch mit modernen .NET Core / .NET Standard-Anwendungen umgehen kann, benötigen wir außerdem das Hostingbundle von Microsoft.

Download .NET Hostingbundle

Die heruntergeladene Datei muss einfach nur per Doppelklick ausgeführt werden, eine weitere Konfiguration ist nicht notwendig.

Sobald das Hostingbundle installiert ist, können wir den IIS-Manager über die Windows Suchfunktion öffnen. Dort sehen wir bereits unseren PC in der linken Leiste. Die bereits existierende Default-Site können wir löschen und anschließend per Rechtsklick auf Sites -> Website hinzufügen eine neue Website anlegen.

In dem Dialog legen wir einen Namen für die Website fest und geben den Pfad an, in dem unsere Anwendung gespeichert ist. Weitere Einstellungen sind nicht notwendig, solange keine andere Anwendung für die Verwendung von Port 80 installiert ist.

Nun lässt sich die Seite im Browser über https://localhost/settings öffnen. Den IIS-Manager können wir nun schließen, ab jetzt läuft alles automatisch im Hintergrund und muss nicht weiter angefasst werden.