Text Screens with flexible Speechbubble background?

[PrincessOstrich]

Hi everyone. I'm very new to Renpy and I've started a project where I want to do a Visual Novel/Interactive Comic, so I probably will have to learn how much Renpy is customizable visually in that direction. I've started to program a scene with a background and panels over it and some slightly animated things in the panels (extremely simply done), which went well, but now I've hit my first roadblock. I'm very very bad at coding so please forgive my clumsy attempts do describe my problem.

I tried to do a Screen that is a speechbubble, which you could probably adjust with borders and scaling/tiling (according to the tutorial) and then put text in that. I'm assuming that I need to define that in the screens.rpy file first and it tried that by creating a new screen based on the say screen, but then the program got confused and just replaced all dialogue boxes with my speech bubble picture. Apparently I would need to define it as some different kind of screen from scratch, but I've got no idea what kind of screen or how. HELP.

If someone has any idea how to do something like that, if that's even possible, I would be very grateful. It doesn't have to be very efficiently/elegantly done, at the moment I'm planning to do only a bit of the story in Renpy, as a sort of prototype. If not I'm probably just gonna prepare the finished bubbles in photoshop and then paste them in. But at this point I'm simply curious if it's possible.

[Remix]

If you are Not looking to use such features as extend, multi-character dialogue and the like (basically, just each dialogue line is shown in a thought bubble or speech bubble), here are a few pointers: (note: Most of these are Ren'Py 7.1 and above or so...)

1) Characters can accept a screen parameter, which dictates which screen to use to show their dialogue:

define e = Character("Eileen", screen="speech_bubble")

Then, when we write
e "Hello World"
it will default to using screen speech_bubble rather than screen say

2) Alternate to above, we can pass a screen name in to each line by adding the parameter after the dialogue:

e "Hello World" (screen="thought_bubble")

3) We can pass arbitrary parameters to our custom screen by using parameters prefixed with show_

e "Hello World" (screen="thought_bubble", show_pos = ( 150, 150 ), show_width = 325 )


So, that (very basically) outlines how we pass variable parameters in, now a rough example (fly typed, untested) of what a screen might look like:

Code: Select all

screen speech_bubble(who, what, **kwargs): ### Note the **kwargs bit, allowing us to accept arbitrary parameters

    window:

        id "window" ### <--- this id allows some other parameters to work
        
        background Frame("images/my_speech_bubble_picture.png")
        xmaximum kwargs.get( "width", (250,250) ) ### Though we use show_width in the dialogue, here in the screen the show_ bit is stripped

        ### Yes, you Will need to play around a Lot with the styles to get it looking right... 
        xfill False
        align (0,0)

        pos kwargs.get( "pos", (250,250) ) ### kwargs . get basically says use the passed value if it exists, else use the default

        if who is not None: #### dunno if you'd need a namebox bit

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

Should give you a few ideas to think about... Most of it is going to be learning about styling and getting the text part(s) to sit nicely in the speech/thought bubble backgrounds...

[Matalla]

I'm doing just that and asked for help about it some weeks ago. I did it with style preferences and callbacks.

Here you can see some ideas viewtopic.php?f=8&t=54687

[PrincessOstrich]

