Hi folks, I’m teaching a small class (8 students) of American university students at SUNY Polytechnic Institute (Utica, NY), whose primary area of study is communication, interactive media and game design. Our class is called “Designing and Writing Interactive Texts”, and our (so far) exclusive platform is Tiddlywiki on Tiddlyhost.
Students are generally not highly developed coders, but are finding the wikitext pretty straightforward so far. We’ve been doing plugins, and some students are using the choose-your-own-adventure plugin and maps. Some are generating points for picking up objects, and doing some math. Lots of tags, and more and more filters.
I was wondering if the community here might provide some links of your favorite ways you’ve seen tiddlywiki used, especially in a creative environment in which designers are making content for others to use or enjoy (so less for personal knowledge management, note taking, etc).
I will share this thread in the class discord, and continue to invite students to use this group and others as resources.
Steve – you might want to look into Twine, which was originally based on TiddlyWiki. It’s specifically geared for writing interactive text games like you describe.
This is something I did for a similar course…therefore in German, it is not well kept at the moment but you could give it a try. Verzweigte Geschichten
For the hard core I made a roguelike dungeon which also should get a rennovation: Roguelike
I have seen people using it for role playing games. Maybe do a search in the forum, perhaps also in the old google group.
I’m guessing you’ve seen the various (and old) examples on tiddlywiki .com even if they’re perhaps not about “a creative environment in which designers are making content for others to use or enjoy”
https://eberron.tiddlyhost.com : A campaign setting for D&D designed for telling fantastical pulp and noir stories - feature a dice roller, progress clock
Also it’s a bit out of topic but I think tiddlywiki could be a good tool to make games like these:
This could be made in tiddlywiki by using custom CSS, svg, and/or with the new “usemap” attribute of the image widget to make clickable area in the images: https://tiddlywiki.com/#ImageWidget. (you could use this website to easily create the map: Image Map Generator.)
Hi, thanks everyone, especially @telumire for your suggestions. We’re beginning to settle on semester projects and will encourage folks to post them here … would always welcome critiques and comments.
Hello! This is one of the students in the mentioned class. I really appreciate all the ideas and suggestions you’ve shared!
Right now, I’m planning on using my art to create a point-and-click game within Tiddlywiki. The Image Map you showed is a perfect example! Thank you again!
Games are learning environments with immediate positive feedback and attenuated negative feedback.
The core cycle can be seen as a loop between play and fulfilling meaning, by keeping the player high-frequency to fulfill a tower of meaning, even if that tower of meaning is fictionalized by the game.
So the essence of the game is also “shaping new towers of meaning through aesthetics and narrative, and filling new towers of meaning through numerical transformations”, and positive and negative feedback and learning and whatnot are really just means of shaping the towers of meaning.
So in my tiddlywiki-based game engine, I provide tools to store and do numerical transformations of values. https://tiddly-gittly.github.io/tw-gamification/ , it is still in alpha, fields will rapidly change in this month.
EDIT: note that since html map are not scalable without using javascript, this cause issues with responsive images. It could be better to use svg instead, like this:
Then after drawing your shapes with the pen tool, save as “optimized svg” to reduce the clutter generated by inkscape. You can also optimize further with https://svgomg.net/
Another benefit of using svg instead of map is to be able to animate the svg elements with css, for example you can make the clickable area glow !
/* This makes the clickable area in svg glow */
@keyframes strokeAnimation {
from {
stroke-width: 0;
}
to {
stroke-width: 10px;
}
}
@keyframes glowAnimation {
100% {
filter: blur(20px);
opacity: 1;
}
}
a path {
opacity: 0;
color: white;
stroke: currentColor;
stroke-width: 10px;
fill: transparent;
filter: blur(10px);
animation: strokeAnimation 1s ease infinite alternate, glowAnimation 1s ease infinite alternate;
}
Thank you!
I really like this demo. It blows my mind that you’re able to do this within TiddlyWiki.
Making interactive areas glow to help the user or give hints is an excellent touch. I’ll definitely try to integrate the code into my project so I can start creating a story and putting in my own artwork.
Again, thank you for everyone’s help and suggestions. It’s fun seeing everyone figure out how to implement this kind of code and show off a different way of using content. I’m not a coder by heart; I’m an artist. So, that’s the main reason why my professor gave me this idea when he suggested a “flipbook.” That might’ve been easier, but I tend to try more ambiguous ideas, haha.
If you or anyone else would like to build something similar, I don’t think it would be too difficult to accomplish in TW.
I’d make a tiddler for each card with a title, whatever descriptive text you want, and an image if desired—ideally in separate fields, for ease of reuse. You don’t necessarily need to style it like a card (though you certainly could: the story tiddler template cascade gives you a lot of control over how tiddlers appear in the river.) Tag them each with “Card”.
Make a “tabletop” tiddler to deal and display cards. You could use something like @mklauber’s shuffle operator within an $action-setfield widget to generate a pseudo-random sequence of all tiddlers with the “Card” tag every time you hit the “Deal” button, and store this list in a state tiddler. This lets you simulate “shuffling” the deck, and you can use a $list with a transclusion template to display the first few cards in the sequence in your “tabletop”.
I think the current challenges of simultaneous access from multiple devices would make it difficult to build a truly multiplayer game, but for a single-player tool (or a display on a classroom screen), you could make it as simple or complicated as you liked—switch out a card for another from the same sequence, save a favorite sequence for posterity, drag-and-drop into custom categories, etc.
If we want two unique sides,
We could also provide an editor for an additional text area field on the tiddlers marked as cards. Then provide a cascade view template body to display the back according to a state.
I know how to do this, but not sure how to animate a card flip, that would be nice.
The cards could be Q&A, or reveal details etc… or as above interactive cards.
A card could be a door to a room, the back of the card an interactive one.
digital garden 
work repository
