Skip to content

Object Oriented Programming Assignments#

Create a Progress Bar Widget#

Assignment: Progress Bar

This comes up in games and GUIs all the time: a simple progress bar or status bar. It could track your enemy's remaining health or how far along your download is. It's a fairly simple but very useful thing to build. Don't start out too complicated, this is all that's needed:

A very basic progress bar showing its status as a green bar on a gray background

1) Think about all the things it must be able to do

Hint: Things it might need.

Your class will need to store its position. It's also a good idea to give it its own width and height. And then we need some way to store how much we already completed. Five Attributes is all it needs to work as a very basic progress bar.

2) Create a Class with the appropriate attributes

Refer to Splitting Projects and Classes and Instances for this step.

3) Add methods to draw your progress bar

Hint: How to draw this

my example above really is just two rect() on top of each other. And you already have x, y, width, height for the "bottom" one. Now you just need to figure out what to do with the fifth attribute to draw the actual progress.

4) Create an instance and show it on screen

Again, much of this is detailed in Classes and Instances. This bar does not need anything fancy for now. No need to animate anything. No need to update it for now. Just set any value and draw it to the screen.

5) Create two more instances and also draw them.

This proves that you can do multiple independent instances! Yeah! Final Result with three progress bars

Store your result in Sketch_12_OOP_Progress_Bar in the assignments repository.

Bonus: Extend the Progress Bar!

There are a couple of ways to extend your progress bar. Maybe it has distinct steps or shows the number of steps next to it. Maybe it can track two things at once. Maybe it's not a linear bar. The following screenshots are meant as an inspiration, not as a checklist.

  • Example from Ring Fit Adventure (Switch)
    The Progress Bar from Ring Fit has a counter at the left side and tracks green and yellow segments

  • Random Example of a circular progress indicator
    Grey Circle with Red Progress Bar

  • HADES features a couple of very elaborate variations
    Health (top) and special power (bottom)
    Boss Opponent Health Bar
    Various enemies with health and shield bars
    These are animated, they indicate how much has been added or removed, sometimes they additionally show an enemy's shields. Look for playthough videos on a video platform of your choice.

  • Cyberpunk 2077 has a couple of stats that it always shows in the top right corner
    Health and Status Indicators in Cyberpunk 2077