Introduzione a JavaFX per lo sviluppo del gioco

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

JavaFX è un cross-platform GUI toolkit per Java ed è il successore delle librerie Java Swing. In questo tutorial, esploreremo le caratteristiche di JavaFX che lo rendono facile da usare per iniziare a programmare giochi in Java.

Questa esercitazione si presuppone che sai già come scrivere il codice in Java. Se non, check out imparare Java per Android, introduzione alla programmazione con Java Computer: 101 e 201, Head First Java, Greenfoot o imparare Java nel modo più duro per iniziare.

Installazione

Se si sviluppano già applicazioni con Java, è probabilmente non necessario scaricare nulla: JavaFX è stato incluso con il pacchetto standard del JDK (Java Development Kit) dal JDK versione 7u6 (agosto 2012). Se non hai aggiornato l'installazione di Java in un istante, testa al Java Scarica sito Web per la versione più recente.

Classi base Framework

Creazione di un programma di JavaFX inizia con la classe di applicazione, da cui sono estese tutte le applicazioni JavaFX. La classe principale dovrà chiamare il metodo launch(), che si chiamerà quindi il metodo init () e quindi il metodo Start (), attendere il termine dell'applicazione e quindi chiamare il metodo Stop (). Di questi metodi, solo il metodo Start () è astratto e deve essere sottoposto a override.

La classe Stage è il livello superiore contenitore JavaFX. Quando un'applicazione viene avviata, una fase iniziale viene creata e passata al metodo di inizio dell'applicazione. Fasi di controllo proprietà di base della finestra ad esempio titolo, icona, visibilità, ridimensionamento, modalità a schermo intero e decorazioni; quest'ultimo viene configurato utilizzando StageStyle. Ulteriori fasi possono essere costruiti come necessario. Dopo una fase è configurata e il contenuto viene aggiunto, viene chiamato il metodo Show ().

Sapendo tutto ciò, possiamo scrivere un esempio minimo che avvia una finestra in JavaFX:

import javafx.application.Application;
import javafx.stage.Stage;

public class Example1 extends Application 
{
    public static void main(String[] args) 
    {
        launch(args);
    }

    public void start(Stage theStage) 
    {
        theStage.setTitle("Hello, World!");
        theStage.show();
    }
}

Strutturazione di contenuti

Contenuto in JavaFX (ad esempio testo, immagini e l'interfaccia utente di controllo) è organizzato utilizzando una struttura di dati ad albero conosciuta come un grafico di scena, che raggruppa e organizza gli elementi di una scena grafica.

JavaFX Scene Graph — Rappresentazione di un grafo di scena di JavaFX.

Un elemento generale di un grafo di scena in JavaFX è chiamato un nodo. Ogni nodo in un albero ha un nodo singolo "padre", con l'eccezione di un nodo speciale designato come la "radice". Un gruppo è un nodo che può avere molti elementi del nodo "figlio". Trasformazioni grafiche (traslazione, rotazione e scala) e gli effetti applicati a un gruppo si applicano anche ai suoi figli. I nodi possono essere in stile utilizzando JavaFX Cascading Style Sheets (CSS), abbastanza simile al CSS utilizzato per la formattazione di documenti HTML.

La classe di scena contiene tutti i contenuti per un grafico di scena e richiede una radice nodo da impostare (in pratica, questo è spesso un gruppo). È possibile impostare la dimensione di una scena in particolare; in caso contrario, la dimensione di una scena sarà automaticamente calcolata sul suo contenuto. Un oggetto di scena deve essere passato alla fase (con il metodo di setScene()) per poter essere visualizzati.

Rendering della grafica

Rendering della grafica è particolarmente importante per i programmatori di giochi! In JavaFX, l'oggetto Canvas è un'immagine in cui possiamo disegnare testo, forme e immagini, utilizzando l'oggetto GraphicsContext associato. (Per gli sviluppatori che hanno familiari con il toolkit Java Swing, questo è simile all'oggetto Graphics passato al metodo Paint () nella classe JFrame.)

