libgdx – how to add background image in stage?

LibGDX – Adding a Background Image to a Stage

This article guides you on how to seamlessly incorporate a background image within your LibGDX stage, enriching your game’s visual appeal.

Setting the Stage

The foundation of our approach involves creating a TextureRegion for your background image and a Sprite to display it.

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.Stage;

public class BackgroundStage extends Stage {
  private Sprite backgroundSprite;

  public BackgroundStage(String imagePath) {
    super(new SpriteBatch());
    Texture backgroundTexture = new Texture(Gdx.files.internal(imagePath));
    TextureRegion backgroundRegion = new TextureRegion(backgroundTexture);
    backgroundSprite = new Sprite(backgroundRegion);

    // Ensure the background covers the entire stage area
    backgroundSprite.setSize(getWidth(), getHeight());
    backgroundSprite.setPosition(0, 0);
  }

  @Override
  public void draw() {
    super.draw();
    backgroundSprite.draw(getBatch());
  }
}

Understanding the Code

• We create a `BackgroundStage` that extends the LibGDX `Stage` class.
• The constructor takes the path to your background image as a parameter.
• A `Texture` is loaded from the provided path.
• A `TextureRegion` is created from the `Texture` to represent the background image.
• A `Sprite` is instantiated using the `TextureRegion` to manage the image.
• The `Sprite` is scaled to the stage’s dimensions (`getWidth()` and `getHeight()`) and positioned at the origin (0, 0) to fill the entire background.
• The `draw()` method of `BackgroundStage` is overridden to draw the background sprite before any other actors on the stage.

Integration into Your Game

In your main game class or screen, instantiate a `BackgroundStage` object and add it to your game’s rendering loop.

public class MyGame extends ApplicationAdapter {
  private BackgroundStage backgroundStage;

  @Override
  public void create() {
    backgroundStage = new BackgroundStage("background.jpg"); // Replace with your image path
  }

  @Override
  public void render() {
    // ... other game logic ...
    backgroundStage.act(Gdx.graphics.getDeltaTime());
    backgroundStage.draw();
  }
}

Code Example: Setting a Background Image for a Menu

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton.TextButtonStyle;

public class MenuScreen extends Screen {
  private Stage stage;
  private TextButton startButton;

  public MenuScreen() {
    stage = new Stage(new SpriteBatch());
    Gdx.input.setInputProcessor(stage);

    // Load skin for button style
    Skin skin = new Skin(Gdx.files.internal("skin.json"));

    // Create start button
    TextButtonStyle buttonStyle = skin.get(TextButtonStyle.class);
    startButton = new TextButton("Start Game", buttonStyle);

    // ... position button on stage ...

    // Set background image
    Texture backgroundTexture = new Texture(Gdx.files.internal("menu_background.jpg"));
    TextureRegion backgroundRegion = new TextureRegion(backgroundTexture);
    Sprite backgroundSprite = new Sprite(backgroundRegion);
    backgroundSprite.setSize(stage.getWidth(), stage.getHeight());
    backgroundSprite.setPosition(0, 0);

    // Add actors to stage
    stage.addActor(startButton);
  }

  @Override
  public void render(float delta) {
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    // Draw background
    backgroundSprite.draw(stage.getBatch());

    stage.act(delta);
    stage.draw();
  }
}

This example demonstrates how to add a background image for a menu screen in LibGDX using the `Stage` class. You would replace `”menu_background.jpg”` with the path to your menu background image. The `draw()` method of the `MenuScreen` class now calls the background sprite’s `draw()` method before the stage is drawn.