1. Use AI to generate a better banner picture (an old door to represent choices)
2. Debug panel to show current passage, shown only when debug flag is activated
3. Footer panel - empty for now
4. Speaker box - when a character is speaking, put their text in a box that is labeled with their name.
5. Handling annoying line breaks
6. Add inventory macros and split into separate files
7. Change Visual Code settings so that word wrap is on as a default

Use AI to generate a better banner picture (an old door to represent choices)

I asked ChatGPT to create a picture of a door with an old wooden door with a peephole. I resized that to use as my new game banner. Looks much better, right?

In debugging Twine, it is VERY helpful to know the name of the current passage, so I add that to the passage footer along with a flag to specify if debugging is on or not (set in :: StoryInit). I'm also debugging a variable named $hour which I intend to track 'game time'. The variables are initialized in ::StoryInit

:: StoryInit {"position":"1800,425","size":"100,200"}


<<set $debug to true>>
<<set $inventory to []>>
<<set $hour to 0>>

Using a variable to control debugging allows me to easily turn on/off debugging.

Here is the footer. It is only used for debugging right now. I'm not inserting anything for the game itself - not yet anyway.

:: PassageFooter {"position":"200,0","size":"100,100"}
<<if $debug is true>>\
<div style="border:1px solid #33C; padding:8px; margin:6px 0; border-radius:4px;"> \
<<print "DEBUG hour:" + $hour + " passage:" + passage()>>
</div>\

When a character speaks, I want to be clear as to who is speaking and what they are saying. Many games do something similar. See the example below. To support this:

• See the macros under the game\scripts folder. There is a function named "makeSpeakerMacro". It will allow me to create macros for my various speakers. But in this iteration, I have only a speaker named "Voice" which is meant to be a mysterious voice that you here.
• For each character, you would call makeSpeakerMacro with the name of the character and the name of the matching macro.

Declare for speaker named 'Voice'

makeSpeakerMacro("voice", "Voice")

Usage:

<<voice>>
You are at the start of the game. But nowhere to go except to follow the road
<</voice>>

Display in Game:

Once my game starts to be functional, I started to notice how bad it looks and the biggest problem was all of the vertical space - lots of extra blank lines in the game output. The primary cause is that every macro I enter could cause a line break. For example's let's say I enter the following:

<<set $flag to 0>>
<<if $flag is 999>>
This line does not happen
<</if>>

This block should not output anything, because $flag is set to 0 and s the if block should not execute. But in typing this block, I have entered 4 lines and so 4 line feeds and thus the output would be 4 blank lines.

One solution is to enter a '' character at the end of each line. This will prevent the line break. I do not add a \ after my output but it will not cause a blank line because the body of the if will not be written.

<<set $flag to 0>>\
<<if $flag is 999>>\
This line does not happen
<</if>>\

I have introduced a macro named 'makeSpeakerMacro' and then later I use that macro. It works at the start as it is in the same .js file. But, as I add more and more js code, eventually I would want to place them in separate files. To make sure that the dependencies are loaded first, I place the dependencies in files that are named alphabetically before the others. 01_macro.js 02_game.js (uses the macros in 01_macro.js)

In working with twee files, I am often typing text that goes beyond a page width. That is okay for the game because the text will be wrapped to fit the game window. But in reviewing/debugging that text, it is very annoying as I had to scroll over. So in Visual Code, I have to press ALT+Z to toggle word wrapping for that file. After a while, I got tired of doing this on every file. I found a setting that can be added once that will ensure the default setting for a new file is to have word-wrapping ON.

.vscode/settings.json

{
    "editor.wordWrap": "on"
}