Circle status bars?

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
EvenirXaneis
Newbie
Posts: 5
Joined: Tue Jan 31, 2017 10:57 pm
Tumblr: evenirart
itch: EvenirXaneis
Contact:

Circle status bars?

#1 Post by EvenirXaneis » Wed Feb 01, 2017 12:05 am

Okay, so this might be more complicated than necessary, but I'd love to be able to make circular status bars. Something like this image, with circles inside circles, or even better would be a central full circle with partial circles/curves around it. I'd love to be able to do something on the complex side like that mainly because the work I'm doing will have at 3 different variables to keep up, and would like to make it look simplistic to avoid being intimidating to players, but still be visually appealing. Looking at the coding that the Ren'Py site gave for working status bars, it seems to operate on basically X/Y movement. Would there be a way to tell it to operate using angles instead?

Thanks for the help!

~Evenir X.

P.S. Don't worry if it's not possible, I have some other ideas in mind but this is the most desirable option.

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: Circle status bars?

#2 Post by xela » Wed Feb 01, 2017 3:28 am

EvenirXaneis wrote: P.S. Don't worry if it's not possible, I have some other ideas in mind but this is the most desirable option.
I've implemented half a circle bar using code and one image couple of years ago for kind of a "rainbow" bar effect. There is no way that I can think of to trick Ren'Py's bar to act as a circle, the simplest implementation of a circle bar that I've seen was simply 100 images for 100 states and a displayable that showed a correct state based of variable.

You should be able make a circle bar without 100 images but that will require a bit of skill and knowhow.
Like what we're doing? Support us at:
Image

User avatar
nyaatrap
Crawling Chaos
Posts: 1824
Joined: Mon Feb 13, 2012 5:37 am
Location: Kimashi Tower, Japan
Contact:

Re: Circle status bars?

#3 Post by nyaatrap » Wed Feb 01, 2017 7:58 am

Since AlphaBlend can take rotated transform displayable, there could be a way to make a simple circle bar image (rotate a square mask to hide a circle). Though you can't use screen's bar properties on it. It'd need more difficult work to implement it in screens.

User avatar
EvenirXaneis
Newbie
Posts: 5
Joined: Tue Jan 31, 2017 10:57 pm
Tumblr: evenirart
itch: EvenirXaneis
Contact:

Re: Circle status bars?

#4 Post by EvenirXaneis » Wed Feb 01, 2017 12:05 pm

xela wrote:the simplest implementation of a circle bar that I've seen was simply 100 images for 100 states and a displayable that showed a correct state based of variable.
I did think of that and was hoping to avoid it if possible. I also just recently had a thought to make basically the illusion of a half-circle bar, which would use the vertical bar code to decrease the value, but it would appear to be a curved bar. It's not exactly what I want, but it's a possibility.

neowired
Regular
Posts: 199
Joined: Mon Dec 01, 2008 2:33 pm
Contact:

Re: Circle status bars?

#5 Post by neowired » Wed Feb 01, 2017 12:33 pm

EvenirXaneis wrote:
xela wrote:the simplest implementation of a circle bar that I've seen was simply 100 images for 100 states and a displayable that showed a correct state based of variable.
I did think of that and was hoping to avoid it if possible. I also just recently had a thought to make basically the illusion of a half-circle bar, which would use the vertical bar code to decrease the value, but it would appear to be a curved bar. It's not exactly what I want, but it's a possibility.

It is likely the easiest way. I can think of a couple different ways how this could be done without one image per frame, but all of them would require a lot of fiddling and more complicated code, and they probably wouldn't work anyway.

But here's a version of the simple solution that I made just for you. Need to do something for someone once in a while. Also made you some circles... but only 8.

I'll attach two versions, a simple one with one "bar" and a slightly more complex one with 3 bars like in your example. It uses only one color of a circle and instead used hue manipulation to change the color.
And also, here's how the code looks like:

For the simpler version:

Code: Select all

init python:

   # I used a color matrix to adjust hue and brightness
   def cBarTest(st,at):
       return LiveComposite(
           (0,0),
           (-100,-100), im.MatrixColor("test/c0.png", im.matrix.brightness(0.5)*im.matrix.hue(cbt['hue'])),
           (-100,-100), im.MatrixColor("test/c%d.png"%cbt['value'], im.matrix.brightness(0.0)*im.matrix.hue(cbt['hue'])),
           (-100,-100), im.MatrixColor("test/cInside.png", im.matrix.brightness(0.0)),
           (-100,-100), im.MatrixColor("test/cOutside.png", im.matrix.brightness(0.0)),
           ),10
		   
