Preloading sprite

First, let's load our spheres.png sprite. It is important to load the sprite first to be sure that all pictures are loaded from the server before we start animations. We do not want to see our application without pictures. So, add these lines of code in the preload() function:

game.load.spritesheet("BUBBLES", "assets/sprites/spheres.png", BUBBLE_SIZE, BUBBLE_SIZE);

Where:

• BUBBLES: This is the asset key. We reference to the sprite by this key.

• assets/sprites/spheres.png: This is the path to the actual sprite file. It can be vertical, horizontal or a grid.

• BUBBLE_SIZE: This is the width and height of the sprite. They are our constants with padding value.

Now, we can refresh the page and see that the file is loaded properly. First, we should go to Developer Tools | Menu | More Tools | Developer Tools. We can see it under the Network tab:

That is all about the preload() function.