...
| Code Block | ||
|---|---|---|
| ||
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; // her legger du inn passende import-setninger 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); } } |
...
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-leksjonen. Hint: Bruk **New->Other** og finn **FXML Document** New > Other og finn New 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. |
...
Du kan f.eks. velg en PacMan-aktig figur som spilleren, slik: |  |
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 |
...
SceneBuilder. 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 |
...
om det fungerer. |
Steg 3:
...
Reagere på tastetrykk
Nå skal vi få spiller-figuren til å bevege seg når du trykker piltastene. Først må du ordne det slik |
...
at FigurstyringController-objektet får beskjed når tastene trykkes. Dette |
...
kan du gjøre i |
...
SceneBuilder, slik:
|
...
|
...
|
...
|
...
Det skal se omtrent slik ut: |
...
Dette forteller JavaFX at når en tast trykkes (On Key Pressed) så skal metoden keyPressed i FigurstyringController-objektet kalles. |
Husk å lagre før du går tilbake til Eclipse for å skrive inn keyPressed-metoden i FigurstyringController-klassen. |  |
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:
| Code Block | |
|---|---|
|
...
| |
<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. Du må du passe på å få lagt inn onKeyPressed="#keyPressed" på rett sted selv!
Hvis du endrer FXML-koden i Eclipse og så går tilbake til Scene BuilderSceneBuilder, så må du huske å laste koden inn på nytt, for å få inn endringene du gjorde i Eclipse. Velg **File ->Revert > Revert to Saved** for for å gjøre dette.
Koden **onKeyPressed="#keyPressed"** forteller forteller som sagt JavaFX at funksjonen **keyPressed** skal kjøre metoden keyPressed i Controller-klassen skal kjøres hver gang brukeren trykker ned en tast på tastaturet. Det betyr at du må lage en slik funksjon metode i **FigurstyringController**-klassen. I første omgang kan du skrive inn følgende kode i **FigurstyringController**:```java
| Code Block |
|---|
@FXML |
...
void keyPressed(KeyEvent keyEvent) { |
...
KeyCode keyCode = keyEvent.getCode(); |
...
System.out.println("Du trykket " + keyCode); } |
Linja med @FXML forteller JavaFX at metoden er lagt inn for å stemme med FXML-kode av typen onKeyPressed="..." og gir JavaFX lov til å kalle den. Selve metoden tar i mot et objekt som bl.a. forteller hvilken tast som ble trykket. Taste-koden hentes ut i første linje av metoden og skrives ut i andre linje.
}
```Hvis du nå kjører appen og trykker noen taster, så skal du se at det skrives ut en beskjed i Console-panelet i Eclipse for hver tast som trykkes.
#
Steg 4: Reagere på tastetrykk
Å reagere på tastetrykk er vel og bra, men målet er jo å flytte figuren, så her må det flere triks til!
Det første problemet som må løses er å gi FigurstyringController-objektet mulighet til å endre på spiller-figuren. For å få det til så må den gis et navn, både i FXML-fila og i FigurstyringController-klassen.
Hva har du lært?
- å få JavaFX til å kalle en metode automatisk når en tast trykkes ned
- å flytte en figur avhengig av hvilken tast som trykkes
- å klassifisere figurer med styleClass-attributtet
- å sjekke om spiller kolliderer (overlapper) med andre figurer
- å reagere på ulikt vis avhengig av hva slags type figur som spilleren treffer på
I leksjonen [kontinuerligbevegelse](../kontinuerligbevegelse/kontinuerligbevegelse.html) vil leksjonen Kontinuerlig bevegelse-leksjonen (uferdig) vil du bygge videre på denne leksjonen og legge til kode slik at figurene beveger seg av seg selv!