init:   
    # has to be declared as a dynamic displayable
    image cBarTestA = DynamicDisplayable(cBarTest)

    # I used a dictionary, but you can use any type of variable. For this to wrk the variable has to be initialized before the game starts, you can also use a "default" statement to do the same
    $ cbt = {'value1':2, 'hue1':90}
	
# A simple screen to show of the bar, it uses slider bars with the dictionary values
screen circleBar:
    vbox xalign 0.5 yalign 0.5:
        vbox xalign 0.5 yalign 0.5:
            add "cBarTestA"
        vbox xalign 0.5 yalign 1.0:
            bar value DictValue(cbt,'value', 8) xmaximum 200
            bar value DictValue(cbt,'hue', 255) xmaximum 200
[/code]

For the more complicated version:

Code: Select all

init python:
    
   def cBarTest(st,at):
       return LiveComposite(
           (0,0),
           (-100,-100), im.MatrixColor("cb/c0.png", im.matrix.brightness(0.5)*im.matrix.hue(cbt['hue1'])),
           (-100,-100), im.MatrixColor("cb/c%d.png"%cbt['value1'], im.matrix.brightness(0.0)*im.matrix.hue(cbt['hue1'])),
           (-100,-100), im.MatrixColor("cb/cInside.png", im.matrix.brightness(0.0)),
           (-100,-100), im.MatrixColor("cb/cOutside.png", im.matrix.brightness(0.0)),
           
           (-75,-75), im.Scale(im.MatrixColor("cb/c0.png", im.matrix.brightness(0.5)*im.matrix.hue(cbt['hue2'])),150,150),
           (-75,-75), im.Scale(im.MatrixColor("cb/c%d.png"%cbt['value2'], im.matrix.brightness(0.0)*im.matrix.hue(cbt['hue2'])),150,150),
           (-75,-75), im.Scale(im.MatrixColor("cb/cInside.png", im.matrix.brightness(0.0)),150,150),
           (-75,-75), im.Scale(im.MatrixColor("cb/cOutside.png", im.matrix.brightness(0.0)),150,150),
           
           (-50,-50), im.Scale(im.MatrixColor("cb/c0.png", im.matrix.brightness(0.5)*im.matrix.hue(cbt['hue3'])),100,100),
           (-50,-50), im.Scale(im.MatrixColor("cb/c%d.png"%cbt['value3'], im.matrix.brightness(0.0)*im.matrix.hue(cbt['hue3'])),100,100),
           (-50,-50), im.Scale(im.MatrixColor("cb/cInside.png", im.matrix.brightness(0.0)),100,100),
           (-50,-50), im.Scale(im.MatrixColor("cb/cOutside.png", im.matrix.brightness(0.0)),100,100),
           
           ),10
       
init:   
    image cBarTestA = DynamicDisplayable(cBarTest)
    $ cbt = {'value1':2, 'hue1':90, 'value2':3, 'hue2':270, 'value3':5, 'hue3':120}

screen circleBar:
    vbox xalign 0.5 yalign 0.5 yminimum 300:
        vbox xalign 0.5 yalign 0.5:
            add "cBarTestA"
        hbox xalign 0.5 yalign 1.0:
          vbox:
            text "bar 1 (value)"
            bar value DictValue(cbt,'value1', 8) xmaximum 200
            text "bar 1 (color)"
            bar value DictValue(cbt,'hue1', 255) xmaximum 200
          vbox xminimum 10
          vbox:
            text "bar 2 (value)"
            bar value DictValue(cbt,'value2', 8) xmaximum 200
            text "bar 2 (color)"
            bar value DictValue(cbt,'hue2', 255) xmaximum 200
          vbox xminimum 10
          vbox:
            text "bar 3 (value)"
            bar value DictValue(cbt,'value3', 8) xmaximum 200
            text "bar 3 (color)"
            bar value DictValue(cbt,'hue3', 255) xmaximum 200
