GDevelop-examples
GDevelop-examples copied to clipboard
GDevelopApp
Resource bar - custom object example
Preview the game(s) changed or added in this Pull Request
- https://editor.gdevelop.io?project=https://raw.githubusercontent.com/GDevelopApp/GDevelop-examples/resource-bar-object/examples/resource-bar/game.json
Preview the game(s) changed or added in this Pull Request
- https://editor.gdevelop.io?project=https://raw.githubusercontent.com/GDevelopApp/GDevelop-examples/resource-bar-object/examples/resource-bar/game.json
This is an automatic message displaying links to the games in this PR - double check the JSON in case of doubt.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Images automagically compressed by Calibre's image-actions ✨
Compression reduced images by 96.3%, saving 49.86 KB.
| Filename | Before | After | Improvement | Visual comparison |
|---|---|---|---|---|
examples/resource-bar/assets/Empty Heart.png |
7.99 KB | 189 bytes | -97.7% | View diff |
examples/resource-bar/assets/Flashy Empty Heart.png |
11.01 KB | 189 bytes | -98.3% | View diff |
examples/resource-bar/assets/Flashy Full Heart 2.png |
349 bytes | 263 bytes | -24.6% | View diff |
examples/resource-bar/assets/Flashy Full Heart.png |
11.16 KB | 264 bytes | -97.7% | View diff |
examples/resource-bar/assets/Full Heart.png |
11.29 KB | 264 bytes | -97.7% | View diff |
examples/resource-bar/assets/Scroll.png |
9.97 KB | 770 bytes | -92.5% | View diff |
4471 images did not require optimisation.
Great work Davy! It blows me away that you created this in a day.
Suggestions for Custom objects
- We need a description field for each child object to help explain what it is used for.
- Each child object should have a "Show this object" checkbox ("checked" as the default). This way people can easily disable a resource and it won't show up as a magenta box. In this example, the "Show the label" property is hard to find and it would be more intuitive to be located inside the matching Resource outlined area.
- Similarly, we should allow any parameter to be placed inside the outlined area of a resource. In this example, the "Animation" group of parameters should live inside the "Delayed Bar" outlined area.
Suggestions for "TiledContinuousBar"
- The scene editor always shows a 100% filled bar. Can we have it set up with offset values, so that all 3 images can be seen? For instance: Filled Bar = 50%, Delayed Bar at 75%? (Leaving the top 25% empty).
- Change the child object named "Resource" -> "Filled bar"
- Change the child object named "Buffer" -> "Delayed bar"
- The label will always be overwritten by code, so we need a way to inform the users of this. Is there any long-description field where we can add something like this:
This label always shows the value of the bar using this format: "Value / MaxValue". For example: "50 / 100".This could be located in the proposed "resource description field" I suggested above. - doStepPostEvents condition is inverted. It would be easier to read if the condition was NOT inverted and the direction of the inequality was changed (it seems the TiledUnitsBar already uses this method)
- I feel like I am missing some code. Where is the logic that lerps the value of the "buffer"?
PanelSpriteButton
- I tried to animate the size of the button using different "Default width/height" values. "Hovered" was 10% bigger, "Pressed" was 10% smaller, and "Idle" was the normal size. However, nothing changed when interacting with the object. Should this method work?
doStepPostEvents condition is inverted. It would be easier to read if the condition was NOT inverted and the direction of the inequality was changed (it seems the TiledUnitsBar already uses this method)
I feel like I am missing some code. Where is the logic that lerps the value of the "buffer"?
This is a shortcut for "the timer value is greater than or doesn't exist".
PanelSpriteButton
- I tried to animate the size of the button using different "Default width/height" values. "Hovered" was 10% bigger, "Pressed" was 10% smaller, and "Idle" was the normal size. However, nothing changed when interacting with the object. Should this method work?
I didn't intend it to work. I'm not sure we should make it work. I bet it won't look good as it won't zoom but just move the corners (and it would probably break the resizing system). It's a case we could handle with a sprite button.
Images automagically compressed by Calibre's image-actions ✨
Compression reduced images by 20.3%, saving 166 bytes.
| Filename | Before | After | Improvement | Visual comparison |
|---|---|---|---|---|
examples/resource-bar/Checked.png |
511 bytes | 401 bytes | -21.5% | View diff |
examples/resource-bar/Unchecked.png |
308 bytes | 252 bytes | -18.2% | View diff |
4477 images did not require optimisation.
Images automagically compressed by Calibre's image-actions ✨
Compression reduced images by 19.9%, saving 1.31 KB.
| Filename | Before | After | Improvement | Visual comparison |
|---|---|---|---|---|
examples/resource-bar/assets/Yellow Button_Hovered.png |
2.22 KB | 1.75 KB | -20.8% | View diff |
examples/resource-bar/assets/Yellow Button_Idle.png |
2.23 KB | 1.77 KB | -20.7% | View diff |
examples/resource-bar/assets/Yellow Button_Pressed.png |
2.14 KB | 1.75 KB | -18.1% | View diff |
4479 images did not require optimisation.
Bar
- [ ] There is two objects called "Resource bar", we should rename the first:
Into a Progress Bar.
To be able to differenciate it from the second which can kept the Resource bar name:
-
[ ] the bar can't use decimal unit on the label?
-
[ ] The buffer appear when we press minus, but its turned hidden when the plus is pressed. I played with a semi transparent background and it was weird to see something appear and disappear. I suggesto to keep it visible.
Slider
- [ ] The thumb move when I release the mouse key, its not the common behavior, it should move when the mouse is pressed.
It make sense to use pressed condition, to avoid this weird things when we click on the thumb and release it. The feeling is better the the thumb follow the mouse in continue.
Icon button (probably in wip?)
Nothing to say I think its still in WIP? Because it dosen't work at all even with if I working on this version: https://github.com/4ian/GDevelop/pull/4643
Toggle switch (probably in wip?)
-
[ ] When the object have a custom size its completely broken.
-
[ ] I Created a checkbox/switch from scratch and I can't display the label.
-
[ ] The Default size of the checkbox isn't always the same by default (first text on two line, then text on one line, both is without custom size.)
Please use video instead of gif because gif can't be navigated and have poor quality/size ratio.
- There is two objects called "Resource bar", we should rename the first into a Progress Bar. To be able to differentiate it from the second which can kept the Resource bar name.
"Progress bar" would be miss-leading. Both object can be used for the same thing. They are just displayed differently.
- the bar can't use decimal unit on the label?
It would need a property to choose the number of decimals but I think it's not very common to have decimals on a bar so it rounds the value to keep it simple.
- The buffer appear when we press minus, but its turned hidden when the plus is pressed. I played with a semi transparent background and it was weird to see something appear and disappear. I suggest to to keep it visible.
The buffer purpose is to catch the eyes because the value is important for players. Making the bar semi transparent would defeat the purpose. I think both case are mutually excluding.
- The thumb move when I release the mouse key, its not the common behavior, it should move when the mouse is pressed. It make sense to use pressed condition, to avoid this weird things when we click on the thumb and release it. The feeling is better the the thumb follow the mouse in continue.
Indeed, I fixed it.
Icon button (probably in wip?)
It's just a test. I don't plan to release it.
Toggle switch (probably in wip?)
- I Created a checkbox/switch from scratch and I can't display the label.
I plan to remove the label before the release if I don't find any good solution for it. When there is no child-instance visually encompassing any other, it's hard to decide how the children should adapt their size.
Images automagically compressed by Calibre's image-actions ✨
Compression reduced images by 36.4%, saving 441 bytes.
| Filename | Before | After | Improvement | Visual comparison |
|---|---|---|---|---|
examples/resource-bar/assets/Chest_Full Open_1.png |
361 bytes | 232 bytes | -35.7% | View diff |
examples/resource-bar/assets/Chest_Full Open_2.png |
417 bytes | 262 bytes | -37.2% | View diff |
examples/resource-bar/assets/Chest_Full Open_3.png |
432 bytes | 275 bytes | -36.3% | View diff |
4483 images did not require optimisation.
Looks mostly good! A few things on my side:
- Is cheched => Is checked
- This is useful, but a bit of a hack to show this initial value:
- "Thumb" as a name is very clear, but "Resource" is less. What about "Filling"?
- The icon button is not showing at runtime but I guess it's not finished?
"Thumb" as a name is very clear, but "Resource" is less. What about "Filling"?
Indeed. Before I rename it, does anyone else have suggestions for the name?
- The icon button is not showing at runtime but I guess it's not finished?
It's just an idea that I forgave.
@D8H: @HelperWesley tells that "fill bar" (so, "FillBar") would be the most understand next to "background" (and "thumb", for the slider).
Images automagically compressed by Calibre's image-actions ✨
Compression reduced images by 25.2%, saving 37.62 KB.
| Filename | Before | After | Improvement | Visual comparison |
|---|---|---|---|---|
examples/resource-bar/assets/Flat dark joystick border.png |
1.63 KB | 1.59 KB | -2.2% | View diff |
examples/resource-bar/assets/Flat dark joystick thumb.png |
1.05 KB | 1.02 KB | -3.3% | View diff |
examples/resource-bar/assets/Flat light jokstick border.png |
1.69 KB | 1.65 KB | -2.0% | View diff |
examples/resource-bar/assets/Flat light joystick thumb.png |
1.05 KB | 1.02 KB | -3.3% | View diff |
examples/resource-bar/assets/Line dark joystick thumb.png |
1.55 KB | 1.52 KB | -2.3% | View diff |
examples/resource-bar/assets/Line darkjoystick border.png |
2.27 KB | 2.24 KB | -1.5% | View diff |
examples/resource-bar/assets/Line light joystick border.png |
2.26 KB | 2.23 KB | -1.6% | View diff |
examples/resource-bar/assets/Line light joystick thumb.png |
1.60 KB | 1.56 KB | -2.2% | View diff |
examples/resource-bar/assets/Shaded dark joystick border.png |
2.99 KB | 2.96 KB | -1.2% | View diff |
examples/resource-bar/assets/Shaded dark joystick thumb.png |
2.95 KB | 2.92 KB | -1.2% | View diff |
examples/resource-bar/assets/Shaded light joystick border.png |
2.81 KB | 2.78 KB | -1.2% | View diff |
examples/resource-bar/assets/Shaded light joystick thumb.png |
2.74 KB | 2.70 KB | -1.3% | View diff |
examples/resource-bar/assets/Summer Background.png |
119.60 KB | 82.53 KB | -31.0% | View diff |
examples/resource-bar/assets/Transparent dark joystick border.png |
1.64 KB | 1.61 KB | -2.0% | View diff |
examples/resource-bar/assets/Transparent dark joystick thumb.png |
1.08 KB | 1.04 KB | -3.3% | View diff |
examples/resource-bar/assets/Transparent light joystick border.png |
1.60 KB | 1.56 KB | -2.2% | View diff |
examples/resource-bar/assets/Transparent light joystick thumb.png |
1.06 KB | 1.02 KB | -3.3% | View diff |
4575 images did not require optimisation.
Images automagically compressed by Calibre's image-actions ✨
Compression reduced images by 24.6%, saving 17.59 KB.
| Filename | Before | After | Improvement | Visual comparison |
|---|---|---|---|---|
examples/resource-bar/assets/Resource bars/Buch/Bronze bar background.png |
1.20 KB | 523 bytes | -57.4% | View diff |
examples/resource-bar/assets/Resource bars/Buch/Gold bar background.png |
1.18 KB | 505 bytes | -58.2% | View diff |
examples/resource-bar/assets/Resource bars/Kenney/ShmupHealthResourceDark_ByKenney.png |
175 bytes | 168 bytes | -4.0% | View diff |
examples/resource-bar/assets/Resource bars/Kenney/ShmupShieldResourceDark_ByKenney.png |
199 bytes | 197 bytes | -1.0% | View diff |
examples/resource-bar/assets/Resource bars/Kenney/SpaceShooterRocketResource_ByKenney.png |
2.26 KB | 1.38 KB | -39.0% | View diff |
examples/resource-bar/assets/Resource bars/Kenney/SpaceShooterRocketResourceDark_ByKenney.png |
7.77 KB | 1.20 KB | -84.6% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Dot Bar Blue Border.png |
275 bytes | 211 bytes | -23.3% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Dot Bar Blue Fill Bar.png |
212 bytes | 193 bytes | -9.0% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Dot Bar Green Border.png |
270 bytes | 216 bytes | -20.0% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Dot Bar Green Fill Bar.png |
201 bytes | 195 bytes | -3.0% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Flat Bar Blue Fill Bar.png |
170 bytes | 158 bytes | -7.1% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Flat Bar Green Fill Bar.png.png |
171 bytes | 159 bytes | -7.0% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Flat Bar Orange Fill Bar.png |
171 bytes | 158 bytes | -7.6% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Flat Bar Red Fill Bar.png |
168 bytes | 157 bytes | -6.5% | View diff |
examples/resource-bar/assets/Resource bars/Wesley/Flat Bar White Border.png |
241 bytes | 204 bytes | -15.4% | View diff |
examples/resource-bar/assets/Resource bars/Wishforge/Empty Heart.png |
1.70 KB | 796 bytes | -54.1% | View diff |
examples/resource-bar/assets/Resource bars/Wishforge/Filled Heart.png |
1.35 KB | 955 bytes | -30.9% | View diff |
examples/resource-bar/assets/Sliders/JellyCat/Small Plastic Green Round Slider Thumb.png |
5.73 KB | 5.59 KB | -2.3% | View diff |
examples/resource-bar/assets/Sliders/Wesley/Square Blue Slider Border.png |
242 bytes | 212 bytes | -12.4% | View diff |
examples/resource-bar/assets/Sliders/Wesley/Square Blue Slider Fill Bar.png |
174 bytes | 167 bytes | -4.0% | View diff |
examples/resource-bar/assets/Sliders/Wesley/Square Blue Slider Thumb.png |
178 bytes | 161 bytes | -9.6% | View diff |
examples/resource-bar/assets/Sliders/Wesley/Square Green Slider Border.png |
233 bytes | 217 bytes | -6.9% | View diff |
examples/resource-bar/assets/Sliders/Wesley/Square Green Slider Fill Bar.png |
177 bytes | 170 bytes | -4.0% | View diff |
examples/resource-bar/assets/Sliders/Wesley/Square Green Slider Thumb.png |
183 bytes | 161 bytes | -12.0% | View diff |
examples/resource-bar/assets/ToggleIcons/Buch/Gold Round Toggle_Off.png |
807 bytes | 199 bytes | -75.3% | View diff |
examples/resource-bar/assets/ToggleIcons/Buch/Gold Round Toggle_On.png |
831 bytes | 218 bytes | -73.8% | View diff |
examples/resource-bar/assets/ToggleIcons/Buch/Gold Square Toggle_Off.png |
678 bytes | 160 bytes | -76.4% | View diff |
examples/resource-bar/assets/ToggleIcons/Buch/Gold Square Toggle_On.png |
702 bytes | 177 bytes | -74.8% | View diff |
examples/resource-bar/assets/ToggleIcons/JellyCat/Plastic Green Round Switch_Off.png |
16.09 KB | 14.38 KB | -10.6% | View diff |
examples/resource-bar/assets/ToggleIcons/JellyCat/Plastic Green Round Switch_On.png |
16.42 KB | 14.57 KB | -11.3% | View diff |
examples/resource-bar/assets/ToggleIcons/JellyCat/Plastic Green Round Toggle_Off.png |
8.62 KB | 7.98 KB | -7.4% | View diff |
examples/resource-bar/assets/ToggleIcons/JellyCat/Plastic Green Square Toggle_Off.png |
1.52 KB | 1.22 KB | -19.5% | View diff |
examples/resource-bar/assets/ToggleIcons/Wesley/Square Blue Toggle_Off.png |
225 bytes | 178 bytes | -20.9% | View diff |
examples/resource-bar/assets/ToggleIcons/Wesley/Square Blue Toggle_On.png |
277 bytes | 209 bytes | -24.5% | View diff |
examples/resource-bar/assets/ToggleIcons/Wesley/Square Green Toggle_Off.png |
210 bytes | 178 bytes | -15.2% | View diff |
examples/resource-bar/assets/ToggleIcons/Wesley/Square Green Toggle_On.png |
262 bytes | 208 bytes | -20.6% | View diff |
examples/resource-bar/assets/ToggleIcons/Wesley/Square White Toggle_Off.png |
164 bytes | 145 bytes | -11.6% | View diff |
examples/resource-bar/assets/ToggleIcons/Wesley/Square White Toggle_On.png |
186 bytes | 156 bytes | -16.1% | View diff |
4613 images did not require optimisation.
Images automagically compressed by Calibre's image-actions ✨
Compression reduced images by 5.9%, saving 1.43 KB.
| Filename | Before | After | Improvement | Visual comparison |
|---|---|---|---|---|
examples/resource-bar/assets/ToggleIcons/JellyCat/Small Plastic Green Round Switch_Off.png |
7.28 KB | 6.97 KB | -4.2% | View diff |
examples/resource-bar/assets/ToggleIcons/JellyCat/Small Plastic Green Round Switch_On.png |
7.41 KB | 6.92 KB | -6.5% | View diff |
examples/resource-bar/assets/ToggleIcons/JellyCat/Small Plastic Green Round Toggle_Off.png |
3.81 KB | 3.30 KB | -13.2% | View diff |
examples/resource-bar/assets/ToggleIcons/JellyCat/Small Plastic Green Round Toggle_On.png |
5.73 KB | 5.59 KB | -2.3% | View diff |
4653 images did not require optimisation.
Images automagically compressed by Calibre's image-actions ✨
Compression reduced images by 61.7%, saving 16.47 KB.
| Filename | Before | After | Improvement | Visual comparison |
|---|---|---|---|---|
examples/resource-bar/Metal Bar Border.png |
3.04 KB | 288 bytes | -90.7% | View diff |
examples/resource-bar/Pixel Red Fill Bar.png |
2.78 KB | 143 bytes | -95.0% | View diff |
examples/resource-bar/Pixel Yellow Fill Bar.png |
10.12 KB | 143 bytes | -98.6% | View diff |
examples/resource-bar/Shaded Green Fill Bar.png |
3.45 KB | 3.00 KB | -12.9% | View diff |
examples/resource-bar/Shaded Red Fill Bar.png |
3.37 KB | 3.02 KB | -10.2% | View diff |
examples/resource-bar/Shaded Yellow Fill Bar.png |
3.95 KB | 3.64 KB | -7.8% | View diff |
4658 images did not require optimisation.