This week I tweaked the fonts of all the characters slightly and also finalised the story.
The final layout is shown below.
Here are the changes made to all of text styling.
Overall I just wrapped up the planned story passages I had, and deleted some of the planned passages that I had no time to fit in. I also correctly formatted all of the passages that I had written to the best of my knowledge.
The finished story can be played here:
This week I simply worked on formatting a few more passages .
I made no changes to the javascript or css code, I just mainly just progressed the story with planning passages.
The images above show the difference between my planning passages to when I format and write them properly.
As you can see the story has come along slightly from the week before, though there is still much more to write in further weeks.
With the basics down from the week before I continued to play around with A.I To create the more complex code.
I First created different styled text for each character that I could call useing a macro class in the span around the text, instead of writing all the Text changes everytime someone spoke.
Above you can see how I styled the text differently for each character.
I also changed the link hover animation from the normal underlined text that changes colour. To text that enlarges, tilts to the left and changes colour. Which allows the Links to stand out and also be obvouis to click on as it moves when the mouse hovers over it.
This was much simpler to do and customise, unlike the character macros.
I then thought of a cool effect of the text being written as you read it.
This was fairly painful to have work correctly. As the macros and variables within, used to be displayed when they should be hidden.
This caused me to have to format the text I write with a <div> at the start and end, and also <span> around the text that I wanted to format. This is still easier than having to re-write:
color: #aaddff;
font-weight: normal;
font-family: ‘Lato’, sans-serif;
font-size: 1.1em;
font-style: normal;
and more… Every single time a character spoke.
I finished this week with a basic structure that had been half formatted correctly, and half to be formatted. Next week I will continue writing the story and adding the correct notations around the text on passages I plan out.
I used inspiration from games and programmes I had watched to create a guidline for what story genre I wanted. I am very good at accidentally directly copying things I see, so I used A.I to slightly vary my ideas to my liking. With this skeleton structure that I had mostly created with slight influence from A.I to break up my inspiration I started to write the actual story.
This example passage, in harlowe, shows the ease of access toolbar at the top. In which you can change the: fonts, alignments, colour, weight, and style of the text. Additionally macros could be simply pressed instead of typed. This seemed usefull at the time as it would save time writing code.
I then wanted to create more advanced effect such as text being typed and auto text styles for characters.
I firstly researched videos on how to do this, but most twine content is near to a decade old.
I started experimenting with A.I to write code. However it did not like the harlowe format and would just keep spitting out malfunctioning code.
Therefore I switched to sugarcube to allow for easier javascript, html and css controll.
This video from kc (2022) helped me learn the basics of the suagarcube formatting, as it wasnt as simple as harlowe. Decoding Twine Episode One | Passages, Links & Variables. Available at: https://www.youtube.com/watch?v=n-X-7Z2r4gU [Accessed 16 Dec. 2025].
Furthermore I couldnt work out how to style text so I learnt from this video byDan Cox (2023). Twine 2.6: SugarCube 2.36: Introduction: Applying Text Styles. Available at: https://www.youtube.com/watch?v=XQY2C4MMgGA [Accessed 16 Dec. 2025].
Now with the basics re-learnt I could create simple passages again and next week I will continue fighting A.I over prompts for code.
Firstly I looked at which story format to use, as depending on which I picked the way i formatted variables and fonts etc, would differ.
I learnt about the difference is the formats with the Twine Cookbook and this video by Dan Cox (2018). Twine 2.2: Learning Twine: Story Formats. Available at: https://www.youtube.com/watch?v=uJy72o7xzMQ [Accessed 9 Dec. 2025].
I initiallly chose harlowe, as that is what I had used as a test. Additionally its easy toolbar features such as the ability to change fonts and colours with a press of a button was pretty useful.
“add example which i need to collect from college”
This was some basic story branch testing.
Next week I will create a story and start putting together a structured story.