In JavaFX come posso spostare uno sprite sullo schermo?

Sono nuovo di JavaFX e sto provando a scrivere un gioco in cui un personaggio 2D animato attraversa lo schermo (ad esempio, come nel gioco originale di Legend of Zelda). Lo avevo fatto in Swing, creando la mia class Sprite e sovrascrivendo il metodo paintComponent () in Swing e inserendo il mio g2d.drawImage (…); chiama qui, dove copia il sottoframe corretto da uno Sprite alla destinazione x, y corretta in un JPanel, ottenendo così il movimento di un’immagine 2D animata (a piedi) attraverso lo schermo.

Come posso farlo in JavaFX? Ho trovato questo eccellente esempio su come creare uno sprite: http://blog.netopyr.com/2012/03/09/creating-a-sprite-animation-with-javafx/ in JavaFX, ma come faccio a fare il PaintComponent e drawImage (…) parti? JavaFX ha un metodo equivalente a PaintComponent in cui tutto viene ridisegnato? Ho provato a chiamare il primaryStage.show (); metodo, ma non ha funzionato.

Immagino di non essere chiaro su come impostare esattamente il mio ciclo di gioco principale, in cui viene triggersto un aggiornamento e un’immagine viene dipinta sulla scena in una posizione x, y diversa?

Qual è l’equivalente JavaFX del metodo drawImage (…)? questo metodo mi consente di copiare una parte di un’immagine sorgente in una scena di destinazione in ogni dato x, y offset. È così che ho realizzato lo spostamento di uno sprite animato sullo schermo di Swing.

