

On the Manufacturer page, under the image, you will see background image option.If you will not set background image of any category then “Default background image” will appear on front end. You can add background image here, this image will appear on the background of that category page on Front end. On the category page, under the date tab, you will see background image option.If you will not set background image of any product then “Default background image” will appear on front end. You can add background image here, this image will appear on the background of that product page on Front end. On product page, Under the Product image you will see background image option.You can add your store’s background image here. Go to your store setting, under the image tab you will see background image option.ġ) You can Change your store’s background image.Ģ) You can change your product pages background image.ģ) You can change Category pages background image.Ĥ) You can change Manufacturer pages background image.ĥ) You can change Information pages background image.Ħ)Ğach product, Category and Manufacturer page has its own background Image. No change will occur in your core opencart files.

Now go back to your store setting and change your store's boring background image with multiple positions.Įasy to use. If you put the star image first it will be covered-up by the sky image.Download our Extension (VQMOD). So if you wish to place a star sprite above the background, you would need to ensure that it was added as an image second, after the sky image: function create () The order in which game objects are displayed matches the order in which you create them. In Phaser 2 this was achieved via the anchor property but in Phaser 3 it's the originX and originY properties instead. For example the code: (0, 0, 'sky').setOrigin(0, 0) would reset the drawing position of the image to the top-left. Hint: You can use setOrigin to change this. If we display it at 400 x 300 you see the whole thing. The background image is 800 x 600 pixels in size, so if we were to display it centered at 0 x 0 you'd only see the bottom-right corner of it. Why 400 and 300? It's because in Phaser 3 all Game Objects are positioned based on their center by default. The values 400 and 300 are the x and y coordinates of the image. If you load it in a browser you should now see a game screen with a blue sky backdrop covering it:
#HOW TO SET BACKGROUND IN PHASER 3.0 CODE#
In order to display one of the images we've loaded place the following code inside the create function:

#HOW TO SET BACKGROUND IN PHASER 3.0 FREE#
You're free to use any valid JavaScript string as the key. This string is a link to the loaded asset and is what you'll use in your code when creating Game Objects. It may appear obvious to some of you, but I would like to point out the first parameter, also known as the asset key (i.e. This will load in 5 assets: 4 images and a sprite sheet. Phaser will automatically look for this function when it starts and load anything defined within it.Ĭurrently the preload function is empty. You do this by putting calls to the Phaser Loader inside of a Scene function called preload. By Richard Davey on 20th February 2018 load the assets we need for our game.
