15. Februar 2016
Ronny Garde
0

So geht Spiel mit JavaFX

Mit JavaFX kann man vergleichsweise einfach ein Spiel entwickeln. Wie wir ein „Tower Defence“ Spiel programmiert haben, beschreibt im folgenden der erste Teil des Praktikumsberichts. Das Projekt diente als Einstieg in die Entwicklung von JavaFX Anwendungen.

supermarkt-kasse@saxonia-systems

So geht Spiel mit JavaFX

Wir – Martin Däbritz, Max Grosser und Ronny Garde (Studenten der HTW Dresden) – möchten kurz darstellen, was während unseres Pflicht-Praktikums bei der Saxonia Systems AG entstanden ist. Begonnen haben wir damit, uns in das GUI Framework JavaFX einzuarbeiten. Dabei gewannen wir einen groben Überblick über die einzelnen Features, indem wir ein kleines Tutorial durcharbeiteten, welches uns von Alexander Casall – unserem Betreuer – empfohlen wurde. Anschließend vertieften wir unsere Kenntnisse, indem wir selbstgewählte Programme umsetzten, wie zum Beispiel ein Programm zur Steuerung einer Supermarkt Kasse mit Touchdisplay.

Tower Defence

Als erstes größeres Projekt haben wir uns entschlossen ein „Tower Defence“ Spiel zu programmieren. Dabei geht es darum auf der Karte verschiedene Türme zu errichten, welche die Gegner daran hindern, an das Ende der Karte zu gelangen. Ziel des Projekts war es, die grafischen Möglichkeiten von JavaFX zu erproben, da wir diese für unser nächstes Projekt benötigten. Grundlegend besteht die Anwendung aus einem BorderPane, welches am oberen Bildschirmrand eine Statusanzeige enthält, auf der rechten Seite die Tower Auswahl, auf der linken Seite ein weiteres Panel zur Spielsteuerung und in der Mitte der Anwendung den Bereich für das eigentliche Spiel.

screenshot-spiel@saxonia-systems

Screenshot der Spieloberfläche.

tower-defence@saxonia-systemsDie Steuerung des Spiels läuft komplett über Transitions, einem Kernfeature von JavaFX. Es gibt vorgefertigte Transitions bspw. zur Verschiebung, Skalierung, Rotation und zum Aus-/Einblenden von Objekten. Zudem gibt es eine Transition, welche ein Shape an einem definierten Pfad entlang bewegt (PathTransition). Mithilfe dieser wurde die Bewegung der Gegner realisiert. Ziel der Gegner ist das „Schweinegehege“, welches die Leben des Spielers visualisiert.

Wenn die Gegner alle Schweine entführt haben, hat der Spieler verloren und es wird der erreichte Highscore angezeigt. Diesen Highscore kann man erhöhen, indem man mehr Gegner durch geschicktes Platzieren der Türme eliminiert. Sie erscheinen periodisch aus ihrem Bau und werden mit jeder „Welle“ stärker. Bei einer Transition kann man eine Methode definieren, die bei Beendigung jener aufgerufen wird („setOnFinished“). Darüber wurde bspw. die Steuerung der Gegner umgesetzt. Im folgenden Code-Auschnitt sehen Sie, wie ein neues Level gestartet wird:

creatureList.addListener(new ListChangeListener<Creature>() {
    @Override
    public void onChanged(javafx.collections.ListChangeListener.Change<? extends Creature> c) {
        if (creatureList.size() <= 0) {
            player.increaseLevel();
            nextWave(player.getPlayerLevel());
        }
    }
});

Die Animation der Monster und das periodische Feuern der Türme werden über einen (Animation-)Timer realisiert, welchen JavaFX ebenfalls mitbringt. Dieser ruft in einem definierten Intervall eine Methode auf.

final long startNanoTime = System.nanoTime();
creaturesAnimationTimer = new AnimationTimer() {
  @Override
  public void handle(long now) {
    double time = (now - startNanoTime) / 1000000000.0;
    creaturePattern = new ImagePattern(creatureAnimation.getFrame(t));
    rect.setFill(creaturePattern);
  }
};

Die Grafiken wurden in Eigenkreation erstellt und mit dem Open Source Bildbearbeitungsprogramm „GIMP“ editiert. Auch eine eigene Schriftart wurde im Programm eingebettet. Dies warf größere Probleme auf, welche wir aber am Ende durch Verwendung von CSS und durch ausreichend Motivation („Ich bin mir sicher Ihr bekommt das hin!“) lösen konnten. Wichtig ist, dass die @font-face-Regel(n) ganz am Anfang der CSS-Datei stehen:

@font-face {
        src: url('segoeui.ttf') format('truetype');
}

tower-defence-spiel@saxonia-systemsZu Beginn der Entwicklung war die Anwendung für den Desktop-Einsatz gedacht und wurde deshalb größtenteils mit MouseEvents realisiert. Jedoch sahen wir nach und nach Potential für eine Portierung auf mobile Geräte wie einem Samsung Tablet. Für diese waren einige Anpassungen nötig, wie zum Beispiel TouchEvents, responsives Layout und Verhalten bei unterschiedlichen Auflösungen. An dieser Stelle noch einmal ein großes Dankeschön an Stefan Heinze und Michael Hoppe, welche uns dabei geholfen haben die Anwendung auf Android und iOS lauffähig zu machen.

Ein großes Problem bei der Portierung war das Layout der Anwendung. Da zuerst kein responsives Design angedacht war, haben wir sehr viel mit AnchorPanes gearbeitet. Bei diesen hat jedoch die Skalierung nicht ausreichend funktioniert. Als Lösung bot sich die Ersetzung durch GridPane’s mit V- bzw. HBox‘en an, da man bei diesen das Verhalten bei Änderung der Fenstergröße besser spezifizieren kann.

Uns hat dieses Projekt sehr viel Spaß gemacht, da uns keine Grenzen gesetzt waren und wir alles ausprobieren konnten, was wir wollten. Besonders die Arbeit im Team hat uns viel Spaß gemacht. Da bei einem Spiel sehr viele verschiedene Sprachelemente zum Einsatz kommen, konnten wir uns sehr gut mit JavaFX auseinandersetzen und die Grenzen austesten. In späteren Projekten konnten wir viel von der gesammelten Erfahrung profitieren.

Ronny Garde ist Werksstudent und arbeitet im Bereich JavaFX für die Saxiona Systems AG in Dresden. In seiner Ausbildung zum Fachinformatiker (Anwendungsentwicklung) hat er größtenteils mit Webtechnologien (HTML 5, PHP, Ruby on Rails) gearbeitet. Bei der Saxonia Systems AG hat er das Pflichtpraktikum seines Studiums absolviert und moderne Anwendungen mit JavaFX umgesetzt.

Google+ 

TeilenTweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0