Creating games with tiddlywiki

#1

I once experimented with using TiddlyWiki to manage player character sheets and attempted to create branching stories, but nothing too sophisticated. Recently, after engaging with a discussion on teaching TiddlyWiki to interactive media and game design students, I’ve become interested in exploring TiddlyWiki for game creation once again. Let’s discuss TiddlyWiki’s strengths and weaknesses in this context, potential challenges, and possible solutions. Who knows, maybe this will lead to improvements or innovations within TiddlyWiki.

I’ll start.

Why Consider TiddlyWiki for Game Development?

At first glance, TiddlyWiki, a note-taking software, might seem ill-suited for game development. However, its modularity, cross platform compatibility thanks to the use of web technology, and its powerful filter and templating system make it an interesting option. The fact that TiddlyWiki is free and open-source adds to its appeal.

Games have been created using unconventional tools like books, PDFs, and even Excel - so tiddlywiki shouldn’t be any different.

TiddlyWiki’s structure allows for documenting the game development process alongside the game itself. This includes detailing plot points, character descriptions, or creating a user manual directly within the game’s framework. Features such as encryption and custom layouts can enhance storytelling by revealing content at appropriate times. Additionally, the support for plugins and the HTML format would hugely simplify mod creation, hosting, and updates.

Challenges and Questions:

  • How can we incorporate music within TiddlyWiki games? I’d like to play sound effect when a player make an action for example, how could we do this ?
  • How to handle CSS animations and the refresh mechanisms? If tiddlywiki refresh a button because the content has changed, then the styling will be refreshed too, which is a problem for css animations.
  • For a single-file approach, how can we manage game assets like images most effectively? Do you know what would be the most lightweight way to create pixel art, or is SVG the only sensible choice ?
  • What are the essential components needed to develop a game in TiddlyWiki? I think we need the ability to drag things (DraggableWidget), to click on things (ButtonWidget, EventCatcherWidget…), to display things (RevealWidget, ListWidget, Conditional Shortcut Syntax). Saving progress can be done with tiddlers fields. What more would we need?

I know we could do almost anything by writing js plugins, but it would be great if we could find interesting applications of the already existing features within tiddlywiki, for the following reasons:

  • Benefit from tiddlywiki’s future upgrades by staying as vanilla as possible
  • Keeping things as light as possible for performances
  • It’s more challenging ! And it would be a good way to push tiddlywiki to its limits.
2 Likes
Teaching Tiddlywiki to Interactive Media & Game Design Students
#2

If of any use to you, Acey Ducey.

2 Likes
#3

Thanks a lot for sharing ! I will add it to the thread I mentionned, this look very interesting

#4

See the game development framework TW Gamification - Gameify all wiki activities. Earn exp and gold from completing TODOs! Motivate you with a second life in your wiki. , while it focus on transforming reality action to in-game value, it also bring 2 demo game in the website.

One is the “ego store lite” game, where you can create check in button to earn gold, and spend gold to buy items.
And the doc site include tutorial on how to create this kind of WikiText-based game using action widgets. You will be interested in this. (See DevelopSubPlugin section.)

Another is a rust based game that compiled to wasm, which is too powerful to be explained here.

2 Likes
#5

I’ll be honest I will need a bit of time to understand how this work, but it’s clear I have a lot to learn from you, thanks a lot for sharing your work! About your rust based game, is this what is powering your event calendar and other custom layout view ? (P.S. I’m a huge fan of the SCP Foundation, and I’ve noticed references to it on your wiki. Are you planning to make a SCP game? :eyes:)

#6

Not exact building a game, but game related… I want to put together an Area/Zone editor for a text based MUD. Inputs to generate Rooms, Mobs, Objects, Quests, World and SpecProcs. Collect all the data associated with the top level area/zone tag and export in the proper json format for use on the game server.

Allow for a walk-through mode in the wiki and generate a map of the layout.

Game dreams…

#7

This sounds similar to my desire to build map sectors like what 3 words does with every 3M^2 however do it for a small world, such as an area where short names are given to each sector for precise and rapid naming. Names that are easily shared over a voice channel.

#8

Currently I only figure out hot to do value transform, but I don’t know if there is a good narrative scripting engine like ink - inkle's narrative scripting language in tw.

I heard there was a non-linear story engine based on tw, but refactor to not using tiddlywiki later on.

Game need both value and narrative.

#9

Yes but not yet started, I’m still working on framework, because it is not a standalong game, but a gamification, so the important part is how to integrate it with wiki events.

Each layout is written in different ways, event calendar plugin is using fullcalendarjs, and whiteboard layout is using tldrawjs. And SCP game will use bevy ecs game engine, which make it easier to manage music and sprites.

Layout is a way to write fullscreen app, and you can embed anything in a new layout. So each of my game will be a layout. And they can share the wiki to store data, so ego-store-lite game 's gold can be transform to NPC experiences in the SCP game.

1 Like
#10

It’s not exactly a game but it is interactive (I do plan on adding more “game-like” things to it) - I used music and sound effects for various actions in the terminal of my wiki, though I’m sure someone could figure out a much better way to do it than I did. Essentially, all the sounds are stored in tiddlers that contain HTML audio elements with external references to the sound files, and they’re transcluded in various ways to play them through actions in the terminal interface, such as inputActions in the edit-text widget (this controls the keypress sound) and entering certain commands.

I made it deliberately difficult to find the tiddlers controlling the terminal elements so that people who go to the site for the story can’t spoil themselves to its contents or existence by accident. If you’re curious about how it works, though, you can just add “#secret” to the end of the site url to find the tag they’re all in. It’s rather messy right now… but it works. In making this post I also realized I didn’t add an easy way to edit the terminal itself to see how it works (the titlebar is disabled to make it look more like a program window), so there’s now an “Edit Terminal” button in the DevTools tab of MoreSideBar when you have editing enabled in the settings dropdown at the top of the screen. The button shows up once you’ve made at least one entry to the terminal or close it, as that marks it as having been “seen” and is the trigger to display a number of other ordinarily-hidden content in the wiki. (Like I said, there’s probably an easier way to do some of these things, but maybe it’ll be of interest nonetheless?)

2 Likes
#11

D:\terminal> hello

ERROR 0x38: ‘hello’ is not recognized as an internal or external command, operable program or batch file.

So, what do I do?

#12

The “help” command shows what you can do, the terminal spits out a message of that nature if the first 4 inputs return errors just in case.

1 Like
#13

I’m considering adding a AVG/ADV/Galgame to my game in the wiki, anyone have idea how to implement this in native wikitext?

I searched about JS implementation of AVG engines, they are usually too big to fit into the wiki well. Or need to bundle too much things with them.

#14

It’s OK to use TLAs if you are sure everyone understands them. So: AVG/ADV/Galgame ???

#15

Galgame is famous.

I’m trying to port https://openwebgal.com as a plugin. At Play visual novel (galgame) on tw, with WebGAL

2 Likes
#16

Would you consider SVG animation / graphics, instead of CSS?

SVG doesn’t seem to need a refresh, it can take embedded TW macro calls, and can use TW fields for variables.

Downside: 2D only