L'oggetto GraphicsContext contiene una ricchezza di capacità di personalizzazione potente. Per scegliere i colori per disegnare forme e testo, è possibile impostare il tratto e il riempimento (interior) colori (confine), che sono oggetti Paint: può trattarsi di un'unica tinta unita, una sfumatura di definito dall'utente (LinearGradient o RadialGradient) o anche un ImagePattern. Si può anche applicare uno o più oggetti stile effetto, quali illuminazione, ombra o GaussianBlur e modificare i tipi di carattere predefinito utilizzando la classe Font.

La classe Image lo rende facile da caricare immagini da una varietà di formati di file e disegnarli tramite la classe GraphicsContext. È facile costrutto generato proceduralmente immagini utilizzando la classe WritableImage insieme le classi PixelReader e PixelWriter.

Utilizzando queste classi, possiamo scrivere un degno molto più "Hello, World"-esempio di stile come segue. Per brevità, includeremo solo il metodo Start () qui (potrai saltare le istruzioni di importazione e il metodo Main ()); Tuttavia, codice sorgente di lavoro completo può essere trovato nel repository di GitHub che accompagna questa esercitazione.

public void start(Stage theStage) 
{
    theStage.setTitle( "Canvas Example" );
        
    Group root = new Group();
    Scene theScene = new Scene( root );
    theStage.setScene( theScene );
        
    Canvas canvas = new Canvas( 400, 200 );
    root.getChildren().add( canvas );
        
    GraphicsContext gc = canvas.getGraphicsContext2D();
        
    gc.setFill( Color.RED );
    gc.setStroke( Color.BLACK );
    gc.setLineWidth(2);
    Font theFont = Font.font( "Times New Roman", FontWeight.BOLD, 48 );
    gc.setFont( theFont );
    gc.fillText( "Hello, World!", 60, 50 );
    gc.strokeText( "Hello, World!", 60, 50 );
    
    Image earth = new Image( "earth.png" );
    gc.drawImage( earth, 180, 100 );
        
    theStage.show();
}

Il ciclo del gioco

Poi, abbiamo bisogno di rendere i nostri programmi dinamici, che significa che lo stato del gioco cambia nel tempo. Implementeremo un ciclo di gioco: un ciclo infinito che aggiorna gli oggetti del gioco e rende la scena sullo schermo, idealmente ad un tasso di 60 volte al secondo.

Il modo più semplice per realizzare questo in JavaFX è utilizzando la classe di AnimationTimer, dove un metodo (denominato handle()) può essere scritto che sarà chiamato ad un tasso di 60 volte al secondo, o come vicino a tale tasso, è possibile. (Questa classe non deve essere utilizzato esclusivamente a scopi di animazione; è capace di molto di più).

Utilizzando la classe AnimationTimer è un po' difficile: poiché è una classe astratta, non può essere creato direttamente — la classe deve essere estesa prima di poter creare un'istanza. Tuttavia, per i nostri esempi semplici, estenderemo la classe scrivendo una classe anonima interna. Questa classe interna dovrà definire il metodo astratto handle (), che verrà passato un solo argomento: l'ora di sistema corrente in nanosecondi. Dopo aver definito la classe interna, abbiamo immediatamente richiamare il metodo Start (), che inizia il ciclo. (Il ciclo può essere interrotto chiamando il metodo Stop ()).

Con queste classi, possiamo modificare il nostro esempio "Hello, World", creazione di un'animazione composta dalla terra in orbita intorno al sole su un'immagine di sfondo stellato.

public void start(Stage theStage) 
{
    theStage.setTitle( "Timeline Example" );

    Group root = new Group();
    Scene theScene = new Scene( root );
    theStage.setScene( theScene );

    Canvas canvas = new Canvas( 512, 512 );
    root.getChildren().add( canvas );

    GraphicsContext gc = canvas.getGraphicsContext2D();

    Image earth = new Image( "earth.png" );
    Image sun   = new Image( "sun.png" );
    Image space = new Image( "space.png" );

    final long startNanoTime = System.nanoTime();

    new AnimationTimer()
    {
        public void handle(long currentNanoTime)
        {
            double t = (currentNanoTime - startNanoTime) / 1000000000.0; 

            double x = 232 + 128 * Math.cos(t);
            double y = 232 + 128 * Math.sin(t);

            // background image clears canvas
            gc.drawImage( space, 0, 0 );
            gc.drawImage( earth, x, y );
            gc.drawImage( sun, 196, 196 );
        }
    }.start();

    theStage.show();
}

