How to change the background of a scene before it is loaded?


#1

Hi,
At Scene 1 I want to give the user a choice (a preference - choose one out of 3 different backgrounds), which background to use in Scene 2.
But because Scene 2 is not loaded yet, I cannot change the background immediately.
If found this link with a similar topic:


but the second last answer (loading Scene 2 with JavaScript, put it to invisible and then go back to Scene 1) seems a bit “strange” - also the answer is from 2015, and I hope, there is a better solution now??

Another thing I tried is, that the choice in the preferences on Scene 1 per JavaScript sets a variable in the window indicating the preferred background.
When Scene 2 loads, there is an action choosing the right background image in that moment according to this variable.
But: there is a timespan, where the original background of Scene 2 is shown, and then the preferred background “kicks in”. Maybe I can delay somehow Scene 2 until the background has changed?
Thanks for all hints!


(Hans-Gerd Claßen) #2

if you’d use a persistant symbol as background across scenes you should be able to achieve such without scripting … sry no does not seem to work properly :frowning:


(Hans-Gerd Claßen) #3

so script it :slight_smile:
switcheriduu.hype.zip (16.8 KB)


#4

Thank you, Hans-Gerd!
I followed the idea with the persistent symbol.
See the attached file. This is without scripting.
Drawback: the transition to the other scene (I want a horizontal push) is basically not visible.
Also for now this would solve my problem good enough, I am grateful for hints how to get the transition working…

I used pictures for the background, because this is what I want to have in the real application (then the backgrounds are different kinds of cloth).

Also I tried to have the persistent background symbol in the second scene only (and not in the first scene), but that does not seem to work, because it is not loaded yet while choosing the color in the first scene.

Test-Pref-Background-Persistent-Symbol.hype.zip (75.3 KB)


(Hans-Gerd Claßen) #5

transition is the problem, that’s why i switched to scripting … switch of backgroundImage is also possible


(Hans-Gerd Claßen) #6

uh i downloaded your file … the effect is not at all good / expected …or¿


#7

Hi Hans!

I tried setting the background image by adjusting your code for “color” - without effect:

 // targetSceneElement.style.backgroundColor = newColour;
	
	var whichImage = "${resourcesFolderName}/myImage.jpg";
	targetSceneElement.style.backgroundImage = whichImage;

Some guidance please - Thank You!


#8

Hi Jim,

this worked for me:

var whichImage = hypeDocument.resourcesFolderURL() + "/myImage.jpg";
targetSceneElement.style.backgroundImage = "url('" + whichImage + "')";

You need the url(…) as part of the value for the backgroundImage. Make sure you get all the apostrophes right :wink:

Hi Hans, thank you - the transition works beautifully with this method.


(Hans-Gerd Claßen) #9

consider preloading when switching imgs …


#10

Hi emanaku,

Worked beautifully - Thank You!