It may not be exactly what you were looking for, but maybe It'll be of some use? If not to you then to somebody else.
Attachments
screenshot0001.png
circleBarExpanded.zip
(887.75 KiB) Downloaded 51 times
circleBarSimple.zip
(859.85 KiB) Downloaded 48 times
Last edited by neowired on Wed Feb 01, 2017 1:20 pm, edited 1 time in total.

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: Circle status bars?

#6 Post by xela » Wed Feb 01, 2017 1:04 pm

Nice one. Bit of a pretty overlay on top and we're flying, well done :)
Like what we're doing? Support us at:
Image

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: Circle status bars?

#7 Post by xela » Wed Feb 01, 2017 1:19 pm

Found old post where we messed with the "rainbow" bar: viewtopic.php?f=8&t=27159&p=328931&hili ... ar#p328841

Thing is, in all likelihood, it should be possible to do two of these setups, write a simple function(s) that do basic math and start filling the second ("flipped") bar after we get to half of the max value. I like doing things with code but this just might be one of those cases where proper art is the solution, as in neowired's setup.
Like what we're doing? Support us at:
Image

neowired
Regular
Posts: 199
Joined: Mon Dec 01, 2008 2:33 pm
Contact:

Re: Circle status bars?

#8 Post by neowired » Wed Feb 01, 2017 1:31 pm

xela wrote:Found old post where we messed with the "rainbow" bar: viewtopic.php?f=8&t=27159&p=328931&hili ... ar#p328841

Thing is, in all likelihood, it should be possible to do two of these setups, write a simple function(s) that do basic math and start filling the second ("flipped") bar after we get to half of the max value. I like doing things with code but this just might be one of those cases where proper art is the solution, as in neowired's setup.
xela wrote:Nice one. Bit of a pretty overlay on top and we're flying, well done :)

Thanks xell,

I was thinking about how this could be done, and one way to do a bar like this could be to have two half circles,
If a dynamic displayable allows for the layers to be rotated properly on their axis, i don't remember if that is an option. But, I will try to explain the general concept of how this could work.

The half-circles would need to be duplicated inside the displayable a couple of times for this to work.

We would have 4 layers:
1. the base layer with the bright color (completely filled bar base)
2. two half-circle layers with a darker color for when the bar is hidden (empty bar), one on the left and one on the right.
3. a fourth layer which is on the right side of the bar, which switches between two images, an empty one (not an empty bar, and empty image, with nothing) and one with a filled/bright bar

first have the dark half-circle rotate to the left, clockwise when the first half of the bar "fills up"
once half of the bar is filled up, we set the bright(filled) top-layer half-bar on the right side which was initially invisible to visible
then we proceed to rotate both of the dark/(off bars) back to the right, clockwise but they slide under the newly visible bright(filled) half-bar on the right, making them vanish which creates and illusion of a fully filled bar.

And so it would be hypothetically possible to make a bar with only half circles like that.

If we can't rotate inside a dynamicdisplayable then it would still be doable if we put multiple displayables on top of each other, but I think it would be a very clunky solution.

The same could be done without a dynamic displayable and instead with a couple of layers and some transforms

But it would be a super fiddly method. It would probably also need some kind of class with methods to properly manage the process of changing the attributes.


A different way could be to generate the thing with some kind of creator defined displayable but that's a bit too complicated for me and I'm not sure if it would work either.

It's just that all these methods would be way more complicated than a simple method with image frames, like you also mentioned. And it could be difficult to make everything rotate correctly. Adjusting it in real time could also pose some difficulty.
Attachments
explanation2342.png
Last edited by neowired on Wed Feb 01, 2017 2:17 pm, edited 1 time in total.

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: Circle status bars?

#9 Post by xela » Wed Feb 01, 2017 2:16 pm

xela wrote:but this just might be one of those cases where proper art is the solution, as in neowired's setup.
Images with a simple interpolation function between current value, max value and the appropriate segment images are most likely to be the best solution.


==========>>>
Another possible code solutions might be:

There is also a pie chart implementation we looked into: viewtopic.php?f=8&t=28448&p=341078&hili ... ar#p341069

Throw in a proper image to cover the edges and it may pass, even with some artifacts where the segments meet. There is also a chance that these segments can be drawn better somehow.

Nyaatrap suggested AlphaBlend option but I can't see how exactly that would work, AlphaBlend is something we're using quite a bit in our projects and it can take transformed displayable but where to go from there is unclear to me. You'd still need circle segments for control...
Like what we're doing? Support us at:
Image

