I'm making a kaboom.js game and I want to set the background of a scene to an image. I can only find solutions on changing the background to a colour. I hope someone can help!

I'm making a kaboom.js game and I want to set the background of a scene to an image. I can only find solutions on changing the background to a colour. I hope someone can help!

• javascript
• 2d-games
• kaboom

Share Improve this question Follow asked Jan 2, 2022 at 19:37 penguins184penguins184 4777 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

In Kaboom.js there is no special support for background images. However you can use a regular game object with a sprite ponent as a background image. Here's a simple example:

async function init() {
  kaboom();
  let bgImage = await loadSprite("background", "https://www.paulwheeler.us/files/windows-95-desktop-background.jpg");

  let background = add([
    sprite("background"),
    // Make the background centered on the screen
    pos(width() / 2, height() / 2),
    origin("center"),
    // Allow the background to be scaled
    scale(1),
    // Keep the background position fixed even when the camera moves
    fixed()
  ]);
  // Scale the background to cover the screen
  background.scaleTo(Math.max(
    width() / bgImage.tex.width,
    height() / bgImage.tex.height
  ));
}

init();

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/kaboom.js"></script>