Introduksjon
Formålet til denne leksjonen er å lære hvordan en kan styre en figur rundt på skjermen og reagere på at den treffer andre figurer. I første del brukes piltastene for å flytte figuren rundt og i andre del så sjekkes det for overlapp med andre figurer. I Kontinuerlig bevegelse-leksjonen (uferdig) så kombineres dette med kontinuerlige bevegelser (objekter med fart), som er typisk for plattformspill.Steg 1: Sette opp Java-prosjekt, og lage app-mappe og app-klasse
Start med å sette opp et Java-prosjekt, kalt figurstyring, som beskrevet i Hello world-leksjonen. Lag også en java-pakke (mappe for Java-kodefiler) med samme navn og en Java-klasse ved navn FigurstyringApp. FigurstyringApp-klassen skal ha følgende innhold:
package figurstyring; import java.io.IOException; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.stage.Stage; public class FigurstyringApp extends Application { public void start(Stage primaryStage) throws IOException { FXMLLoader fxmlLoader = new FXMLLoader(FigurstyringApp.class.getResource("FigurstyringApp.fxml")); // setter controlleren, som styrer appen fxmlLoader.setController(new FigurstyringController()); Pane pane = fxmlLoader.load(); Scene scene = new Scene(pane); // sender alle tastetrykk som kommer til vinduet videre til panelet scene.setOnKeyPressed(keyEvent -> { pane.getOnKeyPressed().handle(keyEvent);}); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(FigurstyringApp.class, args); } }
Denne koden er omtrent som i FxmlLogoApp fra FXML-logo-leksjonen. Det er tre viktige forskjeller:
- FXML-fila som lastes inn heter FigurstyringApp.fxml. Det betyr at du må bruke dette navnet i neste trinn.
- Vi setter en såkalt Controller, som er en Java-klasse som kobles sammen med FXML-fila og har kode for å reagere på museklikk og tastetrykk. Kort sagt: Det er Controller-klassen som gir liv til appen!
- Vi sørger for at alle tastetrykk sendes til hovedpanelet i appen.
Steg 2: Lage FXML-fil og Controller-klasse
Nå er turen kommet til FXML-fila og den tilhørende Controller-klassen. Lag en FXML-fil med navnet som brukes i koden over (se etter **getResource(...)**). Fremgangsmåte er beskrevet i [FXML-logo](../fxmllogo/fxmllogo.html)-oppgaven. Hint: Bruk **New->Other** og finn **FXML Document**-veiviseren.
Først skal vi lage noen ulike typer figurer, hvor én skal være den du skal styre (tenk på det som spilleren) mens de andre foreløpig skal være i ro. Her er et forslag til hva du kan lage:</br>
<img src="figurer.png" style="height:500px;" />
Etterpå lager du **FigurstyringController**-klassen (høyreklikk på **figurstyring**-pakka og velg **New->Class**. Det er lurt å ha denne klassen fremme, mens du jobber med FXML-fila i JavaFX Scene Builder.
Hvis du har gjort alt riktig så langt, så skal du kunne kjøre appen og få opp figurene i et vindu: Høyre-klikk på **FigurstyringApp**-klassen og velg **Run As->Java Application** og se hva som skjer!
# Steg 3: {.activity}
Nå skal vi få spiller-figuren til å bevege seg når du trykker piltastene. Først må du ordne det slik at **FigurstyringControlleren** får beskjed når tastene trykkes. Dette er greiest å gjøre i Scene Builder, slik: Klikk du på bakgrunnen (altså panelet som inneholder figurene) og velger **Code**-seksjonen til høyre for tegnevinduet. Du finner den nederst i hjørnet, og når den velges så må du rulle litt nedover før du finner seksjonen som heter **Keyboard** med feltet **On Key Pressed**. Der fyller du inn **keyPressed**. Det skal se omtrent slik ut:</br>
<img src="keyPressed-i-scenebuilder.png" style="height:500px;" />
**keyPressed**-navnet må du huske, fordi det skal bli navnet på en funksjon i **FigurstyringControlleren**. Husk å lagre før du går tilbake til Eclipse.
Hvis du åpner FXML-fila, så vil du se at følgende kode er lagt inn i tag-en for panelet (den heter AnchorPane, Pane e.l.): **onKeyPressed="#keyPressed"**. Det kan f.eks. se slik ut:
```xml
<AnchorPane onKeyPressed="#keyPressed" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Circle fill="LIME" layoutX="612.0" layoutY="220.0" radius="85.0" stroke="BLACK" strokeType="INSIDE" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="150.0" layoutX="449.0" layoutY="351.0" stroke="BLACK" strokeType="INSIDE" width="78.0" />
<Ellipse fill="RED" layoutX="266.0" layoutY="135.0" radiusX="28.0" radiusY="75.0" stroke="BLACK" strokeType="INSIDE" />
<Group fx:id="player" layoutX="182.0" layoutY="394.0">
<children>
<Arc fill="WHITE" length="270.0" radiusX="45.0" radiusY="45.0" startAngle="45.0" stroke="BLACK" strokeType="INSIDE" type="ROUND" />
</children>
</Group>
</children>
</AnchorPane>
```
Du kan jobbe direkte med FXML-koden i Eclipse, men det kan være litt vanskeligere å finne frem. Hvis du endrer FXML-koden og så går tilbake til Scene Builder, så må du huske å laste koden inn på nytt, for å få inn endringene du gjorde i Eclipse. Velg **File->Revert to Saved** for å gjøre dette.
Koden **onKeyPressed="#keyPressed"** forteller JavaFX at funksjonen **keyPressed** skal kjøre hver gang brukeren trykker ned en tast på tastaturet. Det betyr at du må lage en slik funksjon i **FigurstyringController**-klassen. I første omgang kan du skrive inn følgende kode i **FigurstyringController**:
```java
@FXML
void keyPressed(KeyEvent keyEvent) {
KeyCode keyCode = keyEvent.getCode();
System.out.println("Du trykket " + keyCode);
}
```
Hvis du nå kjører appen og trykker noen taster, så skal du se at det skrives ut en beskjed for hver tast som trykkes.
# Hva har du lært?
I leksjonen [kontinuerligbevegelse](../kontinuerligbevegelse/kontinuerligbevegelse.html) vil du bygge videre på denne leksjonen og legge til kode slik at figurene beveger seg av seg selv!