Rendering background images

We are going to store all our game assets locally, and our game is going to be running fully offline. Let's look at how we can render the background images:

  1. Create a new assets folder in the project root so that you have somewhere to store your files.
  2. After that, find and download a beautiful space picture, like the one shown in the following screenshot:

You can find the preceding background image in this book's GitHub repository: https://github.com/PacktPublishing/Electron-Projects/blob/master/Chapter05/assets/background.jpg.
  1. Save it as an assets/background.jpg file.
  2. Update the preload function and set the base URL to the local application folder. Then, fetch the background image. Here, we're giving it the background key. Use the following code to reference this image:
      function preload() {
this.load.setBaseURL('.');
this.load.image('background', 'assets/background.jpg');
}
  1. To display this image as the game's background, we need to perform some more image manipulation. The original image may not necessarily be 800 x 600 pixels size, or we may want to have different window sizes. In any case, our image needs to fit the entire window and should be scaled.
  2. Adding to the game scene and scaling the background image is what our update function is going to do:
      function create() {
const image = this.add.image(
this.cameras.main.width / 2,
this.cameras.main.height / 2,
'background'
);
let scaleX = this.cameras.main.width / image.width;
let scaleY = this.cameras.main.height / image.height;
let scale = Math.max(scaleX, scaleY);
image.setScale(scale).setScrollFactor(0);
}
  1. We have already defined the preload and create function implementations. Before we take a look at the update function, let's take a look at the application:

The application looks amazing. The image fits the main content area, but for the sake of simplicity, let's see how we can switch off resizing for our Electron shell. 

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.136.26.20