#stats bar

[manonamora-if]

Hi there, I had two Twine sugarcube questions if you don't mind! The first is, do you mind explaining how to make stat bars? Not only how to style them but what do they look like in the actual sugarcube code? How do you ensure they update when the stat changes? Do you have to do something to manually change the stat bar each time, or does it do it automatically? I'm really struggling to wrap my head around it lol

And now to your first one.

I have never created one myself, only used from a template/copied on the internet. Also I am not sure what kind of stats bar you are looking for (there are many different types), so my answer below will be more general on including/testing stats bar. (If I included them all, it would be too long...)

If you have one type in mind and you want a deep dive on that code, please let me know!

CHOOSING/CREATING STATS BAR

Twine does not have a built-in code for stats. It's a bit of a bummer, I know.

The good news is: other people have created Stats Bar macros/templates so you don't have to create one from scratch (if you don't want to). Below are the ones I know of:

HiEv's Health Bar macro (JScript, CSS)

Chapel's Meter Bar macro (@townofcrosshollow has a tutorial on installing it here) (JScript, CSS)

@innerdemons-if has a template which includes Stats Bar (JScript, HTML/CSS)

Brushmen's template has a special widget for Stats Bar (HTML/CSS)

@idrellegames's tutorial on creating your own Stats Bar (HTML/CSS).

All these options will provide you with the relevant JavaScript/CSS needed to function. BUT each of them have different designs and different way of displaying/coding the stats bar itself:

The last 3 relies more on HTML/CSS code for display, while the first 2 are macros.

All will update when the variable change (though you will need some extra code to update HiEv and Chapel's bars).

All have some different amount of JavaScript and/or CSS you may want to edit to fit your need/vibe.

My advice: test them all and pick the one you prefer (or makes most sense to you). You can always edit how it looks down the line.

UPDATING A STAT BAR

If your stat bar relies primarily on HTML/CSS to be displayed (like the last 3 above), its update will be automatic when the variable connected changes value. Every time you open the Stats Page, the bar will display the last value of the relevant variable.

Note: For realtime update if the bar is displayed on the main page: if you will need wrap your stat code in the <<liveblock>> macro of CyCy's liveupdate code and add the <<update>> one every time the stat changes.

Now, if you use either HiEv's or Chapel's Macro, you will need to include an extra tit-bit of code when the variable is updated. For both, that code is included in the explanation (no more than 5/6 words of code each).

A neat thing about these types is that if the stat bar is shown on the main screen rather than a dedicated stat page, it will include a little animation when the bar updates (you'll see it move).

Again, if you have one type in mind and you want a deep dive on that code, please let me know!

[ztkuko]

HP MP Stats Bar Bangle Bracelet, RPG Stats Bracelet, Health Points Magic Points Bracelet, Health Bar Magic Bar Bracelet, gamer jewelry

[badkatdesigns]

tiny bab wizard stats bars 

look at that tiny chibi ass face

[uiuniversity]

Attribute UI in Hand of Fate

Hand of Fate is a very special game. It’s a role play card game with 3d combat system. You can build your deck like in Hearthstone, and go to the dungeon to fight with enemies like in World of Warcraft. The visual style of their card design is great. The UI design for most part are clear and stylish too. However, the attribute UI in combat, is bad. Some UI designers put cool art style over friendly user experience when work in a very stylish game, and this is a great example.

For most of time in this game, you are playing cards with the npc. Every card is an encounter which might give you good stuffs or bad stuffs that will affect your combat game play. The basic stats are Health, Food and Gold. Every time you encounter a card, you lose 1 food. Some of encounter cards are ‘stores’. You can spend your gold to buy new equipment or artifact cards. The other informations in attribute: weapon, shield, bless (buff), curse (debuff), artifact. These all look pretty cool. The informations are clear. Even when you have a lot of cards, it won’t block  major information since the main interactions in the phase are focus on the middle of the screen

However, they did the same thing in combat, and that’s horrible. There is a card for every bless or curse you get; there is a card for every weapon, shield, artifact and other items you equipped.   That’s a lot of cards. When your cards are many enough, they will go out the screen. But the bigger issue here is that those cards are masks. They almost blocked the left corner and the right corner entirely. Therefore you can’t see the traps or enemies in the two corners, and that’s bad, especially for a 3d realtime dungeon combat system.

How to fix it First, I still want to keep the card visual style in UI, since it’s the main feature of the game, and it looks good. Second, I want to minimize the information area so player can get more informations from the 3d world. Also, it gives the space for develop team to add more combat features since they should no longer be worried about that cards will go out of the screen. Also, the size of every card is the same, I want to change it a little bit to show the difference between primary and secondary informations.

In the new UI, bless and curse are now shown as icon. It gives more spaces for both information feedback and more features; Health now in a smaller card, and Food and Gold will no longer be shown in combat; There is a size difference between active equipments and inactive equipments so player now can distinguish primary and secondary informations.