klembot / twinejs

Twine, a tool for telling interactive, nonlinear stories
https://twinery.org
GNU General Public License v3.0
2k stars 295 forks source link

A Problem To Do With Working With Media and Assets That Could Be Simply Fixed. #695

Open everythingability opened 4 years ago

everythingability commented 4 years ago

Hello,

this is a feature of Twine that causes me, and my students, SO MANY issues that doesn't need to exist.

The problem is this:

When using media with Twine (locally) you can't just put the media in the same folder as the Twine file because it doesn't exist - or rather it does, lurking in the bowels of the /tmp folder somewhere. So a student can't create a story they use media that is already hosted online.

Processing solves this problem easily, lessons could be learnt from the way it handles it. But I would propose a simpler solution.

When you create a project -> SAVE THE FILE then... into its own folder (with the same filename). For example "My Lovely Game" would be in a folder called "My Lovely Game" and called "My Lovely Game.html". In that folder Twine could create an "assets" folder... or one might create one.

Then I could simply refer to files like this {embed image: "assets/my logo.jpg"}

It could be called "media", or whatever, doesn't matter. In fact it doesn't have to create a folder, but just the notion that relative media could be downwind of the working file (always) is what's important.

THIS WOULD HAVE THE MASSIVE ADVANTAGE that media was relatively referenced and I could just, at the end of my project, move the whole lot onto a hosted server and it would work with NO CHANGES.

Of course I could use hosted media still if I wanted.

There would be another MASSIVE ADVANTAGE in that, Twine could be configured to save after every passage is closed rather than requiring to Publish to file. This would mean I could keep the same window open and refresh, rather than rack up umpteen open windows etc.

I mentioned Processing, well, it lets you start work on a file, and assigns a folder to it. In there you can create a "data" folder ... but when you SAVE your work, the data folder is moved with it... so all relative references still work.

This would make teaching Twine SO much easier, because currently there is no good way to manage media in Twine, but there could be.

My preference would be for there not to even be the /tmp working copy... and by NAMING AND LOCATING the project at the beginning, rather than on Publish to file... an author would be able to start their story, add a few images (I too am a fan of not using "too many images") to the same folder (or folders within that folder) and create stuff very easily.

I know this means REWORKING how it all works, but in my opinion this makes loads of sense, makes it easier to author with media, easier to publish. Previously I created a variable that detected IF I was hosted or local and swapped paths accordingly (but teaching that to students feel all kinds of wrong).

Thanks.

HiEv commented 4 years ago

If you take a look at my "Displaying Images in Twine" sample code, it shows how to work around that problem. Basically, it attempts to detect whether the HTML was played normally or if it was launched from Twine, and then it either uses a relative or an absolute path, respectively. (You can click "Jump to Start" in the UI bar to see other sample code there.)

Another option is to simply publish your story to wherever you want, open that HTML in a browser, and then, when you make a change you want to see, simply publish again and then hit CTRL+F5 in the browser to refresh your view.

As for whether the issue you're talking about "could be simply fixed", I don't think it's that simple. First of all, what you're describing wouldn't even be possible in the online version, due to how browser security works. And in the offline version, normally all of the information about a story is stored within the story itself. The model would have to be changed to store other information about each story somewhere else, and that information wouldn't be included in the archived or published files.

I've suggested to the developer adding a better way to detect whether a game is launched from Twine or not (#620), which would make the solution I suggested up top work much more simply.

Hope that helps! :grin:

howtophil commented 4 years ago

In a few games I made with images, I converted the images to base64 and made passages that are basically base64 img html, then I just embed those passages where I need the images. You should be able to download and import this example into Twine and see what I mean: http://howtophil.com/IF/Image64.html

Each image would be a disconnected passage:

<img class="displayIMG"
src="data:image/jpeg;PASTE IMAGE AS BASE64 DATA HERE">

Then in, say Sugarcube, you'd use the passage embedding macro:

<<display "IMG_RainbowBrite">>\
<<display "IMG_Webcam">>\

Where you want that image.

everythingability commented 4 years ago

Phil,

yeah, I'm aware of that, thank you, but I'm thinking of working with students and unless you could drag images into Twine and have it do that automatically, then it takes a fair bit of explaining. It's like the medicine is worse than the cure.

Going back to my original idea, if you dragged an image onto Twine it could even move the image into the assets folder.... for some reason I like the files being files, because you can still edit/improve them.

Tom

On Sat, 18 Jul 2020 at 15:13, Phillip (HowToPhil) Rhoades < notifications@github.com> wrote:

In a few games I made with images, I converted the images to base64 and made passages that are basically base64 img html, then I just embed those passages where I need the images. You should be able to download and import this example into Twine and see what I mean: http://howtophil.com/IF/Image64.html

Each image would be a disconnected passage:

Then in, say Sugarcube, you'd use the passage embedding macro:

<<display "IMG_RainbowBrite">> <<display "IMG_Webcam">>\

Where you want that image.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/klembot/twinejs/issues/695#issuecomment-660489023, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAXQFGSYDUEXFWTH2AV4WDR4GUZRANCNFSM4O2247UA .

HiEv commented 4 years ago

Except for very tiny/important images, such as icons for buttons which must be there, I wouldn't recommend embedding any media within the HTML. It makes the HTML file larger, which means it takes longer to load and takes up more memory. Also, the image data itself is larger due to being base64 encoded.

I've seen games with so much embedded media that it wouldn't even properly play in most browsers because it was too large (~85 MB).

I also don't know if I'd recommend putting it into a passage, since passages content will be further encoded and have to go through their own decoding pass before they can be displayed. It's rather inefficient. It's better to set up a JavaScript variable or function you could use to get the image data as needed if you're going that route.

Basically, it's just far better to just keep most media as external files.