← Alle Beiträge

Devlog 8 Min. Lesezeit

Ein Handballspiel von Grund auf entwerfen

Devlog #1: warum es noch immer kein Handballspiel gibt, das sich wie Handball anfühlt, und die ersten Entscheidungen hinter Hyper Handball — Arcade oder Simulation, Kamera, Feldgröße, Teamgröße und Technik.

Tag 1 neben Tag 93: drei Kreise auf einem leeren Feld, dann eine volle Partie in einer vollen Halle.

Handball begleitet mich, seit ich ein Kind bin. Für mich war es immer mehr als nur ein Sport. Aber eines hat mir immer gefehlt: ein Videospiel, das sich wirklich wie Handball anfühlt.

Damit das klar ist: Ich rede nicht von einer AAA-Produktion mit Lizenzen und Motion Capture. Sondern von einem Spiel, das einfach Spaß macht, allein oder mit Freunden auf dem Sofa. Und wenn man sich die vielen „Gibt es ein gutes Handballspiel?“-Threads ansieht, bin ich damit nicht allein.

Es gab schon Versuche, nur sind die nie so ganz angekommen. Also habe ich vor drei Monaten beschlossen, es selbst zu probieren. Dieser Beitrag ist die Textfassung der ersten Folge des Hyper-Handball-Devlogs. Er handelt von den Entscheidungen, die vor allem Spaßigen kommen: Was für ein Spiel ist das, wo steht die Kamera, wie groß ist das Feld, wie viele Spieler stehen darauf, und womit wird es gebaut?

Tag 1, Tag 7, Tag 93

Irgendwo muss man ja anfangen. Hier ist mein Anfang und der Stand eine Woche später.

Tag 1 Zwei Spielerkreise und ein Torwartkreis passen sich den Ball zu.
Tag 7 Figuren, eine Halle, Tore. Die erste Woche.
Tag 1 hatte keine Figuren, keine Halle und keine Regeln, nur Kreise und einen Ball. Tag 7 hatte schon Tore und ein sehr lautes „TOR!!!“.

Fertig ist das Spiel noch lange nicht, aber es hat einen weiten Weg hinter sich. Wie es heute aussieht, nach dreiundneunzig Tagen, steht am Ende dieses Beitrags.

Arcade oder Simulation?

Ich glaube, jedes Sportspiel muss zuerst eine Kernfrage beantworten: Arcade oder Simulation?

Arcade macht sofort Spaß: riesige Sprünge, verrückte Würfe, Action ohne Pause. Treibt man es aber zu weit, fühlt es sich nicht mehr nach Handball an. Es wird ein beliebiges Ballspiel, das zufällig Handballtore hat.

Simulation fühlt sich echt an. Aber sie kostet Monate, wenn nicht Jahre an Spieldesign, Modellierung, Motion Capture und so weiter. Bei einem so schnellen und komplexen Sport wie Handball würde das ewig dauern.

ARCADESIMULATIONhohe Sprünge · Trickwürfe · Actionauthentisch · realistisch · aufwendigHYPER HANDBALL◀ zu weit: kein Handball mehrzu weit: dauert ewig ▶

Mit Hyper Handball ziele ich deshalb auf die Mitte: ein 2D-Spiel, das man sofort versteht, schnell und spaßig, aber mit genug Tiefe, dass es sich wirklich nach, na ja, Handball anfühlt. Tempogegenstöße, Täuschungen, der Kempa-Trick und ein Torwart, der den Werfer liest, gehören dazu. Eine Stunde Spielzeit als Standard nicht: Eine Partie hat zwei Halbzeiten zu je zwei Minuten, und wer will, streckt eine Halbzeit auf bis zu dreißig.

Die Kamera

Jedes gute Spiel braucht für mich einen soliden Kern. Und das erste Stück dieses Kerns ist die Kamera, denn sie entscheidet darüber, wie sich jede einzelne Eingabe anfühlt.

Warum die TV-Kamera nicht funktioniert

Bei einer Fernsehübertragung steht die Hauptkamera auf Höhe der Mittellinie und schwenkt von dieser festen Position aus. Zum Zuschauen ist das großartig, im Spiel funktioniert es nicht. Wegen der Perspektive laufen die Feldlinien schräg über den Bildschirm, sobald die Kamera zu einem Tor schwenkt. Drückst du „links“, läuft dein Spieler an der Seitenlinie entlang, und die geht auf dem Bildschirm schräg nach links oben. Der Daumen sagt links, die Augen sehen schräg. Das fühlt sich einfach falsch an.

←←TV-KAMERA„Links“ läuft schrägHYPER HANDBALL„Links“ ist linksläufterwartetläuft
Dieselbe Taste, zwei Kameras. In der Perspektive folgt „links“ den Feldlinien, in der flachen Ansicht deinem Daumen.

Stattdessen: eine mitfahrende Kamera

