How do I connect sliders ?

Post reply
0 favourites
  • 7 posts
From the Asset Store
Template for mahjong connect games
$12 USD
Using this example, you can create a connect mahjong game. So you can customize this example for your own game.
q3olegka's avatar
q3olegka

  • My Game is about making potions with 3 ingredients.

    Proportion of each ingredient is given by the player by moving 3 sliders.

    And of course, sliders needs to be connected so that when a sliders moves and that the sum of the 3 values exceed 100 %, the other sliders move so that 100% is never exceeded.

    Any idea on how to achieve this ?

    Tagged:

  • Two ways come to mind. I'm using a,b and c to be the same as sliderA.value, sliderB.value,...etc.

    The first is to find the amount changed and change the other two by half that amount. some extra logic is needed to correct if going negative. You will have to create two other similar events for b and c. 

    on a changed
-- set delta to a+b+c-100
-- add delta/2 to b
-- add delta/2 to c
-- set delta to min(0,b,c)
-- add -delta to b
-- add -delta to c

    The second scales the other two values so they keep the same ratios. Similar events for b and c would also need to be made. 

    on a changed
-- set k to (100-a)/(b+c)
-- set b to k*b
-- set c to k*c

  • Awesome !

    Thanks to your help, I manage to make it work :)

    I tried to adapt it so moving slider_a changes slider_b and slider_b. But I want the Slider_c only to change Slider_b but couldn't get it.

    https://www.dropbox.com/scl/fi/q53hxwmxo44fw9iz7vmb0/Potion-Craft.c3p?dl=0&rlkey=6bjdylw3h2rzp9fytr4aujypi

    | Global number Delta‎ = 0

    | Global number k‎ = 0

    + Slider_a: On changing

    -> System: Set Delta to Slider_a.Value+Slider_b.Value+Slider_c.Value-100

    -> Slider_b: Set value to Self.Value+Delta÷2

    -> Slider_c: Set value to Self.Value+Delta÷2

    -> System: Set Delta to min(0,Slider_b.Value,Slider_c.Value)

    -> Slider_b: Set value to Self.Value-Delta

    -> Slider_c: Set value to Self.Value-Delta

    + Slider_a: On changing

    -> System: Set k to (100-Slider_a.Value)÷(Slider_b.Value+Slider_c.Value)

    -> Slider_b: Set value to k×Slider_b.Value

    -> Slider_c: Set value to k×Slider_c.Value

    [Slider_b]

    ----+ Slider_b: On changing

    -----> System: Set Delta to Slider_b.Value+Slider_a.Value+Slider_c.Value-100

    -----> Slider_a: Set value to Self.Value+Delta÷2

    -----> Slider_c: Set value to Self.Value+Delta÷2

    -----> System: Set Delta to min(Slider_a.Value,0,Slider_c.Value)

    -----> Slider_a: Set value to Self.Value-Delta

    -----> Slider_c: Set value to Self.Value-Delta

    ----+ Slider_b: On changing

    -----> System: Set k to (100-Slider_b.Value)÷(Slider_a.Value+Slider_c.Value)

    -----> Slider_a: Set value to k×Slider_a.Value

    -----> Slider_c: Set value to k×Slider_c.Value

    [Slider_c]

    ----+ Slider_c: On changing

    -----> System: Set Delta to Slider_c.Value+Slider_a.Value+Slider_b.Value-100

    -----> Slider_a: Set value to Self.Value+Delta÷2

    -----> Slider_b: Set value to Self.Value+Delta÷2

    -----> System: Set Delta to min(Slider_a.Value,Slider_b.Value,0)

    -----> Slider_a: Set value to Self.Value-Delta

    -----> Slider_b: Set value to Self.Value-Delta

    ----+ Slider_c: On changing

    -----> System: Set k to (100-Slider_c.Value)÷(Slider_a.Value+Slider_b.Value)

    -----> Slider_a: Set value to k×Slider_a.Value

    -----> Slider_b: Set value to k×Slider_b.Value

    + System: Pick Text where Text.name = "a"

    -> Text: Set text to roundToDp(Slider_a.Value,1)

    + System: Pick Text where Text.name = "b"

    -> Text: Set text to roundToDp(Slider_b.Value,1)

    + System: Pick Text where Text.name = "c"

    -> Text: Set text to roundToDp(Slider_c.Value,1)

  • You should only use one method, not both. Anyways the second method was flawed and the first could be simplified.

    Here's the three slider version where they affect the other two.

    dropbox.com/s/soy5arf641qszpf/three_sliders.capx

    And here is the modification where the third one only affects the second.

    dropbox.com/s/bwibq912gb38fp2/three_sliders2.capx

  • Thank you very much !

    Your code is very intriguing and I discover some coding sorcery I didn't know about and that I try to understand the logic, like this line :

    -> Text: Set text to tokenat(Slider1.Value&","&Slider2.Value&","&Slider3.Value, Self.IID, ",")

    I also went to css style the sliders and couldn't find how to change the thumb for a png.

    I tried this, with "smile.png" stored in the project Files folder but it didn't work (maybe the smile.png is not pointing to the folder) :

    background-image: url("smile.png");

  • That line was admittedly hacky. It makes a comma separated list of the three slider values. And since the there are three instances of the text object the iid is used with tokenat to get the values. In short I didn’t want to create three different text objects so I did that instead.

    As for the css I say keep digging. You can do a lot of styling with css but the pain is finding them. Luckily that’s something that a Google search can probably help with.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Thank you for this :)

    I dropped the idea of sliders and adapted your logic with bands that the user can modify the height.

    Here is a cap :)

Post reply
  • 7 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)