Circular Bar for Ren'Py

Overview

Add circular bars to Ren'Py for unique loading bars, stat screens, progress indicators, volume controls, and more!

Some use case ideas:

• Circular health bar around a character portrait
• Volume or other preference bars themed after dials or knobs
• Nested bars for a stat spread
• Clock-themed timed choice countdown
• Loading bar
• Anywhere else you'd use a bar

Features

• Fully integrated with the Ren'Py bar system:
  • Supports controller & keyboard selection and adjustment (use up + down to increase/decrease the value after selecting the bar)
  • Works with text-to-speech features
  • Use prefixes like hover_ or insensitive_ to customize the bar and thumb images
  • Accepts all bar values (including animated values, volume controls, anything), or a static range and value for non-interactive bars
  • Takes common bar properties like changed, hovered, released - it's just another bar shape with all the features you need.
• Set any percentage of a circle to use, and start the bar angle wherever you like
• Supports clockwise and counter-clockwise fill
• Set an offset to position the center of the thumb away from the center of the bar, or use thumb_rotate True to have it rotate along with the bar.
• Use start_thumb with thumb to cap off the start and end of bars
• Use focus_mask to customize the clickable bar area
• Click anywhere on the bar to set it to that value, or click and drag for finer adjustments. Clicking and dragging does not require you to keep your mouse within the bar area and will drag the bar value until you let go.
• Special "overshoot" property to provide a buffer between 0% and 100% for fully circular bars

A sample declaration looks like:

circular_bar:
     value ScreenVariableValue('percentage_value', 100)
     fore_bar "empty_bar"
     aft_bar "full_bar" hover_aft_bar "full_bar_hover"
     focus_mask True xysize (649, 649)
     thumb "bar_thumb" hover_thumb "hover_bar_thumb"
     thumb_offset 200
     circumference 360 start_angle -90

The properties are all explained within the included files, which also includes 8 example bar declarations.

Instructions

Download circular_bar.zip and unzip it to get 01_circular_bar.rpy, circular_bar_examples.rpy, and an images folder. Drop both rpy files into your game folder and add the images to the images/ folder. An example screen with several circular bars can be seen by opening the screen circular_bar_screen e.g. with a button on the main menu like:

textbutton "Circular Bar Examples" action ShowMenu("circular_bar_screen")

Compatibility

This tool requires Ren'Py 7.4+ and config.gl2 to be True. It has been tested for compatibility with Ren'Py 7.5-7.6 and 8.0-8.2. If you have any issues, please make a post in the forums below.

Terms of Use

You may:

• Use this code in commercial and noncommercial projects, provided you package the code into an rpa file for release - the code to do so is included in the files.
• Modify and edit this code to suit your needs.

You may not:

• Resell all or part of this code as-is or sell it with modifications.
• Release any projects created using this code without providing attribution.

Attribution must be credited as Feniks, with a link to either the page with this code or to https://feniksdev.com.

Final Notes

Next week is a tutorial week! I'll make a general update post on itch.io here when it's available, and you'll be able to find it on feniksdev.com.

If you'd like to make pretty gradients for your circular bars, you should check out my gradient shaders, available for free:

And if you're interested in bars, you might also like my multi-thumb bar: