3-way Power Setup

Hi all. Some time ago I did a little demo of a tool to choose your powers among three. You have a total of 100 points to allocate, and my gadget shows clearly the tradeoff.

I started revamping the gadget to be used in the Tide Traveler (if I ever write it), and on @Flurrywinde11’s suggestion, I updated it so that the image and the stats change without reloading. This will be Marco Polo’s tool to track your progress in the game.

I think the experience is much smoother now. What do you think?



The original thread with the three-way choice:
Project: H.I.V.E
The Tide Traveler WIP:
Interest Check Thread


Strange. Sometimes I don’t see the golden lion background image. But as for the hotkeys, that’s pretty awesome! Too bad I have to turn off vimium, though.

Some images didn’t get uploaded, the previous version was shown. I double-checked and it should be all right now. Thanks for letting me know.

And, Vimium? You are really hard-core :slight_smile:

This sounds very neat, but it is worth noting that one drawback of using this idea is that screen reader users, who make up a pretty significant portion of those who buy games on the official apps, will be unable to access the information that is image-only. I’m not sure if using alt-text is possible, or whether you even plan on selling the game eventually, but if you do, I would strongly ask that it be made clear in a game description if a given game is inaccessible, since this is one of the few companies where blind people have a high degree of certainty that a given title will be accessible, and can freely buy games without first doing an accessibility check. I love the idea of opposed stats being more than just pairs, but would prefer to see a solution that didn’t exclude those without sight from accessing them.

Looks very good.

  • you might want to think about thickening our your lines quite a bit. The whole thing is very cool but as that’s the most important information on it, it might be worth using a style that is less understated
  • for the same reason (assuming this is a series of photoshopped images) id also consider whether a skill star similar to some of the football manager games use for players, might be worth looking at. Anything that allows you to solid fill a skill shape, or the area outside the shape to differentiate it from the clock face and make it stand out more than anything else
  • and possibly a touch or more of ‘glow’ to the lines - perhaps even a neon colour version if you can make it work with the clock style
  • if you use this in your WIP, consider style coherence. Are all your images going to be photos of artefacts? Or is this going to feel inconsistent with the style of your other assets? Running it through a filter and using the same filter each time is one method that may help you achieve style consistency across your game

This is very interesting indeed and has actually provided me with a little inspiration to solve a problem I’ve been struggling with in my own story. Many thanks for sharing and good luck with the game!

1 Like

Thanks all for your comments.

@tangerine_skies very good point. I’ll make sure to have an alternative for screen-reader users. Now that I think of it, most of the puzzles I posted here have serious accessibility issues. I’ll think about it.

@Charles_Parkes thanks for the styling suggestions. I am not familiar with the “skill star”, can you share an example?

@Wiwyums thanks, I’m happy this helped. What was your problem?


I’m interested to see that it looks like the AAA game designers of Fifa didn’t actually fill the skill polygon for clarity - I misremembered - and maybe it doesn’t matter that much - although also interesting to see they did use neon colours:

Thanks for sharing. The example is very clear to read and immediate, but what’s the expectation when you want to change one feature? If you want to increase “defending” what would go down? All the other five, proportionally? That would probably do the job, I imagine.

The feature I liked about the triangle is that for any point within the perimeter, the sum of the three distances is constant. So, you can move around and have a visual understanding of the trade-off.

With six features, the right thing would be a hyper-tetrahedron in 5D space :smiley:

1 Like

Re: vimium, hehee, yup. Decided I had to check out vim a few years back but almost gave up it was so hard. But now, it’s just way too awesome for words! I will have to let you know when I reach the true, real programmer level. :wink:

Re: the screenreader issue. I have been wanting to mod CS to allow clickable parts of images or buttons that do stuff (either to an image or in the story) for a long time. There’s a lot of ways to do this, though, so what’s the right tradeoff between being too hard to learn vs take too long to program vs the most/best features?

