iiYO Community

Full Version: Autoplay/Auto trigger?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I was looking around for a way to create VN on websites and stumble upon webstoryengine.
Its quite an easy engine to use so i try porting over one of the VN that i created on the android.

However, i couldnt find a way to manipulate it to auto play the game instead on clicking, pressing spacebar to trigger the next line. Just like how many VNs has the auto play option.

I was wondering if anyone could assist me on how i can implement it?

Maybe like 
-having a button [Autoplay off]
-Clicking toggle on/off.
-on would auto trigger next line every x sec?

Any advice appreciated. Smile
Hi rscarlet,

you need to write an extension for that. This extension would add a button to the stage which toggles an internal variable (can be persisted through the engine) when clicked and if the variable is on, then a timer is set which moves the game to the next line. You probably want this to work for every time when a click is normally needed, not only for lines, right? Then you should listen to the event "wse.interpreter.next.after.nonext" on the game's bus.

In the index.html file you will find this code:

Code:
       <script>
           using("WSE.Game").run(function (Game) {
               
               console.log("Starting the game...");
               
               var game = new Game({
                   url: "game.xml",
                   host: typeof HOST === "undefined" ? false : HOST
               });
               
               game.start();
           });
       </script>

Use the game variable to add your button to the stage:

Code:
game.stage.appendChild(myButton);

Toggle a persistent variable when the button is clicked:

Code:
game.interpreter.globalVars.set("autoplayEnabled", !game.interpreter.globalVars.get("autoplayEnabled"));

Listen for the "nonext" event and set the timer:

Code:
var timerCode = null;
var autoplayWait = 2000;

game.bus.subscribe("wse.interpreter.next.after.nonext", function () {
   
   clearTimeout(timerCode);
   
   if (!game.interpreter.globalVars.get("autoplayEnabled")) {
       return;
   }
   
   timerCode = setTimeout(function () {
       game.interpreter.next();
   }, autoplayWait);
});

It might be a good idea to have a different autoplay wait time depending on the length of a line's content so that a user has enough time to read what's displayed. To do that you will have to differentiate between a "nonext" event triggered after a line command versus a "nonext" event triggered after another command.

You can do this by having a variable in your extension and listening to the line command's event:

Code:
var timerCode = null;
var autoplayMinWait = 1000;
var waitTimePerChar = 20;
var textLength = 0;
var isLine = false;

game.bus.subscribe("wse.interpreter.next.after.nonext", function () {
   
   var waitTime = autoplayMinWait;
   
   clearTimeout(timerCode);
   
   if (!game.interpreter.globalVars.get("autoplayEnabled")) {
       return;
   }
   
   if (isLine) {
       waitTime += waitTimePerChar * textLength;
   }
   
   timerCode = setTimeout(function () {
       game.interpreter.next();
   }, waitTime);
   
   isLine = false;
});

game.bus.subscribe("wse.interpreter.commands.line", function (data) {
   isLine = true;
   textLength = data.command.textContent.length;
})

Hope this helps!
Hello sir jfhs,

Thank you for the response.

I'm still new with this engine and yet to check on the extensions.

I'll try to learn on how to use them and try to implement your suggested solution.