Circle status bars?
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.
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.
- EvenirXaneis
- Newbie
- Posts: 5
- Joined: Tue Jan 31, 2017 10:57 pm
- Tumblr: evenirart
- itch: EvenirXaneis
- Contact:
Circle status bars?
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.
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.
Re: Circle status bars?
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.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.
You should be able make a circle bar without 100 images but that will require a bit of skill and knowhow.
- nyaatrap
- Crawling Chaos
- Posts: 1824
- Joined: Mon Feb 13, 2012 5:37 am
- Location: Kimashi Tower, Japan
- Contact:
Re: Circle status bars?
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.
- EvenirXaneis
- Newbie
- Posts: 5
- Joined: Tue Jan 31, 2017 10:57 pm
- Tumblr: evenirart
- itch: EvenirXaneis
- Contact:
Re: Circle status bars?
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.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.
Re: Circle status bars?
EvenirXaneis wrote: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.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.
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
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
- Attachments
-
- circleBarExpanded.zip
- (887.75 KiB) Downloaded 165 times
-
- circleBarSimple.zip
- (859.85 KiB) Downloaded 143 times
Last edited by neowired on Wed Feb 01, 2017 1:20 pm, edited 1 time in total.
Re: Circle status bars?
Nice one. Bit of a pretty overlay on top and we're flying, well done
Re: Circle status bars?
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.
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.
Re: Circle status bars?
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.
Last edited by neowired on Wed Feb 01, 2017 2:17 pm, edited 1 time in total.
Re: Circle status bars?
Images with a simple interpolation function between current value, max value and the appropriate segment images are most likely to be the best solution.xela wrote:but this just might be one of those cases where proper art is the solution, as in neowired's setup.
==========>>>
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...
- EvenirXaneis
- Newbie
- Posts: 5
- Joined: Tue Jan 31, 2017 10:57 pm
- Tumblr: evenirart
- itch: EvenirXaneis
- Contact:
Re: Circle status bars?
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!
I'll let you know what works best for me then!
- nyaatrap
- Crawling Chaos
- Posts: 1824
- Joined: Mon Feb 13, 2012 5:37 am
- Location: Kimashi Tower, Japan
- Contact:
Re: Circle status bars?
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
- EvenirXaneis
- Newbie
- Posts: 5
- Joined: Tue Jan 31, 2017 10:57 pm
- Tumblr: evenirart
- itch: EvenirXaneis
- Contact:
Re: Circle status bars?
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.
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.
Re: Circle status bars?
This is a really awesome solution as well!nyaatrap wrote:...
Can't imagine this being a problem, no matter which variant you pick.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..
- EvenirXaneis
- Newbie
- Posts: 5
- Joined: Tue Jan 31, 2017 10:57 pm
- Tumblr: evenirart
- itch: EvenirXaneis
- Contact:
Re: Circle status bars?
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!
Thanks a bunch!
Who is online
Users browsing this forum: No registered users