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

    Chicuelo Theme

    Scheduled Pinned Locked Moved Projects and Themes
    chicuelochicuelo themeemulationstaionthemethemes
    996 Posts 113 Posters 883.5k 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.
    • cellyC
      celly
      last edited by

      Looks fantastic! Can’t wait to give it a spin, thank you.

      Currently Playing: Tetris (Gameboy)

      1 Reply Last reply Reply Quote 0
      • E
        EctoOne @chicuelo
        last edited by

        @chicuelo I was wondering if you have separate images of the system art and the controllers/devices that you could share.
        I was bored and just finished rebuilding your theme and turned everything into it's own element. It's obviously not as detailed (no shadows and I have not added the arrows. I also replaced the system logo/description on detailed/video view with the games description.) but it is way easier to add systems now. By using variables I can just dump system art and controller images into specific folders and the console description is defined by the system/theme.xml files

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

          @ectoone said in Chicuelo Theme:

          @chicuelo I was wondering if you have separate images of the system art and the controllers/devices that you could share.
          I was bored and just finished rebuilding your theme and turned everything into it's own element. It's obviously not as detailed (no shadows and I have not added the arrows. I also replaced the system logo/description on detailed/video view with the games description.) but it is way easier to add systems now. By using variables I can just dump system art and controller images into specific folders and the console description is defined by the system/theme.xml files

          Yes I thought. At first I made the theme this way because it was the faster way, now with more time I will display the text from the xml and the images separated so it has only to load two backgrounds

          E 1 Reply Last reply Reply Quote 0
          • E
            EctoOne @chicuelo
            last edited by

            @chicuelo If you want I can give you my version and you can change whatever you desire.

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

              @ectoone said in Chicuelo Theme:

              @chicuelo If you want I can give you my version and you can change whatever you desire.

              It would be great, so the theme can be improved and be useful for all

              E 1 Reply Last reply Reply Quote 0
              • E
                EctoOne @chicuelo
                last edited by EctoOne

                @chicuelo Here ya go: https://github.com/EctoOne/Chicuelo/tree/separated

                It only contains dummy images, set as logo, system art and controller image. You need to add at least two more folders within _themefiles containing the system art and controller images. The images also must have the same names as the dummy files in the logo-example folder so that the variables can assign them to the correct system.
                You also need to change the folder names and maybe the file extension in the config.xml. And you need to replace the dummy files with appropriate system logos.

                The carousel.xml is used to theme systemview only, main.xml is used to theme the different system specific views (basic, detailed and video). Video is probably not correctly themed, because I don't use them.
                If you want to add a system description just copy any of the existing system folders, rename it to the new system and edit both text lines in the theme.xml.

                If you have any questions, just ask. I know that my code is kinda weird sometimes.

                1 Reply Last reply Reply Quote 0
                • ?
                  A Former User
                  last edited by

                  So I installed it on my Pi tonight.

                  It looks nice but the text in the carousel view is not crisp at all. A lot of artifacts around the text. It looks nice from a distance but up close it's very noticeable.

                  chicueloC 1 Reply Last reply Reply Quote 0
                  • chicueloC
                    chicuelo @A Former User
                    last edited by

                    @livefastcyyoung said in Chicuelo Theme:

                    ooks nice but the text in the carousel view is not crisp at all. A lot of artifacts around the text. It looks nice from a distance but up close it's very noticeable.

                    One of the near updates is make text editable and crisp. At first I needed the theme to be ready and on small screens it looked nice, at 1920 you can see this issues so thats my next step to improve

                    1 Reply Last reply Reply Quote 0
                    • Morph-XM
                      Morph-X
                      last edited by

                      Wow, this looks so elegant and clean. Massive props for the design, can't wait to try it!

                      1 Reply Last reply Reply Quote 1
                      • A
                        adu
                        last edited by

                        Does it support video preview instead of screenshots ?

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

                          @adu said in Chicuelo Theme:

                          Does it support video preview instead of screenshots ?

                          Yes it does, in theory. I did not tried but It should handle videos

                          G 1 Reply Last reply Reply Quote 1
                          • G
                            gleam2003 @chicuelo
                            last edited by

                            @chicuelo said in Chicuelo Theme:

                            @adu said in Chicuelo Theme:

                            Does it support video preview instead of screenshots ?

                            Yes it does, in theory. I did not tried but It should handle videos

                            Video isn't in correct place. They overlay the gamelist.
                            If you fix it is very nice themes, thank you for your work

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

                              @gleam2003 said in Chicuelo Theme:

                              @chicuelo said in Chicuelo Theme:

                              @adu said in Chicuelo Theme:

                              Does it support video preview instead of screenshots ?

                              Yes it does, in theory. I did not tried but It should handle videos

                              Video isn't in correct place. They overlay the gamelist.
                              If you fix it is very nice themes, thank you for your work

                              thanks for the advice! I will fix it asap

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

                                Is there anyone who can help me with the xml so I can use svg logos and crisp texts?
                                I was looking the structure but Im not good enough with the code

                                @EctoOne your modified version allows to do this?
                                Thanks!

                                E meleuM KeiganK 3 Replies Last reply Reply Quote 0
                                • E
                                  EctoOne @chicuelo
                                  last edited by

                                  @chicuelo it does, you can change the file extensions in the config.xml. If you have a folder with all the systemname.svg just put it in the _themefiles folder and change the name in the config.xml as well.
                                  There are three variables for each image folder plus file extension. But beware, because I use variables in my version, you're bound to use one file type for each image type. Eg: It is not possible to mix svg and png as logos.

                                  Regarding the crisp text, I don't quite understand the problem here. I thought the text was blurry before because you used images that got upscaled before. My version renders the plain text according to the used resolution, unless you use a blurry font, there shouldn't be any problems.

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

                                    @chicuelo Wow!

                                    I saw your work on behance and they are freaking awesome. It seems you are from Argentina. Is it possible to deliver to Brasil?

                                    • Useful topics
                                    • joystick-selection tool
                                    • rpie-art tool
                                    • achievements I made
                                    chicueloC 1 Reply Last reply Reply Quote 1
                                    • KeiganK
                                      Keigan @chicuelo
                                      last edited by

                                      @chicuelo said in Chicuelo Theme:

                                      Is there anyone who can help me with the xml so I can use svg logos and crisp texts?
                                      I was looking the structure but Im not good enough with the code

                                      For your logos and crisp text, I think the issue is your theme was created smaller than 1920 x 1080, so it's loSo if you create everything at 1080, it should be "crisp".

                                      But for splitting it down, here's what I have that may or may not help. I'm not using variables, I haven't looked enough into them yet, so my XML is pretty simple, but repetitive.

                                      I'll use SNES as the example

                                      In my main art folder I have the following images:

                                      systembg.png (background image for system selecting screen)
                                      Imgur

                                      gamebg.png (background image for game selection screen)
                                      Imgur

                                      So in my snes art folder I have the following images

                                      snes_logo.png (image used in the carousel, it's made with space to fit, cheating for now until I figure a better way)
                                      logo

                                      snes_smlogo.png (image used in the game selection screen at the bottom)
                                      Imgur

                                      snes_ind.png (image used for the indicator on the system select screen)
                                      Imgur

                                      snes_main.png (system select image for the system, added the drop shadow to this image)
                                      Imgur

                                      Now In my XML I have added text boxes for a few elements, including the 16 BIT CONSOLE, the description on both screens. This is how both final screens look. The description is still in the wrong spot in the SNES cause I'm hoping someone can help me with the vertical align, if not I'll cheat each system to lower it.

                                      Imgur

                                      Imgur

                                      So in the SNES XML files, I have the following:

                                      <theme>
                                      	<formatVersion>3</formatVersion>
                                      	<include>./../theme.xml</include>
                                      	<view name="system">
                                      		<image name="logo">
                                      			<path>./art/snes_logo.png</path>
                                       			<zIndex>3</zIndex>
                                      		</image>
                                      		<image name="indicator" extra="true">
                                      			<path>./art/snes_ind.png</path>
                                      			<size>0.0520833333333333 0.3981481481481481</size>
                                      			<pos>0 0.3009259259259259</pos>
                                      			<origin>0 0</origin>
                                      			<zIndex>3</zIndex>
                                      		</image>
                                      		<image name="systemimage" extra="true">
                                      			<path>./art/snes_main.png</path>
                                      			<size>0.5833333333333333 0.9074074074074074</size>
                                      			<pos>0.390625 0.0462962962962963</pos>
                                      			<origin>0 0</origin>
                                      			<zIndex>2</zIndex>
                                      		</image>
                                      		<text name="shortdescription" extra="true">
                                      			<text>16 BIT CONSOLE</text>
                                      			<fontPath>./../art/Roboto.ttf</fontPath>
                                       			<alignment>center</alignment>
                                       			<forceUppercase>1</forceUppercase>
                                      			<origin>0 0</origin>
                                      			<pos>0.1041666666666667 0.1851851851851852</pos>
                                      			<size>0.2604166666666667 0.1157407407407407</size>
                                      			<backgroundColor>FF00FF00</backgroundColor>
                                      			<color>A5A5A5FF</color>
                                      			<fontSize>0.025</fontSize>
                                      			<zIndex>3</zIndex>
                                        		</text>
                                      		<text name="longdescription" extra="true">
                                      			<text>Nintendo's second home console, introducing advanced graphics and sound capabilities compared with other systems at the time</text>
                                      			<fontPath>./../art/Roboto.ttf</fontPath>
                                      			<alignment>center</alignment>
                                      			<forceUppercase>0</forceUppercase>
                                      			<fontSize>0.03</fontSize>
                                       			<backgroundColor>FF00FF00</backgroundColor>
                                      			<color>A5A5A5FF</color>
                                      			<origin>0 0</origin>
                                      			<pos>0.1171875 0.3472222222222222</pos>
                                       			<size>0.234375 0.3055555555555556</size>
                                      			<fontSize>0.025</fontSize>
                                      			<lineSpacing>1.1</lineSpacing>
                                      			<zIndex>3</zIndex>
                                        		</text>
                                      	</view>
                                      	<view name="detailed">
                                      		<image name="md_image">
                                      			<origin>0 0</origin>
                                      			<pos>0.5020833333333333 0.1157407407407407</pos>
                                      			<size>0.4 0.6222222222222222</size>
                                      			<maxSize>1 1</maxSize>
                                      			<zIndex>3</zIndex>
                                      		</image>
                                      		<image name="logo">
                                      			<path>./art/snes_smlogo.png</path>
                                      			<pos>0.46875 0.7842592592592593</pos>
                                      			<size>0.2083333333333333 0.1462962962962963</size>
                                      			<maxSize>1 1</maxSize>
                                      			<origin>0 0</origin>
                                      		</image>
                                      		<text name="logdescription" extra="true">
                                      			<text>Nintendo's second home console, introducing advanced graphics and sound capabilities compared with other systems at the time</text>
                                      			<fontPath>./../art/Roboto.ttf</fontPath>
                                      			<alignment>left</alignment>
                                      			<forceUppercase>0</forceUppercase>
                                      			<fontSize>0.03</fontSize>
                                       			<backgroundColor>FF00FF00</backgroundColor>
                                      			<color>A5A5A5FF</color>
                                      			<origin>0 0</origin>
                                      			<pos>0.703125 0.8074074074074074</pos>
                                       			<size>0.2317708333333333 0.1</size>
                                      			<fontSize>0.025</fontSize>
                                      			<lineSpacing>1.1</lineSpacing>
                                      			<zIndex>3</zIndex>
                                        		</text>
                                      	</view>
                                      </theme>
                                      

                                      Not sure if this will help, but maybe.

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

                                        @ectoone said in Chicuelo Theme:

                                        @chicuelo it does, you can change the file extensions in the config.xml. If you have a folder with all the systemname.svg just put it in the _themefiles folder and change the name in the config.xml as well.
                                        There are three variables for each image folder plus file extension. But beware, because I use variables in my version, you're bound to use one file type for each image type. Eg: It is not possible to mix svg and png as logos.

                                        Regarding the crisp text, I don't quite understand the problem here. I thought the text was blurry before because you used images that got upscaled before. My version renders the plain text according to the used resolution, unless you use a blurry font, there shouldn't be any problems.

                                        Great! I will take a look. I give a sneak peak but no succeed. Im going to get a deeper look because I don't get the variables yet

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

                                          @keigan said in Chicuelo Theme:

                                          @chicuelo said in Chicuelo Theme:

                                          Is there anyone who can help me with the xml so I can use svg logos and crisp texts?
                                          I was looking the structure but Im not good enough with the code

                                          For your logos and crisp text, I think the issue is your theme was created smaller than 1920 x 1080, so it's loSo if you create everything at 1080, it should be "crisp".

                                          But for splitting it down, here's what I have that may or may not help. I'm not using variables, I haven't looked enough into them yet, so my XML is pretty simple, but repetitive.

                                          I'll use SNES as the example

                                          In my main art folder I have the following images:

                                          systembg.png (background image for system selecting screen)
                                          Imgur

                                          gamebg.png (background image for game selection screen)
                                          Imgur

                                          So in my snes art folder I have the following images

                                          snes_logo.png (image used in the carousel, it's made with space to fit, cheating for now until I figure a better way)
                                          logo

                                          snes_smlogo.png (image used in the game selection screen at the bottom)
                                          Imgur

                                          snes_ind.png (image used for the indicator on the system select screen)
                                          Imgur

                                          snes_main.png (system select image for the system, added the drop shadow to this image)
                                          Imgur

                                          Now In my XML I have added text boxes for a few elements, including the 16 BIT CONSOLE, the description on both screens. This is how both final screens look. The description is still in the wrong spot in the SNES cause I'm hoping someone can help me with the vertical align, if not I'll cheat each system to lower it.

                                          Imgur

                                          Imgur

                                          Not sure if this will help, but maybe.

                                          Yes! this is the way I was looking! To simplify the xml and using only the elements you need.
                                          I will take this and replace PNG logos with SVG files that are crisper.
                                          Thank you very much!

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

                                            @meleu said in Chicuelo Theme:

                                            @chicuelo Wow!

                                            I saw your work on behance and they are freaking awesome. It seems you are from Argentina. Is it possible to deliver to Brasil?

                                            Hi @meleu! Depending on wich product you are interested I could make a shipping. We have serious issues with the mail service here, Its hard to import and export

                                            M 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.