RetroPie forum home
    • Recent
    • Tags
    • Popular
    • Home
    • Docs
    • Register
    • Login

    Grid tile background size

    Scheduled Pinned Locked Moved Ideas and Development
    gridview
    47 Posts 8 Posters 5.8k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A12C4A
      A12C4
      last edited by A12C4

      Another day, another topic of discussion about the grid view ;)

      Short reminder of grid theming syntax and visual explanation

      Theming syntax

      Note : I removed the fields that are not necessary for this explanation.

      <view name="grid">
      	<imagegrid name="gamegrid">
      		<size>
      		<margin>
      	</imagegrid>
      
      	<gridtile name="default">
      		<maxSize>
      		<padding>
      		<backgroundColor>
      	</gridtile>
      
      	<gridtile name="selected">
      		<maxSize>
      		<padding>
      		<backgroundColor>
      	</gridtile>
      </view>
      

      Visual example

      0_1523369090606_grid size visual representation.png

      • The image is fit into the image max size, without breaking aspect ratio.
      • The background size is what I want to talk about today.

      Problem and possible solution

      Problem

      The problem is the following :

      • If we stretch the background size to the tile max size, this can leave huge extra padding on top/bottom or left/right depending on the image aspect ratio.
      • If we stretch the background size to the image + the padding, the margin between tiles may look inconsistent.

      Solution

      My proposed solution is to add an extra theming element, called stretchBackgroundToContent, its value could be either true or false (false by default).

      Then, the theme maker would have 2 solution which look visually appealing in my opinion (examples below) :

      • Have a light background color and fit the background to the image
      • Have a dark background color (or low alpha) and fit the background to the tile

      Examples

      Dark background + fit background to the tile = good result
      0_1523370083154_Capture d’écran de 2018-04-10 15-19-33.png

      Dark background + fit background to the image = ok result
      0_1523370141476_Capture d’écran de 2018-04-10 15-21-11.png

      Light background + fit background to the tile = bad result
      0_1523371129326_Capture d’écran de 2018-04-10 16-37-48.png

      Light background + fit background to the image = good result
      0_1523371109544_Capture d’écran de 2018-04-10 16-38-07.png

      What do you think fellow theme makers ? I summon your great wisdom @jdrassa @lilbud @chicuelo @EctoOne

      Grid view wiki

      chicueloC 1 Reply Last reply Reply Quote 1
      • chicueloC
        chicuelo @A12C4
        last edited by

        @a12c4
        I would aim at the second option, the dark background fitting the tile with some alpha.
        If you have different aspect ratio images it will look strange to the eye and there will be eye catching blank spaces.

        I am wondering if its possible to force the image to scale proportionally to the background, masking and not showing whats out of the boundaries. And when you select that tile, it shows the image in the right size and aspect ratio (respecting the tile size). In case of portrait images it will be nicely displayed when they are unselected. The only issue is you will not see the complete art, only an area.
        If not possible I will choose the second option

        A12C4A 1 Reply Last reply Reply Quote 0
        • A12C4A
          A12C4 @chicuelo
          last edited by

          @chicuelo I'm not sure to understand. You mean all the unselected tiles have the same size, but their image is cut (either top/bot or left/right depending of the image aspect ratio) so the other side fit the tile ? And the selected image only, is displayed at his good aspect ratio ratio, and we adapt the background to it ?

          Technically it's possible, but I would have to add some extra code to the core, as their is no way to display an image like that at the moment (smaller side fit the size and extra is cut).

          Do you think it will give good results ? My concern is for box arts like the ones used by the megadrive, which have something like a 2/3 aspect ratio. This mean 1/3 of the image will be cut (1/6 on top and 1/6 on bottom) if the tile is a square, even more if the tile have a bigger width than height.

          Grid view wiki

          1 Reply Last reply Reply Quote 0
          • A12C4A
            A12C4
            last edited by A12C4

            Basically, this ?

            0_1523379359024_1523370085310-capture-d-écran-de-2018-04-10-15-19-33-resized.png

            (Sorry too lazy to also edit the 2nd and 3rd row on photoshop ahahahah)

            Grid view wiki

            chicueloC 1 Reply Last reply Reply Quote 0
            • chicueloC
              chicuelo @A12C4
              last edited by

              @a12c4
              I mean something like this, it's more uniform but the cropped images don't let you get the game at first.
              Looking at how you solved the selected image, I think its a good option. Maybe a little smaller.
              I will also reduce a bit the frame border

              0_1523381321110_1523370085310-capture-d-écran-de-2018-04-10-15-19-33.jpg

              A12C4A 1 Reply Last reply Reply Quote 0
              • A12C4A
                A12C4 @chicuelo
                last edited by

                @chicuelo I actually love the result, even if it's a bit harder the first times to identify the images, the user should quickly memorize it if his game collection isn't too huge.

                Maybe I misunderstood you on the selected game. My thinking was the following :

                • For the unselected games, we resize the smallest side to the size of the tile, and use the same ratio for the biggest side, and cut it.
                • So, naturally, the reasoning for the selected game is the same, but we don't cut it, and adapt the background to its new size.

                The biggest problem with this is when the selected game is in the first/last row/column. It can easily go offscreen or on top/under other elements.

                Grid view wiki

                chicueloC 1 Reply Last reply Reply Quote 0
                • darkniorD
                  darknior
                  last edited by

                  @a12c4 said in Grid tile background size:

                  Dark background + fit background to the tile = good result

                  It's the best for me.
                  If we can choose how many covers by line and the max size it's perfect. like taht they have all the same size it's more beautiful.
                  And for my part i lost many time on Photoshop to make all my covers to have the same sise in the same system, it is the best solution to have something perfect.

                  Life is game, just play it !

                  chicueloC 1 Reply Last reply Reply Quote 0
                  • chicueloC
                    chicuelo @A12C4
                    last edited by

                    @a12c4
                    I like the idea of adapting the frame to the art. For the bottom row I don't know if its possible to make: once the last row is showed, put the top row below of it so you never have to scroll to the bottom of the screen and you always have the selected game o the center of the screen. For the A- starting games, you could do the same. It could work

                    A12C4A 1 Reply Last reply Reply Quote 0
                    • chicueloC
                      chicuelo @darknior
                      last edited by

                      @darknior said in Grid tile background size:

                      And for my part i lost many time on Photoshop to make all my covers to have the same sise in the same system, it is the best solution to have something perfect.

                      You can scrape all the images and then with an action in Photoshop make all the same size. Go to Actions, RECORD a new one and do the following: Resize the image to the size you want, save for web and close. STOP RECORDING. Play this action every time you open an image and in a fraction of time you will have all the images with the same size and proportions

                      lilbudL 1 Reply Last reply Reply Quote 0
                      • lilbudL
                        lilbud @chicuelo
                        last edited by

                        @chicuelo said in Grid tile background size:

                        Go to Actions, RECORD a new one and do the following: Resize the image to the size you want, save for web and close. STOP RECORDING. Play this action every time you open an image and in a fraction of time you will have all the images with the same size and proportions

                        If you go to File > Automate > Batch. You can select a folder, the software will open each file, perform the action, and save it. Takes only few minutes if that.

                        Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                        Backlog: http://backloggery.com/lilbud

                        A12C4A chicueloC 2 Replies Last reply Reply Quote 1
                        • A12C4A
                          A12C4 @chicuelo
                          last edited by

                          @chicuelo Yes that's what I thought but the same problem happen when you select a game in the first column or in the last column, if we keep the selected game in the center of the screen in that situation it will look strange because it will feel like the grid is scrolling both vertically and horizontally.

                          Grid view wiki

                          1 Reply Last reply Reply Quote 0
                          • A12C4A
                            A12C4 @lilbud
                            last edited by

                            @lilbud I wonder if we can work with TheGamesDB or similar database or even creating our own, with one major difference : proposing different collections of images for all the games, like one collection with the base box arts, one collection with 3d box arts, one collection of screenshots ...

                            Maybe I'm seeing too big, it's possible. Maybe similar stuff already exist.

                            Grid view wiki

                            lilbudL 1 Reply Last reply Reply Quote 0
                            • lilbudL
                              lilbud @A12C4
                              last edited by

                              @a12c4 said in Grid tile background size:

                              Maybe I'm seeing too big

                              Yes, Yes you are.

                              There are already databases of these games out there, stuff like screenscraper and emumovies has what you are asking for. The Launchbox DB has really good art but it is slow to access unless you have Launchbox.

                              Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                              Backlog: http://backloggery.com/lilbud

                              A12C4A 1 Reply Last reply Reply Quote 1
                              • A12C4A
                                A12C4 @lilbud
                                last edited by

                                @lilbud Nothing is big enough for my sweet little grid view ;)

                                Ok let's stop this is going a bit offtopic.

                                What do you think about what I proposed in my first message and what chicuelo proposed ?

                                Grid view wiki

                                lilbudL 1 Reply Last reply Reply Quote 0
                                • lilbudL
                                  lilbud @A12C4
                                  last edited by

                                  @a12c4 I like both ideas. I feel that it should be up to the theme maker to decide what they like.

                                  It'll probably be a few months until I can get back to theming, got a lot of work for school and (unfortunately) that comes first.

                                  Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                                  Backlog: http://backloggery.com/lilbud

                                  A12C4A 1 Reply Last reply Reply Quote 0
                                  • A12C4A
                                    A12C4
                                    last edited by A12C4

                                    @chicuelo

                                    0_1523396036104_Capture d’écran de 2018-04-10 23-31-50.png

                                    0_1523396082344_Capture d’écran de 2018-04-10 23-32-00.png

                                    0_1523396625336_Capture d’écran de 2018-04-10 23-42-45.png

                                    0_1523396634532_Capture d’écran de 2018-04-10 23-42-55.png
                                    .
                                    .
                                    Damn it look so clean. But the big problem is this :

                                    0_1523396122236_Capture d’écran de 2018-04-10 23-32-04.png

                                    EDIT : I need to add extra more code so the selected tile position change dynamically if it's close to a border of the grid (first/last row/column), brb I need to check if it render properly.

                                    Grid view wiki

                                    chicueloC lilbudL 2 Replies Last reply Reply Quote 1
                                    • A12C4A
                                      A12C4 @lilbud
                                      last edited by

                                      @lilbud If it was only up to me I would allow theme makers to do whatever they want. But the thing is, giving more options to theme makers create more complex code.

                                      So, we have to judicious eliminate bad options (those which have no or nearly no use case, those which add way too much complex code for too little benefits, etc ...)

                                      At least that's how I see it, maybe @jdrassa have a different opinion.

                                      Grid view wiki

                                      1 Reply Last reply Reply Quote 0
                                      • chicueloC
                                        chicuelo @A12C4
                                        last edited by

                                        @a12c4
                                        I like the way its going, we could find a solution when the top and bottom rows are reached.
                                        maybe restricting the selection row only for the middle one, and when you scroll up the snaps go down and the same when going down. In that case you will avoid the overlapping of the selected game and the top/bottom of the screen.
                                        I love the aspect ratio of the third image, it will take more advantage on square and portrait images making the crop smaller

                                        A12C4A 1 Reply Last reply Reply Quote 0
                                        • chicueloC
                                          chicuelo @lilbud
                                          last edited by

                                          @lilbud
                                          You are right! I think it will be a lot of instructions for him. That's what I did with my entire library

                                          1 Reply Last reply Reply Quote 0
                                          • A12C4A
                                            A12C4 @chicuelo
                                            last edited by

                                            @chicuelo As I said previously, it's ok for bottom and top row, we can center the selected row without problem.

                                            But, we have the same problem with left and right column, and I can't use the same solution because that mean the grid would scroll both vertically and horizontally, which look really strange.

                                            Another solution would be to change the position of the tile, so when the selected tile is in the left column for example, we make sure only the top/right/bottom side grow and the left side don't move, so we don't get out of the grid.

                                            That's what I'm currently trying to do, but it's way harder than I expected, if we combine that with giving the theme the 3 possibilities I proposed earlier (fit the image inside the tile, fit the image inside the tile + stretch the background to the image, resize the image to the tile + cut the extra part), then I fear the code will be completely unreadable.

                                            Grid view wiki

                                            chicueloC 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Contributions to the project are always appreciated, so if you would like to support us with a donation you can do so here.

                                            Hosting provided by Mythic-Beasts. See the Hosting Information page for more information.