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 …

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

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 ;_;

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.

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…

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?

[image] marcusx2: On this example; https://codepen.io/samme/pen/mdWMrVN 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)';

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

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.

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

How can I take control over html background?

Phaser 3

Milton June 10, 2021, 8:26pm 6

Similar to this.

Topic		Replies	Views
How to replace background-image style with loaded textures? Phaser 3	6	602	July 26, 2020
Having a hard time changing background image Phaser 3	2	2615	January 24, 2019
Unable to set background image Phaser 3	12	3527	October 24, 2019
Change the Black background loading screen to background image (Phaser) Phaser 3	1	1052	November 18, 2021
Styling background added by Phaser Phaser 3	7	1182	March 3, 2019

How can I take control over html background?

Related topics