How can I take control over html background?

Phaser 3
1

On this example; https://codepen.io/samme/pen/mdWMrVN . How can I take control over that background image to change the position, scale, etc? I know it probably has to do with load html to texture, but using that method doesn’t let me control the background. Note: I don’t want to set the background image directly in Phaser, it needs to be done like this, through the HTML. The reason is because I have a game on FIT mode but want the background to fill the screen. Later, I want to change the color of the background using tint.

Basically, I want the game on FIT mode, except the background image. It seems that the only way to do this is to set the background image on the html. But I also want to be able to change the color of the background image with tint. But I don’t know how to convert the html background to a usable image in Phaser.

2

https://www.w3schools.com/jsref/prop_style_background.asp

3

No, I need to do it in phaser…the background is not the only thing I change color. I need to take control over the image loaded in the html. I’m sure it’s possible, but I can’t find out how ;_;

4

Do whatever you want with a Phaser image, then use something like
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";
to set it.

5

So you’re telling me to do the reverse? I can load the image like I do normally, do whatever I want, and then set it to the canvas? That code snippet doesn’t work though. You are setting the raw image, not the one I’m manipulating on Phaser. How would I get the manipulated image on Phaser and set to the canvas?

6

Similar to this.

7

I don’t understand. So I use the createObjectURL and use the created URL on Phaser and the html side, and that will work? But how do I use it with a png?

8

There the background is not in the game canvas at all, but behind it. It’s not a Phaser game object. You could still do things like

document.body.style.filter = 'hue-rotate(90deg)';
9

Exactly, it’s not a Phaser game object. I want to convert it to a Phaser game object and manipulate it. Is that possible?

10

The point is you want to turn the image into a blob.
The easiest way is probably draw the texture on a canvas, and then use canvas.toBlob().
Then create the url for the blob, and use it to set the background.
Examples a plenty on the web.

1 Like
11

I think that brings us back to the start: you should use a Game Object and scale mode ENVELOP or RESIZE instead.

12

Why? The blob solution is easy? About 4 lines of code…

13

This was the original problem posed on Discord. So I think the “conversion” problem is not really the problem.

14

He just wants to be able to set the background with a Phaser Image.

tt’s not about conversion, it’s about getting a URL so you can set the html background.

1 Like
15

Thanks Milton. . Having trouble with making the background cover the whole screen using the canvas now ;_;. I give up. I’ll just use HEIGHT_CONTROLS_WIDTH and rescale everything and reposition everything except the background using the viewport dimensions. If only I could override the scale mode of individual gameobjects, that’d be much easier

16

I have no idea what this means. You only need the canvas to get a blob url. After that you can get rid of it. When you set the background it will cover exactly the same size as the old background, unless you change the css.

17

Ok but after I create the URL from the blob and use that URL on the html background, how do I reference the image in Phaser? I still don’t have a Phaser3 image. How do I manipulate the image in Phaser? Cause all I see is the URL. If I use addImage I’ll have 2 images right? One set from phaser and the other on the html. Maybe I’m missing something ;_; sorry

18

You do not reference it from Phaser. You create an image in Phaser, do with it whatever you like and each time you want to use it as background, you need to draw it on a canvas get the url and set it as background. You can use document.body.style.backgroundPosition, Size, etc to reference it.

19

So basically:

let img = this.textures.get('image_key').getSourceImage();
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext("2d").drawImage(img, 0, 0);
canvas.toBlob(function (blob) {
    let url = URL.createObjectURL(blob);
    document.body.style.background = `url(${url}) no-repeat`;
}, "image/png");
1 Like
20

Thanks Milton. I didn’t get to use this solution after all. What I did was use scalemode HEIGHT_CONTROLS_WIDTH and reposition/rescale everything. The client wanted a responsive UI, so I couldn’t use FIT mode because I wouldn’t be able to reach the edges of the screen to place a button on the top right corner for example.

However I will keep this solution in mind and use it when possible.