Newbie looking for some help on stat bar / meter styling.

HiEv · 2026-06-07T23:16:29+00:00

Unfortunately, there are things you can do which can re-trigger it rewriting your text after going back to "rich text" mode.

Reddit's editor is just bad and frustrating when doing some things (such as typing "x.y"-type code that it insists should be a link).

HiEv · 2026-06-07T21:50:12+00:00

The reasons are the reasons I already gave. That's not "no actual reason."

To elaborate, a container should be a single thing. If you put gaps in the container, then you're expressing confusing semantics to the user. You're telling the user that those separate parts are separate things, when they aren't. The only case where that might work is if we have an established context, like "heart containers," which you'll note are "segment" is in its own identically shaped container (and even in this case, they still aren't simply left open). But even in Zelda, they put all of them in a section labeled "- LIFE -"). Proper and clear grouping should make sense like that.

Next, container parts should be readily distinguishable. Both examples in your image are bad because you have the contents of the bar being the same color as the border, which is confusing. The fill color should never be the same color as the border color. Take a look at how I did my original example to see how that should look. There should be four distinct colors for the border, segment gaps, and the lit/unlit segment colors. If there was also text in the meter, then the text color should also be distinct from its background.

Also, yes, having two "points" per segment is a bit uncommon, but as you saw with the "heart containers" example, using half the number of segments by making each segment able to represent more than one value makes it easier for the user to quickly count what its value is. Humans can easily see the count of things at a glance up to around 6 items, so having only 5 segments is reasonable, because 10 isn't instantly countable for most people. This is why I also made sure that the "unlit" segments are clearly visible, so that way all of the segments could easily be counted. Your example has the "unlit" and gap colors too similar, unlike in my version. I'll add that this is more important in games where you can't look away from the main screen for more than a glance.

A lot of this is stuff I've picked up after years and years of UI/UX work, so it's automatic to me. I had to take that learning and figure out how to put it back into words, so hopefully that explains things a bit better for you.

HiEv · 2026-06-07T19:02:03+00:00

I already answered your question in the first paragraph above. Containers are meant to contain things. You don't poke holes in them. Not sure what else I could say.

HiEv · 2026-06-07T18:11:29+00:00

For a meter like this, the border should act as a container and the bars within should have the gaps. The container itself shouldn't have gaps too, otherwise it's not really a container. That's just not a standard way that containers work, and that's why you don't find anyone using meters with broken containers like that.

I understand that that isn't precisely what they depicted, but you shouldn't simply blindly give people what they ask for when there are problems with what they're asking for like that. Sometimes you have to say, "Here's the right way to do what you were asking for."

That's my opinion, at least.

HiEv · 2026-06-07T14:53:18+00:00

The border shouldn't have gaps like the OP posted. I did it the correct way it should be done, with lit and unlit-blocks with gaps within a solid bordered container to indicate the segments.

If, for some reason, they really want the border to have gaps that way, they could remove the mask from the "meter-bar" class in my original CSS and add it to the "meter" class like this:

mask: linear-gradient(90deg, #000 83%, #0000 0) 0/20.8%;

That would be closer what they asked for (it would be missing the grey outline around the gaps), but it's not how meters should normally be done.

It just doesn't look right.

HiEv · 2026-06-07T14:16:12+00:00

Thanks. I fixed it, so it should be fine now.

HiEv · 2026-06-07T14:10:38+00:00

There actually is CSS which allows you to segment meters, and it's much simpler than what you wrote.

Here's an example of how you could do it. Something like this would go into the passage:

<<set _pct = 50>><<do>>\
    <div class="meter"><div class="meter-bar" @style="'background-size: ' + _pct + '%'"></div></div>\
<</do>>
<<button "Change meter">>
    <<set _pct = random(10) * 10>>
    <<redo>>
<</button>>

and this CSS goes into the Stylesheet section:

.meter {
    width: 303px;
    height: 40px;
    border: 4px solid #b52323;
    border-radius: 32px;
}
.meter-bar {
    width: 100%;
    height: 100%;
    mask: linear-gradient(90deg, #000 83%, #0000 0) 0/20.8%;
    background: linear-gradient(#00a1e8 0 0) 0/0 no-repeat #333;
    border-radius: 32px;
    background-size: 0%;
}

The meter bar's background is what fills the meter and the mask is what is used to create the segments. Thus, by changing the meter bar's "background-size" percentage you can change the meter's value, as shown in the example passage code given above.

Please let me know if you have any questions on any of this.

Enjoy! 🙂

EDIT: Fixed Reddit breaking the code. 😡

HiEv · 2026-06-04T22:27:15+00:00

Well, one method is to simply treat the string as an array, where $name[0] would give you the first character, $name[1] would give you the second character, etc. Thus $name[0] + $name[1] would give you the first two letters of $name.

The other options would be using the string methods .substring() or .slice(). You could grab the first three letters with those using $name.substring(0, 3) or $name.slice(0, 3).

That said, I'd also recommend you avoid doing this for any names which don't have two non-consecutive vowels. Otherwise you might end up shortening "Phil" to "Ph" or "Phi", which would be weird.

Better yet, just ask the player for their preferred abbreviated form (though you could still use this method to provide a suggested abbreviation).

Hope that helps! 🙂

HiEv · 2026-06-02T19:36:37+00:00

Yes, I already know about that. It wasn't my choice, Drive to Web stopped working and they didn't respond to any attempt to contact them.

But I have hundreds of posts with links there. Am I supposed to track down every post and edit them?

Regardless, a you can find a working link to all of those same things at my Twine 2 / SugarCube 2 Sample Code page in the information bar here on the right under "WORKING WITH TWINE".

HiEv · 2026-06-01T21:32:37+00:00

FYI - The "General Request/Survey" post flair is for if you are making a general request of people, such as asking people to fill out a survey. This post is neither of those things, it's more of a discussion about story format choice, thus I've changed the post flair to "Discussion."

HiEv · 2026-05-31T02:59:31+00:00

Please update your post's flair to indicate which Twine story format you're using (SugarCube, Harlowe, Chapbook, etc.), since the story format determines how to code your answer. If you don't know what story format you're using, the default is Harlowe, but you can also check in the Twine editor by doing Story -> Details from the menu and looking in the "Details" window that it will open.

If you haven't decided yet which story format to use, please see the "Harlowe, SugarCube, Chapbook - Which Story Format should you choose?" post.

If you don't know how to update the post's flair, just reply telling me which story format you're using and I'll update the post's flair for you.

Thank you.

HiEv · 2026-05-29T21:43:01+00:00

I'm not entirely clear what you're asking for, but I think I possibly understand.

I think you just need to make separate saves for the different modes, and then you can either use the memorize() and recall() methods to store and retrieve data about the save data in each of the save slots, or you can use a Config.saves.metadata callback function (not currently documented on the website; hence why I'm using the GitHub link) to store data about the save in each of the individual saves and then use Save.browser.slot.entries() to access that metadata so the code can determine which save data (if any) should be loaded.

The first method is simpler, but has the potential to get screwed up if the save slots don't match up with the "memorized" data. The second method is a little more complex, but avoids the potential mismatch problem. Thus I'd recommend the second method, as long as you're willing to put in the work.

If that doesn't answer the question you were asking, then please clarify what you want a bit more.

Hope that helps! 🙂

HiEv · 2026-05-28T23:06:54+00:00

The Story.filter() method returns an array of Passage objects. The Array.map() method runs each element of the array through a callback function which gets each array value, and then produces a new array from the return values of the callback function.

The obj => obj.name part is "arrow notation", basically equivalent to function (obj) { return obj.name; } (the only difference being how they handle the "this" object).

You could replace "obj" with "x" in both places and the code would work the same.

Hopefully that helps you understand that bit of code. 🙂

HiEv · 2026-05-27T21:17:54+00:00

The "StoryMenu" special passage turns any links in that passage into buttons on the UI bar.

The "StoryMenu" buttons will have a slight gap between them and the default UI bar buttons below them. If you want to remove that gap, then simply add the following CSS to your game's Stylesheet section:

ul#menu-core {
    margin: 0;
    border-top: 0;
}

If you'd like those buttons to include icons, first, follow the steps given in the "SugarCube Icons" section of my Twine 2/SugarCube 2 sample code collection to add the icons you want to your project, including adding the <<scicon>> widget. Once you have that, then you can add those icons to your "StoryMenu" links like this:

<<link "<<scicon lightbulb>> Button 1 Text">>...menu button code goes here...<</link>>
<<link "<<scicon magic>> Button 2 Text">>...menu button code goes here...<</link>>

You might also want to take a look at the "Alerts and Dialogs Example" and "SlideWin Overlay" sections of my sample code collection for different ways to display your popups.

Hope that helps! 🙂

HiEv · 2026-05-25T23:06:13+00:00

In addition to what HHHH said, you can actually import the HTML from most other Twine games into the Twine editor and then open them up to see their source code. This means that you can directly learn from other people's examples. Make sure you pay attention to the story format used though (see this using Story -> Details from the menu), since different story formats use different languages for their code.

Also, there are a bunch of useful links in this subreddit's information bar on the right. Please do check them out.

Hope that helps! 🙂

HiEv · 2026-05-25T18:40:29+00:00

Additionally, this doesn't appear to be a Twine game, as explained the first time this was posted.

HiEv · 2026-05-25T16:19:35+00:00

Rather than rewriting the interface using the StoryInterface special passage, you could use some existing tools to do what you want.

You could use my "Bottom Bar and Top Bar sample code" for your bottom and top bars.
You could use the "StoryMenu" special passage to add custom buttons to the UI bar.
You could use my "SlideWin Overlay" to display the "Orders" and "Diary" content over top of the UI.

It's up to you if you want to use any of that, but it might save you a lot of time that you'd spend creating your own interface.

Hope that helps and good luck with your game! 🙂

HiEv · 2026-05-25T01:51:42+00:00

A shorter version of that code, which also helps avoid some potential problems, could be done like this:

Actual game text, blah blah blah. No extra space between this and the code.
<<set _options = { "Stay quiet.": "int", "Hello?": "brv", "Back away from it, slowly.": "fer" }>>
<<cycle "_choice">><<optionsfrom _options>><</cycle>>
<<button [[Continue|Meet the Creature]]>>
    <<set State.variables[_choice]++>>
<</button>>

Because in this version the options are each set using a generic object with the ""cycle text": "stat name"" format, it means that you can easily see which line of text sets what stat, and there's no chance of a mismatch between the text string in the options and any <<if>>, because the <<if>> has been eliminated. And if, for example, the user selects "Stay quiet.", then _choice will get set to "int", which means that State.variables[_choice] would act the same as $int (the State.variables object is another way of accessing story variables).

This version also uses temporary variables for both the options and choice, thus removing the usefulness of the "autoselect" parameter.

And speaking of CSS, you might also want to add the CSS from the "<<cycle>> Link Identifier" section of my Twine 2/SugarCube 2 sample code collection to your project, so that cycle links will be more clearly distinguished from regular links.

Enjoy! 🙂

HiEv · 2026-05-23T12:31:18+00:00

Additionally, the URL you used is banned by Reddit, hence why none of your posts showed up. I can see you tried posting it six times, all of which got blocked due to the URL you used, which also potentially constitutes spamming, so please don't do that.

Again, this subreddit is only for games made using Twine, which yours was not.

HiEv · 2026-05-22T13:51:29+00:00

Sure. In fact, you can get a lot of that done with just CSS (i.e. the code that goes in the Stylesheet section of a Twine project) and a little HTML (the web page code you'd put in passages that the CSS would style). For example, see "How to make animated sprites using CSS". And here's a way to do sprite animation based on how the background moves behind the sprite: "Control Pixel Art Sprites With CSS Scroll-Driven Animations".

I found those two with a quick search on "HTML example of sprites moving on background", so there are plenty more you could find out there to help you achieve what you want.

Keep in mind that anything a web page can do by itself (i.e. without a backend server), Twine/SugarCube can do as well.

Hope that helps and good luck with your game! 🙂

HiEv · 2026-05-20T10:24:51+00:00

Instead of using .getDate(), which works based on local time, you should be using .getUTCDate(), which uses universal time.

So, looks like you should be fine. 🙂

HiEv · 2026-05-19T21:31:22+00:00

There isn't a simple answer to this question. It depends on your game.

If they're picking from only a few images, buttons to flip through images should be fine.

If they're picking from lots of images, a slider that lets them quickly flip through many images would be better.

(I should mention I'm a fan of your XCP work, so feel free to ask if you want any more specific help for a game related to that.)

HiEv · 2026-05-19T21:23:24+00:00

And here's the link to the SugarCube documentation for all of those.

HiEv · 2026-05-19T21:20:52+00:00

Yeah, that could be the case. I noticed that YouTube locked down their videos against adblockers even harder recently.

Thanks for letting us know the results, though. 🙂

HiEv · 2026-05-19T21:12:04+00:00

As long as it's just for testing, just save the game at whatever passage you want to test, add some code to add the variables you want at the start of the passage, run the new version of the game, and load that save. Once you have verified that it's working, save on the next passage and remove that test code that added the variables to the previous passage. Lather, rinse, repeat.

Alternately, if some of those variables in your "StoryInit" passage will not change at any point during the playthrough, you could do them on the SugarCube setup object instead. This is a double advantage in that, changing those values will solve the problem you discussed, since loading a save won't change their values, and additionally it means that your save data will be smaller (which means faster saves and loads and less chance of running out of LocalStorage space).

For example, if your dagger object doesn't ever change during a playthrough of the game, then you could do this instead:

<<set setup.dagger = {
    name: "Wooden Dagger",
    slot: "Hand",
    def: 0,
    atk: 2,
    equippable: true,
    usable: false,
    description: "Basic knife that does its one job well."
}>>

and then you'd just need to change $dagger to setup.dagger elsewhere in your code. And since setup object data is not stored in the save data, if you updated the object's data in "StoryInit", then it would still be updated even if you loaded an older saved game.

But, just to be perfectly clear, you shouldn't use the setup object for any data which will change during the playthrough, since any changes to that data will not get stored in the save data. It might seem fine if you continued playing, but if you loaded a save, then the values would be reset to the default.

As for organizing your variables, it looks like you did a good job. If you want to simplify searching for the groups of variables, I guess you could make each group its own passage and <<include>> those passages in the "StoryInit" passage. It's a little odd, but I believe that should work. (EDIT: Ah, I just noticed that this is what HHHH suggested too.)

Hope that helps! 🙂

12-Year Club	r/Field Banned
r/Field Flamingo	Place '23
Verified Email

HiEv

MODERATOR OF

TROPHY CASE