[Button effects] New example

[tristanbob]

Description

Change the way a button looks based on the state of the button

This is a simple yet powerful method for changing the appearance of objects using the "Button effects" behavior.
The states of a button include: idle, hover, pressed, held outside, and focused.

Multiple behaviors are provided and they can be combined to make a juicy button with animated responses to user input.

• Button effect
• Button animation (number)
• Button animation (name)
• Button size (scale) tween
• Button color (tint) tween
• Button opacity tween
• Button angle tween

Playable game

https://gd.games/victrisgames/button-effects

Video

GDevelop_APP5T9SYG9.mp4

[github-actions]

Preview the game(s) changed or added in this Pull Request

• https://editor.gdevelop.io?project=https://raw.githubusercontent.com/GDevelopApp/GDevelop-examples/button-effects/examples/button-effects/ButtonEffects.json

---

This is an automatic message displaying links to the games in this PR - double check the JSON in case of doubt.

[github-actions]

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 9.2%, saving 22.71 KB.

Filename	Before	After	Improvement	Visual comparison
examples/button-effects/assets/Ads.png	12.88 KB	12.22 KB	-5.2%	View diff
examples/button-effects/assets/Apply.png	12.94 KB	12.43 KB	-3.9%	View diff
examples/button-effects/assets/Back.png	12.94 KB	12.67 KB	-2.1%	View diff
examples/button-effects/assets/Buy.png	14.04 KB	13.38 KB	-4.7%	View diff
examples/button-effects/assets/Chest_Closed.png	401 bytes	321 bytes	-20.0%	View diff
examples/button-effects/assets/Chest_Open_1.png	411 bytes	334 bytes	-18.7%	View diff
examples/button-effects/assets/Chest_Open_2.png	416 bytes	351 bytes	-15.6%	View diff
examples/button-effects/assets/Config.png	13.51 KB	12.70 KB	-6.0%	View diff
examples/button-effects/assets/Heart.png	12.46 KB	12.07 KB	-3.1%	View diff
examples/button-effects/assets/Large Buy Button.png	29.95 KB	22.69 KB	-24.2%	View diff
examples/button-effects/assets/Large Exit Button.png	22.96 KB	16.49 KB	-28.1%	View diff
examples/button-effects/assets/Large Play Button.png	26.87 KB	26.48 KB	-1.5%	View diff
examples/button-effects/assets/Left arrow.png	3.44 KB	2.32 KB	-32.7%	View diff
examples/button-effects/assets/Next.png	12.83 KB	12.69 KB	-1.1%	View diff
examples/button-effects/assets/Play.png	12.16 KB	11.72 KB	-3.7%	View diff
examples/button-effects/assets/Plus.png	12.35 KB	12.13 KB	-1.8%	View diff
examples/button-effects/assets/Retry.png	13.84 KB	13.21 KB	-4.6%	View diff
examples/button-effects/assets/Right arrow.png	3.41 KB	2.19 KB	-35.7%	View diff
examples/button-effects/assets/Star.png	11.81 KB	11.51 KB	-2.5%	View diff
examples/button-effects/assets/World.png	17.23 KB	16.22 KB	-5.9%	View diff

5522 images did not require optimisation.

[D8H]

The script doesn't handle spaces in project file name.

• https://editor.gdevelop.io/?project=https://raw.githubusercontent.com/GDevelopApp/GDevelop-examples/button-effects/examples/button-effects/Button%20Effects.json

[tristanbob]

The script doesn't handle spaces in project file name.

• https://editor.gdevelop.io/?project=https://raw.githubusercontent.com/GDevelopApp/GDevelop-examples/button-effects/examples/button-effects/Button%20Effects.json

Thanks, I have updated the filename to not use a space.

[D8H]

@tristanbob If you're ok with the changes, I'll generate the getters and setters.

As discussed, I'll remove the opacity behavior.
What do you think about removing the animation by index behavior too?
We should probably postpone the angle behavior because of the collision mask issue to take more time to find a good solution. What do you think?

Example changes

• Button are setup to have a fade-out 2 times longer than their fade-in

Other than this the example should work exactly the same.

Extension changes

Features

• Add a behavior to tween effects.
• Remove Hovered and HeldOutside states handling as they are part of the Focused state.
• Duplicate easing and duration property to allow different speed for fade-in and fade-out.

Good practices

• Replace "trigger once" with a previous state check as "trigger once" are shared by all objects.
• Fix tween name collision between behaviors.
• Use the same tween name for every state because only one must play at the same time.
• Use default behavior names as required property behavior names to allow copy-paste of events between extensions and layout events without any issue.
• Slightly reword behaviors description

[tristanbob]

@tristanbob If you're ok with the changes, I'll generate the getters and setters.

Thanks, please do.

As discussed, I'll remove the opacity behavior.

Yes, this is fine.

What do you think about removing the animation by index behavior too?

I don't want to remove it.

We should probably postpone the angle behavior because of the collision mask issue to take more time to find a good solution. What do you think?

I think we should ship the angle behavior as is. In many cases, it works great and we can always improve it later.

Example changes

• Button are setup to have a fade-out 2 times longer than their fade-in

This is fine and looks good.

Extension changes

Features

• Add a behavior to tween effects.

This is a powerful feature, thanks.

• Remove Hovered and HeldOutside states handling as they are part of the Focused state.

This is good. BTW, found a spelling error in extension: "focussed"

• Duplicate easing and duration property to allow different speed for fade-in and fade-out.

Does "fade-in duration" make sense as a name? I guess it does; the change is fading between two states. (At first I thought it only applied to opacity)

Good practices

• Replace "trigger once" with a previous state check as "trigger once" are shared by all objects.

I was wondering about this. I'm glad you identified the issue and fix!

• Fix tween name collision between behaviors.

Great fix.

• Use the same tween name for every state because only one must play at the same time.

I like this change.

• Use default behavior names as required property behavior names to allow copy-paste of events between extensions and layout events without any issue.

Why do we force users to name the required behaviors property? I think the property names for required behaviors should be set automatically.

• Slightly reword behaviors description

Looks great.

I also noticed you added a "TimeDelta()" expression that applied the TimeScale for the layer. This is interesting because I use TimeDelta in several extensions and I just assumed it would change automatically with TimeScale.

Thanks for spending your valuable time reviewing and improving this extension!

[D8H]

Should this example be merged with this one?
https://gdevelop.io/game-example/free/buttons

I did a small fix on the name case:

• [Button Effects] Fix the project name #576