Bars - Giving them a proper frame and text above it as well as other decoration

[TheOneWithoutAName]

Hi there. Seeing as I am struggling to get anything better than a normal bland bar working I thought I could ask here how to "decorate" it. I got something that I only would have to put on top of the bar, albeit putting some image on top of the bar is something that isn't working. So I wonder how I can put an image there, as well as some text above both left and right side of the bar to title the different directions the bar can wander towards. Another edition would be a simple two picture animation, as in one face and then swapping it with another in an intervall.

Here is the simple code I use for it at the moment. Like I said, it is working, but missing the visual adjustements I want to make.

Code: Select all

screen bars:
    bar:
        value sl
        range 100
        xysize (474, 75)
        left_bar "gui/bar/idle_bar.png"
        right_bar "gui/bar/bar_empty.png"
        xalign 0.075
        yalign 0.1

I hope some of you can lend me a hand in solving this. ^^

[Alex]

1. You can put your texts and bar in containers to layout them in a proper way, like

Code: Select all

vbox:
    hbox:
        text "Text 1"
        null width 50
        text "text 2"
    bar:
        #code for bar

or

Code: Select all

fixed:
    bar:
        # code for bar

    text "text over bar" align (0.5, 0.5)

https://www.renpy.org/doc/html/screens.html#fixed
https://www.renpy.org/doc/html/screens.html#hbox
https://www.renpy.org/doc/html/screens.html#vbox


2. Use ATL to make animations - https://renpy.org/doc/html/atl.html#
Try

Code: Select all

image my_image:
    "images/img_1.png"
    0.5
    "images/img_2.png"
    0.5
    repeat True # if you need to loop it

https://renpy.org/doc/html/atl.html#ima ... -atl-block

[TheOneWithoutAName]

Bars are looking better already. Took me a bit to implement the first parts with my bar image layer and the text, but I figured it out with your help in the end, so thanks! =D

Will try the ATL tomorrow. Still gotta prepare those small images properly for it, though I am confident I can get it right with this code you sent! =3

[TheOneWithoutAName]

2. Use ATL to make animations - https://renpy.org/doc/html/atl.html#
Try

Code: Select all

image my_image:
    "images/img_1.png"
    0.5
    "images/img_2.png"
    0.5
    repeat True # if you need to loop it

https://renpy.org/doc/html/atl.html#ima ... -atl-block

Alright. I tried to implement it, just to see if I can get it working.

I am using the exact same code like you showed me (image names replaced with the images I needed) and it doesn't work sadly.

"expected a keyword argument or child statement" is what it says before pointing towards the first image line. I did check if I named the image correctly repeatedly, but didn't find anything off. Tried around a few things as well. I am not really sure what I am overlooking. >.<

[Alex]

Hm, check if this image declaration is placed outside any init block, it shouldn't be indented. It should look like

Code: Select all

image my_image:
    "images/img_1.png"
    0.5
    "images/img_2.png"
    0.5
    repeat True # if you need to loop it

label start:
    show my_image
    "?!"

Or you could post the actual code you have and the error message (when you got it, there is an option to open it in text redactor, so you could easily copy/paste it).

[TheOneWithoutAName]

Things are working. Sorry for not writing it earlier. Asked on the Discord for help a few hours ago. Haven't managed to post that it was done here as I was away for a few hours immediately afterwards.

Anyway, thanks for the help. ^^