[Solved] Is it possible to use a FOR loop to display tiles in screen language?

[Chekhov]

Let's say I wanted to create a chessboard inside the screen language, and for whatever reason, I wanted to display each tile separately rather than a pre-created background that shows a chessboard.

Code: Select all

screen Gameboard():
    fixed:
        xpos 300 ypos 400
        
        python:
        
            for y in xrange(8):
                for x in xrange(8):
                    fixed:
                        xysize(50,100)
                        fixed:
                            xoffset (x*100)
                            yoffset (50)
                            add "blacktile.png" xalign 0.0 yalign 0.0
                        fixed:
                            xoffset (50+x*100)
                            yoffset (50)
                            add "whitetile.png" xalign 0.0 yalign 0.0

Now the mistake is obvious: I'm using screen language inside python (fixed, xysize, etcetera). However, I'm failing to figure out a way to use some kind of for or while loop to create such a board.

I thought about predefining things in python and storing locations in an array or something, but that would still require me to run through that array with some kind of loop to use it in renpy screen language. Any ideas?

[hell_oh_world]

Let's say I wanted to create a chessboard inside the screen language, and for whatever reason, I wanted to display each tile separately rather than a pre-created background that shows a chessboard.

Code: Select all

screen Gameboard():
    fixed:
        xpos 300 ypos 400
        
        python:
        
            for y in xrange(8):
                for x in xrange(8):
                    fixed:
                        xysize(50,100)
                        fixed:
                            xoffset (x*100)
                            yoffset (50)
                            add "blacktile.png" xalign 0.0 yalign 0.0
                        fixed:
                            xoffset (50+x*100)
                            yoffset (50)
                            add "whitetile.png" xalign 0.0 yalign 0.0

Now the mistake is obvious: I'm using screen language inside python (fixed, xysize, etcetera). However, I'm failing to figure out a way to use some kind of for or while loop to create such a board.

I thought about predefining things in python and storing locations in an array or something, but that would still require me to run through that array with some kind of loop to use it in renpy screen language. Any ideas?

You can use grids for that https://www.renpy.org/doc/html/screens.html#grid

[Chekhov]

I can't use grids for it as I'm doing some other manipulation that precludes it (for example, it's more isometric rather than perfectly aligned squares).

I just gave a code example to show the mismatch of trying to use screen language inside a python block; it's a common problem I run into and I think I misunderstand something fundamental about the interplay between renpy and python.

[hell_oh_world]

I can't use grids for it as I'm doing some other manipulation that precludes it (for example, it's more isometric rather than perfectly aligned squares).

I just gave a code example to show the mismatch of trying to use screen language inside a python block; it's a common problem I run into and I think I misunderstand something fundamental about the interplay between renpy and python.

Well, then you can go with the traditional way of using windows or frames or other containers and loop those in the screen.

Code: Select all

screen sample_screen:
	for y in range(8):
                for x in range(8):
                    fixed:
                        xysize(50,100)
                        fixed:
                            xoffset (x*100)
                            yoffset (50)
                            add "blacktile.png" xalign 0.0 yalign 0.0
                        fixed:
                            xoffset (50+x*100)
                            yoffset (50)
                            add "whitetile.png" xalign 0.0 yalign 0.0

[Remix]

I would advise calculating both the x and y for each image individually and just have all of those as separate items in a single fixed.

A basic example that just does a checkerboard of 50x50 squares...

Code: Select all

screen Gameboard():

    fixed:
        xpos 200 ypos 100
        
        for y in xrange(8):

            for x in xrange(8):

                add Solid('#000' if (x+y) % 2 else '#FFF', xysize=(50,50)):
                    align (0, 0)
                    xoffset x * 50
                    yoffset y * 50

If you needed to stagger the odd rows you could adjust the xoffset maybe xoffset (x * 50) + (y % 2) * 25

If you really wanted pairs of images together you'd want to position child fixed widgets using the x and y values then just add the images to those using static positions relevant to those fixed widgets.

[Chekhov]

I would advise calculating both the x and y for each image individually and just have all of those as separate items in a single fixed.

A basic example that just does a checkerboard of 50x50 squares...

Code: Select all

screen Gameboard():

    fixed:
        xpos 200 ypos 100
        
        for y in xrange(8):

            for x in xrange(8):

                add Solid('#000' if (x+y) % 2 else '#FFF', xysize=(50,50)):
                    align (0, 0)
                    xoffset x * 50
                    yoffset y * 50

If you needed to stagger the odd rows you could adjust the xoffset maybe xoffset (x * 50) + (y % 2) * 25

If you really wanted pairs of images together you'd want to position child fixed widgets using the x and y values then just add the images to those using static positions relevant to those fixed widgets.

Yeah the pair idea was pretty stupid. What you made is rather elegant, thanks.

I can't use grids for it as I'm doing some other manipulation that precludes it (for example, it's more isometric rather than perfectly aligned squares).

I just gave a code example to show the mismatch of trying to use screen language inside a python block; it's a common problem I run into and I think I misunderstand something fundamental about the interplay between renpy and python.

Well, then you can go with the traditional way of using windows or frames or other containers and loop those in the screen.

Code: Select all

screen sample_screen:
	for y in range(8):
                for x in range(8):
                    fixed:
                        xysize(50,100)
                        fixed:
                            xoffset (x*100)
                            yoffset (50)
                            add "blacktile.png" xalign 0.0 yalign 0.0
                        fixed:
                            xoffset (50+x*100)
                            yoffset (50)
                            add "whitetile.png" xalign 0.0 yalign 0.0

Lmao, thank you so much. Why the hell didn't I just use a renpy loop? I'm laughing at my own mistake here.

Anyways, there were some mistakes in my code, so just on the off-chance anyone searches and finds this page, this is how to create a chessboard out of tiles. It can probably be improved. (I first missed the above post by remix, which is even better).

Code: Select all

screen Gameboard():
    $ whitetile = True #is the next tile a white one?
    for y in range(8):
        for x in range(8):
            fixed:
                xpos 300 ypos 400
                
                fixed:
                    xysize(50,50)
                    xoffset (x*50)
                    yoffset (y*50)
                    if whitetile == True:
                        add "white-tile.png" xalign 0.0 yalign 0.0
                        $ whitetile = False
                    else:
                        add "black-tile.png" xalign 0.0 yalign 0.0
                        $ whitetile = True

        #make sure that the next line starts with the opposite color
        if whitetile == True:
            $ whitetile = False
        else:
            $ whitetile = True

[Kia]

one thing to mention, you don't have to position each block, utilizing the hbox and vbox can do the job

Code: Select all

hbox:
    for i in range(8):
        vbox:
            for ii in range(8):
                fixed:
                    xysize 100,100

there are few standards you might want to consider, from what I have seen, many boards start from the bottom up and 1A is often black.