Chicuelo Theme

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.

A Former User

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.

chicuelo

@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

Morph-X

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

adu

Does it support video preview instead of screenshots ?

chicuelo

@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

gleam2003

@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

chicuelo

@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

chicuelo

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!

EctoOne

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

meleu

@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?

Keigan

@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

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.

chicuelo

@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

chicuelo

@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)

gamebg.png (background image for game selection screen)

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)

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

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

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

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.

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!

chicuelo

@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

chicuelo

@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)

gamebg.png (background image for game selection screen)

Not sure if this will help, but maybe.

I have a fewer questios!
Actually I have a long xml in the main folder, and a vert short one in every system.
The xml you provide is very extensive, and it includes the main directory one.
How does it affect the behavior of the theme? are there any conflicts between <tags> ?

Instead of 2 same logos, could you use the same one in the main menu and in the game section?

I think I will remain the dots and the whole background in one image, because you need in every theme the same clean background instead using one for all. That makes more images to load having to place over the game bg, character and controller.

Thank you again!

EctoOne

@chicuelo said in Chicuelo Theme:

I have a fewer questios!
Actually I have a long xml in the main folder, and a vert short one in every system.
The xml you provide is very extensive, and it includes the main directory one.
How does it affect the behavior of the theme? are there any conflicts between <tags> ?

Instead of 2 same logos, could you use the same one in the main menu and in the game section?

I think I will remain the dots and the whole background in one image, because you need in every theme the same clean background instead using one for all. That makes more images to load having to place over the game bg, character and controller.

Thank you again!

Tags are handled line by line from top to bottom, and since every system/theme.xml includes the main xml at the top, the tags in the system/theme.xml are processed last.
That's why you can put everything in the main xml that should be globaly set. Like positions, sizes, font type etc.
In my version I use that to position and format the short and long description of the systems and the only thing that is defined by the system/theme.xml is the actual text. With that method it is very easy to change layouts without editing multiple files.

And you sure can use the same logo/image for different views without the need for multiple versions of the file.
My version uses only a white 2 by 2 pixel image to create the background color, the black box where you had the system art, the white box where the text/logo is, the white box with your screenshot/text on it, and the dark blue box with the gamelist.
The pixel is white because the color tag only works with that.

Keigan

@chicuelo said in Chicuelo Theme:

I have a fewer questios!
Actually I have a long xml in the main folder, and a vert short one in every system.
The xml you provide is very extensive, and it includes the main directory one.
How does it affect the behavior of the theme? are there any conflicts between <tags> ?

Instead of 2 same logos, could you use the same one in the main menu and in the game section?

I think I will remain the dots and the whole background in one image, because you need in every theme the same clean background instead using one for all. That makes more images to load having to place over the game bg, character and controller.

Thank you again!

Most seem to have been answered in the post by Ecto, but I'll give my reasoning.

My main folder XML is long as well.

It sets the constant position for the background on both the system select and the game select screens, the # of games, the carousel for the logo, the games list position, as well as set to hide the other unwanted stuff, though I would have to read up and see if there is a new/better way to hide the unwanted info. I'm just doing it the way I've always done it and have not looked into newer ways.

You could use the same file, the reason I didn't in my case is because I wanted to set a global position for both logos, and right now I am cheating to get them placed so there is lots of blank space around them.

By making each page it's own image, it certainly makes it easier, since you can do this for everything:

<pos>0 0</pos>
<size>1 1</size>

The reason I split everything is if I want to change a few things, I can do it via text/typing rather than editing it in Photoshop and re saving every time.

It all comes down to preference/comfort really.

I, myself, need to read up on using variables and other possible new tricks since I haven't really brushed up my XML knowledge on theming in a long time.

chicuelo

@ectoone said in Chicuelo Theme:

@chicuelo said in Chicuelo Theme:

I have a fewer questios!
Actually I have a long xml in the main folder, and a vert short one in every system.
The xml you provide is very extensive, and it includes the main directory one.
How does it affect the behavior of the theme? are there any conflicts between <tags> ?

Instead of 2 same logos, could you use the same one in the main menu and in the game section?

I think I will remain the dots and the whole background in one image, because you need in every theme the same clean background instead using one for all. That makes more images to load having to place over the game bg, character and controller.

Thank you again!

Tags are handled line by line from top to bottom, and since every system/theme.xml includes the main xml at the top, the tags in the system/theme.xml are processed last.
That's why you can put everything in the main xml that should be globaly set. Like positions, sizes, font type etc.
In my version I use that to position and format the short and long description of the systems and the only thing that is defined by the system/theme.xml is the actual text. With that method it is very easy to change layouts without editing multiple files.

And you sure can use the same logo/image for different views without the need for multiple versions of the file.
My version uses only a white 2 by 2 pixel image to create the background color, the black box where you had the system art, the white box where the text/logo is, the white box with your screenshot/text on it, and the dark blue box with the gamelist.
The pixel is white because the color tag only works with that.

Thank you @EctoOne Im a bit confused but I think I will succeed with this

chicuelo

@keigan said in Chicuelo Theme:

@chicuelo said in Chicuelo Theme:

I have a fewer questios!
Actually I have a long xml in the main folder, and a vert short one in every system.
The xml you provide is very extensive, and it includes the main directory one.
How does it affect the behavior of the theme? are there any conflicts between <tags> ?

Instead of 2 same logos, could you use the same one in the main menu and in the game section?

I think I will remain the dots and the whole background in one image, because you need in every theme the same clean background instead using one for all. That makes more images to load having to place over the game bg, character and controller.

Thank you again!

Most seem to have been answered in the post by Ecto, but I'll give my reasoning.

My main folder XML is long as well.

It sets the constant position for the background on both the system select and the game select screens, the # of games, the carousel for the logo, the games list position, as well as set to hide the other unwanted stuff, though I would have to read up and see if there is a new/better way to hide the unwanted info. I'm just doing it the way I've always done it and have not looked into newer ways.

You could use the same file, the reason I didn't in my case is because I wanted to set a global position for both logos, and right now I am cheating to get them placed so there is lots of blank space around them.

By making each page it's own image, it certainly makes it easier, since you can do this for everything:

<pos>0 0</pos>
<size>1 1</size>

The reason I split everything is if I want to change a few things, I can do it via text/typing rather than editing it in Photoshop and re saving every time.

It all comes down to preference/comfort really.

I, myself, need to read up on using variables and other possible new tricks since I haven't really brushed up my XML knowledge on theming in a long time.

Great @Keigan! , Im still figuring what method is the best to use, Really don't know. Both are good and they have they advantages.
I have to try and test because I am working without real knowledge and pasting and changing tags until one goes right :D
Also reading all in English makes a bit more difficult the task