Work done with TW

[A Gloom]

Can't put the actual working wiki up till I remove the personal content in it (it's for family and very much a memorial work that we're not going to commercialize or publish other the very original story which has been online for a few years now) but can show some screenshots of how I applied TW to story presentation and browser based "choose your adventure" based off the story and theworld created for it.

Just 5 screenshots right now of the "tutorial" & "bookshelf" section/sidebar mode. 

No palette is used-- Windows High Contrast & Firefox disables all backgrounds (to system theme background color), font & border colors (to system foreground colors) so all colors are achieved through system themesettings and svg's.  Slight issue with that-- setting system text color made some button borders disappear-- last minute bug and still working on that.  Also system text color is global which can't be overridden so it applies to all text (except hyper-links which is a separate setting)-- a problem seen with the cellphone.  Though button text color isn't effected.

The sidebar has 5 "modes"/content-- a mock cellphone, GPS unit, file cabinet, bookshelf, standard TW sidebar

tabbed ToC's.

The "tutorial" sidebar display opens (after an intro spalsh screen for it) when selecting the "interactive novel" at the startup splash screen (not shown yet).  It opens with the traditional TW tabbed ToC containing instructional tiddlers (the tabbed TOC's) on how to use the TW.  One of the tutorial tiddlers (opened in the story river) is a mock TW layout which clicking on a section, reveals a key to the icons (details display) used in it.  The end of the tutorial has a link to get the game started by bringing up the "cellphone" interface the game uses (replacing the tutorial tabbed ToC's).

For the "bookshelf" the sidebar displays a svg of the books' spines which when each is clicked on opens a tiddler with the book cover.  An icon at the corner of the book cover will open the book as well as a TW ToC for it in the sidebar, replacing the "bookshelf" sidebar display.  The book can be paged through with icons in the tiddler or by the sidebar ToC.

There will be more screenshots to show exactly what was done with the sidebar.

(at personal domain)

http://pyewackit.net/ghoulsgate/ragsscreenshots.html

[A Gloom]

diagram of the wiki layout, showing how everything fits in the sequence and is interconnected between story and game UI modes

larger image on the page of screenshots at personal domain, just refresh the page

http://pyewackit.net/ghoulsgate/ragsscreenshots.html

[A Gloom]

most of the screenshots are up (16 currently, if viewed previously, may have to refresh page)-- an explanation of them:

http://pyewackit.net/ghoulsgate/ragsscreenshots.html

OPENING SCREEN, CHOOSE BETWEEN 3 STORIES AND INTERACTIVE NOVEL (CHOOSE YOUR ADVENTURE)

With background music.  Each image is a link, high lights when hovered over and its own music.

3 STORY INTRO's
With background music.  Each will open a "mock" book (like the Codic Umbras in the Bookshelf sidebar mode below) containing each story.

SHADOWS STIRRING INTERACTIVE NOVEL INTRO

WEB OF INTRIGUE MOCK FORUM
"Immersive" user log in to wiki.  This opens the tutorial.

TUTORIAL SCREEN (TRADITIONAL TW TOC SIDEBAR INTERFACE)
End of tutorial brings up cellphone sidebar interface taking user back to mock forum starting the "interactive novel/adventure"

THE VARIOUS SIDEBAR GRAPHIC MODES (switches between tradiional TW and these graphical modes thru icon the pack control bar)

CELLPHONE SIDEBAR INTERFACE

1) Bookmarks (including mock forum) for mock websites.
2) Shopping directory search, bringing up mock websites or GPS map.
3) Bringing up mock forum, to post a "response" to a thread.  The wiki posts threads and "reponses" as the "adventure" progresses which the user can respond to.

GPS (ALSO FOUND IN CELLPHONE) SIDEBAR INTERFACE

GPS "unit" in sidebar contains a svg map with zoom, pan controls (the compass rose) with locations having links that opens a 4 panel viewer (with 4 different tiddler transclusions) in the river story for each location.

FILE CABINET SIDEBAR INTERFACE

1) Closed, drawers open when handles are clicked.
2) Drawer opened, displaying a file in story river.

BOOKSHELF SIDEBAR INTERFACE

Clicking on a book (books are svg's) removes it from the "bookshelf" and opens in the story river.  &nbsp.Works for each book.

TRADITIONAL TW TOC SIDEBAR INTERFACE

left to right:
 1) modified traditional sidebar tabbed ToC--
2) 2nd page control icon bar revealed by chevron down icon (slide button, also hides)
3) hidden from user Tools, More, other utility tabs revealed by padlock icon, works only for specified user


Only screenshots missing is for
VIDEO GAME STYLE FULL SCREEN INTERFACE

this may require a separate page since its is a 10 pane full screen page that uses the graphical sidebar modes as well as other transclusions in the panes for a traditional video game UI

[Thomas Elmiger]

Hi Gloom,

