DraggableSliderControl (New Extension)

[tristanbob]

NOTE: This extension works, but it will require proper collisions to be added to shape-painter objects before it will work well enough to be included in GDevelop.

Describe the extension

Use a shape-painter object to draw a horizontal slider that can be dragged by the users. The "Percent" property will return the position of the slider on the bar. Range: (0,1) where 0 is the left-side, and 1 is the right-side.

Example

https://user-images.githubusercontent.com/8879811/103976109-1c01e400-5133-11eb-8659-7a75e3bd8e25.mp4

https://games.gdevelop-app.com/game-f9fe39b7-140d-46a3-b08e-dd4bdef524dd/index.html

Checklist

• [x] Extension has a proper name and description.
• [x] Extension has tags (for example: "platform, brick, breakable").
• [x] All behaviors have a description.
• [x] All functions (actions, conditions, expressions) have descriptions and proper sentences.
• [x] I've followed the best practices listed on http://wiki.compilgames.net/doku.php/gdevelop5/extensions/best-practices
• [x] I confirm that this extension can be integrated to this GitHub repository, distributed and MIT licensed.

Extension file

DraggableSliderControl-0.0.1.json.zip

[tristanbob]

Amazing good news!

Thanks to advice from @Silver-Streak I have converted the collision conditions to simple x,y checks. Now the sliders work very well and I am ready for them to be tested and considered for inclusion in GDevelop.

Updated Example: https://games.gdevelop-app.com/game-d724d03d-b023-4d6d-982c-9bbd07bcf525/index.html

DraggableSliderControl-0.1.2.json.zip

[4ian]

Very nice! 👍 Interesting to create full blown objects with the shape painter, though that's what it's meant for :)

A few feedbacks:

• I've seen a Trigger Once: In a behavior I highly recommend never using Trigger Once as it's probably not doing what you think. Also there is already a check for the property to be false, so no need for it?

• This can probably be moved to a new onCreated method:

  • The sentence for "Is Being Dragged" is missing ;)

• The conditions and expressions checking the mouse/cursor position are using the base layer - which means the calculations won't be good if the object is not on the base layer (try to put it on the GUI layer in the platformer example). To fix this, use Object.Layer() for all layer parameters, including in expressions. I think these are all the conditions/expressions in this screenshot:

  

Finally, Let's add ui, widget to the tags :) I'm wondering if we could create other simple "widgets" (checkbox, buttons) like this, could be useful to quickly prototype a user interface in many game. I really like that you put properties for changing the styling, important to make this adaptable to as many games as possible.

Great job again, looking forward to have this integrated!

[tristanbob]

1) Thanks for the great feedback! I will include all your suggested changes.

2) I do want to add more UI controls! I have been studying these UI best practices and will change to common terminology and offer similar configuration options. I will add (some of) these to the Extension Trello board. https://material.io/components

3) Do you want me to create new extensions for each widget? Or should we make a ui-widgets extension with all similar behaviors?

4) This slider extension depends on "Draw the shapes relative to the object position on the scene" being activated. However, there are no Conditions or Actions to control that. Should I submit a feature request for this?

5) Should I do a feature request for a color picker to be an option for behavior properties?

[tristanbob]

Version 0.2.0

Changes include:

• Removed all TriggerOnce
• Moved that event to onCreated
• Added parameter sentence to IsBeingDragged
• Added Object.Layer() to all events that needed it
• Added "ui, widget" to tags
• Added halo during hover/click
• Added many new properties (and functions to change them)
• Set opacity of halo and inactive bar
• Tested with random input values and set some protections to prevent malformed sliders

Video:

https://user-images.githubusercontent.com/8879811/104112567-a53d2600-52ad-11eb-88fc-d679df92a34a.mp4

Example game:

https://games.gdevelop-app.com/game-59f52db3-395c-4e70-9454-294fced3c11a/index.html

File

DraggableSliderControl-0.2.0.json.zip

[tristanbob]

Version 0.2.1

Changes:

