Quantcast
Channel: Help! with 2.0 - Twine Forum
Viewing all 1844 articles
Browse latest View live

How do I add buttons to the sidebar in Harlowe and Twine 2?

$
0
0
I would like to add a few buttons to the sidebar (and maybe entirely move it to the bottom of the screen); one for going back to the main menu, one for achievements, going to the map, acknowledgements, etc. I can't find anything about doing it in Harlowe; all I've found is Sugarcube. I'm really new to programming and know hardly anything; I'm learning as I go.

HTML5 mini games built into Twine?

$
0
0
Has anyone seen HTML5 mini games built into Twine 2 games as an added feature?

Making a "Don't Move" segment in Harlowe

$
0
0
Basically, I want to make a segment in my game where the player has to hide from a monster. They go to their hiding place, and the monster comes up to it, suspicious. The game says "Something inside you says 'DON'T MOVE.'" When you click the link, the screen is blank. If the player moves the mouse during this, they get caught by the monster. If the player doesn't move the mouse for about 10 seconds, the monster goes away. How could I achieve this in a game? I've never worked with mouse-based commands before, so I'd appreciate if you explained the commands a bit. Thanks in advance!

Is there any way, in Harlowe and Twine 2, to add background music to a story?

$
0
0
I'm wanting to record my own music and add it to the game.

Geolocation when passage loads

$
0
0
Hello everyone, I am new to Twine and I am trying to accomplish something very simple. I would like to display a small map with the user location when they reach a certain passage. So far I managed to use a script that shows the map when the user presses a button. This is the code:
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=&quot;
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

As you can see, when the user presses the Try me button, the getLocation function is called and the map is showed correctly. Is it possible to obtain the same behaviour without the button press? I am using the Harlowe story format.

Images not showing in Twine 2 - Sugarcube

$
0
0
I'm using Twine 2 and Shugarcube, and images are not showing when I launch the story from Twine's editor, but if I "publish" the file and open it, the images are here...
Is there a way to see the images during the debug?

My story isn't in Twine's original folder... Is that the reason?

Random Events

$
0
0
I am very new to twine and am trying to figure something out that I want to be done in my story but I can not seem to figure out how to do it and the help doesn't tell me if it is possible to do. Is there a way to have a random event that has a box so after that event happens you can continue with the story? Ex: You are on a shelf and there is a box on the shelf that is about to fall. Random event: (either: "You knock the box off.","You sneak by without the box falling.") Then there are two boxes for those choices. Thank you for your help.

Harlowe 2.0

$
0
0
Whilst attempting to work out how to dynamically change passage options I have discovered that harlowe 2.0 has a new for: macro allowing some basic looping functionality that I need.

But how do I add the Harlowe 2.0 story format? I know I can add a story format from the Add a new Format dialog in the twine 2 application, but it expects a url and I don't know the url to add. I can only find the url that points to the twine 2.0 manual which doesn't help.

Does anyone know what the import url for Harlowe 2.0 is?

Edit: Just realised that 2.0 is in Beta. Have pulled the source code using hg-clone which includes a format.js

Looking at the compilation instructions it seems to expect the use of unix/linux. I downloaded a gnuwin32 version of make but am getting path errors trying to run the makefile. Further digging looks like it seems to require node.js which isn't mentioned in the compilation instructions.

Has anyone succesfully compiled this in Windows? Does it even need compilation or can I just use the js files as is? Any help would be greatly appreciated.

Writing object variable (property) through JavaScript in SugarCube 2 fails

$
0
0
Hey,

I'm using the latest SugarCube 2 and Twine 2 versions.
I ran into a read-only error when passing my object from SugarCube to JavaScript and try to write it's property.

Here's what I did:

Start Passage:
<<set $mydir = {
    "mydirectory" : "Get info from JavaScript and store current work directory here."
}>>>

<<findcwd $mydir>>

JavaScript:
macro.findcwd = {
    handler : function (place, macroName, params, parser) {
          var mydir = params[0];
         // I snagged this from stackoverflow to get the cwd
         var loc = window.location.pathname;
         var dir = loc.substring(0, loc.lastIndexOf('/'));

         // Twine starts to complain here about 
         // "mydirectory of  "Get info from JavaScript and store current work directory here.""
         // being a read-only property
         mydir.mydirectory = dir;
         }
}

