Howdy, Stranger!

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

example percentage bar/progress bar for your convenience

edited August 2014 in Workshop

I needed a horizontal percentage bar for my current project and since I didn't find one I figured out how it could be done with simple twine syntax. I decided that it might be of use for some other people so I made a sample tws. file. The Bar shows the relation between two values. I did both a linear and a non linear bar, which I personally needed. Both can be adapted easily for different purposes. For example as health bar, progress bar, or even as some sort of pseudo-slider. The ascii-Symbols that compose the bar in the example can be customized or exchanged by fitting gif graphics. By fiddling with the formula a different kind of non-linearity can be achieved and the granulation of the bar can be modified. You can download the tws or try the example html file here. By twiddling with the values in the example you can see how the different bars work.

Please let me know if you find this useful!  ;D

PS: I think there was a way to send variables to a a <<display>> function but I couldnt find the description of how it worked again. This bar could be made even more flexible using this trick, so feel free to ad that and post it here if you know how.


  • Yes, it looks pretty handy to have an interactive progress bar ; and we can also replace the squares by hearts so we can make a Zelda-like lifebar !! So cool thx
  • Another approach using HTML/CSS, and without using recursive <<display>>
    <<set $score = 45; $max=150; $pcnt = 75; >>
    <<print "<ul style='list-style:none; width:100%;'>" 
    + "<li style='background:red;   width: " + 100*$score/$max + "%;' >" + $score + " pts</li>" 
    + "<li style='background:green; width: " +     $pcnt       + "%;' >" + $pcnt  + "   %</li>" 
    + "</ul>" >>
  • @kussmaul I just saw your example, and I'm thinking of adapting it to my game, but I was wondering if you knew how to make the bars vertical? Thanks! :)
  • @kussmaul Also, is t possible to transform this same code into something other than bar? Maybe showing it in a circle perhaps? I'm just curious... :P thanks
  • @Jajajewels: Looking at kussmaul's profile shows they were last active in 2015 so it is unlikely they will answer your questions.

    I'm a little pressed for time atm to give a detailed answer but basically you would need to do at least the following two things to change the example to vertical bars:

    1. Use CSS to change the UL element to display it's child LI element across the screen instead of down. Using display: inline (or inline-block) should help with this although it make need something more.

    2. Change the LI element's CSS to adjust the height instead of the width of those elements.

    Creating a circle on the other handle will probably require the use of SVG to draw the circle.
  • @greyelf thank you, i didn't think to look at kussmaul's profile, I'd would've been waiting for ever.
    As for your explanation, I'm gonna try and do it! I'll let you know if I can make it work! thanks :)
  • Hi there!

    This is my first ever post on any forum about Twine. I recently got started on a new project which is a dungeon crawler of sorts. I'm quite happy about where the game is going so far but I have a few questions that I haven't been about to find the answers to.

    I'm using Twine version 2.1.3 on Mac and Harlowe 2.0.1 as my story format which is Twine 2 as far as I know. I've come to realize there are huge differences in syntax between the different formats.

    Here goes:

    1. I'm interested in having some form of horizontal health bar in my game as a visual aid to the player instead of just having the current "20/100 HP" I do now. I've looked at countless solutions to my problem including the one posted here but most of them seem to be for other story formats and I haven't been able to adopt them into Harlowe 2.0.1. I'm pretty familiar with basic HTML and CSS, but not much more. If I need JS or something else added to my story that would be ok, but I need a working example to see how to implement it.

    2. I am also wondering how publishing a finished game works when you have a couple of image resources added to the game. I currently use three images that are stored locally. Do I have to host them online somewhere and change my links in-game or can I just publish them along with the html to a Twine-hosting site in one go?

    Thanks for your time!
Sign In or Register to comment.