• Removed lag when dragging the thumb simply by moving the event that draws the thumb to the top of the scene. (I'm not sure what the root cause was, but all my tests are better now.)

Example game (updated):

https://games.gdevelop-app.com/game-094897d2-37a3-4385-9bfb-8ec6b515b09c/index.html

File

DraggableSliderControl-0.2.1.json.zip

[tristanbob]

Hold on importing. Changes coming later today

[tristanbob]

Version 0.2.2

Changes:

• Decrease opacity on inactive track to increase contrast.
  • New default opacity values: Thumb=255, ActiveTrack=255, InactiveTrack=96, HaloClick=64, HaloHover=32
• Increase active track height by 2 pixels (suggested by Material UI)
• Added new properties (and functions to set them)
• Added global variable to make sure that only one slider can be moved at a time
• Multitouch support is NOT included, but I am thinking about how to do it.

Video

https://user-images.githubusercontent.com/8879811/104140553-1e508200-536f-11eb-990b-25e6a2cda8b0.mp4

Example game (updated):

https://games.gdevelop-app.com/game-bf302dae-0d9f-483c-84fc-8f25673f66ca/index.html

File

DraggableSliderControl-0.2.2.json.zip

[arthuro555]

Maybe if it is possible you could add an option to lerp with customized time the opacity of the circle that appears on hover, to make its appearance more smooth.

[tristanbob]

Maybe if it is possible you could add an option to lerp with customized time the opacity of the circle that appears on hover, to make its appearance more smooth.

Good idea! Instead of lerping the opacity, I think I will try copying what material UI does, which grows and shrinks the radius of the halo circle. It should not be hard.

https://user-images.githubusercontent.com/8879811/104244574-ee14ec00-541f-11eb-8638-06b54031e13d.mp4

Source: https://material-ui.com/components/slider/

Executing UX Animations: Duration and Motion Characteristics https://www.nngroup.com/articles/animation-duration/

BTW, do you think I am getting too many properties?

[arthuro555]

Personally, I believe there is never too much customization. In the worst case, one could make an extension to simplify/abstract a too complex extension, which is imo better than "get our hands dirty" by modifying the extension to add that customization

[4ian]

Looks really cool! Thanks for all the latest changes!

Do you want me to create new extensions for each widget? Or should we make a ui-widgets extension with all similar behaviors?

I would suggest for now to keep them separate, to make them easier to find in the extension list, and to be a bit more flexible (easier to upgrade a single element, or to improve one). To ease discovery, I can introduce later categories in the extensions search (much like in the assets store). We'll use these categories to "group" together UI elements and ease their discovery.

This slider extension depends on "Draw the shapes relative to the object position on the scene" being activated. However, there are no Conditions or Actions to control that. Should I submit a feature request for this?

I think @Bouh made a PR to fix this, so it will be in the next version. No big deal for now!

Should I do a feature request for a color picker to be an option for behavior properties?

Yes please! Should not be too hard to add, and will be supported already by previous versions of GDevelop :)

Also I've fallen a bit behind in terms of reviewing extensions, so feel free to ping me on other extensions that are ready to be imported in the extensions registry :) Good job again, thrilled to see this!

[4ian]

Finally merged! Thanks, this is a super great quality extension (appreciate the attention provided to all the descriptions). We might need in the future to allow extensions to define new... objects :)

[tristanbob]

Thanks! I will have a few more UI widgets done soon, now that I don’t have to worry about multitouch (for now).

On Thu, Jan 21, 2021 at 2:35 PM Florian Rival notifications@github.com wrote:

Finally merged! Thanks, this is a super great quality extension (appreciate the attention provided to all the descriptions). We might need in the future to allow extensions to define new... objects :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop-extensions/issues/91#issuecomment-764956141, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACDX5Q2KOTBOTP7C72GYIX3S3CM3FANCNFSM4VZ6CBYA .

-- Tristan Rhodes

[tristanbob]

I apologize, I have been updating this extension only on the Trello board. In the future, I'll post extensions on Trello for peer review, and only post it here for final review and publishing.

I am attaching the newest version:

Version 0.3.2

Updates include:

• Added option to use rounded ends on tracks
• Sliders can only be dragged when object and layer are visible
• Changed global variable (__DraggableSliderBehavior.SlideInProgress) to scene variable (Arthuro recommendation)
• Changed thumb shape from integer to string list (Arthuro recommendation)