So, what did I want to accomplish? I wanted to code a work around for my project to detect whether I am in development or published mode and specify where my GIF and JPG files are located accordingly, so Twine can find them when I'm using relative paths in HTML.
I've sort of accomplished this since I could get access the cwd and do my checks. Then I wondered if I could pass SugarCube2 objects per reference and whether I could store the gained information in a property (member).
Now, unfortunately this fails. It appears that SugarCube creates read-only properties for its objects.
Then I tried something like "mynumber" : 1 and increment it in JavaScript. That for some reason worked.
After that I tried adding writable : true to $mydir in SugarCube but the code still failed to write the property of the object.

I finally found a way to write the value in JavaScript by invoking a SugarCube macro:
new Wikifier(place, "CWD is indeed: <<set $mydir.mydirectory is \"" + dir + "\">>

I remember escaping a couple of quotations. But the code worked.

This begs the question:
What is going on? How, can I set my object property inside a macro without telling SugarCube to do it? Why does this work on numbers but fails on strings? Do I need to dig through SugarCube's macro implementation when problems like these occur?

Thank you for your explanation and help in advance
Br,
Disane

How do I properly publish a story?

$
0
0
Hi, I published an unfinished version of my story and uploaded it to philome.la. I wanted to see how it would look. It looks like the published version is in "Play" or "Test" mode with the back arrows in the top left of the page. Why is this? and is there a way to fix it? I thought maybe it just looks like that to me because I am the author but I want to make sure that when someone plays it that they can't just hit the back arrows to go back.

control CSS-positioning via variable (SC 2)

$
0
0
Hey everybody!

[img][/img] For my colaborative writing project (I've bugged the forum with it on other occasions), I want to show the writers position within the arc of tension dynamically using the image I attached.

Here is what I'd like to accomplish:

1. There is a finishing date, when the all the stories are supposed to have been finished.
2. There is a determined amount of steps (e.g. weekly meetings) which divide the period from the start to the finish date.
3. Using the provided image, I'd like a pointer (basically a vertical line which moves horizontally) to show the position within the arc of suspense. This means that let's say after three weeks the pointer moved e.g. 30% from left to right.

My question concerns mainly the styling part of this problem. I guess I could just go and calculate the position of the pointer manually and toggle classes as time moves on, but I am sure there is a better solution which can calculate the "animation" of the pointer.

Adding Inventory Tab

$
0
0
I'm using Twine 2, SugarCube 2.

I'm considering adding an inventory tab to my game.

But I'm not sure how to implement it, and whether it would work well with this type of game.

If I were to do it I'd want something simple, perhaps even just a faded gray link that's always there (except on title and end passages) and says something like "inventory" or "your pocket," and when you click on it you see a list of what you're currently carrying, and if you're not carrying anything, it says something like "inventory is empty". And you should always be able to go from the inventory passage/tab back to the passage you just came from.

How can I do that? I think I read somewhere about Inventory macros but I can't find that now.

Is there a way to see and edit the source code of a story? (Harlowe/Twine 2)

$
0
0
Or is there an editor the I can upload the .html file to and edit it? All of the editors I've seen are just text editors. I can't find an option anywhere in Twine and I can't find a post on it either.

Harlowe 1.2.2 - Twine 2 Popups/Modal/Lightbox

$
0
0
I'd like to have highlighted words, which after being clicked, new information pops up as a modal/lightbox bubble. This information could be text, images, video, maybe even a sound file.

I've been studying JavaScript, Jquery, CSS and HTMl, and I'm having a hard time with Twine's syntax/logic. Arrays work differently, for example. So I'm wondering if anyone has already tried to create this pop-up/modal effect.

Thanks for your help!

[Harlowe] How to delete automatically the choices already done by the player?

$
0
0
Hi

I would like to be able to (in a display): delete automatically the choices already done by the player, in order to omit repetitions.

How to do so?

I imagine that it is with (history) and (replace) but I don t really get it :-)

Thanks a lot!

Is it possible to do a countdown in Harlow, Twine 2?

$
0
0
I want to create a table with a visible countdown above it. Any help is much appreciated!

Time limit on story in Twine 2.0

$
0
0
Hi Guys!

First time posting here so I hope I'm doing this right, I tried to find an answer to this question on google for quite sometime.

So I am very new to Twine 2.0 and just Twine in general. I'm creating a story that has what I guess you would call a bit of an open world. I want to add an overall time limit for the player though, that activates at a certain passage and continues through multiple passages until the end of the game and counts down from a certain number of minutes until 0. I also dont want this to begin at the very start of the game either, only after about 7 passages.

Is this possible?

Cheers

help with javascript to css to twine

$
0
0
StoryInit passage
<<set $myFont=["20px", "40px", "60px", "80px"]>>
<style>

  <button class="content">Fight</button>
  <button class="content">Bag</button>
  <button class="content">Pokemon</button>
  <button class="content">Run</button>

</style>

<<set $elements = document.getElementsByClassName("content")>>
<<for _x = 0; _x < $elements.length; _x++>>

<<set $elements[_x].style.fontSize=$myFont[_x]>>


<</for>>
Removing the style shows the buttons all the same size, while adding it gives an "undefined function" error.

How do I get this array to loop through the Class CSS and change each ones font size accordingly? Put it in the passageheader or before the passage loads its DOMS? or whatevers?

Change background color and image for different passages

$
0
0
I'm using Twine 2, SugarCube 2.

I know that this is probably something very basic, but I haven't been able to make it work.

How do I change the background color and image for different passages?

In my game, currently I have a black background with a forest image for the entire game. But since I plan to continue the game and make it longer, I'm gonna need to change the background image starting from a particular passage.

I've found some similar discussions in the forums, but following those instructions isn't giving me the results I want. I was able to change the background of the text, but not the background of the actual page itself.

To summarize, I want the background image to be a forest until a certain passage, and once you reach that passage, I want it to be an image of a house. How can I do that?

Health bar in right side bar or in a status passage

$
0
0
Hey,

I'm trying to add a health and a mana bar to my game. The healthbar and manabar supposed to change their lengths when the $health and $mana values change. I have a "stowable" right side bar that uses the Sugarcube 2 style to open and close. Now, I simply add the HTML code as is:
<div class="health-bar" data-total="1000" data-value="1000">
  <div class="bar">
  	  <div class="hit"></div>
  </div>
</div>

to the story passage that is tasked to display status related data to the player. At this point I became to suspect that the structure of the HTML code (more precisely the class hierarchy) was not respected by SugarCube 2. This is because the result ended up being all over the place. Meanig that the elements did not line up on eachother rather got scattered.

Here's the CSS code:
health-bar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 200px;
  height: 20px;
  padding: 5px;
  background: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}