Hey, I have an idea for the color mixing. It seems three colors mixing will generally be brownish. What if you made it so only the two highest level stats’ colors combined with the third affecting something else, like say the brightness or saturation, with the color fading out the stronger the third stat is? EDIT: And/or shift the hue over some? Actually, yeah, do both, cuz if you just shift the hue, different combos will have the exact same color, but with the fade out too, it might still be unique.

1 Like

Hi @Flurrywinde11. Thanks for the suggestion on color mixing. I’ll look into that.

I looked into your idea of clicking on images, and I changed the demo so that now you can click with the mouse within the triangle to make a selection (then, you still must press Space or Next). What do you think?

I think there is a general way to achieve what you want. With *script, you can attach a handler to an image that triggers a “Next” action (form.onsubmit) and stores the X-Y coordinate in some variable. Then, in the next page, you read the variable and act accordingly. You can do this by hand, with a preprocessing macro, or even modding CS (new *clickable_image command). Happy to talk more if you are interested.

1 Like

Diego…what the flaming ff… That is not fair - you can’t keep going away and doing something really complicated someone suggested in 24 hours. And it works. Your touch sensitive image works on the damn mobile. I can’t… Gahhh!!


Nice! For setting a 3-way constellation of stats like this, I think a lot of players would like this clickable image idea the best. Is there a way to make this into something a non-programmer could use? Let me look into it… Ok back.

I looked at your code, and wow, your math skills look awesome! Can you explain how you calculate the 3 stats from the (x,y) coordinates? I’d love to know how to do this (and somehow without trig?), just in general, not choicescript-related.

So to turn this into something a non-programmer could use in their own game, I’m thinking there could be a function called threeWayStatBalancer (or some better name. I’m bad at names. LOL.) which takes as arguments information about where the stat triangle is in the image, plus where the user clicked, and from this, it can calculate the three stats’ new values.

I guess ideally, it shouldn’t require rounding them off, just keep that as an option, but for this implementation, you kinda have to because every possible configuration has its own image.

It should be possible, though, to use a PHP-generated image to draw the lines on-the-fly. So then, it shouldn’t be too hard to make a choicescript command like: *3way_stat_image <stat1> <stat2> <stat3> <params for where the triangle is> <path to image>

This could be made to superimpose the triangle onto the background image without having to reload it.

Oh, but I think html now has the ability to draw lines, so this might be better than doing it in php. (Maybe a php version as a fallback?)

Hehee, and yeah @Charles_Parkes , I agree. Totally not fair for someone to be quite this much of a genius. LOL.


I’d been trying to come up with a three-way system very similar to this but your way is far cleaner than my very hacky workaround!

@Charles_Parkes we strive to please! :slight_smile:

@Wiwyums please share your work, if you feel like. I’m very curious.

@Flurrywinde11 I attach an image that shows how to go from p1,p2 to x,y (p3 is just 100-p1-p2). When you have x,y you will have to scale it and move it to get the right pixel to draw.

real_x = (x * scale_x) + offset_x

To do the mouse clicking, i.e. to go from x,y to p1,p2, you have to subtract the offset, undo the scaling, and then do the math in the image in reverse (solve p1,p2 given x,y). This is what you found in the code. Let me know if you have more questions.

As you noticed, I had to precompute the images (I have 66 images in total, IIRC), but I like your idea of drawing them on the fly. This way, you could have a finer resolution too.


Thanks! I get the general gist now, but I wonder… if I had a million years, could I figure that out? LOL. I haven’t played with math like this since high school, but a geek friend and I were bored one day and decided to derive the quadratic formula. We succeeded! But then just a few years later, in college, I tried again and was completely mystified by it.

It’s for this one: Bitten!

I’m hoping to have the first chapter up soon. The idea is that there will be a sort of 3-way tug-of-war between the MC’s instincts, emotions and intellect, although it won’t affect much until the game’s later stages.

I’m in absolute awe of your skill for this sort of thing btw! :star_struck:


@Wiwyums Did you look at the Eagle’s Heir and how we handled the personality stats in that one?

Honor, Idealism, and Loyalty are a tripartite stat there.


Ah, thanks Jason, will check that out right away. Love that game but haven’t read it in a while and didn’t realise/remember that it had a tripartite stat. Cheers!