Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resource bar - custom object example #411

Draft
wants to merge 101 commits into
base: main
Choose a base branch
from
Draft

Resource bar - custom object example #411

wants to merge 101 commits into from

Conversation

D8H
Copy link
Contributor

@D8H D8H commented Nov 29, 2022 •
edited
Loading

@D8H D8H added the 🚧 Work In Progress This example is a work in progress label Nov 29, 2022
@D8H D8H self-assigned this Nov 29, 2022
@github-actions
Copy link
Contributor

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

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

@github-actions
Copy link
Contributor

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.

@tristanbob
Copy link
Contributor

tristanbob commented Nov 30, 2022 •
edited
Loading

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?

image

@D8H
Copy link
Contributor Author

D8H commented Nov 30, 2022 •
edited
Loading

  • 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.

@D8H D8H mentioned this pull request Dec 14, 2022
Merged
@github-actions
Copy link
Contributor

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.

@github-actions
Copy link
Contributor

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.

@Bouh
Copy link
Contributor

Bouh commented Dec 18, 2022 •
edited
Loading

Bar

  • There is two objects called "Resource bar", we should rename the first:
    image
    Into a Progress Bar.

To be able to differenciate it from the second which can kept the Resource bar name:
image

  • 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.
    test

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.
    test

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: 4ian/GDevelop#4643

Toggle switch (probably in wip?)

  • When the object have a custom size its completely broken.
    test

  • I Created a checkbox/switch from scratch and I can't display the label.
    test

  • 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.)
    test

@D8H
Copy link
Contributor Author

D8H commented Dec 19, 2022 •
edited
Loading

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.

@github-actions
Copy link
Contributor

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.

@D8H D8H mentioned this pull request Jan 2, 2023
Merged
@4ian
Copy link
Contributor

4ian commented Jan 2, 2023

Looks mostly good! A few things on my side:

  • Is cheched => Is checked
    image
  • This is useful, but a bit of a hack to show this initial value:
    image
  • "Thumb" as a name is very clear, but "Resource" is less. What about "Filling"?
    image
  • The icon button is not showing at runtime but I guess it's not finished?

@D8H
Copy link
Contributor Author

D8H commented Jan 2, 2023 •
edited
Loading

"Thumb" as a name is very clear, but "Resource" is less. What about "Filling"?
image

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.

@4ian
Copy link
Contributor

4ian commented Jan 2, 2023

@D8H: @HelperWesley tells that "fill bar" (so, "FillBar") would be the most understand next to "background" (and "thumb", for the slider).

@github-actions
Copy link
Contributor

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.

@github-actions
Copy link
Contributor

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.

@github-actions
Copy link
Contributor

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.

@github-actions
Copy link
Contributor

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.

This was referenced Jan 21, 2023
Merged
Merged
Merged
Merged
D8H and others added 21 commits February 1, 2023 15:12
@D8H
Add toggle switches.
7157016
@D8H
Split the bar scene.
524faa2
@D8H
Add some units bar.
65a218f
@github-actions @D8H
Optimised images with calibre/image-actions
e4b063d
@D8H
Typo in extensions.
174a4fb
@D8H
Upgrade extensions to fix extension namespace in instructions.
6dbc282
@D8H
Fix the bar max value.
8cec79e
@D8H
Add more bars.
e71faec
@github-actions @D8H
Optimised images with calibre/image-actions
d984b54
@D8H
Minor configuration fixes.
ecac2c4
@D8H
Upgrade units bar to fix the initial value.
a7f18a7
@D8H
Upgrade the ButtonFSM behavior in Slider and Toggle Switch extensions.
1156bc1
@D8H
Upgrade slider extension for a multitouch fix.
82dace4
@D8H
Remove useless function.
307f98b
@D8H
Add an "activate" action to the button.
436e18d
@D8H
Fix sentence.
05fd6ae
@D8H
Add an "activate" action for toggles and sliders.
4282974
@D8H
Upgrade the joystick extension to fix useless behavior parameters.
b30f6b6
@D8H
Fix a typo in the "activate" actions
327d595
@D8H
Add asset store links
cb0bcdc
@D8H
Add missing joystick name choices
d48a24d
@D8H D8H mentioned this pull request Feb 9, 2023
Merged
@D8H D8H mentioned this pull request Feb 18, 2023
Merged
@D8H D8H mentioned this pull request Mar 10, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@D8H D8H

Labels
🚧 Work In Progress This example is a work in progress
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@D8H @tristanbob @Bouh @4ian