This looks and sounds very sophisticated (I am not a player, but find it nice and impressive and interesting).

How many hours did you put into this?

Thanks for the showcase!

Thomas

[A Gloom]

Thomas

This looks and sounds very sophisticated (I am not a player, but find it nice and impressive and interesting).

 

Thank you kindly

 

How many hours did you put into this?

Countless.  Been working on it since early 2018.  Fortunately when I was looking for wiki software for world creation for converting the originial e/print story into a computer game I found TW.  The story originally started as seasonal splash screens for my website back in 2001 and was compiled into a full e & print story and TW's browser/html based framework allowed to replace the frames based e stories and incorporate them with the browser based version of the computer game into an interactive novel/choose your own adventure multi-media game containing everything involving the stories.

I spent most of my free time incorporating nearly 30 years of writing and art (of my spouse) into it so you can call it a life's work.  Experience with it allowed me to create several different reference and world creation planning/work coordination wikis for a start videp game company.

[A Gloom]

Concerning svg's in the screenshots

All svg's were hand coded except for cell phone map* without the built in svg canvas, using only a tiddler with no type set and editor preview pane.

* paths created with gimp and final coding done in Notepas ++

"Of Rags & Shadows" wiki site title & splash screen
svg's using a system font with filters, splash screen svg text uses raster images for the cloth/patchwork fill

1st image -- http://pyewackit.net/ghoulsgate/gpsscreen.jpg

-- combines various "forms" of svgs (but not tiddlers set as svg) along with raster graphics, html and wikitext markup

Cellphone (frame) is a png framing a iframe (cell phone screen) for an external svg with embedded javascript for the zoom and panning features (controls are the compass rose, map in 5x zoom in). Each area, street and feature icon are links to tiddlers.

In the screenshot, the tiddler linked to is a 4 pane viewer with more svg's all having further tiddler links.
1) upper left pane - 3d viewer transcludes various 3d ortho diagrams internal (in wiki) svgs of buildings or areas-- have displayed x3d vrml/3d scenes in this pane.
2) upper right pane - floorplans - internal svg's drawing from a separate "central svg object library" internal svg.  Most "objects" - furniture, doors, windows stairs - are drawn from it in most floorplan svg's.
3) lower left pane- floorplan diagram with circled text icons - inline svg/code directly inserted into a traditional wikitext markup tiddler

2nd image- http://pyewackit.net/ghoulsgate/booksscreen1.jpg
http://pyewackit.net/ghoulsgate/booksscreen2.jpg

All book images in sidebar are svg's
Clicking on a book removes it from the "bookshelf" and displays it cover forward.  &nbsp.Works this way for each book.

3rd image- http://pyewackit.net/ghoulsgate/filecabscreen2.jpg

svg's (file folder halves) incorporated with a external jpg (left side) and text tiddler (right side) transclusions.

[Ste Wilson]

And so tiddlywiki takes on twine... Which was inspired by tiddlywiki... The circle is complete!
Amazing looking stuff there.

[Joshua Fontany]

As a fellow indie game-designer let me say "Well Done!" A very sophisticated use of tiddlywiki!

Best,
Josh F

[A Gloom]

@Ste

tyvm!  I never saw Twine, but now lookIng at it I think I still prefer TW.  And I was thinking I was in left field (on a completely different page from everyone else) with the way I use TW.  This link http://pyewackit.net/ghoulsgate/wikiUI.jpg is the frames design I replaced with TW-- sorry about image quality-- all I have left of it is a early mockup.

@ Josh F

tyvm!  Hearing from another game dev means a lot -- I will have to definitely get the screenshots of the geme UI mose (the 10 pane page) up-- unfortunately its requiring a lot of graphics work and my eyes aren't up to the challenge any longer so it's taking much longer to make progress.

[Donald Coates]

I am so blown away by this work!!!  I'm not near done just looking around and trying to wrap my head around the complexity of what you have done here but I have to say amazing and thank you for little windows into how you did some of it.

[PMario]

Hi Folks,

Since this thread contains story related comments, I think this topic may be interesting:

See INTRO: Story Editor - Proposal   Looking for feedback - here in  the group.

-mario

[A Gloom]

sorry Donald & PMario, I didn't notice your responses

@Donald - tyvm : ) see below

@PMario - I did notice your post about the Story Editor-- it's on my list of things to pursue along with your trigger mechanism-- so much to do and not enough hours in the day : D

I posted more screenshots of some gaps in the original presentation:

1) showing image fade in & out's

2) more of the tutorial chain

3) the single & double story page presentation tiddlers-- whhich I will posting the code to here in appreciation-- they're simple single tiddler pieces (self contained except for the tiddler/image page they transclude)

just visit the same link and hit the browser's refresh button--

http://pyewackit.net/ghoulsgate/ragsscreenshots.html

(safe link-- it's at my personal domain)

sorry about the page load -- there's 22 screenshots now ><