How do I can change color of a whole game`s background in runtime?[SOLVED]

Post reply
1 favourites
  • 15 posts
From the Asset Store
Sheeky's Background Loops
$5.99 USD
40 ambient sound loops. A wide selection of looping ambient sounds for different locations.
Mark Sheeky's avatar
Mark Sheeky

  • I need to change a whole background in my game to hide the fact of using only 1920x1080 space on the screen. It should be different for each layout. How can I do that? I have found only way to set it one time at the project properties.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • System - Set layer background color

  • I am not talking about layers. I mean space outside layout. Look at this picture:

  • Ashley Is it possible at all? Maybe using some scripting or something like this?

  • I see, in this case in Properties set Fullscreen mode to Scale outer. After this, changing layer background color on the lowest layer will change the color of these black bars.

  • I see, in this case in Properties set Fullscreen mode to Scale outer. After this, changing layer background color on the lowest layer will change the color of these black bars.

    Yeah, it should work. Thank you, but I still have a little hope that I can found one more way to resolve this because I have been working on this game for nearly 2 000 hours and have a lot of objects that are outside layout and shouldn't be shown to the player. It's a little bit scary when I think how many layouts should be fixed.

  • You can change the background color in Project Properties.

    There isn't any built-in way to change it at runtime (I don't really understand why you'd need to, and nobody has ever asked for this before), but you should be able to do it with a snippet of JavaScript code, something like this:

    document.body.style.backgroundColor = "red";

  • You can change the background color in Project Properties.

    There isn't any built-in way to change it at runtime (I don't really understand why you'd need to, and nobody has ever asked for this before), but you should be able to do it with a snippet of JavaScript code, something like this:

    document.body.style.backgroundColor = "red";

    Hmm... That does not work. I was looking for something like that but I have done such thing in event sheet and it is not working:

    Just for check I changed the JS-code to 

    	alert("1");

    And it worked. So, as far as I understand, I can't just copy/paste code, you have given to me. Perhaps, there is some kind of protection of this property. What should I do then?

    It is so strange that nobody asked for this before. Maybe, they give up as early, as see some difficults but I really need this. My game works in 1920x1080 and on some bigger screens it leaves a lot of black space outside viewport(I understand that I can change color of this space in project properties but it will be forced for all layouts. In my situation I have few layouts with different background color, so if I choose one - it won't fit to other layouts). Also, I can't just use "Scale outer" fullscreen mode, because it brakes many game layouts and nearly half of the game should be made just from beggining. It is very bad idea - I have already spent nearly 2000 hours on development and now I am making final changes(colors of background is one of them).

    I am begging you: help me to resolve my puzzle. I have read half of Google and found nothing. I don't know that to do now.

  • I tried exactly that code also running in 'On start of layout' and it worked for me.

  • I tried exactly that code also running in 'On start of layout' and it worked for me.

    It is also work for me but only if I write this into console after pressing F12 in the preview. But it doesn't work from event sheet. Also it doesn't work if preview is in debug mode. Can it be blocked by something? I have tried making this on different layouts, few time checked if the event sheet is connected to layout and even toggled disable for all code on the event sheet except this. But it doesn't work. Have you any idea what else I should check to find out why it doesn't work?

  • Ashley I have made a new project and write this code. That worked fine. But in my main project I have this error:

    How it can be resolved?

  • I use:

    document.querySelector("html").style.backgroundColor = "#fff"

    document.querySelector("body").style.backgroundColor = "#fff"

    which I saw Ashley post somewhere a year or two ago and works great for me (obviously sets bg to white)

  • I use:

    document.querySelector("html").style.backgroundColor = "#fff"

    document.querySelector("body").style.backgroundColor = "#fff"

    which I saw Ashley post somewhere a year or two ago and works great for me (obviously sets bg to white)

    It looks like working code but in my current project it doesn't work and I have still this error:

  • "document is not defined" suggests you've turned worker mode on. You can't make DOM calls in worker mode, so you'll have to turn it off. If you leave it on "auto" you'll also automatically get DOM mode if you add any JavaScript code.

  • "document is not defined" suggests you've turned worker mode on. You can't make DOM calls in worker mode, so you'll have to turn it off. If you leave it on "auto" you'll also automatically get DOM mode if you add any JavaScript code.

    A lot of thanks! Finally, my problem is solved! Thanks for time spent on my question and thanks for a such good engine, which makes dreams come true!

Post reply
  • 15 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)