Ci sono modi alternativi per implementare un ciclo di gioco in JavaFX. Un approccio leggermente più lungo (ma più flessibile) implica la classe Timeline, ovvero una sequenza di animazione composto da un insieme di oggetti fotogramma chiave. Per creare un ciclo di gioco, la sequenza temporale deve essere impostata per ripetere all'infinito, e solo un singolo fotogramma chiave è richiesto, con relativa durata impostata a 0,016 secondi (per raggiungere 60 cicli al secondo). Questa implementazione può essere trovata nel file Example3T.java nel repository di GitHub.

Animazione basata su telaio

Un altro componente di programmazione comunemente necessarie gioco è basato su frame di animazione: visualizzazione di una sequenza di immagini in rapida successione per creare l'illusione del movimento.

Supponendo che tutte le animazioni in ciclo e tutti i fotogrammi visualizzare per lo stesso numero di secondi, un'implementazione di base potrebbe essere semplice come segue:

public class AnimatedImage
{
    public Image[] frames;
    public double duration;
    
    public Image getFrame(double time)
    {
        int index = (int)((time % (frames.length * duration)) / duration);
        return frames[index];
    }
}

Per integrare questa classe nell'esempio precedente, potremmo creare un animato UFO, l'inizializzazione dell'oggetto utilizzando il codice:

AnimatedImage ufo = new AnimatedImage();
Image[] imageArray = new Image[6];
for (int i = 0; i < 6; i++)
    imageArray[i] = new Image( "ufo_" + i + ".png" );
ufo.frames = imageArray;
ufo.duration = 0.100;

... e, all'interno di AnimationTimer, aggiungendo la riga di codice:

1	gc.drawImage( ufo.getFrame(t), 450, 25 );

.... at nel punto appropriato. Per un esempio di codice funzionante completo, vedere il file Example3AI.java nel repository di GitHub.

Gestione dell'Input dell'utente

Rilevazione e l'elaborazione dell'input utente in JavaFX è semplice. Le azioni dell'utente che possono essere rilevate dal sistema, quali pressioni di tasti e click del mouse, sono chiamate eventi. In JavaFX, queste azioni automaticamente determina la generazione di oggetti (ad esempio KeyEvent e MouseEvent) che memorizzano i dati associati (ad esempio, premuto il tasto effettivo o la posizione del puntatore del mouse). Qualsiasi classe di JavaFX che implementa la classe EventTarget, ad esempio una scena, può "ascoltare" per eventi e gestirli; Negli esempi che seguono, vi mostreremo come impostare una scena per elaborare gli eventi vari.

Sfogliando la documentazione per la classe di scena, ci sono molti metodi che ascolta per la gestione di diversi tipi di input provenienti da fonti diverse. Per esempio, il metodo setOnKeyPressed() può assegnare un EventHandler che verrà attivato quando viene premuto un tasto, il metodo setOnMouseClicked() può assegnare un EventHandler che si attiva quando viene premuto un pulsante del mouse, e così via. La classe EventHandler serve uno scopo: per incapsulare un metodo (chiamato handle()) che viene chiamato quando si verifica l'evento corrispondente.

Quando si crea un EventHandler, è necessario specificare il tipo di evento che gestisce: è possibile dichiarare un EventHandler<KeyEvent> o un EventHandler<MouseEvent>, per esempio.</MouseEvent> </KeyEvent> Inoltre, EventHandlers vengono spesso creati come anonime classi interne, come vengono in genere utilizzati solo una volta (quando vengono passati come argomento a uno dei metodi elencati sopra).

Gestione degli eventi di tastiera