Thanks a lot! That should point me in the right direction and be quite sufficient for my needs. (If I get it properly coded, but that's my problem ) Have a nice day everyone!

[PrincessOstrich]

Okay I tried this and I got... somewhere, at least after I changed xfill to true, moved it around a bit and adjusted the size of the speech bubble. This is how it looks now. But if the text gets longer, it gets out of the box, and I have no idea how to adjust the text to be in the middle of the bubble. I thought about styling it with borders and/or padding, but I don't know where to put it.

This is the code of the "game" I have already

and this is the code of the screens Remix posted and which I slightly changed.

whenever I try styles, I seem to write them in the wrong place/manner, I have just gotten errors till now. Any ideas?

[Saa]

Not sure if this works:

Code: Select all

window:
    id "namebox"
    style "namebox"
    xysize(550, 160)
    text_align 0.5
    text who id "who"

Alternatively:

Code: Select all

text who id "who" xpos 0.5

[PrincessOstrich]

but wouldn't that apply to the little box above the textbox though that's for displaying character names? I'll try it though.

Edit --> No that gets me an Error because text_align isn't valid for the window statement... and the xpos thing doesn't do anything.

Isn't there a way where you could control that the bubble has borders/padding that the text stays inside of? Or did I misunderstand from the tutorial?

[Matalla]

The problem is, the positioning of the text in the default style is adequate for the standard textbox. If you change the size of the textbox, you'll have also to modify a number of other properties of the text (position, maximum width, etc.), not only the ones you change in the textbox. I'd suggest you take a look at the thread I posted, maybe that method is better suited to what you want, as it allows to change a wide array of style properties.

[Saa]

Sorry, I meant to put it in the text what! xpos should have worked to center the text. Borders and padding can also work. You can put it like:

Code: Select all

align (0,0)
xpadding 367

But I'm not sure because I can't really test it. Can you paste your code here, instead of a screenshot? This way I can actually test things before saying them.

[PrincessOstrich]

@Matalla I actually looked at the thread but it seemed a bit overwhelming so I tried this first. But you're right I should probably try that too...

Okay Saa I tried that and I got an interesting result. No idea what I'm doing.

also, here's the code for the speech bubble I have in my screens.rpy file right now, as well as the part of the code in the script. Sorry for not posting that earlier, I'm kinda new at this.

Code: Select all

screen speech_bubble(who, what, **kwargs): ### Note the **kwargs bit, allowing us to accept arbitrary parameters

    window:

        id "window" ### <--- this id allows some other parameters to work

        background Frame("images/sb_10_30.png")
        xmaximum kwargs.get( "width", (1000,400) )### Though we use show_width in the dialogue, here in the screen the show_ bit is stripped

        ### Yes, you Will need to play around a Lot with the styles to get it looking right...
        xfill True

        pos kwargs.get( "pos", (250,250) ) ### kwargs . get basically says use the passed value if it exists, else use the default

        if who is not None: #### dunno if you'd need a namebox bit

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"
        xpadding 367
        align (0,0)

Code: Select all

pause
    "Does this trick work? No, still to long?" (screen="speech_bubble", show_pos= (300, 650), show_width= 800)

[Remix]

A more usable version, with a host of comments to indicate what each style part does...

Code: Select all

screen speech_bubble(who, what, **kwargs):

    frame:

        # set the pos as show_pos if passed else this default
        pos kwargs.get( "pos", (250,250) )

        # our background picture
        background Frame(
            # the image
            "images/speech_round_rect.lower_left.small.png", 
            # frame borders
            # see: https://www.renpy.org/doc/html/displayables.html#Frame
            # the values set left, top, right, base cut sizes
            left = Borders(25, 25, 28, 71)
            )

        # specify just the width as default or as show_width if passed
        #
        # could add bits like yminimum if wanted
        #
        # could change this to xmaximum if that suits better
        xsize kwargs.get( "width", 320 )

        # though the frame will adjust to the content, we add these to 
        # make sure the image expands properly to contain the text nicely
        left_padding 18
        top_padding 12
        right_padding 18
        bottom_padding 62 # the tail on my bubble needed a high value here

        text what:

            id "what" # we need this for cps and such stuff

            xsize None # needed - otherwise it uses a gui setting

            align (0,0) # also likely needed

            # just standard font specific stuff

            color "#000"

            font "gui/fonts/some_funky_cartoony_type_font.ttf"
            
            kerning -1.0

            size 32

[PrincessOstrich]

@Matalla, I tried to put in the bits of code you suggested there, and it gave me this:

Here the text placement is already much better. So this basically gives you a box for the left, and you could define one for the right, too? But the bubble size and placement are fixed in the screens file? Or would it be possible to quickly customize them in the script? Cause I like the possibility to have different bubbles for different directions&placement, but I don't know yet how I would style/place them properly.

@Remix, wow cool, I'm gonna try that!

[PrincessOstrich]

I put Remix's code in the screens file and then wrote this into the script, but it didn't show up.

Code: Select all

screen speech_bubble():
        frame:
            text "Does this work?"

I tried to modify it by adding a position and stuff but nothing showed up. What am I doing wrong? Excuse me if I'm being very stupid. I think I did something like this before and it worked there?

[XxrenxX]

I put Remix's code in the screens file and then wrote this into the script, but it didn't show up.

Code: Select all

screen speech_bubble():
        frame:
            text "Does this work?"

I tried to modify it by adding a position and stuff but nothing showed up. What am I doing wrong? Excuse me if I'm being very stupid. I think I did something like this before and it worked there?

you can use it in-script as such. I'm doing this to jump between my various boxs

Code: Select all

"Text goes here"(screen="speech_bubble")

[Remix]

I put Remix's code in the screens file and then wrote this into the script, but it didn't show up.

Code: Select all

screen speech_bubble():
        frame:
            text "Does this work?"

I tried to modify it by adding a position and stuff but nothing showed up. What am I doing wrong? Excuse me if I'm being very stupid. I think I did something like this before and it worked there?

As XxrenxX says, the code I posted is basically just to show a bespoke say screen that has an expanding frame and can be passed variables. It should be called/accessed just by either adding the screen to the Character or by adding parameters to the dialogue.

Basically, re-read my first post, then interpret that with the second post as the actual screen.

Do NOT define screens more than once... I find it best to just write them in script.rpy until they work properly and only then move them to screens.rpy

Initially, the only bits you'd really need to change are the Frame image and the font... after that, adjust all the style parts to suit.