How to create a stroke (border) around an element in Renpy?

[Greslux]

For the past 2 months I've been trying to find an example of how to draw a stroke around elements. The only thing I found on the Internet is
Borders(10,10,10,10)
This does not work.

I asked in many places and no one answered me.
Now I asked in the discord, in response I heard the most stupid thing that could be thought of as a solution to the problem: Use a photo with a border of a different color.

If any of you studied CSS, then you know that it is done there as simply as possible:

border: solid 1px #000;

This creates a 1 pixel wide black solid border around the element. I hoped that in Renp there was an opportunity to create such strokes of different colors and different thicknesses. 2 months have passed and I still have not found out how this is done and is it possible at all?

This is needed to create a stroke around text buttons and frames, for decoration .

 

[anne O'nymous]

Borders(10,10,10,10)
This does not work.

And for reason:

You must be registered to see the links

, "This object provides border size and tiling information to a

You must be registered to see the links

()."

Now I asked in the discord, in response I heard the most stupid thing that could be thought of as a solution to the problem: Use a photo with a border of a different color.

Well, if you consider the only valid answer as being the "most stupid thing", no wonder you haven't found anything.

If any of you studied CSS, then you know that it is done there as simply as possible:

Have you tried repeat 4 [forward 50 right 90] ? It's how you draw a square in Logo, and it's not more stupid.

I really wonder what make you believe that Ren'Py Screen Language could possibly have something in common with CSS, have a behavior similar to CSS' one, or rely on CSS.
If there's something near to what Ren'Py Screen Language is, it would be (x)HTML ; including the positioning headaches. Yet, only because they are two describing languages used to build pages, and both rely on a box model. And

You must be registered to see the links

is explicit enough for one to understand that its styling language have nothing in common with CSS.


Side note: This answer contain all the information you need to achieve what you want.

 

[moose_puck]

For the past 2 months I've been trying to find an example of how to draw a stroke around elements. The only thing I found on the Internet is
Borders(10,10,10,10)
This does not work.

I asked in many places and no one answered me.
Now I asked in the discord, in response I heard the most stupid thing that could be thought of as a solution to the problem: Use a photo with a border of a different color.

If any of you studied CSS, then you know that it is done there as simply as possible:

border: solid 1px #000;

This creates a 1 pixel wide black solid border around the element. I hoped that in Renp there was an opportunity to create such strokes of different colors and different thicknesses. 2 months have passed and I still have not found out how this is done and is it possible at all?

This is needed to create a stroke around text buttons and frames, for decoration .

The frame borders above was pretty easy to find in Ren'py. I saw that a while ago.

I did have trouble getting text outlines to work. Ren'py docs are heavy on deatils, light on examples of how to implement them, lol.

I basically script-kiddied the text formatting I really like... here's an example of what I use for a character's thoughts.

define joe_thinking = Character( "{font=whatever_font.ttf}Joe{/font}", what_font="whatever_font.ttf", what_italic=True, what_alt="Thinks: ""[text]""", color="#000000", who_outlines=[(1, "#194d30")])

It does everything I want... you can use a different font for the name label and the dialogue text. It's italicized for the inner dialogue when a character is thinking. It adds the phrase "Thinks" for the voice function.. and it puts a nice subtle outline around my name labels. I tried doing that before, but couldn't nail down the syntax until I saw this example.

 

[anne O'nymous]

I did have trouble getting text outlines to work. Ren'py docs are heavy on deatils, light on examples of how to implement them, lol.

Oh, yeah, didn't thought that "element" can also refer to text. But since he talk about stroked lines, and use CSS border property as reference, I still guess that he expect borders around vbox, hbox and so on.

 

[Greslux]

Oh, yeah, didn't thought that "element" can also refer to text. But since he talk about stroked lines, and use CSS border property as reference, I still guess that he expect borders around vbox, hbox and so on.

Yes, it could be a border around vbox, hbox, frame, textbutton - doesn't matter. How to do it?

 

[anne O'nymous]

Yes, it could be a border around vbox, hbox, frame, textbutton - doesn't matter. How to do it?

As I said, my initial post fully answer your question. More precisely, everything you need is in its two first lines. And I mean really everything ; the elements you need to use, links to their documentation, and what to do with them.
Be noted that one of those two links also answer your question and provide a small example.

 

[Greslux]

And for reason:

You must be registered to see the links

, "This object provides border size and tiling information to a

You must be registered to see the links

()."




Well, if you consider the only valid answer as being the "most stupid thing", no wonder you haven't found anything.




Have you tried repeat 4 [forward 50 right 90] ? It's how you draw a square in Logo, and it's not more stupid.

I really wonder what make you believe that Ren'Py Screen Language could possibly have something in common with CSS, have a behavior similar to CSS' one, or rely on CSS.
If there's something near to what Ren'Py Screen Language is, it would be (x)HTML ; including the positioning headaches. Yet, only because they are two describing languages used to build pages, and both rely on a box model. And

You must be registered to see the links

is explicit enough for one to understand that its styling language have nothing in common with CSS.


Side note: This answer contain all the information you need to achieve what you want.

Okay, I'll explain to you why I think this answer is stupid so you don't think I'm arrogant.

Imagine that I have a lot of elements and each of them is of a different size. The size of each element is determined dynamically - due to the internal content. Dimensions are currently unknown. The elements are created through the "for" loop, the values for them are taken from the lists. These lists can change their content, change position relative to each other, that is, first you can have a "menu", then "statistics", and then you want to swap them.

There are also many buttons in which there are words. It can be a word of 3 letters or 2 words of 10 letters each.
Now let's think about translation. If the size changes dynamically, words in another language will have a different number of letters.

I have a list with characters. If you meet a character in the game, then he gets into the list of "open characters" and then you can see his characteristics.
The list is initially empty, then one new name, a second new name, and so on. The vertical dimensions of this window are determined dynamically.

These are buttons of different sizes, tooltips of different sizes, frames of different sizes. Everything is defined dynamically and should be defined dynamically.

Therefore, the advice that they gave me, I think is stupid.
If someone told me that Renp doesn't have the ability to set a stroke at all, I would understand everything, say "thank you" and close this topic (and did not create it here). But I was not given an answer whether this function is in Renp or not. I was just given this advice.
If this function is not there, then I don't care, I'll get around and forget about it.

It is stupid to create 30-100 different pictures with frames (transparent, translucent, opaque) with rigid parameters, different widths, heights, transparency and colors, and then scale them.
It will be a real confusion: for which element this or that picture, confusion in sizes, indents, and everything will collapse if something changes or if there is a translation into another language.

Do I think that advice is stupid? Absolutely.

Because CSS is quite an old language and there borders are very flexible and it works in the browser. I thought that Renp had these features because it's a game engine, and things should be much more serious here.
There are a lot of possibilities here, and in my opinion, creating a stroke around the elements should have been elementary. So I thought.

I gave CSS as an example so that there would be no terminological confusion, because the person who gave me advice with pictures could not understand what "border" was for a long time. Since I have nothing else to give an example of where I would create a stroke from personal experience, I cited CSS as an example, because everyone who studied it knows what a "border" is and will immediately understand me.


I still want to hear from you "yes" or "no" to the question
Is this possible in Renp?

Ren'py docs are heavy on deatils, light on examples of how to implement them, lol.

Yes this is true. There is a description of how this or that method works, but there are absolutely no examples of how it is applied in practice. If you saw once how the syntax is used, it would become clear. But there are no examples.

I'm making a menu with statistics, buttons, lines. Some buttons open additional windows. Much of this I would like to frame. I think you stopped at the example. Thanks

As I said, my initial post fully answer your question. More precisely, everything you need is in its two first lines. And I mean really everything ; the elements you need to use, links to their documentation, and what to do with them.
Be noted that one of those two links also answer your question and provide a small example.

I understand - this is not in Renp. It's a pity. Thank you for the answer.

 

[anne O'nymous]

Okay, I'll explain to you why I think this answer is stupid so you don't think I'm arrogant.

Oh, there were no need for all this wall of text. I know perfectly well why you think it's a stupid answer. It's because you didn't cared to follow the links I provided. Especially the second one:

Frame documentation:
"A displayable that resizes an image to fill the available area, while preserving the width and height of its borders. It is often used as the background of a window or button."

I understand - this is not in Renp.

You understood nothing, but well, it's your problem, not mine.

 

[Greslux]

Oh, there were no need for all this wall of text. I know perfectly well why you think it's a stupid answer. It's because you didn't cared to follow the links I provided. Especially the second one:

Frame documentation:
"A displayable that resizes an image to fill the available area, while preserving the width and height of its borders. It is often used as the background of a window or button."

You understood nothing, but well, it's your problem, not mine.

If I understood, I would not create a topic. The only reason why I and all other people create topics and ask questions is that they do not know or do not understand something. Do you want me to be ashamed of something that I did not understand? No, I won't be ashamed. I think everyone has gone through a misunderstanding. Yes, I didn't get it. So I asked those who understand to help me. Am I somehow to blame? Can't I ask for help here? Don't I have the right to not understand something?

Do you want to talk about why I don't understand, about my childhood, about my traumas, about my nerves, about my memory and cognitive abilities and about many other factors that prevent me from understanding some things like other people? I doubt.
It's hard for me to understand some things at my age. I can't help it. It's hard for me to read documentation in a language I don't know. If you read it in your native language - well, I'm happy for you. But not all people on the planet know English. And Google translator distorts the meaning when translating. If it was in my language, maybe I would understand it.

What you sent me I read more than once, but I did not understand. Nobody knows everything. You know Renp, but you don't know what I or anyone else knows. If you ask me about what I understand, I will try to help you, and not throw off a link to the documentation of the topic you need. People come here for help, not to be thrown off a link to the documentation that everyone can already find on Google.

 

[anne O'nymous]

If I understood, I would not create a topic.

I was referring to what me, the documentation, and also, accordingly to yourself, someone on the discord, said.

You're so focused on your, "hey, in CSS it suffice to define a property", that you clearly refuse to acknowledge all answer that aren't as simple as this. What lead you to believe, wrongly, that it's totally impossible unless you define an image for each single case.
This while I even quoted the part of the documentation explaining how it works with Ren'Py.

In the end, you go on an second useless rant in the same thread, on the same day. You started the first one saying that you'll explain yourself so I'll not find you arrogant, well, you failed twice.

Do you want to talk about why I don't understand, [...]

*sight* Even when you try to defend yourself you fail a third time.
Yeah, life is difficult. Tell this to my youngest, who lost her mother when she was only 9yo, and now have past more than half her life mourning her. By the way, I'm not a native speaker, and you write pretty good for someone supposed to struggle so much with English.

What you sent me I read more than once, but I did not understand. Nobody knows everything.

Even for someone who have bad English skills, and lack of knowledge regarding codding, this isn't this difficult to understand: "A displayable that resizes an image to fill the available area, while preserving the width and height of its borders."
The only technical part is the two first words. Everything else is purely generic and could be applied to a tons of topic, with the exact same meaning. The level of English skills you show in your rants is enough to understand it ; and no, there's no way they were done with the help of Google translate or Deepl.


Put one and one together, and you've the answer:

As said to you on discord, you use a generic image.
As said to you by me, you use the Frame displayable for this.
As said by the documentation, you define the borders, possibly with Borders that you mentioned yourself, in order to keep them unchanged.
As shown by the documentation, you do it that way Frame( "name of the image", border width, border height ).

It's how you put borders to a window or a button, as said by the documentation.


After, you can also create your own displayable. Relying on PyGame to draw the said border, and on Text to include what you want to display. But this is effectively too technical, so I haven't said it.

 

[YuriiH]

For the past 2 months I've been trying to find an example of how to draw a stroke around elements.

For something simple, draw two elements--one bigger, one scaled down.

frame:
    padding(0,0,0,0)
    background Solid("#005500")
    minimum(400, 400)
    maximum(400, 400)
    frame:
        background Solid("#550000")
        pos(10,10) #border width
        minimum(400-20, 400-20) #canvas size minus twice the border width (10 * 2 = 20)
        maximum(380, 380)