L'input dell'utente viene spesso elaborato all'interno del ciclo di gioco principale, e quindi deve essere tenuto un registro di quali tasti sono correntemente attivi. Un modo per eseguire questa operazione è creando un ArrayList di String oggetti. Quando inizialmente si preme un tasto, aggiungiamo la rappresentazione di stringa di KeyCode di KeyEvent all'elenco; Quando il tasto viene rilasciato, abbiamo rimuoverlo dall'elenco.

Nell'esempio che segue, la tela contiene due immagini dei tasti freccia; ogni volta che viene premuto un tasto, l'immagine corrispondente diventa verde.

Il codice sorgente è contenuto nel file Example4K.java nel repository di GitHub.

public void start(Stage theStage) 
    {
        theStage.setTitle( "Keyboard Example" );

        Group root = new Group();
        Scene theScene = new Scene( root );
        theStage.setScene( theScene );

        Canvas canvas = new Canvas( 512 - 64, 256 );
        root.getChildren().add( canvas );

        ArrayList<String> input = new ArrayList<String>();

        theScene.setOnKeyPressed(
            new EventHandler<KeyEvent>()
            {
                public void handle(KeyEvent e)
                {
                    String code = e.getCode().toString();

                    // only add once... prevent duplicates
                    if ( !input.contains(code) )
                        input.add( code );
                }
            });

        theScene.setOnKeyReleased(
            new EventHandler<KeyEvent>()
            {
                public void handle(KeyEvent e)
                {
                    String code = e.getCode().toString();
                    input.remove( code );
                }
            });

        GraphicsContext gc = canvas.getGraphicsContext2D();

        Image left = new Image( "left.png" );
        Image leftG = new Image( "leftG.png" );

        Image right = new Image( "right.png" );
        Image rightG = new Image( "rightG.png" );

        new AnimationTimer()
        {
            public void handle(long currentNanoTime)
            {
                // Clear the canvas
                gc.clearRect(0, 0, 512,512);

                if (input.contains("LEFT"))
                    gc.drawImage( leftG, 64, 64 );
                else
                    gc.drawImage( left, 64, 64 );

                if (input.contains("RIGHT"))
                    gc.drawImage( rightG, 256, 64 );
                else
                    gc.drawImage( right, 256, 64 );
            }
        }.start();

        theStage.show();
    }

Gestione degli eventi del Mouse

Ora diamo un'occhiata a un esempio che si concentra sulla classe MouseEvent piuttosto che la classe KeyEvent. In questo mini-gioco, il giocatore guadagna un punto ogni volta che il bersaglio è cliccato.

Poiché il EventHandlers sono classi interne, tutte le variabili che utilizzano devono essere finale o "efficacemente finale", che significa che le variabili non possono essere reinizializzate. Nell'esempio precedente, i dati è stati passati il EventHandler per mezzo di un oggetto ArrayList, i cui valori possono essere modificati senza reinizializzazione (tramite i metodi Add e Remove ()).

Tuttavia, nel caso di tipi di dati di base, i valori non possono essere modificati una volta inizializzato. Se si desidera l'oggetto EventHandler per accedere ai tipi di dati di base che vengono modificati altrove nel programma, è possibile creare una classe wrapper che contiene variabili pubbliche o metodi getter/setter. (Nell'esempio che segue, IntValue è una classe che contiene una variabile int pubblico chiamata valore.)

public void start(Stage theStage) 
{
    theStage.setTitle( "Click the Target!" );

    Group root = new Group();
    Scene theScene = new Scene( root );
    theStage.setScene( theScene );

    Canvas canvas = new Canvas( 500, 500 );

    root.getChildren().add( canvas );

    Circle targetData = new Circle(100,100,32);
    IntValue points = new IntValue(0);

    theScene.setOnMouseClicked(
        new EventHandler<MouseEvent>()
        {
            public void handle(MouseEvent e)
            {
                if ( targetData.containsPoint( e.getX(), e.getY() ) )
                {
                    double x = 50 + 400 * Math.random(); 
                    double y = 50 + 400 * Math.random();
                    targetData.setCenter(x,y);
                    points.value++;
                }
                else
                    points.value = 0;
            }
        });

    GraphicsContext gc = canvas.getGraphicsContext2D();

    Font theFont = Font.font( "Helvetica", FontWeight.BOLD, 24 );
    gc.setFont( theFont );
    gc.setStroke( Color.BLACK );
    gc.setLineWidth(1);

    Image bullseye = new Image( "bullseye.png" );

    new AnimationTimer()
    {
        public void handle(long currentNanoTime)
        {
            // Clear the canvas
            gc.setFill( new Color(0.85, 0.85, 1.0, 1.0) );
            gc.fillRect(0,0, 512,512);

            gc.drawImage( bullseye, 
                targetData.getX() - targetData.getRadius(),
                targetData.getY() - targetData.getRadius() );

            gc.setFill( Color.BLUE );

            String pointsText = "Points: " + points.value;
            gc.fillText( pointsText, 360, 36 );
            gc.strokeText( pointsText, 360, 36 );
        }
    }.start();

    theStage.show();
}