Example game

https://games.gdevelop-app.com/game-07259d3f-e4be-440d-8887-87c943dcd493/index.html

https://user-images.githubusercontent.com/8879811/105442888-d6abdf00-5c27-11eb-8039-cf4bc8def51d.mp4

Extension JSON

DraggableSliderControl-0.3.2.json.zip

[4ian]

Thanks!

Quick thing: avoid naming properties "If true, blablabla", like "If true, round the ends of the track". Name it just "Round the ends of the track". As it's rendering a checkbox, it's obvious that checking it will round the ends of the track. I've added this in the best practices :)

Sliders can only be dragged when object and layer are visible Changed global variable (__DraggableSliderBehavior.SlideInProgress) to scene variable (Arthuro recommendation) Changed thumb shape from integer to string list (Arthuro recommendation)

Make sense :)

Updated, great job as usual! 👍

[tristanbob]

I just published a short tutorial describing this extension, and I published the source code for my example game.

Video

https://www.youtube.com/watch?v=iiTUwdAT_hs

Example Game

https://victrisgames.itch.io/draggable-slider-control-extension

[Silver-Streak]

Really like this (and all of the UI/button/toggle based extensions you're working on, Tristan.) From some poking around, there seems to be a few conditions and expressions missing.

Expressions:

• Just like the platformer character behavior, I feel like there should be an expression for every parameter. (e.g. current opacity of active slider, current color string of bar, etc)
• There may be value in having a true/false expression for whether this specific slider is currently being dragged or not (your existing condition likely covers this).
• Likewise, there may be value in there being an expression if this specific thumb is being hovered over or not. (This may be better covered by a condition)

Action:

• You have the majority of your parameters modifiable via actions, which is fantastic. There do seem to be one or two missing though. The biggest ones I found missing are that you cannot change the opacity of the halo (whether hovered or being dragged)
• Edit: There may be value in adding a "simulate activate", "simulate hover", "increase by X amount", "decrease by X amount" actions. This would enable people to use this extension for keyboard/gamepad.

Conditions:

• If the above expressions are covered, you don't likely need conditions for each parameter (although the Platformer behavior does do that), since a user can just use a compare two values condition plus one of the expressions above. Some users may be uncomfortable using that versus having explicit conditions for each one, but I'd worry about it flooding the condition finder.
• The above said, I do think there is value in having a "is hovered over" condition. Shape painters are weird on collision/position detection, so this could help with that.

Overall, this and the other extensions you've been working on are fantastic. The above suggestions would just likely make it easier for people to more dynamically change their slider bars, or use the expressions as way to pin custom graphics and set their length/height/position to the correct location.

[tristanbob]

@Silver-Streak thanks for spending the time to review this extension and provide excellent feedback.

Expressions: I will add expressions for all properties (except boolean, which Florian said is not supported yet) https://github.com/4ian/GDevelop-extensions/issues/101#issuecomment-768931645)

Actions: I will make sure you can change the opacity of the halo. Users can already increase/decrease the value with SetValue action. This will move the slider to the right position. (UPDATE: I thought users would have the standard operators (add/subtract/multiply/divide/set to) but they only have the ability to set a number. I may have to build these manually as a new "string from a list" parameter.)

Conditions: I will add "IsHoveredOver" and perhaps other conditions.

[4ian]

thought users would have the standard operators (add/subtract/multiply/divide/set to) but they only have the ability to set a number. I may have to build these manually as a new "string from a list" parameter.

I discourage manually doing it, as this is something that is standardized in GDevelop and should rather be exposed as a feature to extensions (I know you could just do it, but it won't support things like translations, it could have inconsistencies/mistakes, it won't be updated if I update the wording in GDevelop, and it makes the action more complex. If we keep it simple, we can later automatically improve it when this feature is added to GDevelop).

In the meantime, it's always possible to use the expression to get the current value and add/subtract from it :)

[tristanbob]

This has been added to GDevelop many weeks ago, so closing this issue. (I'll open a new issue for any updates.)