HTML Need some Html help

[TeamHentaiX]

google twine has some outdated information

Share your Tips here
Hoping anyone can help Answer these Questions

FAQ
How to make a Stats Screen on the left side?
How does tags work in Twine?

 

[guest1492]

You would probably get more help in the

You must be registered to see the links

Anyway, the first question is what story format are you using? The default is Harlowe but most of the HTML games you see on here use SugarCube. (So you would definitely be more likely to get help here if you are also using SugarCube.)

 

[TeamHentaiX]

You would probably get more help in the

You must be registered to see the links

Anyway, the first question is what story format are you using? The default is Harlowe but most of the HTML games you see on here use SugarCube.

thank you and im using sugarcube

 

[guest1492]

In SugarCube, the UI bar at the left has a couple elements that refresh with every passage change. The four elements are each connected to a different passage:

• StoryBanner
• StorySubtitle
• StoryAuthor
• StoryCaption

You simply have to create a passage with one of those set up as the passage title. Each time there is a passage transition, the code inside those passages are run again and the results displayed on the UI bar (for example, displaying the player's current health). Most people usually use StoryCaption.

As for tags, tagging passages are basically for categorization and organization. You can also use code to specifically target passages that have specific tags. Also, the tags of the passage are appended to the html, body, and #passages elements in the html DOM so you can manipulate them with CSS selectors.

There are

You must be registered to see the links

that are reserved for internal use, so only use them if you're supposed to.

 

[TeamHentaiX]

In SugarCube, the UI bar at the left has a couple elements that refresh with every passage change. The four elements are each connected to a different passage:

• StoryBanner
• StorySubtitle
• StoryAuthor
• StoryCaption

You simply have to create a passage with one of those set up as the passage title. Each time there is a passage transition, the code inside those passages are run again and the results displayed on the UI bar (for example, displaying the player's current health). Most people usually use StoryCaption.

As for tags, tagging passages are basically for categorization and organization. You can also use code to specifically target passages that have specific tags. Also, the tags of the passage are appended to the html, body, and #passages elements in the html DOM so you can manipulate them with CSS selectors.

There are

You must be registered to see the links

that are reserved for internal use, so only use them if you're supposed to.

thank you, i was wondering how to do that, i appreciate the help. if i have anymore questions i will ask here again

 

[TeamHentaiX]

In SugarCube, the UI bar at the left has a couple elements that refresh with every passage change. The four elements are each connected to a different passage:

• StoryBanner
• StorySubtitle
• StoryAuthor
• StoryCaption

You simply have to create a passage with one of those set up as the passage title. Each time there is a passage transition, the code inside those passages are run again and the results displayed on the UI bar (for example, displaying the player's current health). Most people usually use StoryCaption.

As for tags, tagging passages are basically for categorization and organization. You can also use code to specifically target passages that have specific tags. Also, the tags of the passage are appended to the html, body, and #passages elements in the html DOM so you can manipulate them with CSS selectors.

There are

You must be registered to see the links

that are reserved for internal use, so only use them if you're supposed to.

know any good locations to keep images for twine or should i just keep them all on my computer and just drag to browser for the <img src=""> feature. just asking cause right now i got stored on computer 455 images so far for my game.

 

[guest1492]

You mean as in putting your images on a webserver somewhere? I'm not sure I understand. If people are going to download your game, then they would expect to have the images in the download. If your game is going to be hosted on a website, then wouldn't that website be the place to put your images?

I also do not really understand what you mean by dragging images to the browser. Are you doing that to get the full path name to your images? You can use relative paths too. For example, if my game was "C:\Example\example.html" and one of my images is "C:\Example\images\image01.png" then in my game, I can use <img src="images/image01.png"> to load it.

If that's not working for you, then it's probably because you're using test builds, in which case a temporary html file is created (I'm not sure where, and doubly so if you're using the web version of Twine) so you need the full file paths for the images. If that's the case, you can try this:

Config.passages.onProcess = function (p) {
    /* assuming you use <img src="images/whatever.png"> in your code and the actual folder containing the images are C:\Example\images\ */
    return p.text.replace('src="images', 'src="C:/Example/images');
};

This is just a simple search and replace that the SugarCube engine will do on your code before parsing it. It should be put in your story's javascript section. Obviously, you should remove this before releasing your game because players are not going to keep the game in the same drives/folders as you.

 

[TeamHentaiX]

You mean as in putting your images on a webserver somewhere? I'm not sure I understand. If people are going to download your game, then they would expect to have the images in the download. If your game is going to be hosted on a website, then wouldn't that website be the place to put your images?

I also do not really understand what you mean by dragging images to the browser. Are you doing that to get the full path name to your images? You can use relative paths too. For example, if my game was "C:\Example\example.html" and one of my images is "C:\Example\images\image01.png" then in my game, I can use <img src="images/image01.png"> to load it.

If that's not working for you, then it's probably because you're using test builds, in which case a temporary html file is created (I'm not sure where, and doubly so if you're using the web version of Twine) so you need the full file paths for the images. If that's the case, you can try this:

Config.passages.onProcess = function (p) {
    /* assuming you use <img src="images/whatever.png"> in your code and the actual folder containing the images are C:\Example\images\ */
    return p.text.replace('src="images', 'src="C:/Example/images');
};

This is just a simple search and replace that the SugarCube engine will do on your code before parsing it. It should be put in your story's javascript section. Obviously, you should remove this before releasing your game because players are not going to keep the game in the same drives/folders as you.

i decided to keep the images with the HTML file of the game

also sorry to confuse you, and dont worry i got the images working.