Il codice sorgente completo è contenuto nel repository di GitHub; la classe principale è Example4M.java.

Creazione di una classe di base Sprite con JavaFX

Nei videogiochi, uno sprite è il termine per una singola entità visiva. Di seguito è un esempio di una classe Sprite che memorizza un'immagine e posizione, nonché informazioni di velocità (per entità mobile) e informazioni di larghezza/altezza da utilizzare quando si calcolano i riquadri di delimitazione ai fini del rilevamento delle collisioni. Ci sono anche i metodi getter/setter standard per la maggior parte di questi dati (omessi per brevità) e alcuni metodi standard necessari nello sviluppo del gioco:

Update (): calcola la nuova posizione basata sulla velocità dello Sprite.
Render: disegna il socio di immagine sulla tela (tramite la classe GraphicsContext) utilizzando la posizione come coordinate.
getBoundary(): restituisce un oggetto JavaFX Rectangle2D, utile nel rilevamento delle collisioni a causa sua intersects metodo.
Intersects(): determina se il riquadro di delimitazione di questo Sprite si interseca con quella di un altro Sprite.

public class Sprite
{
    private Image image;
    private double positionX;
    private double positionY;    
    private double velocityX;
    private double velocityY;
    private double width;
    private double height;

    // ...
    // methods omitted for brevity
    // ...

    public void update(double time)
    {
        positionX += velocityX * time;
        positionY += velocityY * time;
    }

    public void render(GraphicsContext gc)
    {
        gc.drawImage( image, positionX, positionY );
    }

    public Rectangle2D getBoundary()
    {
        return new Rectangle2D(positionX,positionY,width,height);
    }

    public boolean intersects(Sprite s)
    {
        return s.getBoundary().intersects( this.getBoundary() );
    }
}

Il codice sorgente completo è incluso in Sprite.java nel repository di GitHub.

Utilizzando la classe Sprite

Con l'assistenza della classe Sprite, possiamo facilmente creare una semplice raccolta di gioco in JavaFX. In questo gioco, si assume il ruolo di una valigetta senziente, cui obiettivo è quello di raccogliere i molti sacchi di denaro che sono stati lasciati in giro da un precedente proprietario negligente. I tasti freccia spostano il giocatore intorno allo schermo.

Questo codice prende in prestito pesantemente da esempi precedenti: impostazione di tipi di carattere per visualizzare il punteggio, memorizzazione di input da tastiera con un oggetto ArrayList, l'implementazione del ciclo del gioco con un AnimationTimer e creazione di classi wrapper per valori semplici che devono essere modificati durante il ciclo di gioco.

Un segmento di codice del particolare interesse comporta la creazione di un oggetto Sprite per il giocatore (valigetta) e un oggetti ArrayList di Sprite per i collectibles (sacchi di denaro):

Sprite briefcase = new Sprite();
briefcase.setImage("briefcase.png");
briefcase.setPosition(200, 0);

ArrayList<Sprite> moneybagList = new ArrayList<Sprite>();

for (int i = 0; i < 15; i++)
{
    Sprite moneybag = new Sprite();
  moneybag.setImage("moneybag.png");
	double px = 350 * Math.random() + 50;
	double py = 350 * Math.random() + 50;          
	moneybag.setPosition(px,py);
	moneybagList.add( moneybag );
}

