Chicuelo Theme
-
Thanks for creating the ZX Spectrum system! Looks great. I guess it's just Dizzy who needs sharpening up a bit, as at the moment he is scaled up from a smaller image, is that correct?
One question, which Amiga model is that you used for the controller - it's much different to the link I sent? It isn't one I've seen before, but I only really know the classic A500, A500+, A600 and A1200 machines. Just curious!
Regarding the controller size I'm looking into, because some controllers are vertical (Atari 5200, Gameboy etc) and some horizontal (NES, Master System etc), and some square (N64, Dreamcast etc) - using the images "as is" and trying to apply the max size parameter is always going to a compromise, eg. You could make the horizontal ones perfect, but the other shapes will suffer or appear small, like you noticed. Also we want to avoid messing up aspect ratios and scaling images above what they should be.
My proposal (which I've started and it seems to work) is to have a canvas of 480x480 square for each image (480px is 25% of the horizontal resolution for 1080p - which comes into play later).
Then I have the controller justified to the bottom right of the canvas to the size we want. Depending if it's a horizontal or vertical controller I generally make it a max of 480px on the relevant axis while keeping the overall canvas square. If the image is smaller I'm not scaling up otherwise the quality is lost, but most are large enough to downsize without issue. For square controllers you would make those about 360x360 or so, otherwise they look too large.
Once this has been done across the board, I can then apply a "size" parameter for the controller in the XML, to be 0.25 (25 percent) on the horizontal axis. This is essentially 480 pixels wide on a 1080p screen, which is perfect 1:1. I leave the vertical size axis as "0", so it calculates automatically based on horizontal size but keeps the aspect ratio.
This then looks great on 1080p - but what about 720p etc? Well, because we set the size to 0.25, it means that 480x480 image never exceeds 25% of the horizontal screen from the bottom right. This means on smaller resolutions the image will scale downwards (thus still appearing sharp) and the controller will not appear too large. And on 1080p it will be 1:1. Only time where the controller might appear blurry is if you were trying to display ES in 4k, as it'll have no choice but to scale up, but this will be the same as all other assets and this should be no concern.
Not sure if that makes ANY sense, but I'll work on the images and show you. Then you can see for yourself how I've done it, so you know for when making images for future controllers.
Really good work with the blisters, I can imagine that took a lot longer than hoped, but great work to get them finished.
I agree - series collections would be good to add to the genres, but I also think it might be worth getting the other systems completed as a priority first, so at least all the "base" stuff is fully supported? Then technically the theme is complete (if you see what I mean). Your list you gave previously with all the systems and suggested characters will help @chicuelo a lot.
Cheers
-
On a side note, do you have a slightly larger Dreamcast controller PNG available? The current one is ok, but could do with being scaled up slightly to match the others (but I want to avoid doing this to prevent blur).
Cheers
-
@cosmo0
I like your point, if you want to proceed with that I leave it to you! just try to match the language of all the Marios, if you use a 3D one for sports. Try to use a 3D one too for all the other! I really like the set you have done but if you want to go further you have my thumbs up!@movisman
For the Amiga controller I used a 500 one, but I removed the top part with the plastic grid because it was too big. I have a great controller but its black, what do you think about using this one? it says C64 but looking in deep they have the same key configuration
I have a bigger dreamcast controller, if you want to proceed with the test it would be great! then if you need me to change the size of all the controllers I could do it.
You are right about the dizzy image, its a tiny one and I scaled up, I really dont dedicate too much time to that system. I will improve it later. And of course continue creating the remaining systems so we could have an almost full collection
Thank you guys!
-
@chicuelo said in Chicuelo Theme:
@cosmo0
I like your point, if you want to proceed with that I leave it to you! just try to match the language of all the Marios, if you use a 3D one for sports. Try to use a 3D one too for all the other! I really like the set you have done but if you want to go further you have my thumbs up!I don't know when I would do it, probably in a few weeks :)
If anyone is motivated to do it instead of me, please go ahead :D@chicuelo : do you have an idea for a background for these "game series" ? A white background wouldn't match the theme... Or maybe another idea?
No need to make one in a hurry, as I said, I won't work on it before a few weeks at best :D -
I would definitely steer clear of using a black Amiga, as they were never available in this colour. This must be a custom build. I would personally stick with original A500, A500+, A600 or A1200 systems.
I tried the A500+ image on my test with the fixed sizing and it is looking ok to my eyes?
I have made some quick edits to all the system controllers I use, altered my theme.xml as well as tried the A500+ image.
Give me 10 minutes and i'll post a video of the theme in 1080p AND 720p, and you can see the scaling on 720p working, also you can see the revised sizes of the controllers. In 1080p they are not changed too much, I only scaled some down to fit, but I don't I scaled any up (i'll have to check) except Dreamcast.
Thanks!
-
Ok, here is a preliminary test - you can see on 720p the controller images scale perfectly.
1080p:
https://drive.google.com/open?id=13r84uApa4eX-N7i7jCq_sK6YXiVpkFiM720p:
https://drive.google.com/open?id=1xGvaOxO2e2vwkm9uw2nhtf0LB7ouUxfyWhat do you think (also note I tried an original Amiga hardware image)?
Thanks!
-
Great work! I see no difference at all!
I think the amiga keyboard looks big, it may be because the upper structure. Im going to work on finding a perfect one.
Do you need me to scale all the controllers? -
We can maintain the blister and change the orange color to a green one, what do you think?
-
@chicuelo said in Chicuelo Theme:
We can maintain the blister and change the orange color to a green one, what do you think?
Do you mean you would still want character + items ? Or multiple versions of the character in the same blister ?
-
Yes, the Amiga had all it's internals in that part so that is a picture of the whole system. There was no official joystick that I know of, so a picture of the whole system is best. Other models (A4000 etc) had a separate casing but these were not the classic (popular) ones most people owned at home.
Regarding the controllers, how do you want to do this? Do you want me to explain how i've done it so you can recreate it to your taste, or are you happy to use the PNG's i've put together and adapt as you like? As I say, a couple I scaled up (like DC as the source was too small), so this might be preferable.
Basically each image is a 480 x 480 transparent PNG, with the controllers justified to the bottom right with the same amount of padding to the edge. If you download the below PNG files and open in Illustrator, you'll see what I mean if it's unclear. As long as the overall image size stays at 480x480, you can resize the object inside however you want.
When I did them to demonstate above, horizontal images were scaled to around the maximum width, vertical ones were scaled to around the maximum height (or a bit less depending how wide they were), and more square controllers/systems are somewhere inbetween. Exact square ones like Atari 2600 a bit smaller still.
Here are some examples:
Do you want me to send you the files I made so you can work on them to your preference? Or do you want to go through all of them and recreate yourself with the original source images? (or I can do it). It's up to you what you prefer, let me know.
I also have an SVG of all the controllers as separate layers, maybe you would prefer this. Whatever works for you for the best outcome.
Regarding the theme.xml, the change i made on my copy is very simple, but needs to be applied the same time as the images being uploaded.
You just need to place the following underneath the <pos> tag in the image name="controller" bit:
<size>0.25 0</size>Again, I can do this and raise a PR but if you want to mess about with the images it might be worth you putting this into your copy.
Thanks
-
If I understand well, this will be a different type of collection? or just a variant?
If is another kind of custom collection, we could use another color of blister and only a character in it suit.If it is an alternative image or a variant I wouldn't do it because you did a great job on those.
You tell me! -
@chicuelo
It would be different collections ; instead of "genre" (action, platform...) it would be "game series" (Mario, Sonic...).
By the way, looking at @movisman video, it striked me that the arcade controller looks out of place compared to the other ones. It's very simplistic, while the others are a bit more realistic.
Maybe you could use something more like one of these ?
-
@movisman
Great, we can proceed like this: I adjust all the controllers to a 480x480 px area, and then I update the repo and the xml.
Is it possible to set a 45 px margin from the bottom and the right to the image? something like the image below. That would make the controller cover more area of the character in case its small:
When I rasterize the layer, the shadow will take some pixels extra so I have to decide between removing the shadow or reducing the controller size a bit
-
@cosmo0
Yes, I notice that, but I left that adjustment for a final instance so I could progress on creating all the remaining systems.
I will have to create a controller from scratch because there are no good front images of an arcade controller -
@chicuelo Ok cool :)
-
Hi there,
That all sounds good to me! Once you have updated the repo i'll check it over.
Don't forget, we don't have to do 480, we can do smaller or another size, but we would just need to adjust the XML accordingly for optimal results. Eg. 384x384 would be 0.20 (20%) horizontal in the XML to avoid any scaling at all on 1080p (384 is 20% of 1920). I just picked 480 as it was quarter of the screen for 1080p and that seemed like a good maximum.
It all depends how big you want the controllers. You can always create the box larger and reduce by scaling with the XML, as scaling down to fit obviously doesn't have as much negative effect as scaling up. Difficult to explain without visual.
Regarding the margins, at the moment the controller is set to 0.98 0.98 on the XML for position, and origin 1 1 (drawn from bottom right), which means it is displaying 2% in from the bottom right of the users resolution. That 2% translates to 38.4 and 21.6 px for a 1080p resolution, so this is what the margins probably are at the moment on 1080p. If you want this to be closer to 45px, we can simply change the <pos> tag to be something like 97.65 97.65 which would give you about 45px horizontal and 25px vertical. We can play with the positioning to increase or decrease the margin to the edge of the screen with no problem at all.
Cheers
-
@movisman
Great I understand! let me work on every controller and I will update the repo soon! -
Awesome, look forward to trying it out!
I can also test in 720p to make sure everything still scales as intended.
Cheers!
-
@movisman
I have a doubt now, most of controllers are bigger than the max size we pretend to use, so why we don't use those and scale them down right from the xml?
We can improve only the ones which are smaller. What do you think? -
Hey,
Actually i'm a bit confused exactly what you mean - are you saying you prefer to use a larger canvas (for example 576x576 or 768x768 or something) to make use of the larger images, correct/improve the smaller ones to be the same as the larger ones, and then scale the whole canvas back down in the XML?
If so, you can do this for sure, however I think the only major benefit of this is if the user is viewing ES in higher than 1080p, as the images would need to scale less and would for sure look sharper. However aren't the other objects (characters etc) optimised for a maximum of 1920x1080 already? If so, these would need to scale up anyway if the resolution was higher, right? By using 480x480 and 0.25 in the XML, it causes no scaling upwards or downwards in 1080p (as 480 is 25% of 1920), and only in smaller resolutions will the image scale (downwards which is ok). You would need a larger canvas if you wanted the max size to be more than 25% of the horizontal resolution though.
In resolutions above 1080p, there is certainly a benefit to using a larger canvas size. However, I don't know if it makes too much difference to go larger, and then scale down in the XML. Also there is file size to consider I guess (not sure how much of a difference this makes on Pi).
What size were you thinking of by the way?
To be honest, either is fine - for sure you can for sure make them larger to start with, and the XML will scale it back down to 25% width if you think that would look sharper, rather than displaying 1:1 to begin with.
I guess it depends if a) you might want to make the controllers bigger than 25% in the future - if so you can adjust the XML a bit without having to scale 'up' (the image will have more headroom if it's bigger to begin with) or b) if you want people running resolutions above 1080p to have sharper looking controllers. And c) depends whether you feel larger image scaled downwards is better than a smaller image displayed in 1:1 at 1080p (if using 25%).
Thinking as i'm writing this, if it doesn't make huge difference to file size and isn't much more effort, you might as well make them a bit larger and we can scale down in the XML - as long as the scaling down in the XML doesn't affect quality (it shouldn't). As long as all the images are the same dimensions we can ensure consistency when scaling in the XML.
Makes sense?
Cheers!
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.