Ren'Py Proper formatting in a screen

[noping123]

Having trouble figuring out formatting of what I'm trying to do. I could mess around with exact positioning until it's *just right*, but I'm trying to do it a little more elegantly, and running into issues.

Here's the basic layout (ignore all the images/text, it's placeholder just to make coding it easier - actually its just renders from my last game I'm using for now - which is another reason I don't want to use exact positioning, if I get it right now, I'll just have to redo a lot of it if I change things later on like the font, or certain images or whatever)

View attachment 2636575

The idea is it's just a shop layout - the numbers are the cost to purchase, you click the cart button to purchase. Right now I have everything set up in a grid, each element of the grid is a frame.

Grid 4 1:
frame:
stuffhere

I have 6 grids set up on that page: 2 for the image sets, (I could probably consilidate that down to 1, but I've been doing this one piece at a time so atm it's 2), and then 2 for the text, and 2 for the cart icons.

The main problem I'm having is the pricing - I want to place it centered under the image. I got everything where I wanted it, except... Once you purchase the item, the cart icon changes, and the number changes to say "SOLD!". This shifts everything around, so nothing is aligned anymore. I'm trying to figure out the best way to align everything so that it always stays perfectly aligned, regardless of the text. At first I tried removing the grid and just using hboxes for everything, but it didn't help at all with placement - every time the text changed, everything still shifted. (Image after purchasing one - with no other changes just to demonstrate the shift)

View attachment 2636577

It's obvious to me this is because of the change in the number of characters in the text - what's not obvious is how to get everything perfectly aligned, without manually entering positions, even when the number of characters change. So far various forms of hboxes, and xaligns, and even some limited manual positioning hasn't helped - though it's possible im setting it up wrong.

EDIT: nvm I figured it out

 

[osanaiko]

EDIT: nvm I figured it out

Could you briefly share the solution for future reference of other developers who stumble across this thread? (I guess it would be Style related...)

 

[anne O'nymous]

Could you briefly share the solution for future reference of other developers who stumble across this thread? (I guess it would be Style related...)

Hmm, a better solution would be to not use a grid, since the element size is global.


I would picture more something like:

/!\ It's to show the logic, I don't guaranty the effective accuracy of the code /!\

screen myCart():

    # 4x4 presentation.
    grid 4 4:
        # For each cells of the grid.
        for idx in range( 0, 16 ):
            # If there's an item for this cell
            if itemList[idx]:
                # Include the screen featuring the item.
                # Pass it the item to display.
                use cartItem( itemList[idx] )
            # No more items
            else:
                # Grid should have all their element, so use an empty one.
                null


screen cartItem( item ):

    hbox:
        vbox:
            # Display the image for this item
            add item.image
            # Below display the price or "sold"
            if not item.sold:
                text item.price
            else:
                text "Sold !"
        vbox:
            # Describe the item, and whatever else you want.
            text item.description

Using an external embedded screen is not mandatory, but it generally offer you more freedom regarding the way you'll present everything.
Not that it isn't possible to have the exact same design directly in the grid, but the added level of indentation, and the feeling that you are constraint by the grid itself, generally make it more difficult to think in terms of independent element.

 

[noping123]

Could you briefly share the solution for future reference of other developers who stumble across this thread? (I guess it would be Style related...)

Look at what anne said above, and you'll have a good idea of how to go about it.

The reason I used grid vs anything else, is simply uniformity and auto population - you can do exactly what was done above, and create loops to fill everything - making it somewhat modular. The downside is #1 grids NEED to be filled. If you create a 4x4 grid, and only have 13 elements, it errors out - it HAS to have 16. (Hence his null line above)

My problem was simply sizing, which is problem #2 - grids auto-size to the largest element. This can create alignment issues if some elements are bigger or smaller than others. The easy out here is simply dictating the size - which is what I did. By directly coding in the size of the "largest element", i just then made sure to directly align every element within the grid, so it all lined up regardless of what was inside of it.

So basically the entire issue was incredibly simplistic and I was just overlooking it. I had some larger elements, that whenever they changed, were throwing off the alignment of everything, but as soon as I simply dictated the size to be the size of the largest element possible at all times, it became trivial.

the TL;DR here is there isn't much "to learn" or reference - the solution was beyond basic and simple

 

[osanaiko]

noping123 Thank you.

 

[Meushi]

The downside is #1 grids NEED to be filled. If you create a 4x4 grid, and only have 13 elements, it errors out - it HAS to have 16. (Hence his null line above)

Unless you upgrade to

You must be registered to see the links

apparently, as the changelog says:

Ren'Py no longer requires grids or vpgrids to be full - it will now pad these grids with nulls as required.

 

[anne O'nymous]

Unless you upgrade to

You must be registered to see the links

apparently, as the changelog says:

It was already possible, but not natively at this time, since 7.5/8.0:
"Having an underfull vpgrid now raises an error unless the warning is opted-out using either the allow_underfull property or config.allow_underfull_grids, the former taking precedence on the latter."

The doc talk about vpgrid, but for at least one version in those two branches it also applied to grid.

 

[Meushi]

It was already possible, but not natively at this time, since 7.5/8.0

Yes, I think the change in 7.6/8.1 is it's now

You must be registered to see the links

for grids & vgrids to accept being underfull.