• Created by Unknown User (hal), last modified on 16.09.2015

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

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;

// 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);
	}
}

Denne koden er omtrent som i FxmlLogoApp fra FXML-logo-leksjonen. Det er tre viktige forskjeller:

  1. FXML-fila som lastes inn heter FigurstyringApp.fxml. Det betyr at du må bruke dette navnet i neste trinn.
  2. 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!
  3. 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-leksjonen. Hint: Bruk 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:

  • Klikk du på bakgrunnen (altså panelet som inneholder figurene), slik at hovedpanelet velges i element-treet nede til venstre.
  • Velger Code-seksjonen i panelet til høyre for tegnevinduet. Du finner den nederst i hjørnet.
  • Code-seksjonen er nokså lang, så du må rulle litt nedover før du finner egenskap-gruppa som heter Keyboard med egenskapen On Key Pressed.
  • Fyll inn keyPressed.

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:

<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 SceneBuilder, 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 som sagt JavaFX at 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 metode i FigurstyringController-klassen. I første omgang kan du skrive inn følgende kode i FigurstyringController:

@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 Kontinuerlig bevegelse-leksjonen (uferdig) vil du bygge videre på denne leksjonen og legge til kode slik at figurene beveger seg av seg selv!

  • No labels