Anansi: Scrolling Background

We create a vertically scrolling game. So we need to figure out how to add a scrolling background. 

First thing that comes to mind is to use an ImageView and position it in our game loop. Since we will be loading various data, we create a loadGame() method.

We will have various objects like 

• background
• clouds
• player ship
• enemy ships
• bullets 
• ...

moving around in our game, it's best to use layers for them. The background will be the bottom layer, everything else will be on top of it. 

We scroll the background by putting the background ImageView on the background layer and reposition it in the AnimationTimer.
 

 
package game;
 
import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;


public class Main extends Application {
 
 private double SCENE_WIDTH = 400;
 private double SCENE_HEIGHT = 800;
 
 /**
  * Main game loop
  */
 private AnimationTimer gameLoop;

 /**
  * Container for the background image
  */
 ImageView backgroundImageView;
 
 /**
  * Scrolling speed of the background
  */
 double backgroundScrollSpeed = 0.5;
 
 /**
  * Layer for the background
  */
 Pane backgroundLayer;
 
 @Override
 public void start(Stage primaryStage) {
  try {

   // create root node
   Group root = new Group();

   // create layers
   backgroundLayer = new Pane();
   
   // add layers to scene root
   root.getChildren().add( backgroundLayer);
   
   // create scene
   Scene scene = new Scene( root, SCENE_WIDTH,SCENE_HEIGHT);
   
   // show stage
   primaryStage.setScene(scene);
   primaryStage.show();

   // load game assets
   loadGame();

   // start the game
   startGameLoop();
   
  } catch(Exception e) {
   e.printStackTrace();
  }
 }

 private void loadGame() {
  
  // background
  // --------------------------------
  backgroundImageView = new ImageView( getClass().getResource( "assets/maps/canyon.jpg").toExternalForm());
  
  // reposition the map. it is scrolling from bottom of the background to top of the background
  backgroundImageView.relocate( 0, -backgroundImageView.getImage().getHeight() + SCENE_HEIGHT);
  
  // add background to layer
  backgroundLayer.getChildren().add( backgroundImageView);
  
 }
 
 private void startGameLoop() {

  // game loop
        gameLoop = new AnimationTimer() {
         
            @Override
            public void handle(long l) {
            
             // scroll background
             // ---------------------------
             // calculate new position
             double y = backgroundImageView.getLayoutY() + backgroundScrollSpeed;
             
             // check bounds. we scroll upwards, so the y position is negative. once it's > 0 we have reached the end of the map and stop scrolling
             if( Double.compare( y, 0) >= 0) {
              y = 0;
             }

             // move background
             backgroundImageView.setLayoutY( y);

             
            }
 
        };
        
        gameLoop.start();
        
 }
 
 public static void main(String[] args) {
  launch(args);
 }
}

Now we have a smooth scrolling background which looks like this:

I'll upload my assets later. If you simply wish to check out the code, you can replace the file "assets/maps/canyon.jpg" by any of your images.