How to set a background image to a Phaser.js game?

Question

I am trying to build a small game using Phaser, but I am stuck at the basics. I want to make a picture the background of my entire game, but it does not work, the console does not give me any errors the background just doesn't change, here is my javascript:

var config = {
  type: Phaser.AUTO,
  width: 600,
  height: 800,
  physics: {
      default: 'arcade',
      arcade: {
          gravity: {y: 500},
          debug: false
      }
  },
};

var game = new Phaser.Game(config);

function preload() {
  this.load.image('background', './star-background.jpg');
}


function create() {
  this.add.image(400, 300, 'background');
}

function update() {

}

What am I missing and how can I make a picture the background of the game?

Answer 1

Your config object is missing the scene items. This is necessary to tell Phaser to add the scene(s) to the game. See the documentation here.

Give this a try:

var config = {
  type: Phaser.AUTO,
  width: 600,
  height: 800,
  physics: {
      default: 'arcade',
      arcade: {
          gravity: {y: 500},
          debug: false
      }
  },
  scene: {
      preload: preload,
      create: create,
      update: update
  }
};

That should load your first scene with the functions you have created. Otherwise, your image setup looks great. I highly recommend following along with the official tutorial Making your first Phaser 3 game to get the basics figured out. Great explanations and examples of a typical game setup.