I migliori saluti,

    Zareh

    La tua domanda è troppo da coprire su SO. Tuttavia ho creato un semplice “motore” per iniziare. È di uso generale, quindi adatto anche alle tue esigenze.

    La class principale con il ciclo di gioco in cui il gioco è caricato, l’input è controllato, gli sprite sono spostati, la collisione è controllata, il punteggio è aggiornato, ecc.

    public class Game extends Application { Random rnd = new Random(); Pane playfieldLayer; Pane scoreLayer; Image playerImage; Image enemyImage; List players = new ArrayList<>(); List enemies = new ArrayList<>(); Text collisionText = new Text(); boolean collision = false; Scene scene; @Override public void start(Stage primaryStage) { Group root = new Group(); // create layers playfieldLayer = new Pane(); scoreLayer = new Pane(); root.getChildren().add( playfieldLayer); root.getChildren().add( scoreLayer); scene = new Scene( root, Settings.SCENE_WIDTH, Settings.SCENE_HEIGHT); primaryStage.setScene( scene); primaryStage.show(); loadGame(); createScoreLayer(); createPlayers(); AnimationTimer gameLoop = new AnimationTimer() { @Override public void handle(long now) { // player input players.forEach(sprite -> sprite.processInput()); // add random enemies spawnEnemies( true); // movement players.forEach(sprite -> sprite.move()); enemies.forEach(sprite -> sprite.move()); // check collisions checkCollisions(); // update sprites in scene players.forEach(sprite -> sprite.updateUI()); enemies.forEach(sprite -> sprite.updateUI()); // check if sprite can be removed enemies.forEach(sprite -> sprite.checkRemovability()); // remove removables from list, layer, etc removeSprites( enemies); // update score, health, etc updateScore(); } }; gameLoop.start(); } private void loadGame() { playerImage = new Image( getClass().getResource("player.png").toExternalForm()); enemyImage = new Image( getClass().getResource("enemy.png").toExternalForm()); } private void createScoreLayer() { collisionText.setFont( Font.font( null, FontWeight.BOLD, 64)); collisionText.setStroke(Color.BLACK); collisionText.setFill(Color.RED); scoreLayer.getChildren().add( collisionText); // TODO: quick-hack to ensure the text is centered; usually you don't have that; instead you have a health bar on top collisionText.setText("Collision"); double x = (Settings.SCENE_WIDTH - collisionText.getBoundsInLocal().getWidth()) / 2; double y = (Settings.SCENE_HEIGHT - collisionText.getBoundsInLocal().getHeight()) / 2; collisionText.relocate(x, y); collisionText.setText(""); collisionText.setBoundsType(TextBoundsType.VISUAL); } private void createPlayers() { // player input Input input = new Input( scene); // register input listeners input.addListeners(); // TODO: remove listeners on game over Image image = playerImage; // center horizontally, position at 70% vertically double x = (Settings.SCENE_WIDTH - image.getWidth()) / 2.0; double y = Settings.SCENE_HEIGHT * 0.7; // create player Player player = new Player(playfieldLayer, image, x, y, 0, 0, 0, 0, Settings.PLAYER_SHIP_HEALTH, 0, Settings.PLAYER_SHIP_SPEED, input); // register player players.add( player); } private void spawnEnemies( boolean random) { if( random && rnd.nextInt(Settings.ENEMY_SPAWN_RANDOMNESS) != 0) { return; } // image Image image = enemyImage; // random speed double speed = rnd.nextDouble() * 1.0 + 2.0; // x position range: enemy is always fully inside the screen, no part of it is outside // y position: right on top of the view, so that it becomes visible with the next game iteration double x = rnd.nextDouble() * (Settings.SCENE_WIDTH - image.getWidth()); double y = -image.getHeight(); // create a sprite Enemy enemy = new Enemy( playfieldLayer, image, x, y, 0, 0, speed, 0, 1,1); // manage sprite enemies.add( enemy); } private void removeSprites( List spriteList) { Iterator iter = spriteList.iterator(); while( iter.hasNext()) { SpriteBase sprite = iter.next(); if( sprite.isRemovable()) { // remove from layer sprite.removeFromLayer(); // remove from list iter.remove(); } } } private void checkCollisions() { collision = false; for( Player player: players) { for( Enemy enemy: enemies) { if( player.collidesWith(enemy)) { collision = true; } } } } private void updateScore() { if( collision) { collisionText.setText("Collision"); } else { collisionText.setText(""); } } public static void main(String[] args) { launch(args); } } 

    Una class base per gli sprite che include metodi comuni come il movimento, ecc

     public abstract class SpriteBase { Image image; ImageView imageView; Pane layer; double x; double y; double r; double dx; double dy; double dr; double health; double damage; boolean removable = false; double w; double h; boolean canMove = true; public SpriteBase(Pane layer, Image image, double x, double y, double r, double dx, double dy, double dr, double health, double damage) { this.layer = layer; this.image = image; this.x = x; this.y = y; this.r = r; this.dx = dx; this.dy = dy; this.dr = dr; this.health = health; this.damage = damage; this.imageView = new ImageView(image); this.imageView.relocate(x, y); this.imageView.setRotate(r); this.w = image.getWidth(); // imageView.getBoundsInParent().getWidth(); this.h = image.getHeight(); // imageView.getBoundsInParent().getHeight(); addToLayer(); } public void addToLayer() { this.layer.getChildren().add(this.imageView); } public void removeFromLayer() { this.layer.getChildren().remove(this.imageView); } public Pane getLayer() { return layer; } public void setLayer(Pane layer) { this.layer = layer; } public double getX() { return x; } public void setX(double x) { this.x = x; } public double getY() { return y; } public void setY(double y) { this.y = y; } public double getR() { return r; } public void setR(double r) { this.r = r; } public double getDx() { return dx; } public void setDx(double dx) { this.dx = dx; } public double getDy() { return dy; } public void setDy(double dy) { this.dy = dy; } public double getDr() { return dr; } public void setDr(double dr) { this.dr = dr; } public double getHealth() { return health; } public double getDamage() { return damage; } public void setDamage(double damage) { this.damage = damage; } public void setHealth(double health) { this.health = health; } public boolean isRemovable() { return removable; } public void setRemovable(boolean removable) { this.removable = removable; } public void move() { if( !canMove) return; x += dx; y += dy; r += dr; } public boolean isAlive() { return Double.compare(health, 0) > 0; } public ImageView getView() { return imageView; } public void updateUI() { imageView.relocate(x, y); imageView.setRotate(r); } public double getWidth() { return w; } public double getHeight() { return h; } public double getCenterX() { return x + w * 0.5; } public double getCenterY() { return y + h * 0.5; } // TODO: per-pixel-collision public boolean collidesWith( SpriteBase otherSprite) { return ( otherSprite.x + otherSprite.w >= x && otherSprite.y + otherSprite.h >= y && otherSprite.x <= x + w && otherSprite.y <= y + h); } /** * Reduce health by the amount of damage that the given sprite can inflict * @param sprite */ public void getDamagedBy( SpriteBase sprite) { health -= sprite.getDamage(); } /** * Set health to 0 */ public void kill() { setHealth( 0); } /** * Set flag that the sprite can be removed from the UI. */ public void remove() { setRemovable(true); } /** * Set flag that the sprite can't move anymore. */ public void stopMovement() { this.canMove = false; } public abstract void checkRemovability(); } 

    Sottoclassi della class sprite come giocatore ...

     public class Player extends SpriteBase { double playerShipMinX; double playerShipMaxX; double playerShipMinY; double playerShipMaxY; Input input; double speed; public Player(Pane layer, Image image, double x, double y, double r, double dx, double dy, double dr, double health, double damage, double speed, Input input) { super(layer, image, x, y, r, dx, dy, dr, health, damage); this.speed = speed; this.input = input; init(); } private void init() { // calculate movement bounds of the player ship // allow half of the ship to be outside of the screen playerShipMinX = 0 - image.getWidth() / 2.0; playerShipMaxX = Settings.SCENE_WIDTH - image.getWidth() / 2.0; playerShipMinY = 0 - image.getHeight() / 2.0; playerShipMaxY = Settings.SCENE_HEIGHT -image.getHeight() / 2.0; } public void processInput() { // ------------------------------------ // movement // ------------------------------------ // vertical direction if( input.isMoveUp()) { dy = -speed; } else if( input.isMoveDown()) { dy = speed; } else { dy = 0d; } // horizontal direction if( input.isMoveLeft()) { dx = -speed; } else if( input.isMoveRight()) { dx = speed; } else { dx = 0d; } } @Override public void move() { super.move(); // ensure the ship can't move outside of the screen checkBounds(); } private void checkBounds() { // vertical if( Double.compare( y, playerShipMinY) < 0) { y = playerShipMinY; } else if( Double.compare(y, playerShipMaxY) > 0) { y = playerShipMaxY; } // horizontal if( Double.compare( x, playerShipMinX) < 0) { x = playerShipMinX; } else if( Double.compare(x, playerShipMaxX) > 0) { x = playerShipMaxX; } } @Override public void checkRemovability() { // TODO Auto-generated method stub } } 

    ... e nemici

     public class Enemy extends SpriteBase { public Enemy(Pane layer, Image image, double x, double y, double r, double dx, double dy, double dr, double health, double damage) { super(layer, image, x, y, r, dx, dy, dr, health, damage); } @Override public void checkRemovability() { if( Double.compare( getY(), Settings.SCENE_HEIGHT) > 0) { setRemovable(true); } } } 

    È inoltre necessario un meccanismo di input per controllare lo sprite del giocatore

     public class Input { /** * Bitset which registers if any {@link KeyCode} keeps being pressed or if it is released. */ private BitSet keyboardBitSet = new BitSet(); // ------------------------------------------------- // default key codes // will vary when you let the user customize the key codes or when you add support for a 2nd player // ------------------------------------------------- private KeyCode upKey = KeyCode.UP; private KeyCode downKey = KeyCode.DOWN; private KeyCode leftKey = KeyCode.LEFT; private KeyCode rightKey = KeyCode.RIGHT; private KeyCode primaryWeaponKey = KeyCode.SPACE; private KeyCode secondaryWeaponKey = KeyCode.CONTROL; Scene scene; public Input( Scene scene) { this.scene = scene; } public void addListeners() { scene.addEventFilter(KeyEvent.KEY_PRESSED, keyPressedEventHandler); scene.addEventFilter(KeyEvent.KEY_RELEASED, keyReleasedEventHandler); } public void removeListeners() { scene.removeEventFilter(KeyEvent.KEY_PRESSED, keyPressedEventHandler); scene.removeEventFilter(KeyEvent.KEY_RELEASED, keyReleasedEventHandler); } /** * "Key Pressed" handler for all input events: register pressed key in the bitset */ private EventHandler keyPressedEventHandler = new EventHandler() { @Override public void handle(KeyEvent event) { // register key down keyboardBitSet.set(event.getCode().ordinal(), true); } }; /** * "Key Released" handler for all input events: unregister released key in the bitset */ private EventHandler keyReleasedEventHandler = new EventHandler() { @Override public void handle(KeyEvent event) { // register key up keyboardBitSet.set(event.getCode().ordinal(), false); } }; // ------------------------------------------------- // Evaluate bitset of pressed keys and return the player input. // If direction and its opposite direction are pressed simultaneously, then the direction isn't handled. // ------------------------------------------------- public boolean isMoveUp() { return keyboardBitSet.get( upKey.ordinal()) && !keyboardBitSet.get( downKey.ordinal()); } public boolean isMoveDown() { return keyboardBitSet.get( downKey.ordinal()) && !keyboardBitSet.get( upKey.ordinal()); } public boolean isMoveLeft() { return keyboardBitSet.get( leftKey.ordinal()) && !keyboardBitSet.get( rightKey.ordinal()); } public boolean isMoveRight() { return keyboardBitSet.get( rightKey.ordinal()) && !keyboardBitSet.get( leftKey.ordinal()); } public boolean isFirePrimaryWeapon() { return keyboardBitSet.get( primaryWeaponKey.ordinal()); } public boolean isFireSecondaryWeapon() { return keyboardBitSet.get( secondaryWeaponKey.ordinal()); } } 

    E alcune impostazioni globali

     public class Settings { public static double SCENE_WIDTH = 400; public static double SCENE_HEIGHT = 800; public static double PLAYER_SHIP_SPEED = 4.0; public static double PLAYER_SHIP_HEALTH = 100.0; public static double PLAYER_MISSILE_SPEED = 4.0; public static double PLAYER_MISSILE_HEALTH = 200.0; public static int ENEMY_SPAWN_RANDOMNESS = 100; } 

    Puoi usare qualsiasi immagine per gli sprite. Ho preso il mio da Wikipedia:

    player.png

    inserisci la descrizione dell'immagine qui

    enemy.png

    inserisci la descrizione dell'immagine qui

    Se metti tutto in un pacchetto di gioco, puoi avviare Game.java. Ti darà uno smiley controllabile con le faccine di zombie che scorrono verso il basso. Devi evitarli. Ho lasciato le immagini senza trasparenza per te in modo che noterai che utilizzo un semplice rilevamento delle collisioni rettangolari. Probabilmente andrai per un rilevamento di collisione per pixel.

    Sembra questo:

    inserisci la descrizione dell'immagine qui

    Non ritengo che questa sia la soluzione, è solo una soluzione. Ad esempio dovresti limitare il timer dell'animazione. O potresti voler impostare il movimento per secondi invece che per fotogramma, ecc.

    Se vuoi maggiori informazioni, sentiti libero di dare un'occhiata al mio blog in cui scopro me stesso Come creare un Shoot'em'up 2D con JavaFX . Lì troverai anche ad esempio come aggiungere sprite animate (ho anche imparato che dal link che hai postato), uno sfondo a scorrimento, un livello cloud in cima agli altri livelli, ecc. Spero che ti aiuti.