I’m wondering how to have a picture appear with a frame next to some text also with a similar frame, in a box kind of. I’m not sure how to describe it, but that’s how it appears in many games, like in RPG Maker and Pokémon and many others. I’m wondering how to do that in Twine, because I think I’ve seen it before somewhere.
Okay, so what I’m after is “speech boxes” and how to make them work. I managed to find some code that was supposed to work which I put in my JavaScript section. It didn’t work. (Tried to post the code here too but it was displayed in a very odd manner.)
I’m also wondering if there is any way to do it in Twine1, because there I’m able to import pictures and I oftentime find it easier to work with.
You haven’t said which Twine engine you are using, but you can use the ChapelR Speech Box plguin if you are using Sugarcube. I don’t know of any other speech box plugins so there is a chance that this is the code you tried before.
The plugin works in both Twine 1 and Twine 2. However, you’ll have to set Twine to use the Sugarcube engine first.
In the Twine 2 menu, go to Story > Details > Story Format > Sugarcube 2.x
In Twine 1, I think you have to download and install Sugarcube first. Then go to Story > Story Format > Sugarcube 2
Sorry if you’ve tried any of this and I’m stating the obvious.
As a side note, you may use the ‘</>’ button (Preformatted text) in the bar just above the box where you’re typing your messages in order to show your code.
I strong suggest you don’t using the Image Embedding feature of the Twine 1.x application, which automatically converts the data stored within the image file into a Base64 String that gets stored within a Passage with the same name as that image.
There are a number of technical reasons why this is not a good idea:
The process of converting the image’s data into Base64 String greatly increases the storage space needed to store that data.
The embedding Base64 data increases the size of the generated HTML file, which in turns increases how long it takes for the web-browser to load the entirety of that file into memory, which it has to do before it can start processing the contents of that HTML file. This causes the start-up process of the select Story Format to be delayed, which means the end-user has to wait to see the contents of the project’s first Passage.
The Story Format engine during start-up may cache the contents of each Passage in memory so that it can quickly access that Passage’s contents when it is being visited. This caching process includes the Passages that contain the Base64 image data, thus slowing down the process and consuming more memory.
An embedded image can end up consuming up to three times more memory than one accessed via a URL:
a. The memory required when loading the entire HTML file into memory.
b. The memory required to cache the contents of the Passage storing the image’s Base64 data.
c. The memory required to convert the Base64 data back into a HTML Image object, when it needs to be displayed. And this conversion may need to happen multiple times if that image appears more than once.
The web-browser’s own Image caching system, which is used to cache URL referenced images, does not handle the caching of the embedded Base64 image.
The above technical issues are some of the reasons why the Twine 2.x application does not include the same “Embed an Image” feature as the Twine 1.x application.