Howdy, Stranger!

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

Health/Cooldown Bars (sugarcube)

Hello all,

I've been working on an action RPG combat system using twine, and I've been using the <<repeat 100ms>> and <<replace>> macros to dynamically update player health bars, and cooldowns to the next enemy attack.

I used this method for my health bars: https://twinery.org/forum/discussion/2751/health-bars
But due to the rapid replacing of such health bar images every 100ms, the health bars don't update smoothly at all, and rather they flash rapidly.

My new idea was to just create an entirely new set of updating health bars using Javascript and/or html/css. But I have no idea where to start (even after months of learning javascript and css, I'm still lost when it comes to complicated coding).

https://www.w3schools.com/w3css/w3css_progressbar.asp I've been reading up on using a css progress bar, and triggering a move() function using javascript. However, I already have some complex "damage calculations" in place using the default Sugarcube macros, and I have no idea how to use those story variables to affect the css progress bar's width %.

Here's an example of :
<<repeat 100ms>>
    <<set $enemy_cd to $enemy_cd - 1>>
    <<if $enemy_cd <= 0>>
        <<set $enemy_cd to 0>>
        <<enemy_attack>>
        <<stop>>
    <</if>>
<</repeat>>


My <<enemy_attack>> widget basically resets the $enemy_cooldown variable to 50 (basically the enemy attacks the player every 5 seconds) and restarts the repeat macro.

I guess this explanation has been rather long-winded, but what I'm ultimately trying to achieve is to use a css progress bar, and get javascript to "use" the $enemy_cd variable to determine the % of the progress bar's width value... i.e. when $enemy_cd is 50, the width of the bar is 100%, and when $enemy_cd is 0, the width of the bar is 0%.

Can anyone help? ;_; I've been really struggling with javascript functions.

Comments

  • edited March 18
    There was a discussion on how to make timed bars with CSS and jQuery here that may help. You should be able to repurpose it to your needs, probably by turning the animated width element described there into a variable instead of the duration.
  • edited March 18
    Chapel wrote: »
    There was a discussion on how to make timed bars with CSS and jQuery here that may help. You should be able to repurpose it to your needs, probably by turning the animated width element described there into a variable instead of the duration.

    Sadly, that's exactly what I'm can't seem to figure out... how do I go about turning the width element into a variable?

    And also, my $enemy_cd variable (which controls how fast an enemy attacks) is also modified by multiplication with yet another variable: $enemy_cdr aka cooldown reduction. So the animated width element could potentially move at different speeds depending on the $enemy_cdr variable.

    Edit: Nevermind... I saw the Jquery. I guess I need to use State.variables.xxx to pull out the variables from the variable library and make an attempt at writing jquery code..... which I'm completely hopeless at xD
  • puppetz87 wrote: »
    ... I guess I need to use State.variables.xxx to pull out the variables from the variable library and make an attempt at writing jquery code..... which I'm completely hopeless at xD

    I'd recommend giving it a shot for now. You can look at mdn and w3schools and jQuery's documentation for guidance. I'm not at my computer right now and won't be until later, so I can't really help out with the specifics until tonight or tomorrow. If you can't figure something out or if no one else comes along to help out, I'll see what I can come up with then.

  • edited March 18
    @puppetz87
    Do you have multiple of those <<repeat>> loops running at the same time?

    If so then that could also be causing UI update issues as they will all be competing with each other for processor time thus the rendering thread could be yielding as could user input monitoring.

    Generally there should be a very limited number of <<repeat>> loops (like one) that handles all background processing / UI updating.
  • greyelf wrote: »
    @puppetz87
    Do you have multiple of those <<repeat>> loops running at the same time?

    If so then that could also be causing UI update issues as they will all be competing with each other for processor time thus the rendering thread could be yielding as could user input monitoring.

    Generally there should be a very limited number of <<repeat>> loops (like one) that handles all background processing / UI updating.

    Yea... I've noticed that problem as well, sadly. Would you happen to know if I could this issue with by exporting my game to an .exe using nw.js? I heard that usually handles complicated processes better than a web browser.
  • Chapel wrote: »
    puppetz87 wrote: »
    ... I guess I need to use State.variables.xxx to pull out the variables from the variable library and make an attempt at writing jquery code..... which I'm completely hopeless at xD

    I'd recommend giving it a shot for now. You can look at mdn and w3schools and jQuery's documentation for guidance. I'm not at my computer right now and won't be until later, so I can't really help out with the specifics until tonight or tomorrow. If you can't figure something out or if no one else comes along to help out, I'll see what I can come up with then.

    Yea thanks, Chapel. I will try to do it on my own for now :)
  • edited March 22
    puppetz87 wrote: »
    I heard that usually handles complicated processes better than a web browser.
    It can but I believe you will need to use the relevant framework's threads instead of the embedded web-browser engine's.

    Generally when creating a game engine (which is what you are doing) you would have a single main background processing loop which handles all interaction event processing, it is done this way to limit the interruption (forced yielding) of the User-input and Screen-updating related threads. (or in basic Window's terms the absorption/delaying of Input and Refresh messages)

    In your case you're implementing that loop using <<repeat>> macro(s) and the events you're processing are things like: who hit who and for how much; and what state should the bars show...
  • greyelf wrote: »
    It can but I believe you will need to use the relevant framework's threads instead of the embedded web-browser engine's.

    Damn... no idea how to do that. I guess I gotta think on how to rewrite my code.. a single background loop that handles all events... ugh.

    I guess I still have a lot to learn about coding. Thanks for the advice, Greyelf.
Sign In or Register to comment.