I always dislike releasing updates that don’t contain a significant amount of new playable content, but sometimes it’s necessary for me to focus on stuff you can’t see. To give you at least something to enjoy, this update contains one randomly triggered encounter when you visit the SynTech location.
While you can currently only experience the encounter as a guy, I’ve also implemented the female experience (note: there’s one GIF used in both the male and female version of the encounter that should technically be used only for the female version — I haven’t been able to find a good alternative for the male version). This is something I will be doing a lot from now on, so I wanted to practice on something smaller first.
Besides the random encounter, I’ve been working on a new avatar system, one that will reflect each of the 5 possible stages of the player character’s male -> female transformation. The code is almost ready, and I now just need to generate a good set of avatar images. To give you some idea, here’s an early test (this character image set won’t be used):
The new avatar system will be available in version 0.1.5, and it will likely feature only one or two sets of character images to choose from. To make up for the limited number of avatars, I will add support for custom avatars so that you can add your own images to the “imgs” folder. Maybe some members of our Discord community will be able to come up with something amazing. If so, I would be more than happy to include their creations in the game as “official” avatars.
Changelog:
Fixed a few typos and poor word choices here and there.
Added a random encounter when you visit the SynTech location (1 in 20 chance of happening). Hint: you need to be infected with AVA for the encounter to get naughty.
Done some preparatory work to implement a new avatar system (will be included in the next version).
Implemented several custom macros to change various stats.
I’ve recently implemented a loading screen for an upcoming version of MindWare, and I would like to take a few moments to explain why and share the solution with you.
The Problem
One of the biggest and most persistent issues I’ve been dealing with (responsible for most bug reports I’ve received so far) has been missing or improperly initialized variables when starting a new game or loading a save. This can cause all sorts of weird behavior and frustrating bugs for players.
When a person with limited understanding of how the Twine engine works and virtually no experience with the creation of larger interactive fiction games sets out to create a game like MindWare, they may start by placing important variables in the StoryInit passage. All variables placed in this passage are initialized when you start a new game.
The same inexperienced developer may then add additional variables to the StoryInit passage, such as variables for a new part of the UI, and release a new version of their game. You then load your old save and are greeted with an error message because your save is missing the newly added variables. To fix the error, you would have to start a new game—not desirable at all.
The Solution
I’m not the first person in the world to have dealt with this problem (see here and here, for example), so my solution isn’t something groundbreaking, but I think that it’s polished and reusable enough that others might benefit from it. I also hope to receive feedback from those how are more knowledgable than me.
How it works:
When a new game starts or a save is loaded, a function is called.
This function navigates to a special variable initialization passage.
The variable initialization passage displays a loading screen and includes passages with variables to be initialized (being able to divide variables in to different passages makes it easier to stay organized).
A simulated loading process updates the progress bar.
Once “loading” is complete, the player is returned to either the previous passage (for loaded games) or the Start passage (for fresh playthroughs).
With this solution, I’m able to load variables (most of them anyway) that I have been very generously collected by a Discord user and MindWare supporter UnwrappedGodiva (thank you again!). These variables provide a solid starting point on which I can expand. More importantly, I now have a way to declare future global variables in a way that won’t break old saves.
The Code
This script sets up the logic for when to run the initialization process:
:: Scripts-StartingVariables [script]// Initialize a flag to track whether StartingVariables has runsetup.startingScriptsRun=false;// Function to run StartingVariablessetup.runStartingVariables=function(){if (!setup.startingScriptsRun) {State.variables.previousPassage=State.passage;setup.startingScriptsRun=true;}else{}};// Run for new games$(document).one(':passagestart',function(ev){if (ev.passage.title==="Start") {setTimeout(setup.runStartingVariables,0);}else{}});// Alternatively, you can delete the block of code above and call the runStartingVariables function directly from the Start passage like this:// <<run setTimeout(setup.runStartingVariables, 0); >>// Run for loaded gamesSave.onLoad.add(function(){setup.startingScriptsRun=false;setTimeout(setup.runStartingVariables,0);});
This is the actual loading screen passage:
:: StartingVariables<<nobr>><divid="loading-screen"><divclass="loading-content"><divclass="loading-bar-container"><divid="loading-bar"></div></div><divclass="loading-text">INITIALIZING...</div></div></div><</nobr>>// Include as many passages with variables as you want here// You can also add your variables directly here <<include"UI Variables">><script>(function() {// Simulate loading processvarprogress=0;varloadingBar=document.getElementById('loading-bar');varloadingInterval=setInterval(function(){progress+=Math.random() *10;if (progress>=100) {progress=100;clearInterval(loadingInterval);setTimeout(function(){// Return to the previous passageSugarCube.Engine.play(SugarCube.State.variables.previousPassage||"Start");},500);}loadingBar.style.width=progress+'%';},100);})();</script>
If you’ve noticed any mistakes or areas that could be improved, please share them with me here or on Discord. Any feedback I receive is greatly appreciated.
This custom macro will help you embed videos of various formats such as .mp4, .webm, .mov, .ogg, and .avi in your Twine stories using the SugarCube story format.
Macro.add('video',{handler:function(){if (this.args.length <1) {returnthis.error("The video macro requires a path argument.");}constvideoPath=this.args[0];constvideoWidth=this.args.length >1?this.args[1] :'100%';letvideoType;// Determine the video type based on the file extensionif (videoPath.endsWith('.mp4')) {videoType='video/mp4';}elseif (videoPath.endsWith('.webm')) {videoType='video/webm';}elseif (videoPath.endsWith('.mov')) {videoType='video/mp4';}elseif (videoPath.endsWith('.ogg')) {videoType='video/ogg';}elseif (videoPath.endsWith('.avi')) {videoType='video/x-msvideo';}else{returnthis.error("Unsupported video format.");}constvideoHTML=`<video width="${videoWidth}" autoplay loop muted> <source src="${videoPath}" type="${videoType}"> Your browser does not support the video tag. </video>`;newWikifier(this.output,videoHTML);}});
I use this macro to include videos that play automatically in a continuous loop while muted (just like GIFs do). You can easily create other versions of this macro that behave slightly differently by editing the “videoHTML” constant. For example, you can remove the “muted” attribute to play videos with sound and save the modified macro as “video-sound” or something similar.
Alternatively, you could modify it so that it behaves more like the HTML <video> tag by default and accepts the same attributes as additional parameters:
Macro.add('video',{handler:function(){if (this.args.length <1) {returnthis.error("The video macro requires a path argument.");}constvideoPath=this.args[0];letvideoWidth='100%';letvideoType;letadditionalAttributes= [];// Check if the second argument is a width or a video attributeif (this.args[1] &&!this.args[1].includes('=')) {if (!this.args[1].includes('autoplay') &&!this.args[1].includes('loop') &&!this.args[1].includes('muted') &&!this.args[1].includes('controls')) {videoWidth=this.args[1];additionalAttributes=this.args.slice(2);}else{additionalAttributes=this.args.slice(1);}}else{additionalAttributes=this.args.slice(1);}// Determine the video type based on the file extensionif (videoPath.endsWith('.mp4')) {videoType='video/mp4';}elseif (videoPath.endsWith('.webm')) {videoType='video/webm';}elseif (videoPath.endsWith('.mov')) {videoType='video/mp4';}elseif (videoPath.endsWith('.ogg')) {videoType='video/ogg';}elseif (videoPath.endsWith('.avi')) {videoType='video/x-msvideo';}else{returnthis.error("Unsupported video format.");}constadditionalAttributesStr=additionalAttributes.join('');constvideoHTML=`<video width="${videoWidth}" ${additionalAttributesStr}> <source src="${videoPath}" type="${videoType}"> Your browser does not support the video tag. </video>`;newWikifier(this.output,videoHTML);}});
How to Use the Macro
First, add the Macro to your Story JavaScript passage. You can then use the macro in any passage like this:
:: StartWelcome to my interactive story!<<video "path/to/your/video.mp4">>
The width of the video is set to 100% by default, but you can manually overwrite the default setting by entering the width as an additional argument.
<<video "path/to/your/video.mp4" "50%">>
If you’ve decided to go with the second version of the macro, the one that works more like the HTML <video> tag, then you can do something like this:
By Subjunctive Games
Recent Comments