Background images/music in Twine 2: 2.21.0 Mac

Question

Hey there!

Here's the deal... I know almost nothing about coding. For someone that grew up on DOS, I have become extremely reliant on everyone else doing the work since Windows/OS. However, I am a quick learner.

I am making a game for my last game writing class before graduation and really want to blow this out of the water. It's fun, I love all the little twists and turns, but I'm really struggling with background images.

Question 1: I'm using either my own images or free images (with attribution) and have been successful with inserting an image into a particular passage. I think it would look much better if it were the background image instead of just thrown up there. If my url is "images/revolver.jpg" how would I set that up in the style sheet and what do I put in the passage (or tag) to connect them?

(If it is easier/better, I CAN upload the images to my porfolio website where the game will be. I was just hoping to do it this way.)

Question 2: Is there a way to stop music from playing through to the next passage? Each one has its own music and I don't want it to play over the music from the last. I have it set up like this in StoryInit:

<<cacheaudio "mainsong1" "music/mainsong1.mp3">>
<<cacheaudio "mainsong2" "music/mainsong2.mp3">>
<<cacheaudio "mainsong3" "music/mainsong3.mp3">>
<<cacheaudio "mainsong4" "music/mainsong4.mp3">>
<<cacheaudio "mainsong5" "music/mainsong5.mp3">>
<<cacheaudio "mainsong6" "music/mainsong6.mp3">>
<<cacheaudio "mainsong7" "music/mainsong7.mp3">>
<<cacheaudio "end" "music/end.mp3">>
<<cacheaudio "SoundFX1" "music/Archery.mp3">>
<<cacheaudio "SoundFX2" "music/Gunshot.mp3">>
<<cacheaudio "911.1" "music/911.1.mp3">>
<<cacheaudio "911.10" "music/911.10.mp3">>
<<cacheaudio "911.8" "music/911.8.mp3">>
<<cacheaudio "911.5" "music/911.5.mp3">>
 

If using Harlowe would be better, that's all fine and good, but I need specifics. I found a great website for SugarCube which is why I changed my format.

I know this is a lot, but I really like doing this. I'm considering taking a coding course after I graduate in August before my masters program in September. For now... I just need help with this.

Thank you!

Answer 1

how would I set that up in the style sheet

You would generally use a CSS selector that targets the body element and use background related properties like background-image and background-size to show the image. Placing the following CSS within your project's Story Stylesheet area would display your 'revolver' image as the background for all the passages of your project.

body {
	background-image: url("images/revolver.jpg");
	background-repeat: no-repeat;
	background-position-x: center;
	background-size: cover;
}

If you want to show a specific background image for a specific passage (or group of passages) then you can assign a known Passage Tag to that passage and use a CSS selector that targets that known Passage Tag.

eg. If you assign a forest passage tag to one or more passages then you can use a CSS selector like the following to only display the 'forest' background image for those passages.

body[data-tags~="forest"] {
	background-image: url("media/forest.png");
	background-repeat: no-repeat;
	background-position-x: center;
	background-size: cover;
}

Is there a way to stop music from playing

You can use the stop arguement of the <<audio>>  macro to stop the playing of one or all tracks, and the 3rd example in that macro's documentation shows you the syntax for doing that. The following example stops the current track(s) before playing the 'mainsong2' track.

<<audio ":playing" stop>>
<<audio "mainsong2" play>>

 

Comments

Thank you so much! I have been trying to figure this out for over twelve hours. My brain is tired and my shoulders and upper back are sore from typing and sitting all day long. I am going to try this once before I close the laptop for the night. If I can't get it to work, I'll try again tomorrow. 

Just to verify, I put revolver in the tag, no quotes or anything, correct? I'm thinking I must have something a little different which is why it isn't showing the background photo when I publish to file and pull it up in the browser. 

You have renewed my faith in everything electronic! haha! I was ready to throw my macbook in the pool! 

---

While I'm thinking about it. This website is a Twine demo with cool little music and image how-to's and it says (if you scroll to the bottom) it can be saved and imported to Twine. Forgive my ignorance, but I can't figure out how to do this. I want to see the "behind the scenes" goodies because I tend to learn by trial and error and seeing it will allow me to do that. Is it possible? Am I just way too tired and it's making me dumb?

https://sub-q.com/wp-content/uploads/plugin-demos/sqTwineSound/sqTwineSound_demo.html

---

That's a really old Twine demo, considering it was made for SugarCube v1.0.3, and the current version is SugarCube v2.28.2.

Anyways, you can just save the HTML file from your browser and then import that HTML into Twine to take a look at the source (though any images or other separate files will be missing).  However, I'm not sure how much of it is valid with the current version of SugarCube.

If it helps, I have a more up-to-date collection of Twine/SugarCube sample code here, including some music/audio sample code and some help for implementing images so that they're visible both while testing in Twine and in the published HTML version.

Finally, regarding the revolver tag, yeah, no quotes or anything.

Hope that helps!  :-)

---

Thank you! I woke up with a full on migraine this morning and had to take some time to get better. I am ready to go now. Y'all are awesome!

---

Thank you so much! I am looking at everything now and you have no idea how much this will help. THANK YOU!