Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[SugarCube 2 + Twine 2] Keyboard Navigation?

edited July 2016 in Help! with 2.0
Hey everyone,

I have a question that I though would be more of less easy to solve, yet after hours and hours of trying I can't seem to get it to work!

Info: Twine 2.0 and SugarCube 2.6.2 on a Mac
I'm working on a story with no text input from the reader, but the ability to decide by button pressing which passage they'll move on to. It's a text heavy story, so I've been looking for a way to have the text build up more dynamically for the reader instead of loading huge chunks at once. And I do want them eventually on the same page for the reader so they can scroll back up if they want to.

I started off having buttons that will trigger the next big segment to appear on the same page by using <<display>>, thereby segmenting one long text into 3-4 passages and have them click their way through the build up before the reader is prompted to make a decision. By that time he has the whole text to his disposal when he makes the final decision.

I like the fact that the reader can decide their own pace that way, but I want to get away from the buttons and make everything smoother for the reader, by having them use either the Enter key, or SpaceBar to build up the text.
(I know it's possible to trigger text passages via timer, but I'd really love to have the reader click on his own pace.)

What would be the best way to do this?

I know I'll have to work with variables to make the function load the appropriate paragraph each time and so I can unset that variable on passages where I need them to stop, but right now I can't even figure out how to have text appear below an existing passage by keypress.
Please keep in mind that the text it will load will at some point include macros (for example the buttons at the end), so any macro/variables/etc. should work within the loaded segment.

Is there any way I could do this, or am I forever stuck with buttons?
(-> if I can get this to work I'd ideally want to try to also have A/S/W/D keybindings for the decision buttons eventually, so people could read and interact by using their mouse, OR just their keyboard. But one step at a time!)

I'd appreciate any help I can get!

Comments

  • My suggestion….

    First: Get Mousetrap, which is a simple keyboard shortcut library, and install it into your Story JavaScript.

    Second: Show one of your typical setups. We can't tell you how to bind keys to your buttons without the details of what you're actually doing.
  • edited July 2016
    Thanks!

    I'll get Mousetrap!

    So this is an example of how my passages work now:
    Cats or Dogs?
    
    <<set $btn1 = "Cats">>
    <<set $btn1n = "I prefer Cats">>
    <<set $btn2 = "Dogs">>
    <<set $btn2n = "Nah, Dogs are the best">>
    
    <<choicebuttons>>
    
    (but in my story I have the option of up to 5 buttons, instead of just two like in this example)

    With the widget in the StoryInit being:
    <<widget "choicebuttons">>
       <div id="buttons">
    
          <<if def $btn1>>
             <<button $btn1n>>
                <<replace "#buttons">>
                   <<display $btn1>>
                <</replace>>
             <</button>>
          <</if>>
    
          <<if def $btn2>>
             <<button $btn2n>>
                <<replace "#buttons">>
                   <<display $btn2>>
                <</replace>>
             <</button>>
          <</if>>
    
       </div>
    <</widget>>
    

    And a command to unset all buttons on the start of the next passage.

    I'm sorry if this is ridiculously amateurish, I'm trying my best to use what I've learned. I know as far as efficiency is concerned there are a lot of ways to shorten widgets like that and I'm still working on wrapping my head around that.
  • I'm sorry if this is ridiculously amateurish, I'm trying my best to use what I've learned. I know as far as efficiency is concerned there are a lot of ways to shorten widgets like that and I'm still working on wrapping my head around that.
    It's not terrible. You're generating tons of whitespace, but you can correct that later.


    Anyway, to enable your players to click on the buttons via keyboard shortcuts you'll need to make the buttons identifiable. The easiest way to do that is to wrap them in a element with an ID. Since they're already have identifiers of sorts (i.e. btn1, btn2, etc), then we can just use that. For example:
    <<widget "choicebuttons">>
    	<div id="buttons">
    
    		<<if def $btn1>>
    			<span id="btn1"><<button $btn1n>>
    				<<replace "#buttons">>
    					<<display $btn1>>
    				<</replace>>
    			<</button>></span>
    			<<script>>
    				Mousetrap
    					.unbind('a')
    					.bind('a', function () {
    						$('#btn1 button').click();
    					});
    			<</script>>
    		<</if>>
    
    		<<if def $btn2>>
    			<span id="btn2"><<button $btn2n>>
    				<<replace "#buttons">>
    					<<display $btn2>>
    				<</replace>>
    			<</button>></span>
    			<<script>>
    				Mousetrap
    					.unbind('s')
    					.bind('s', function () {
    						$('#btn2 button').click();
    					});
    			<</script>>
    		<</if>>
    
    	</div>
    <</widget>>
    
    See how I've wrapped the btn1 button in a <span> with the ID btn1. I've also added a <<script>> macro which binds the letter 'a' to an action which selects the <<button>> macro within the <span id="btn1"> element and triggers a click on it—btn2 is similar, save that I bound the letter 's'.

    Finally, you should add something like the following to the Story JavaScript, after the Mousetrap library, to reset the keybinds at the beginning of each turn:
    prehistory['keybind-per-turn-setup'] = function () {
    	Mousetrap.reset();
    };
    
    If you plan on having keybinds that should be persistent, then instead of the above, which resets all keybinds, you should probably use something like the following which only unbinds the 'a', 's', 'w', 'd' keys:
    prehistory['keybind-per-turn-setup'] = function () {
    	Mousetrap.unbind(['a', 's', 'w', 'd']);
    };
    


    Hopefully, all of that made sense to you.
  • Thank you, that's perfect and already working!! Thank you so much! :)
    *hugs*
Sign In or Register to comment.