User avatar
EvenirXaneis
Newbie
Posts: 5
Joined: Tue Jan 31, 2017 10:57 pm
Tumblr: evenirart
itch: EvenirXaneis
Contact:

Re: Circle status bars?

#10 Post by EvenirXaneis » Wed Feb 01, 2017 5:26 pm

Thanks a bunch guys! I'll get to trying out a few of these and let you know what I use. I'll probably fiddle with that code first and see how it works in the program, then try out the overlapping, rotating image idea. After that I'll try out the Pie Chart method, just layering images to achieve the right affect, though I'd like to avoid image artifacting.

I'll let you know what works best for me then!

User avatar
nyaatrap
Crawling Chaos
Posts: 1824
Joined: Mon Feb 13, 2012 5:37 am
Location: Kimashi Tower, Japan
Contact:

Re: Circle status bars?

#11 Post by nyaatrap » Wed Feb 01, 2017 11:03 pm

Clipboard-1.png
Clipboard-1.png (12.26 KiB) Viewed 1492 times
Come to think of it, it's same thing which is used - AlphaBlend or Composited images. Anyway, AlphaBlend is the first code I got in my mind, so here is what I've done.

Code: Select all

screen show_circle():
    
    default angle = 90
    
    vbox align .5, .5:
        fixed fit_first True:
            add "gui/circle_bg.png"
            if angle <=180:
                add AlphaBlend(Transform("gui/circle_mask.png", align = (.5, .5), rotate=angle), "gui/circle_half.png", Solid("#0000"), alpha=True)
            else:
                add AlphaBlend(Transform("gui/circle_mask.png", align = (.5, .5), rotate=angle), "gui/circle_full.png", Solid("#0000"), alpha=True)
                add "gui/circle_half.png"
                
        bar value ScreenVariableValue("angle", 360) xsize 100
circle_bg.png
circle_bg.png (12.53 KiB) Viewed 1492 times
circle_full.png
circle_full.png (11.34 KiB) Viewed 1492 times
circle_half.png
circle_half.png (6.55 KiB) Viewed 1492 times
circle_mask.png
circle_mask.png (374 Bytes) Viewed 1492 times
(oops, I wrongly added dropshadow on them -_- ...)

User avatar
EvenirXaneis
Newbie
Posts: 5
Joined: Tue Jan 31, 2017 10:57 pm
Tumblr: evenirart
itch: EvenirXaneis
Contact:

Re: Circle status bars?

#12 Post by EvenirXaneis » Thu Feb 02, 2017 1:55 am

Hm, okay that's really cool. Thanks for that!

Another thought to complicate everything as well, the story has a planned upgrade system as well, so hopefully whichever code I use will be able to accept a change to max value and still interpret the data fall or rise without freaking out. I don't foresee it being a big problem, but it may pose a challenge to some more specific codes.

Ah, I'm sorry if this seems all overly complicated. The project I'm working on is kind of an odd brain child that's a mix of different various ideas I had between a straight book, an interactive fiction, and a 3D game.

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: Circle status bars?

#13 Post by xela » Thu Feb 02, 2017 3:19 am

nyaatrap wrote:...
This is a really awesome solution as well!
EvenirXaneis wrote:Another thought to complicate everything as well, the story has a planned upgrade system as well, so hopefully whichever code I use will be able to accept a change to max value and still interpret the data fall or rise without freaking out. I don't foresee it being a big problem, but it may pose a challenge to some more specific codes..
Can't imagine this being a problem, no matter which variant you pick.
Like what we're doing? Support us at:
Image

User avatar
EvenirXaneis
Newbie
Posts: 5
Joined: Tue Jan 31, 2017 10:57 pm
Tumblr: evenirart
itch: EvenirXaneis
Contact:

Re: Circle status bars?

#14 Post by EvenirXaneis » Thu Feb 02, 2017 1:33 pm

Hey neowired, so I'm trying to test out your circle bar (expanded version). When I downloaded the zip file to check out the images you used, the zip file was super wonky and it only let's me access one of the circle images (the outside circle). I don't necessarily think its anything wrong with the zip, it very well could be my computer, but could you give me a quick summary about what each image is so I can replicate them?

Thanks a bunch!

Post Reply

Who is online

Users browsing this forum: Google [Bot]