Google Chrome: voll unterstütztMicrosoft Edge: voll unterstütztMozilla Firefox: teilweise unterstützt
Unterstützte Geräte:
Desktop: voll unterstütztMobile: voll unterstützt
Verwendete Technologien:
Vanilla JavascriptWebsocketNodeJSHTML5CSS3
Worum geht’s?
DOM Tanks ist ein simples Spiel, das auf die schnelle bidirektionale Verbindung zwischen Server und Clients mittels Websockets setzt.
Dabei sendet der Client lediglich Befehle wie Richtungswechsel und Schießen. Der Server validiert diese und ermittelt neue Positionsdaten, erstellt Geschosse und berechnet ggf. Kollisionen. Diese neuen Daten schickt der Server jeden Spielframe im JSON Format an alle Clients. (Die Rohdaten kann man sich anschauen, indem man in der Adressliste #debug als Hash einsetzt.) So werden mögliche Konflikte zwischen Clients aufgrund von Laufzeitunterschieden vermieden und Cheaten auf Clientseite zum Großteil unterbunden.
Auf Clientseite wird in kein Canvas gerendert sondern alle Elemente sind tatsächliche DOM Elemente, in diesem Fall ausschließlich DIVs. (Daher der Name)
Kann ich das Testen?
Na klar! Einfach dem Link folgen: DOM Tanks
Mit WASD oder den Pfeiltasten wird der Tank gesteuert und mit der Maus wird gezielt und geschossen. Bei Eliminierung oder Bugs muss die Seite bei aktuellem Entwicklungsstand neu geladen werden. Den Spielernamen merkt sich der Browser session-basiert.
Während der Client-Quellcode einfach über die Browserkonsole gesichtet werden kann, ist der Server-Code weder sichtbar noch manipulierbar durch den Nutzer. Bei Interesse kann eine Kopie des Server-Codes hier eingesehen werden:
Aktuell gibt es noch einen Bug mit der Steuerung in Firefox, weshalb ich das Testen auf Chromium-basierten Browsern empfehle.
Auf design-technischer Ebene wurde bisher nur das Nötigste umgesetzt, mögliche Ergänzungen für die Zukunft sind Scoreboard, Spielertabelle, Items zum Einsammeln und sogar Computergegner.
Auf code-technischer Ebene ist die Basis des Spiels aktuell eine Interval-Funktion, die die Daten mit maximal 30 FPS zu den Spielern sendet. Dabei werden mittels Delta Time auch mögliche Laufzeitunterschiede bei der Berechnung auf dem Server ausgeglichen. Dieser Ausgleich findet jedoch noch nicht auf dem Client statt, sodass eine schlechte Internetverbindung zu Fluktuationen in der Spielgeschwindigkeit führen kann.
Das Austauschen von Informationen zwischen Server und Clients ist in soweit optimiert, dass nur bei einer Änderung im Spiel (z.B. Bewegung oder Schießen) ein Datenpaket gesendet wird. Allerdings werden von Server-Seite aus bei einer Änderung alle Spielerpositionen an die Clients gesendet, auch wenn die Änderung nur von einem Client ausgeht. Das könnte insofern weiter optimiert werden, dass redundante Spielerdaten erst gar erst gar nicht mitgesendet werden.
RamDOM
Unterstützte Browser:
Google Chrome: voll unterstütztMicrosoft Edge: voll unterstütztMozilla Firefox: voll unterstützt
Unterstützte Geräte:
Desktop: voll unterstütztMobile: voll unterstützt
Verwendete Technologien:
Vanilla JavascriptHTML5CSS3
Worum geht’s?
RamDOM ist ein Minispiel in Form eines Bookmarklets. Der Nutzer kann im Vorhinein mehrere Optionen wie z. B. einen CSS-Selektor festlegen und sich den Quellcode in ein Lesezeichen speichern. Der Javascript Code kann dann mit einem Klick auf jeder* Website ausgeführt werden. Im Falle von RamDOM "versteckt" sich der Schafbock (engl. ram) hinter einem zufälligen DOM-Element auf der Website und lugt alle paar Sekunden hervor, um dem Spieler einen Hinweis zu geben. Entdeckt der Spieler den Bock und geht mit der Maus über sein Versteck (bzw. auf mobilen Geräten tappt der Nutzer auf das Versteck), so rennt der Bock los und muss mittels Klick vom Spieler gefangen werden. Schafft der Spieler das, hat er gewonnen und das Spiel endet. Andernfalls ist der Bock wieder versteckt.
* Einige Seiten wie z.B. YouTube sind gegen "injizierte" Skripte geschützt und werfen beim Ändern von Attributen wie innerHTML einen Fehler. Auf diesen Seiten funktioniert das Skript (noch) nicht.
Kann ich das Testen?
Na klar! Einfach das unten stehende Formular nutzen um Anpassungen am Code vorzunehmen, oder den Code direkt anpassen. Dann den 🐏-Link in die Lesezeichenleiste ziehen und auf beliebiger* Website ausprobieren.
Was könnte verbessert werden?
Bugs sind mir bisher keine gekannt. Das Spiel ist aber auch noch sehr simpel in seiner Funktionalität. Es könnten noch Features hinzugefügt werden zB wie ein Hinweis, wenn der Bock noch gar nicht im Bild ist (und gescrollt werden muss), oder wenn das Script kein geeignetes DOM-Element finden konnte. Letzterer Fall wird aktuell nur in der Browserkonsole ausgegeben.
Der Bock könnte auch noch mehr "Pfade" bekommen, die er entlang rennt, wenn er entdeckt wird. Und optional könnte der Bock auch Ton von sich geben.
Schwerpunkt der Ausbildung lag im Grafikdesign. Hier konnte ich tiefgehendes Wissen in den Themen Printmediengestaltung, Typografie, Fotografie, Farbenlehre, Marketing, Illustration, Design- und Kunstgeschichte erwerben.
Hier erweiterte ich mein Wissen in der Gestaltungslehre, konnte ein feines Gespür für Farben, Formen und Komposition entwickeln und qualifizierte mich mit der Fachhochschulreife für ein Bachelor-Studium.
Studium Screen Based Media
2014 – 2018 Abschluss: Bachelor of Arts
Berliner Hochschule für Technik – Abschlussnote: 1,47
Im Studium erhielt ich einen umfassenden Einblick in die Bereiche der Theorie, Konzeption, Gestaltung, Produktion und Technologie von professionell produzierten audiovisuellen Medien.
Schwerpunkte wurden hierbei in einer breit anwendbaren Methodik der Medien-Konzeption, -Gestaltung, -Produktion und -Technologie gesetzt.
Im Rahmen einer Projektarbeit erstellte in ein Drehbuch für einen Animationsfilm. Als Soloprojekt konnte ich anschließend die ersten Szenen in einer Heidelandschaft im Sauerland aufnehmen und darauffolgend die Hauptfigur und alle weiteren VFX-Elemente in Cinema 4D modellieren, texturieren, animieren und mit Adobe After Effects und DaVinci Resolve im Filmmaterial einfügen.
Schließlich spezialisierte ich mich in meiner Bachelor-Arbeit auf Echtzeit-3D-Inhalte in der Unreal Engine, die in voraufgezeichnete Videoaufzeichnungen eingebaut werden um Interaktivität im linearen Filmmedium zu ermöglichen.
Technical Art bei Ridiculous Games
2019 Remote
Um den Einstieg in die Games-Branche zu finden, engagierte ich mich nach dem Studium als Technical Artist / Level Designer beim Studio Ridiculous Games, einem Zusammenschluss aus Hobby-Spielentwicklern.
Das Projekt Scrapspire, ein First-Person-Shooter/Tower-Defense-Hybrid, entwickelt in der Unreal Engine 4, wurde leider nicht veröffentlicht. Im selben Jahr noch startete ich bei KAIKO Games in einer Level Designer Position.
Level Designer bei KAIKO GmbH
2019 – 2022 Frankfurt am Main
Während meiner Zeit bei KAIKO Games konnte ich entscheidend zum World Design, Lighting und Quest Design des Remasters Kingdoms of Amalur: Re-Reckoning mit dem neuen DLC Fatesworn beitragen.
Da ich hier auch für einen Teil der Organisation der outgesourcten Animationen verantwortlich war, konnte ich Erfahrungen im Outsourcing Management sammeln.
Vor meinem Wechsel zur Blankhans GmbH war ich bereits Teil der Planung und Entwicklung des Prototypen eines zweiten Projektes einer großen Franchise, das bis dato (Stand: Januar 2025) aber noch nicht veröffentlicht wurde.
Level Designer bei Blankhans GmbH
2022 – 2024 Remote
Den Großteil meiner Zeit bei Blankhans arbeitete ich als Level Designer am Open-World-Sandbox-Survival-Spiel Coreborn: Nations of the Ultracore.
Zu den Aufgaben zählten die kreative Planung, Erstellung und technische Optimierung von Open World Survival Level Design und Environment Art in der Unreal Engine 5. Dank meines umfassenden Verständnisses für technische als auch gestalterische Anwendungen konnte ich hier als wertvolles Bindeglied zwischen dem Art und Engineering Department agieren.
Leider musste die Blankhans GmbH nach 2 Jahren aus betriebswirtschaftlichen Gründen schließen.
Zertifizierung als JavaScript Entwickler
2024 – 2025 Zertifizierung durch Webmasters Europe e. V.
Nach der Insolvenz der Blankhans GmbH (und vieler weiterer deutscher Spieleschmieden in den Jahren 2023 und 2024) entschied ich mich in Hinblick auf den aktuellen Zustand der deutschen Games-Branche nach kurzer Zeit, ein weiteres berufliches Standbein zu etablieren und begann im Oktober eine Weiterbildung im Bereich Webdevelopment.
Schon seit meiner Jugend bin ich interessiert an aktuellen Webtechnologien und habe dieses Wissen immer wieder für die Erstellung und Anpassung privater Websites, Spiele-Clan-Foren und anderer Hobby-Seiten genutzt.
Im dreimonatigen Intensiv-Kurs von Webmasters Europe e.V. konnte ich nun tiefgehende Kenntnisse in Frontend- und Backendprogrammierung mit JavaScript, NodeJS, MongoDB & Mongoose, EJS, Websockets und den Frameworks Express, ReactJS und Phaser erwerben.