SOUND EFFECTS

We will start by talking about an easy way to add Sound Effects which will stop playing whenever the player moves to a new passage. After you find your YouTube video, click Share and Embed. Copy the iframe code. If you want the video hidden, change the width and height to zero. If you want the video to autoplay, add ?autoplay=1 to the end of the video URL. Keep in mind that this method will NOT allow you to add background music that plays continuously throughout the game. We will discuss how to add background music below these examples.

<iframe width="0" height="0" src="https://www.youtube.com/embed/9NcPvmk4vfo?autoplay=1"></iframe> 

Here are a few Legend of Zelda sound effects and their iframe embed code.
Item:

<iframe width="0" height="0" src="https://www.youtube.com/embed/ly5C2dAUF-o?autoplay=1"></iframe> 

Secret:

<iframe width="0" height="0" src="https://www.youtube.com/embed/c8YNB9zVlHE?autoplay=1"></iframe> 

Game Over:

<iframe width="0" height="0" src="https://www.youtube.com/embed/3ye2TjzeX70?autoplay=1"></iframe> 

BACKGROUND MUSIC

To add background music that plays continuously throughout the game, first click on the menu in the bottom left and add the following code to the Story JavaScript.

if(typeof YouTubeTunes == "undefined"){
$('body').append('<div id="youtubetunes"></div>');
var YouTubeTunes = {
play: function(id){
console.log('YouTubeTunes:' + id);
if(this.current != id){
this.current = id;
var container = $('#youtubetunes');
container.empty();
container.append('<iframe src="https://youtube.googleapis.com/v/' + id +
'?autoplay=1&amp;loop=1&amp;playlist='+ id +
'" style="visibility:hidden;width:500px;height:500px;position:absolute;top:-1000px;left:-1000px;"></iframe>');
} else {
console.log('already playing');}},
stop: function(){
$('#youtubetunes').empty();
this.current = "";
console.log('stopped youtubetunes');}};
window.YouTubeTunes = YouTubeTunes;}

Next, add this code to the passage in which you want the music to start playing.

<div style="display:none;"><img src=";P" onerror="YouTubeTunes.play('UyxR8RNoaIQ');"></div>

Using that last code you can play the audio from any YouTube video. For example, to play the audio from https://www.youtube.com/watch?v=5lF1XV9g29k you need to replace UyxR8RNoaIQ with 5lF1XV9g29k. Like this...

<div style="display:none;"><img src=";P" onerror="YouTubeTunes.play('5lF1XV9g29k');"></div>

CONTINUE TO THE NEXT POST: Twine Battle

PICTURES AND ANIMATED GIFS

First of all I want to give you a warning... If you simply copy and paste the URL from a stranger's site, they could delete or change the image at any time. You can use <img src= > to add pictures and animated GIF files to your project. When adding this code, make sure that you only use one angle bracket on each side, not two. The web address of the file needs to go after the equals sign, like this:

<img src=https://ohiofi.com/assets/nyan.gif>

BACKGROUND IMAGES

Updated 8-31-2017

How to change the background for the entire game

Here is how to change the background image when using Twine 2's default Harlowe format. Click the menu in the bottom-left and then Edit Story Stylesheet. Copy and paste this CSS code to change the Background for your entire game. Replace the URL with the image/GIF that you would like to use.

tw-story {
	background-image:url("http://ohiofi.com/img/The%20Castle%202.png");
  	background-size: cover;
}

How to change the background in the middle of your game

If you're like me... you'd like to have a farm background when you're at the farm, to have a castle background when you're at the castle, and to have a fire GIF in the background when you cast a fire spell. Here's how to do that. STEP ONE: click the menu in the bottom-left and then Edit Story Stylesheet. You will add the URLs of the background images that you would like to use and give each one a simple name, like "castle" or "harbor." You can even set an animated GIF as a background.

tw-story[tags~="castle"] {
 background-image:url("http://ohiofi.com/img/The%20Castle%202.png");
 background-size:cover;
}
tw-story[tags~="harbor"] {
 background-image:url("http://ohiofi.com/img/The%20Harbor%202.png");
 background-size:cover;
}

STEP TWO: When you want the background image to change in a specific passage you will add a Tag. Make sure that the Tag is spelled EXACTLY the same as it is in your CSS. It will NOT work if you type "Castle" in one and "castle" in the other. All passages without a Tag will have NO background image.

CONTINUE TO THE NEXT POST: Twine CSS

RANDOM NUMBERS

Games are more interesting if they are different each time you play. In board games, rolled dice and shuffled cards are typical. In video games, random numbers are used. You can use the code random to "roll dice" and get a number between 1 and 6. The code below says to the computer, “Generate a number between 1 and 6. If you roll a 1, the player has found a dollar.”

(set: $diceroll to (random: 1, 6))
(if: $diceroll is 1)[
  You found a dollar! (set: $money to $money + 1)
]

The code below say to the computer, “Generate a number of coins (between 1 and 100) to be found in a treasure chest and tell the player how many coins they found.”

(set: $randomtreasure to (random: 1, 100))
You found $randomtreasure coins in the treasure chest!
(set: $coins to $coins + $randomtreasure)

CONTINUE TO THE NEXT POST: Twine Music and Sound Effects from YouTube