Ask a Question

Have Background Image Options?

0 votes
by (360 points)
My game takes place on a desktop.  Is there a way I can have the user choose what the background image is?  Probably via a button.  Like, is it possible to change the background after the page is loaded?

Thanks!

2 Answers

0 votes
by (360 points)
 
Best answer
Ha, I actually figured it out!  You can put these in a script tag:
Change background color script:
document.body.style.backgroundColor = "#000000";

change background image script:
document.body.style.backgroundImage = url([url]);
 

Thanks!
by (750 points)
Hey - maybe for us who may be interested, use the code snippet and share this info in that? I'm glad you were able to solve your problem yourself, but others may want to use your solution  :)
by (360 points)

I apologize if my format was off.  To change the background color (for example) you can use this: (in a button)

<<button "Change Color">> 
   <<script>> 
      document.body.style.backgroundColor = "#[color]";
   <</script>>
<</button>>

Or for an image:

<<button "Change Color">> 
   <<script>> 
      document.body.style.backgroundImage = url(https://www.exampleImage.com/exampleimage);
   <</script>>
<</button>>

 

by (750 points)
Ahh, thank you for including the examples :)

In the changing color part - do you assign it in the CSS, or something? Or is the [color] only your code for "put in whatever colors you prefer'?

On this idea - I wonder if it's possible to make an 'array of colors'....
by (360 points)
Nope! I just literally used that line of code and it worked fine.  I tried assigning it to a function in javascript, to make things easier but that just gave me errors (granted, I'm not the best with Javascript anyway), so I just made a copy of it in my "Story Notes" passage for reference.  Hope that helps! :D
by (750 points)
Ah That's fine. :) Just curious.
0 votes
by (159k points)

There is nothing wrong with @ygmantell's solution but there are other SugaCube specific methods that can be used to apply CSS based styling to a story.

note: It is generally a better idea to create CSS styling rules within the Story Stylesheet area and to then to apply those rules to the relevant HTML elements you want styles, applying styling directly to an HTML element can make it harder to change that styling later.

1. Using a Passage Tag to control the styling.

If you add a Tag with a predetermined name (like known-tag for instance) then you can use a CSS selector like the follow to apply style to Passages that have been assigned it.

/* Via a known Passage Tag. */
body[data-tags="known-tag"] {
	background-color: grey;
}
body[data-tags="known-tag"] a {
	color: black;
}


2. Using the <<addclass>> macro to add a CSS class to a HTML element.

If you add a CSS class with a predetermined name (like known-class for instance) to a HTML element (like the html element) then you can use a CSS selector like the follow to apply style to the story.

/* Via link which assigns a known CSS class to html element. */
html.known-class body {
	background-color: brown;
}

... and you could use a <<link>> macro like the following to call the <<addclass>> macro like so

<<link "Apply CSS class">>
	<<addclass "html" "known-class">>
<</link>>


3. Using the Setting API to create a Theme setting.

You could use the Setting.addList() function to setup a set of CSS based themes which the player can select from, the following Javascript example should be place in the Story Javascript area and is a cut down version of one of the Setting.addList() examples.

var settingThemeNames = ["(none)", "Bright Lights"];

var settingThemeHandler = function () {
	// cache the jQuery-wrapped <html> element
	var $html = $("html");

	// remove any existing theme class
	$html.removeClass("theme-bright-lights");

	// switch on the theme name to add the requested theme class
	switch (settings.theme) {
		case "Bright Lights":
			$html.addClass("theme-bright-lights");
			break;
	}
};
Setting.addList("theme", {
		label    : "Choose a theme.",
		list     : settingThemeNames,
		onInit   : settingThemeHandler,
		onChange : settingThemeHandler
}); // default value not defined, so the first array member "(none)" is used.

... you also need to create a CSS selector that targets the theme-bright-lights class  like so.

/* Via a Setting which asssigns a theme CSS class to html element. */
html.theme-bright-lights body {
	background-color: orange;
}

note: One advantage of using the Settings method is that the selected theme persists between readings/play-through of the story/game.

by (360 points)
edited by
Thanks for the detailed answer!  Much more than I would have been able to come up with! :D  

Quick question though:  If a user changes the background using my method, then saves, will the background still be changed when that save is loaded? Or will it not remain even with saves?

Thanks so much!

 

EDIT: Tried it and it did not save.  Is there any way around this?  I find that my method is the most straight-forward for me, being not so great at programming.  I apologize if this is a stupid question!  I'm hesitant to use the settings menu because Im using a <<volume>> (slider) macro (got it from a reddit post) that I can't put into the default settings menu (I think) and want everything to be in the same place.
by (159k points)

background:
a. A Save contains the story History up to the point that the save was made.

b. Story History consists of each Moment of the Player's journey through your story.

c. A Moment is created (and added to History) each time the Player transitions from one Passage to another (can be the same passage). a Moment consists of the Name of the Passage being displayed and the state (values) of all known Story Variables as they were just before the Passage was shown.


d. [Optional & Advanced] you can manually associated Meta Data with a Save created using the Save.slots.save() function, and can access that Meta Data again if you manual use the Save.slots.load() function to load that Save later.

So to answer your question, if you want something to be remembered within a Save then it needs to be either stored within a Story Variable or manually added to the save's Meta Data.

The following describes how to use a Story Variable.

1. Setup the default value of the variable within your StoryInit special passage.

You can either manually assign the default value of the SugarCube background colour (which is #111 or you can use some Java-script based code to obtain that value. This example will use jQuery to do it but I'm not endorsing this as the best method.

<<set $backgroundColour to $('body').css("background-color")>>


2. Change your <<button>> macro to make use of the variable.

<<button "Change Color">> 
	<<set $backgroundColour to "green">>
	<<run document.body.style.backgroundColor = $backgroundColour>>
<</button>>

... you don't need to use a color-name value, any valid CSS color type will work.
 

3. [Important] Do some sort of Passage Transition before saving.

Because History doesn't know about any variable changes within the current Passage until after a Passage Transition occurs, which means that a Save made before that transition won't contain the variable's new value. Especially if the variable was changed via something like your <<button>> macro, which requires end-user interaction.

note: This is another advantage of the Setting method because the saving of it's data occurs instantly at the time of the end-user's interaction, and it doesn't need a passage transition.

by (360 points)
Wow, thank you so much, that really helped me (and I hope many others who come back here) understand more! :D
Snow Theme by Q2A Market
Powered by Question2Answer
...