Ich nutze stattdessen die mitfahrende Kamera, die du vermutlich aus anderen Sportspielen kennst: eine flache Ansicht des Felds, in der links auch links ist, und eine Kamera, die mit dem Spiel mitfährt. Im Grunde folgt sie dem Ball. Eine Kamera, die am Ball klebt, wirkt aber nervös, weil jeder Pass das ganze Bild herumreißt. Ein paar Schwellen und Kniffe sorgen dafür, dass es sich natürlich anfühlt:

ANGRIFFDEIN BILD1234
  1. 1 Vorlauf. Solange eine Mannschaft den Ball hat, zielt die Kamera 4 Meter vor ihn, in Richtung des Tors, auf das sie angreift.
  2. 2 Quer nur halb. Zur Seite folgt sie nur der halben Bewegung des Balls. Ein Pass von Außen zu Außen schwenkt nicht das ganze Bild.
  3. 3 Glätten. Sie gleitet ihrem Ziel hinterher, statt zu springen: 63 % des Wegs nach 0,4 s, 95 % nach 1,2 s.
  4. 4 Ränder. Am Ende der Halle bleibt sie stehen. Hinter die Hallenwand schaut man nie.

Das Feld

40 × 20 Meter, ist doch klar?

Ein echtes Handballfeld ist 40 mal 20 Meter groß, also nimmt man einfach diese Maße, oder? Tja, wie sich herausstellt, fühlt sich jede Bewegung auf einem Feld im Maßstab der Spieler seltsam langsam an, und die Kamera muss ständig nachfahren. Da muss etwas Besseres her.

Derselbe Lauf von Torraum zu Torraum. Links das Feld im echten Maßstab, rechts das Standardfeld, auf dem sich die Kamera kaum bewegt.

Standard: etwa 26 × 12 Meter

Ich habe verschiedene Größen ausprobiert und mich für ein Standardfeld von etwa 26 mal 12 Metern entschieden, gemessen an den Spielern. Klein genug, damit es schnell bleibt, groß genug für einen richtigen Tempogegenstoß. Der Lauf von Torraum zu Torraum schrumpft von 4,7 auf 2,9 Sekunden. Wer will, spielt trotzdem auf dem echten Feld, es ist nur nicht der Standard.

ECHTES FELD · 40 × 20 mSTANDARD · ≈ 26 × 12 m1,90 mVON TORRAUM ZU TORRAUMMaßstäblich4,7 sStandard2,9 s
Beide Felder und ein Spieler, alles im selben Maßstab.

Die Teamgröße

Wie du wahrscheinlich weißt, stehen bei einer echten Handballmannschaft sieben Spieler auf dem Feld: sechs Feldspieler und ein Torwart. In Hyper Handball sind es, zumindest vorerst, standardmäßig vier Feldspieler plus Torwart.

ECHTER HANDBALL6 + 1GKWBCBWPHYPER HANDBALL4 + 1GKWBBWCPW Außen · B Halb (Rückraum) · C Mitte · P Kreis · GK Torwart
Angriffsaufstellungen in einer Hälfte. Im Standard fallen Mitte und Kreis weg.

Vier passen besser zum kleineren Feld, und es macht einfach mehr Spaß: Mit weniger Spielern hat jeder öfter den Ball. Außerdem bleibt Raum für Dinge wie Zwei-Minuten-Strafen, ohne dass der Spielfluss zusammenbricht. Wer die echte Aufstellung samt Kreisläufer will, stellt 6 + 1 in den Einstellungen ein, und 3 + 1 gibt es für eine ganz schnelle Runde.

Die Technik

Kurz zur Technik. Ich habe über die Jahre mit vielen Programmiersprachen gearbeitet, aber TypeScript ist die, zu der ich immer wieder zurückkomme.

Deshalb nutze ich Phaser, ein Framework, mit dem man Spiele in TypeScript schreibt. Spiellogik und Physik laufen auf der CPU, die Grafik zeichnet die GPU über WebGL. Während der Entwicklung läuft das Spiel lokal im Browser. Für die Veröffentlichung packe ich es mit Electron in eine Desktop-App, damit es als normales Programm unter Windows, Linux und macOS läuft und so auch auf Steam funktioniert.

Geschrieben in

TS TypeScript

Spiele-Framework

PHASER 4

CPU Spiellogik und Physik, feste Simulation mit 60 Hz
GPU Grafik über WebGL

Läuft als

Browser Entwicklung mit Vite, dazu die Web-Demo
Electron Desktop-App für Windows, macOS und Linux

Erscheint auf

Web hyperhandball.com/demo
Steam Windows · macOS · Linux
Aus einer TypeScript-Codebasis in den Browser und auf den Desktop.

Ein schöner Nebeneffekt der Web-Technik: Die Demo auf dieser Seite ist genau dasselbe Spiel, direkt in deinem Browser.

Wie es weitergeht

In der nächsten Folge geht es um die Steuerung und die computergesteuerten Gegner. Da das der allererste Devlog ist, sag mir gern, was dich interessiert. Ideen für das Spiel kannst du in die Kommentare unter dem Video schreiben.

Ach, fast vergessen: Hier ist die aktuelle Version des Spiels, ungefähr drei Monate nach dem Start.

Tag 93: die letzten Sekunden einer engen Partie, Deutschland gegen Dänemark.