coding question/ vn feature

javikaston

Well-Known Member
Game Developer
Oct 25, 2019
1,359
1,784
1628427175697.png




I want to be able to make data sheets like this in my renpy game but no idea where to start or what the coding would be.

I am once again asking help from this great community thank you for any help you can render.
 

MissFortune

I Was Once, Possibly, Maybe, Perhaps… A Harem King
Respected User
Game Developer
Aug 17, 2019
5,380
8,655
That was 100% percent done in Photoshop/GIMP/Any decent photo editor. Outside of that render, obviously.

They likely took a PNG of leaves from somewhere on the internet (likely stolen/uncredited), put it on a white background with a smallish/cropped render on top of that and a typed out the rest inside of whatever editor he/she used. In short, the only code likely involved here (don't know where it's from, so I've never seen/played it.) is "scene imagename with dissolve", or something along those lines.
 

javikaston

Well-Known Member
Game Developer
Oct 25, 2019
1,359
1,784
i want to be able to add a section in my main menu where I can display data on my characters. or possibly do it by the cell phone.
 

anne O'nymous

I'm not grumpy, I'm just coded that way.
Modder
Donor
Respected User
Jun 10, 2017
10,979
16,236
That was 100% percent done in Photoshop/GIMP/Any decent photo editor.
And what make you say this ?

I mean, something like:

Code:
screen bio( char ):

    add "images/background/leaf.png"

    hbox:
        add ( "images/bio/{}.png".format( char.name ) )
        null width 30
        vbox:
            for ( field, attr ) in [( "name", "name" , ( "nickname(s)", "nick" ), [...] ]:
                hbox:
                    text ( "{b}" + field + ":{b}" )
                    null width 5
                    text ( "{}".format( getattr( char, attr ) ) )

    imagebutton:
        xalign 0.9
        yalign 0.4
        idle "gui/back.png"
        action Return()

label whatever:
    call screen bio( thisChar )
Would give the result shown by his screenshot.
 

javikaston

Well-Known Member
Game Developer
Oct 25, 2019
1,359
1,784
And what make you say this ?

I mean, something like:

Code:
screen bio( char ):

    add "images/background/leaf.png"

    hbox:
        add ( "images/bio/{}.png".format( char.name ) )
        null width 30
        vbox:
            for ( field, attr ) in [( "name", "name" , ( "nickname(s)", "nick" ), [...] ]:
                hbox:
                    text ( "{b}" + field + ":{b}" )
                    null width 5
                    text ( "{}".format( getattr( char, attr ) ) )

    imagebutton:
        xalign 0.9
        yalign 0.4
        idle "gui/back.png"
        action Return()

label whatever:
    call screen bio( thisChar )
Would give the result shown by his screenshot.
thats seem right but then again ive never done anything like it but I've seen plenty of games doing it and i wanted to add something to it as well with that being said do you think you could break down the explanation more?

Eitherway thank you for the help
 

79flavors

Well-Known Member
Respected User
Jun 14, 2018
1,611
2,258
[...] with that being said do you think you could break down the explanation more?

is probably more complex and less well explained than the main RenPy language. But you pretty much need to know most of it before you can consider drawing/writing your own custom screens.

But talking through this one example...

screen bio( char ):

Create a screen called "bio" using a local variable "char" which is passed to it. char will be an as yet unspecified class created by the developer.​

add "images/background/leaf.png"

Add an image to the screen. This image would usually be a fullscreen background image (720p or 1080p).​

hbox:

Add a series of horizontal boxes. Each box will be sized according to their content (though you can use styles to improve this).​

add ( "images/bio/{}.png".format( char.name ) )

In the first horizontal box, add a picture from a /images/bio/ folder. The filename will be derived from the variable/class char passed to the screen with .png added.

null width 30

In the second horizontal box, add a blank gap of 30 pixels wide. (may not work as intended).

vbox:

In the third horizontal box, add a series of vertical boxes. Each box will be sized according to their content.


Now things start to get more "programming" oriented...

Within the vertical boxes...​
for ( field, attr ) in [( "Name", "name" ), ( "Nickname(s)", "nick" ), [...] ]:
Loop through a double list of strings. The first element will be known as a local variable field. The second element will be known as attr.​
First time through the loop, field = "Name", attr = "name"​
Second time through the loop, field = "Nickname(s)", attr = "nick"​
The [...] is there to signify that more of these double pairs should be added for things like "Role", "Age", etc.​
hbox:
Each time through the loop, add a new series of horizontal boxes within each vertical box (within the overall hbox).​
text ( "{b}" + field + ":{b}" )
The first hbox cell will add the value of field as a text box. The value will be shown in bold.​
(So think "Name", "Nickname(s)", "Role", "Age", etc.)​
null width 5
The second hbox cell will add a small blank area, 5 pixels wide. (may not work as intended).
text ( "{}".format( getattr( char, attr ) ) )
The third hbox cell will use the function getattr() to go get the values from our, as yet, unspecified class. Using a combination of the char parameter passed to the screen and the attr local variable that is part of this loop. This all presumes that the class that contains all the information includes fields called "name, "nick", "role", "age", etc.​
imagebutton:
Finally, the fourth hbox cell will add an imagebutton used to exit the screen using the action Return().​
I'm not going to go into a lot of detail all the imagebutton parameters. If you can't follow them, you probably shouldn't be writing custom screens.


Meanwhile... somewhere else within your script... you'll need a couple of lines to actually invoke the custom screen.

label whatever:

Just to let you know this is script code. It could be anywhere within your code.​


call screen bio( thisChar )

Invoke the screen "bio", pass it a class object which holds the details of a single character to be displayed.​


Now... the bit you are missing is the class that holds all this information and is known as char within the screen.

That would look a bit like this...

You don't have permission to view the spoiler content. Log in or register now.


Keep in mind, this code is written the way it is to avoid writing a screen: for each and every character you have in game.

I've used lines like default ju_bio = ... because I am assuming that some of this info might change as the game progresses (mainly the "fullbio" data, though I guess someone could have a birthday too). If this information is fixed and will never change while the game is being played... you would use define ju_bio = ... instead.

Fair warning... hbox and vbox cells are notoriously awful to size in way that makes sense to you - because they auto-size according to their contents, but the contents can often not be sized. If there's an easy way... I haven't figured it out yet.
 
Last edited: