HTML How to call on random images

[Atomic Brain]

I'm very new to programming, but I've decided to put together a gloryhole simulator game using SugarCube on Twine. It mostly works, though the sex system is very basic. Now I want to add some animated gifs for the sex scenes. I've been able to make it work when it's just one specific gif, but I want my game to randomly pull one from a series of images. I've looked up a few different online tutorials, but I keep getting error messages or just a broken image. Has anyone here tried using random images or gifs, and if so, how do you make it work?

 

[Rafster]

Let's assume you have something like this:

<<set $PicDir = "pic/test.gif">>

<img @src="$PicDir">

The trick is @ src instead of src on the img tag

 

[Alcahest]

This is a basic example of how to do it. It will randomly display one of the 3 gifs.

<<set $pics = ["p0", "p1", "p2"]>>
<<set _rand = random(2)>>
<<set _pic = "media/"+$pics[_rand]+".gif">>
<img @src=_pic>

 

[HiEv]

This is a basic example of how to do it. It will randomly display one of the 3 gifs.

<<set $pics = ["p0", "p1", "p2"]>>
<<set _rand = random(2)>>
<<set _pic = "media/"+$pics[_rand]+".gif">>
<img @src=_pic>

It would probably be better/simpler to do it like this:

<img @src="'media/' + either('p0', 'p1', 'p2') + '.gif'">

The SugarCube

You must be registered to see the links

(the @ in front of the HTML attribute) tells SugarCube to evaluate the contents of the attribute (which should have quotes around it) and then set it to that. The

You must be registered to see the links

returns one of the values within it randomly. That code also avoids creating an array you don't need.

If, after that, you're still having any problems with displaying images, you should probably check out the "

You must be registered to see the links

" section of my

You must be registered to see the links

. The page explains how to display images, even when launched from the Twine editor.

Also, if you can, please don't use GIFs. The GIF format has a maximum of 256 colors (thus they usually damage the image quality) and they get terrible compression. It's best to use PNG or SVG for icons, JPEG for photos, and MP4/h264 videos for animation. WEBM is also an acceptable alternative, though it should be used with caution (

You must be registered to see the links

).

Hope that helps!

 

[Alcahest]

It would probably be better/simpler to do it like this:

<img @src="'media/' + either('p0', 'p1', 'p2') + '.gif'">

The SugarCube

You must be registered to see the links

(the @ in front of the HTML attribute) tells SugarCube to evaluate the contents of the attribute (which should have quotes around it) and then set it to that. The

You must be registered to see the links

returns one of the values within it randomly. That code also avoids creating an array you don't need.

I chose an $ array in case he wanted to use it in several places or add/remove elements to it later.

About the ", well, it works without and same for arguments to widgets, so I skip them. Saves me two "'s every time which adds up to a lot over time.

 

[HiEv]

I chose an $ array in case he wanted to use it in several places or add/remove elements to it later.

If it's an unchanging array, then, instead of using a story variable, it would be better to put it on the SugarCube

You must be registered to see the links

in the game's JavaScript section or StoryInit special passage. That way it both doesn't waste space in the game's history and it can also be easily updated in future versions of the game, like if you wanted to add another video name to the array.

About the ", well, it works without and same for arguments to widgets, so I skip them. Saves me two "'s every time which adds up to a lot over time.

It's required though, in cases like the one I gave, which also reduced your 118 characters of code (ignoring line breaks) to 58 characters; less than half the size. If you want to argue about savings, then, as a whole, my method saves a lot more over time.

Not trying to throw shade or anything, since I feel like I sound more confrontational than I'm trying to be, I'm just trying to point that fact out.

 

[Alcahest]

It's required though, in cases like the one I gave, which also reduced your 118 characters of code (ignoring line breaks) to 58 characters; less than half the size. If you want to argue about savings, then, as a whole, my method saves a lot more over time.

Not trying to throw shade or anything, just trying to point that out.

I'm not talking about who of us posted the shortest code, but about general practice. Why do @img="_var" when you can do @img=_var (which works)

 

[HiEv]

I'm not talking about who of us posted the shortest code, but about general practice. Why do @img="_var" when you can do @img=_var (which works)

Because quotes are required in many cases, such as the one I gave, and the

You must be registered to see the links

documentation indicates that quotes should be used. I don't know if there are any issues which might occur by not using them, so I use them, per the documentation.

Additionally, it's recommended for standard HTML to put quotes around attribute values (

You must be registered to see the links

, especially the "Omitting quotes around attribute values" part which follows). So it's a good habit to use the quotes.

Just because you can do something, doesn't mean that it's a good idea.

 

[Alcahest]

Because it's required in many cases, such as the one I gave, and the

You must be registered to see the links

documentation indicates that quotes should be used. I don't know if there are any issues which might occur by not using them, so I use them, per the documentation.

I don't know either but as long as my game works, I'm saving time and my fingers by not using them when it works anyway. Like with passing arguments to widgets. I assume it works before it will be interpreted as a string anyway, so no need for the ", unless in examples such as yours where you need to wrap it to avoid a break. Of course, it someone told me it could cause problems that haven't materialized after all the time working on the game, I'll have to reconsider.

 

[Alcahest]

Additionally, it's recommended for standard HTML to put quotes around attribute values (

You must be registered to see the links

, especially the "Omitting quotes around attribute values" part which follows). So it's a good habit to use the quotes.

Just because you can do something, doesn't mean that it's a good idea.

(I didn't see your edit)
Ah, but they explain why you should use quotes, and the reason is just what I said, that sometimes you need to wrap it to avoid breaks. They even say it is permitted to omit quotes in certain circumstanes, giving an example. I take their answer as a confirmation there aren't any unforseen problems that might occur by omitting the quotes as long as the code doesn't break, which I would notice when running it.

I'd say saving time and fingers is a good idea. Just trying to help people avoid doing unnecessary moments, and I'm glad you could point out documentation that verifies it seems to be okay as long as you produce code that works.

 

[Rafster]

WEBM is also an acceptable alternative, though it should be used with caution

Damn, and I just use webm for almost every video on my game (and being a sandbox RP game, it's a lot, almost every vid). I guess I should post a warning about browsers and compatibility on the game. Sigh....

 

[HiEv]

Damn, and I just use webm for almost every video on my game (and being a sandbox RP game, it's a lot, almost every vid). I guess I should post a warning about browsers and compatibility on the game. Sigh....

If the videos are made using the v8 or v9 codec, then you're probably fine, as long as they aren't playing your game using Safari on macOS prior to v11.3 or <shudder> Internet Explorer on a machine which doesn't have the codec installed. You can use

You must be registered to see the links

to check the videos to see what codec they're using (e.g. a codec ID of "V_VP8" = the v8 codec).

However, if you really want the highest compatibility, MP4/h264 videos work in the most browsers (

You must be registered to see the links

).

If this was two years ago, before Safari added WEBM support, I would have suggested converting, but currently you're probably OK.