How do I Implement CLAMP ?

  • Hi All,

    I've created a slider from scratch (sprites) using the Drag and Drop behavior.

    I'm trying to limit the Dragable Knob on the X position based on Minimum/Maximum values.

    I have never used Clamp before but I'm guessing that this may be the most efficient way to limit the slider on the X, I'm guessing.

    CLAMP IT:

    So, I get the idea in general: clamp(x, lower, upper)

    But... how do I implement it to the drag and drop object?

    I didn't find any example on the manual. most of the forum results have dead links so I cannot explore and learn how to use it.

    After clueless attempts which made of guesses all I have is what I described, trying to guess how it works is impossible for a non-programmer like me, any help will be appreciated I'll be happy to learn how to use this tool: "CLAMP" if you can explain it to me with examples / screenshots / or anything visual for a newbie. THANKS Ahead! :)

    DOWNLOAD - Base C3 File I messed with while guessing how to CLAMP

    Tagged:

  • Object Is Dragging -> Object set X to clamp(self.x, 100, 200)

    Object On Drop -> Object set X to clamp(self.x, 100, 200)

    fixed file, now with multiple sliders support:

    dropbox.com/s/ggdelkhq5yer51i/Clamp%20Test%20-%20v2.c3p

    edit: and an example how to set the slider to any value.

  • Object Is Dragging -> Object set X to clamp(self.x, 100, 200)

    Object On Drop -> Object set X to clamp(self.x, 100, 200)

    The good news is that the CLAMP is working, it is limiting the width which is great!

    The problem I have is that the Knob jumps to the screen's X location instead from it's self current X position.

    I want the knob to clamp the values in general and not based on where it sits on the screen because I will probably move the slider around within a dragable panel later on.

  • Why "Slider.width-Slider.width"?? You don't have to be a programmer to understand that the result will be 0.

    Please see the file I posted earlier. It works correctly and demonstrates how to set value to knob position, and knob position to value.

  • Please see the file I posted earlier.

    Yes I just saw your edit post after I post mine :)

    Thanks! I'll explore this example asap.

  • yeah dop's file uses image points, lerp and unlerp to position the knob - which is a very clean, concise way to do it. (Really nice example dop!)

    The way you are trying to do it will also work, but you need to include the slider's x position as well as the width.

    the lower clamp value should just be Slider.X

    the upper clamp value will be Slider.X + Slider.Width

    so the full clamp expression will be:

    Knob - set X to clamp(self.X, Slider.X, Slider.X + Slider.Width)

  • The way you are trying to do it will also work, but you need to include the slider's x position as well as the width.

    the lower clamp value should just be Slider.X

    the upper clamp value will be Slider.X + Slider.Width

    so the full clamp expression will be:

    Knob - set X to clamp(self.X, Slider.X, Slider.X + Slider.Width)

    Thanks for the reply AllanR it seems like you understand what I'm trying to do which is simply trying to emulate the default C3 slider (I even use the same instance variables) but with my own sprites.

    Dop's example is kind of cool with image points as the limiters and I should play more to understand how it works since it's new to me.

    What happens when I use the code you shared is that it's not "sitting" on the correct position but more to the right so I can always play with the numbers manually I guess but maybe it's not very efficient, all I know it works (on the specific example):

    BTW I tried slider.width /2 but because of the slider graphics it need the less 10 pixels anyway so I can add -10 at the end, but... it's the same result. that's where dop's image point is kind of nice! I just need to have a deeper look of how it works with the values.

    I will have to explore Dop's example to try understand how I can CONNECT the current Value (using the actual instance variables) without the slider size and it's limits on the Dragging code.

    In other words, the slider limiters should ONLY stay visual, that's probably where I should somehow also connect the STEPS variable.

    After all my goal is to connect the INSTANCE variables to effects properties or other variables.

    So I'll better keep the experiments using your examples, thank you for sharing and explaining! :)

  • dop's file has an example of how to connect to a value - when you click the button, it sets the slider value to 10.

    but that could just as easily be Created_Objects.HSL_Value, or anything else...

    using image points is the easiest way to limit the knob to where you want,

    or you could adjust the clamp values like this:

    knob - set X to clamp(self.X, Slider.X +5, Slider.X + Slider.Width -5) (see below)

    (and then change the +5 / -5 values until you get what you want - Dop's example has the image points at +8 and -10)

  • ok, just took another look at your original file and saw that the origin is in the middle of Slider...

    normally I would set it at 0,0 to make working with it a little easier...

    so that would change the clamp statement to:

    knob - set X to Clamp(self.X, Slider.X - Slider.Width/2 +10, Slider.X + Slider.Width/2 -10)

    (and adjust the +10 and -10 as necessary) - although image points are better, because if you scale the slider at all, then the image points will scale properly as well...

  • Thanks for the quick Reply! Yes I think that the image points are more dynamic.

    I still need to get the idea how I connect the variables (value / steps) without the visual limit so I can connect them with any other properties for effects and such.

  • take another look at dop's example. on event 4 it sets the slider's instance variable "Value" that you can then assign to your object's effect properties.

    event 5 does the opposite - its sets the "Value" variable, and then updates the slider to represent that value - exactly what you want to do!

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Thanks again AllanR this is very helpful.

    To be honest I think I got the idea of the Clamp a bit better with these examples and descriptions.

    I'm not sure what Lerp is or how to use it and I don't want my brain to get confused so I won't stuck on it at the moment.

    For now I played with dop's version of using Clamp based on Image Points because I find it VERY visual and easy to tweak the more visual (for me) the better I can follow.

    The issue I find now is when I want to attach a Panel so I can PIN (behavior) the Slider + Knob to it but it seems like it's reset it to the origin of the 9patch Panel.

    The tricky part (for me) is to make the Knob follow the Panel EVEN after I tweaked it's value.

    So I don't really know how do I make the Knob follow the Panel consider I'll have more Knobs and Sliders of course, this is why I'm playing around with this tiny example first.

    DOWNLOAD My Tiny Experimental C3 File and have a look.

    Maybe.. I'm close to the solution and I didn't realize it yet but I'm out of ideas.

    Please have a look at the file to see what I mean, Thanks ahead! :)

  • I took your file and made it work - I added a couple of extra sliders so you can see how to associate a knob with a specific slider (I gave the sliders and knobs an instance variable called sliderName, and set the name to the effect name that it should control).

    when dragging the panel, I pin the knobs to the panel. When the panel is dropped, I unpin them.

    this file does not use a "shield" so notice how you can move the panel over an object and then click on the panel to start moving it again and if the mouse is also over the object, that click also happens...

    https://www.rieperts.com/games/forum/slider_knob.c3p

  • Thank you so much for taking the time to make this example I appreciate it a lot AllanR! :)

    I will look a deeper look at the code and the comments (amazing way to learn!)

    I think the way I solved the Panel/Sliders on my other code was by adding a negative "is overlapping" for the family (via mouse click/hold) and no matter what was behind the panel it just ignored it (I didn't use the shield object on one of my experimental versions) I'll have to check it out and see how it works all together.

  • Hi AllanR maybe you can help me out with something I've tried to solve, it supposed to be simple but I can't get it to work right.

    As you can see on this example (from my official WIP project) Whenever I click on an instance I made the menu and all it's related "friends" invisible (couldn't put all in 1 family because different types: Text, Sprite, 9patch) I wish I could make this into one family:

    ANYWAY... I want to make the position of ALL of these to the center of the layout of whatever I'll choose later on.

    So when I set the position for the different types of objects to: LayoutWidth.x /2 LayoutHeight /2 it works... BUT! the only issue I can't solve is the Knobs!

    Since they're also changing position, not only they are all over the place, also they change the actual values because it's based on their position (make sense).

    What I tried to do is to Unpin and Pin back.. but still couldn't make it work right.

    My Question: How do I change the position of the Knobs on the Layout WITHOUT changing their values, and also... make them stay based on their original default PIN position?

    Thanks ahead!

    .

    EDIT:

    I just noticed a really huge problem, I couldn't figure this out, because even if I change the .25 to 0.1 Wait it will never be 100% safe for a fast-user (like me for example) when scrolling things very fast when working.

    I wonder if there is also a different solution to this... Knobs position brings these 2 difficult issues but maybe you have an idea how should I fix these 2 ?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)