.bar {
  background: #c54;
  width: 100%;
  height: 10px;
  position: relative;
  
  transition: width .5s linear;
}

.hit {
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
  
  transition: width .5s linear;
}

This was obviously added to the stylesheet of the story. It addresses all 3 html elements that were declared above. We are creating a healthbar that plays a transition (we could call animation) that decreases the health bar over time leaving a lower opacity (shadow) of the health bar behind, which then aligns with the health bar that overlays it as it decreases.

Now the JavaCode is a macro that I simply add to a link and use it to decrease the health bar using a fixed value.
/% Main passage %/
<<decrease_HP>>

JS code:
// Reference the elements of the health bar
$(document).ready(function()
{
  var hitBtn = hBar = $('.health-bar'),
      bar = hBar.find('.bar'),
      hit = hBar.find('.hit');
}

// Define macro to test the health bar:
Macro.add( "decrease_HP",
 {
    handler : function(){
// grab HTML defined data values
var total = hBar.data('total'),
        value = hBar.data('value');
    
    if (value < 0) {
	// we are dead transition to game end
      return;
    }
    // max damage is essentially quarter of max life
    damage = 100;
    var newValue = value - damage;
    // calculate the percentage of the total width
    var barWidth = (newValue / total) * 100;
    var hitWidth = (damage / value) * 100 + "%";
    
    // show hit bar and set the width
    hit.css('width', hitWidth);
    hBar.data('value', newValue);
    
    setTimeout(function(){
      hit.css({'width': '0'});
      bar.css('width', barWidth + "%");
    }, 500);
    
    if( value < 0){
      // dead, dead and dead, go to Game End
    }
}
  });

Now, the code will most likely not work, because I've just written it on my phone without syntax check or linting. I only wanted to provide as much info as I could out of the top of my head until I get back to my computer.

Anyways, I have two problems with my solution:
1. The health bar HTML elements are not aligned as they are supposed (on top of eachother overlaying one another) instead they are rendered below eachother. I suspect there's a better way to define HTML in sugarcube passages, but no idea how.

2. The health bar does not react to value change, meaning the transition can't be seen nor the result of the transition (a lower health value presented on the health bar). Now, the transition part is not that important to me, but I at least want to see the results of a decreased health bar in my RightSideBar passage.

Any help would be welcome!
Thank you!
Viewing all 1844 articles
Browse latest View live