Chicuelo Theme

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

EctoOne

@chicuelo said in Chicuelo Theme:

I have to try and test because I am working without real knowledge and pasting and changing tags until one goes right :D

That's how I learned it as well.

Also I want to mention that you always can make a new repository on github if you have troubles or when you think you're finished and everyone can help and/or optimize it. Then they can send you a pull request and you can choose if you want to accept the changes.

chicuelo

@ectoone said in Chicuelo Theme:

hat's how I learned it as well.
Also I want to mention that you always can make a new repository on github if you have troubles or when you think you're finished and everyone can help and/or optimize it. Then they can send you a pull request and you can choose if you want to accept the changes.

That sounds pretty good, I like co-working. If you are interested I can prepare all the files, svg logos, artwork and other images and allow you to make the coding part. As long as people can enjoy a great theme I have no problems on letting anyone to help and improve the theme

EctoOne

@chicuelo I won't mind doing the coding part, at least that's something I can do because I'm bad at doing graphics.

anderocha

@chicuelo
how do I change "GAMES AVAILABLE" to "JOGOS DISPONÍVEIS"?

jonnykesh

@anderocha You can't. The language is hard-coded into Emulation Station. It is not governed by the theme.
Well, technically, you can. You need to download the ES source code, alter it and then re-compile it.

mahcneto

This is one of the best themes around, congrats! can you add Atari800 screens? thanks in advance!

chicuelo

@ectoone said in Chicuelo Theme:

@chicuelo I won't mind doing the coding part, at least that's something I can do because I'm bad at doing graphics.

You are the man! if you want I can contact you by mail or facebook and we can finish the theme, add more systems and upload to retropie. Of course you have half of the credits :)

chicuelo

@mahcneto said in Chicuelo Theme:

This is one of the best themes around, congrats! can you add Atari800 screens? thanks in advance!

Thank you! actually I am working on make the theme more easy for retropie to display so It doesn't lag and its rendered in HQ, when Im done with that I will add all the systems