Un altro segmento di codice di interesse è la creazione di AnimationTimer, che ha il compito di:

calcolo del tempo trascorso dall'ultimo aggiornamento
impostare la velocità del giocatore a seconda attualmente premuti i tasti
eseguire il rilevamento di collisione tra il giocatore e il collezionismo e aggiornare il punteggio e l'elenco di oggetti da collezione, in questo caso (un iteratore viene utilizzato anziché ArrayList direttamente per evitare un'eccezione di modifiche simultanee durante la rimozione di oggetti da l'elenco)
rendendo il sprite e testo sulla tela

new AnimationTimer()
{
    public void handle(long currentNanoTime)
	{
		// calculate time since last update.
		double elapsedTime = (currentNanoTime - lastNanoTime.value) / 1000000000.0;
		lastNanoTime.value = currentNanoTime;
		
		// game logic
		
		briefcase.setVelocity(0,0);
		if (input.contains("LEFT"))
			briefcase.addVelocity(-50,0);
		if (input.contains("RIGHT"))
			briefcase.addVelocity(50,0);
		if (input.contains("UP"))
			briefcase.addVelocity(0,-50);
		if (input.contains("DOWN"))
			briefcase.addVelocity(0,50);
			
		briefcase.update(elapsedTime);
		
		// collision detection
		
		Iterator<Sprite> moneybagIter = moneybagList.iterator();
		while ( moneybagIter.hasNext() )
		{
			Sprite moneybag = moneybagIter.next();
			if ( briefcase.intersects(moneybag) )
			{
				moneybagIter.remove();
				score.value++;
			}
		}
		
		// render
		
		gc.clearRect(0, 0, 512,512);
		briefcase.render( gc );
		
		for (Sprite moneybag : moneybagList )
			moneybag.render( gc );

		String pointsText = "Cash: $" + (100 * score.value);
		gc.fillText( pointsText, 360, 36 );
		gc.strokeText( pointsText, 360, 36 );
	}
}.start();

Come al solito, codice completo può essere trovato nel file di codice associato (Example5.java) nel repository di GitHub.

Prossimi passi

C'è una raccolta di tutorial introduttivo sul sito Oracle, che vi aiuterà a imparare le attività comuni di JavaFX: Guida introduttiva con le applicazioni di esempio di JavaFX.
Si può essere interessati ad apprendere come utilizzare Generatore di scena, un ambiente di layout visivo per la progettazione di interfacce utente. Questo programma genera FXML, che è un linguaggio basato su XML che può essere utilizzato per definire un'interfaccia utente per un programma di JavaFX. Per questo, vedere Generatore di scena di JavaFX: Guida introduttiva.
Esperienza di FX è un ottimo blog, aggiornato regolarmente, che contiene informazioni e progetti di esempio di interesse per gli sviluppatori JavaFX. Molte delle demo elencati sono abbastanza ispiratore!
José Pereda ha eccellenti esempi di giochi più avanzati costruiti con JavaFX nel suo repository di GitHub.
Il progetto JFxtras è costituito da un gruppo di sviluppatori che hanno creato i componenti aggiuntivi di JavaFX che forniscono funzionalità comunemente necessarie attualmente mancanti da JavaFX.
Il progetto di JavaFXPorts consente di assemblare l'applicazione JavaFX per distribuzione su iOS e Android.
Si dovrebbero bookmark i riferimenti ufficiali per JavaFX, in particolare, JavaFX Guida di Oracle e la documentazione delle API.
Alcuni libri ben recensiti su JavaFX includono Pro 8 JavaFX, JavaFX 8 - Introduzione con l'esempio e, di particolare interesse per gli sviluppatori di giochi, inizio Java 8 giochi sviluppo.

Conclusione

In questo tutorial, ti ho introdotto alle classi JavaFX che sono utili nella programmazione di giochi. Abbiamo lavorato attraverso una serie di esempi di complessità crescente, che culmina in un gioco basato su sprite collezione-stile. Ora si è pronti per neanche indagare alcune delle risorse elencate sopra, o in immersione e iniziare a creare il proprio gioco. Buona fortuna a voi nei vostri sforzi!