How to modify the style of the progress bar that comes with c3?

0 favourites
  • 10 posts
From the Asset Store
Progress\Loading Bar. Now Load you game like a Professional.
  • I want its background to be dark red and the value of the progress bar to be green

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • It's difficult to style form controls, and there are many other problems with them.

    Use TiledBackground object instead, it's very easy - just change its width.

    On every tick -> Bar Set width to 300*(Player.health/100)

    where 300 is the maximum width, and 100 is the maximum health.

    Here is another example:

    howtoconstructdemos.com/simple-healthbar

  • The built in progress bar is very 1 dimensional. To be able to change it's style, you need to have a pretty good grasp of web styling with css. It is easier to create your own progress bar using sprites. Check out this example.

    drive.google.com/file/d/1jKxObimMcmSBK_Wh8wfvlEMFanxho76q/view

    To set the width of the progress bar, you use the following equation:

    FullWidthOfBar * (CurrentValue / MaxValue)

    So if your progress bar is 300 pixels wide and it is tracking life where the max life is 50 and the current life is 40:

    300 * (40 / 50)

  • It's difficult to style form controls, and there are many other problems with them.

    Use TiledBackground object instead, it's very easy - just change its width.

    On every tick -> Bar Set width to 300*(Player.health/100)

    where 300 is the maximum width, and 100 is the maximum health.

    Here is another example:

    https://howtoconstructdemos.com/simple-healthbar/

    LOL, just beat me to it.

  • thanks i will try it

  • Another question, I use different elves, they are all in the same family. I want to place a health bar on their heads after they are created. I use the same resource for this health bar. How do i set up their relationship

  • If there was one elf sprite, the easiest solution would've been creating a container with the healthbar.

    With multiple sprites I suggest using the new scene graph feature.

    On Elves Created -> create a healthbar and add it as a child to the elf. When elves' health changes, pick child instance of the healthbar and update its width.

  • If there was one elf sprite, the easiest solution would've been creating a container with the healthbar.

    With multiple sprites I suggest using the new scene graph feature.

    On Elves Created -> create a healthbar and add it as a child to the elf. When elves' health changes, pick child instance of the healthbar and update its width.

    I know this, but my game is a turn-based plus strategy type, which is not very suitable for fighting games.

  • It doesn't matter.. Pin or add healthbar as a child to each character. You can use "Pick child" and update its width when needed.

  • If you put the health bar and elf into a container, a health bar will always spawn with an elf. Then, on creation, do what dop2000 is saying and pin or add the health bar as a child of the elf. I built an example that uses the container for a different forum question:

    drive.google.com/file/d/1vObtjdJppTivblySf-rn0Vx4bUH2fYTn/view

    Most of the example code is unnecessary but take a look at the hunger and thirst bars and how they are related to the Creature.

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