imagefont.bin tool for PS3 and Vita

[DeViL303]

https://www.sendspace.com/file/km03x7
*The heart from F462 had garbage pixels at the borders

The official battery icon/s are a disaster, in the XMB looks ok, but if you look at it in a hexeditor or in a image editor app it have useless pixels everywhere, i know it well because is one of the officials icons i used for research when we was helping littlebalup
Is the kind of thing that doesnt motivates me much to rebuild it because is very bad made
And is not posible to clean it up to fix that problem... is needed to do it from scratch

There are maaaaaany of the official icons inside imagefont.bin that suffers this same problem though (the yellowish icon from PSN PLUS is probably the second worst)

I will see what I can do with the battery icon, its a simple enough shape, just need to draw it then copy it for the shadow.

I have already upgraded the PS Plus icon with a better one taken from a full size icon, well hopefully its better, it looks better to me , check it out

I do want to do those other few system icons too, microphone mute etc. I have replacements but need to work on the shadows there too.

I have no PS3 here now to test tonight but I have built the imagefont.bin with all the latest new animations included. This is really about 99% done now or more on the upgrade, approx 450 new images so far, about 5 to go.

I will be back home on the 1st Jan and can do a video then and test them myself. I am fairly confident they will work, just the timing might need to be tweaked.

Still need to add custom images too after that so not really 99% complete overall, but getting there.

I have attached a category_game.xml too if anyone wants to try it now, the xml will add all the custom animations in place of the title on package manager.


Or this hex code can be added to any xmbml, sfo etc.

EF 91 AE 20 EF 90 85 20 EF 91 B0 20 EF 91 B6 20 EF 91 B7 20 EF 98 B4 20 0D 0A 09 09 09 09 0D 0A 09 09 09 09 EF 92 A5 20 EF 91 AF 20 EF 92 A0 20 EF 92 A3 20 EF 92 A4 20 EF 92 A8 20 0D 0A 09 09 09 09 EF 92 9F 20 EF 91 A0 20 EF 91 A1 20 EF 91 A2 20 EF 91 A3 20 EF 9A A8

The last one (EF 9A A8) is a timer test with 0 to 9 displayed looping in 1 second, 100ms frame delays.

 

[DeViL303]

Might just take something from google images, edit it a bit.



What do you think? would it be ok to do that? Who will ever know

This was done really quick just to show an example, the shadow needs work really. First time ever doing shadows.

 

[DeViL303]

All 17 new animation upgrades, plus the timer test.

 

[sandungas]

So you are decided to update all them, dammit, lol, ok i will make the battery icon and the other white ones from scratch
To be honest it should not take me much time because im very used to make that kind of icons... is just the kind of thing that could make me enter in a loop until i make 40 versions of each, also im not completly convinced if resizing all the icons to 36 pixels height is a good idea, incase of investing so many time in building replacement icons from scratch i would prefer to do it at the original sizes

Can you make a list of all the icons needed ? (the white ones)
Battery is the easyest, the microphone mute, and how many more are needed ?
If you have official replacements (that needs shadows) upload them to me, that shadows are better made with the photoshop layer effects

 

[DeViL303]

To be honest it should not take me much time because im very used to make that kind of icons...

Cool

is just the kind of thing that could make me enter in a loop until i make 40 versions of each, also im not completly convinced if resizing all the icons to 36 pixels height is a good idea, incase of investing so many time in building replacement icons from scratch i would prefer to do it at the original sizes

Yeah, dont spend too much time, Your first will probably be 200% better than my last. That was literally the first time I ever tried to create shadows.

But yeah, I have been thinking about resizing all to 32x32, I think the ps3 resizing/upscaling on the fly will be worse than what we can do in PS/AI on pc.. Also its seems like a waste to have everything bigger than 99% of users will ever see. Initially when I thought of 36x36 I was sticking to ps4 size, and thinking bigger is better, and of some possible place where we might display text bigger than normal, but now I am thinking really that is not worth worrying about.

Obviously Sony didnt care when they made all the imagefont.bin icons 35% smaller than they were displayed on screen. I suspect they took the low res emojis from some other Sony device like a phone or something..

 

[DeViL303]

@sandungas: See what you think of these. The text icons I just wrote in paint.net

Some of them are from PS4, some are from PS3 rcos, some I made from google images. Some are better than others.. If you want to replace all or any of them please do.

 

[DeViL303]

The little keyboard icon is probably fine. It was in a PS3 RCO, so matches perfectly, and already has a shadow. Also the speaker icons have shadows, they are from PS4. I had to make the one with 3 bars from the one with 2 bars.

The 4 battery icons are duplicated, and if we take those out and the 4 speaker icons and the keyboard, that leaves just 12 that need to be done.

Originals:

 

[sandungas]

From that list the most hard to do from scratch is U+F8B3 but the others are relativelly easy because are very well defined geometric shapes
But the ones you actually have (without shadows) looks good, except the battery just because the geometry is a bit different than the original

So im going to do the battery from scratch (with all his variations), and add the shadows to the others... is ok like this ?

 

[DeViL303]

Sounds good. Nice one.

Can you make the battery icons with the same palette so its good for the animation too.

 

[sandungas]

Sounds good. Nice one.

Can you make the battery icons with the same palette so its good for the animation too.

Sure, i took the battery frame that indicates "full chargue" as a mapfile for the other battery frames, it have 4 frames in total, and one of them can be used for the other static battery icons

I increased a bit the width of one of the headset icon (and the arrow icon) to make room for the shadow, the speaker icons had a shadow but i increased the intensity of that shadow a bit more to make it match with the others, increased the brightness of the OSK icon, moved the hand 1 pixel up, moved caps 1 pixel left... and other small details like that without importance... are the kind of details to solve problems with the shadows, if there is something that looks a bit broken tell me
Overal looks good

And btw, it seems at the time i indexed the battery icons pngquant created a shared palette of 128 colors (im mentioning it just for curiosity sake, i guess pngquant calculated automatically that 128 colors was good enought)
But all the others has been converted with PNGoo using 64 colors (only), heheh... is an small experiment, but im confident it looks and works fine because this icons that are just using an small degrade of white colors doesnt needs a full palette of 256... with 64 is enought... actually with 32 was aceptable but it was the limit where it started appearing pixelation so i decided to index them in 64

Im sure this ones are way smaller than the officials because the reduction of the color palettes, and because the battery icons made from scratch doesnt have any "garbage" pixels

https://www.sendspace.com/file/tdl5yc

 

[DeViL303]

They are looking real good. Upgrade are defined much better. Battery icon is great.

Original at 1080p:

Upgrade at 1080p:

Its not a massive thing, but one thing I notice is that the shadow ends very suddenly and is chopped off on some, showing the edge of the transparent border.

Maybe we can extend the border or reduce the shadow a little, its ok too.

It's on a few more too. Up to you.

EDIT 1: Also the speakers, OSK and microphone icons could be whiter, the ps4 versions are a little grey. Also not a big deal as they still look great imo.

EDIT 2: The HQ, Maj and Caps text is showing up smaller as its not taking up the full height like the original, that my fault, maybe we could have another font? I am not sure what the original font is. I think I used Arial bold in that but it could be better, what do you think? It still looks way better imo so its fine too.

I have attached 3 different text icons for HQ, Maj and Caps that take up more of the height, see what you think yourself.

 

[DeViL303]

BTW, what is the best way to resize icons? When I did the trophy and ps plus icons down from 240x240 I did not really think about it, not sure what it was even on. Maybe I should do those 5 again.

I'm still not sure if they would ALL look better at 32x32 or if resizing them now on PC will mess them all up as they are such low res anyway.

Here is the difference between native 36x36 png (right), and displayed at 1080p as title on XMB which is 32x32 (left)

actual resolution:

Left is the result of letting the ps3 resize it from 36x36 to 32x32 on the fly.

Zoomed:

 

[DeViL303]

It actually seems to be doing a very good job... but I am no expert. I think it better to leave them now and push for a release soon, Also having more data to work with might work better on lower resolutions too.

I have taken some screen shots at all resolutions my TV allowed (1080p already done above).. I think the upgrades look good at all really, check em out


Original at 1080i

Upgrade at 1080i

Original at 720p

Upgrade at 720p

Original at 480p

Upgrade at 480p

Original at 480p:

Upgrade at 480p

Not bad at all but we do need to fix the text icons, the new ones actually look worse at 480p

Original at 480p:

"upgrade" at 480p

 

[DeViL303]

I've been busy playing with the timer, it was going ok, but unfortunately it seems we can't have animations longer than approx 6 minutes.
Its hard to know, it kind of seems like the less frames, the longer it can be. but anyway it seems to be around 2 minutes @10 frames up to 5 minutes approx with 5 frames.

I can have 5 frames in 5 minutes, so went with that for some timer tests. Its a shame its not 10 minutes as that would make a better timer.

Timer POC 1

Timer POC 2

Uptime counter

Prank POC

 

[sandungas]

Yep, the problem with the text icons (HQ, Caps, Maj) is because the font size, lets say... the originals makes a better usage of the space available
I dont know which font is used in the originals though... i guess it should be one from the official .TTF files from the PS3 firmware

The problem with the speaker and the mic icons is the ones from PS4 already have shadows, but are barelly notable (that shadow intensity should be increased, i did that)... and additionally now that you posted a real screenshot it seems like the brightness of the white pixels needs to be increased too (i didnt realized about this)
The problem when i add shadows to them is my shadows starts at the end of the original shadow... so is expanded too much
Also, 2 of the speaker icons have white pixels very close to the right border (and my shadow needs at least 4 pixels extras)... this is why the shadow in 2 of the speaker icons seems cropped

The OSK icon you gave me have shadows too... and as an additional problem the white pixels are partially transparent... so when i add my shadow the black color of the shadow merges with the white and results in some intermediate grey and looks very dark... this is why i increased the brightness of the white pixels

The hand icon have white pixels very close to top and bottom borders (so is not posible to displace it to make room for my shadow), and my shadow is cropped,, this sucks because the only solution is to reduce the size of the white pixels (and this is going to reduce the definition of the edges... so it will look a bit worst)


------------------------------------------
Btw, you are mentioning 36x36 from PS4, and 32x32 from PS3... but the PS3 ones are 23x23
Im asking it because im not sure if it was typos in your posts here... or you are taking about how many pixels they takes when are displayed in XMB

That was my doubt and why im still not so sure if replacing them by bigger sizes like 36x36 is a good idea
The point is... is we are sure the "target" size is X*Y we should try to have the icons at that same size, because this way the graphic library that displays them (i guess openGL) doesnt needs to scale them either up or down
In other words... when we display the icon in PC with an image editor program it should be exactly like how it looks in the PS3 (+ probably some "soften" filter used by openGL, but not any size resampling that could cause pixelation)


------------------
As a general rule everytime you scale an image you are losing a bit of definition (the resulting pixels are a bit far away from the originals), so is something i use to avoid to do as much as posible
Resizing the canvas size is ok because the colors of the pixels are not resampled, so you dont lose definition... but scaling an image is a sin

Anyway... when i do it i use to try the different algorithms availables, check the results, and step back incase it looks bad
The "bicubic" seems to be available in many image editor programs, seems to be an standard, but in the screnshot you posted appears an option named "best quality" so i guess i would try that one first

 

[DeViL303]

Yep, the problem with the text icons (HQ, Caps, Maj) is because the font size, lets say... the originals makes a better usage of the space available
I dont know which font is used in the originals though... i guess it should be one from the official .TTF files from the PS3 firmware

The problem with the speaker and the mic icons is the ones from PS4 already have shadows, but are barelly notable (that shadow intensity should be increased, i did that)... and additionally now that you posted a real screenshot it seems like the brightness of the white pixels needs to be increased too (i didnt realized about this)
The problem when i add shadows to them is my shadows starts at the end of the original shadow... so is expanded too much
Also, 2 of the speaker icons have white pixels very close to the right border (and my shadow needs at least 4 pixels extras)... this is why the shadow in 2 of the speaker icons seems cropped

The OSK icon you gave me have shadows too... and as an additional problem the white pixels are partially transparent... so when i add my shadow the black color of the shadow merges with the white and results in some intermediate grey and looks very dark... this is why i increased the brightness of the white pixels

The hand icon have white pixels very close to top and bottom borders (so is not posible to displace it to make room for my shadow), and my shadow is cropped,, this sucks because the only solution is to reduce the size of the white pixels (and this is going to reduce the definition of the edges... so it will look a bit worst)

Yeah, I'm thinking we just go with what we have now for those white icons, they do look really good. We could redo those 3 text icons due to the size, see my attached ones above for better sized versions.

Btw, you are mentioning 36x36 from PS4, and 32x32 from PS3... but the PS3 ones are 23x23
Im asking it because im not sure if it was typos in your posts here... or you are taking about how many pixels they takes when are displayed in XMB

Yeah, I meant displayed on XMB resolution when talking about ps3.

That was my doubt and why im still not so sure is replacing them by sizes like 36x36 is a good idea
The point is... is we are sure the "target" size is X*Y we should try to have the icons at that same size, because this way the graphic library that displays them (i guess openGL) doesnt needs to scale them either up or down
In other words... when we display the icon in PC with an image editor program it should be exactly like how it looks in the PS3 (+ probably some "soften" filter used by openGL, but not any size resampling that could cause pixelation)

I'm not sure either, But i know that now on a 36x36 icon it is like 12% or something, so its going to need to guess a load of pixels to nearest "wrong" place, and I do not know enough about this kind of thing.

I can run a bulk resize but I also dont know if i trust any application I have to do that as good as the PS3 is now, and now we are talking about 500images, so doing them individually and checking them is a big task. I dont really know how to use Photoshop either.

As a general rule everytime you scale an image you are losing a bit of definition (the resulting pixels are a bit far away from the originals), so is somthing i use to avoid to do as much as posible
Resizing the canvas size (without resampling the pixels colors) is ok because you dont lose definition... but scaling them is a sin

Anyway... when i do it i use to try the different algorithms availables, check the results, and step back incase it looks bad
The "bicubic" seems to be available in many image editor programs, seems to be an standard, but in the screnshot you posted appears an option named "best quality" so i guess i would try that one first

The other thing is, 32x32 is only the title size at 1080p, for every other display resolution and place on xmb it might not be 32x32, so I dont know if we should edit them just to suit that place, even though it is the biggest they can be displayed, and 1080p is the most popular resolution, maybe 32x32 wont scale well on other resolutions. idk... it's tricky.

As we have spent so much time on this already, I am tempted to just leave them for now, if someone else wants to redo them in the future they can...What do you think?

 

[sandungas]

I've been busy playing with the timer, it was going ok, but unfortunately it seems we can't have animations longer than approx 6 minutes.
Its hard to know, it kind of seems like the less frames, the longer it can be. but anyway it seems to be around 2 minutes @10 frames up to 5 minutes approx with 5 frames.

I can have 5 frames in 5 minutes, so went with that for some timer tests. Its a shame its not 10 minutes as that would make a better timer.

Timer POC 1

Timer POC 2

Uptime counter

Prank POC

Hmmm, that restriction is unexpected, not sure what to say about it, but lets put it into observation laboratory, the first thing that comes to mind that is needed to take a look is how littlebalup tool stores that info inside the imagefont.bin structure, maybe there is some restriction in the structure itself or some mistake in how is stored
Remember i was looking at that, and made a section in a wiki page https://www.psdevwiki.com/ps3/XMB_Fonts#Time_scale_conversions
We had a overall good idea how it was working, but we never made experiments with times so big

Another unexpected thing is the animation "pauses" when you hide the icon in the first videos, but continues when you return... not sure if thats an annoyance of something we could take in our advantage

The prank could be much better if the timer runs in opposite direction... in other words a "countdown timer" that starts with 5 minutes and reduces the time... like a bomb
With a text advise "your PS3 is going to autodestruct in 5 minutes, please wait, and dont remove the memory card \o/"

 

[DeViL303]

Hmmm, that restriction is unexpected, not sure what to say about it, but lets put it into observation laboratory, the first thing that comes to mind that is needed to take a look is how littlebalup tool stores that info inside the imagefont.bin structure, maybe there is some restriction in the structure itself or some mistake in how is stored
Remember i was looking at that, and made a section in a wiki page https://www.psdevwiki.com/ps3/XMB_Fonts#Time_scale_conversions
We had a overall good idea how it was working, but we never made experiments with times so big

Yeah, I was trying to find exact delay point in hundreds of seconds, I had it narrowed down to between 4000 and 4999 hundredths of a second, but then I reduced the amount of frames and it worked with over 5000, So then I think maybe it is overall length...BUT then it seems to show like first frame or 2 of longer ones, but the point at which it stops changes depending on overall length/frames, hard to diagnose or maybe its just me.

Another unexpected thing is the animation "pauses" when you hide the icon in the first videos, but continues when you return... not sure if thats an annoyance of something we could take in our advantage

Yeah. that was unexpected.

BTW there is something else unexpected (for me anyway), its like there is a global timer for each animation, so you can not have the same animation starting at different times. How I noticed this was I noticed that the Timer only starts when I enter it normally. BUT if I have the uptime counter running on the same XMB mod, and say it has counted up to 20 seconds, then when I go into the timer it will be at 20 seconds already, perfectly synced. So basically there can only be 1 version of each animation running, and all others will be in time with the first one that gets started.

The prank could be much better if the timer runs in opposite direction... in other words a "countdown timer" that starts with 5 minutes and reduces the time... like a bomb
With a text advise "your PS3 is going to autodestruct in 5 minutes, please wait, and dont remove the memory card \o/"

True

Anyway its a shame it seems limited as it makes the timer fairly useless. Well there is probably some uses for a timer limited to 5 minutes, I just can't think of any yet. I do need to do some more tests with just 2 frames to see proper max length

One thing I noticed, the digit changing 100 times a second is a good way to see if the XMB is stuttering at all loading other stuff, I noticed if I go to the timer real quick at boot up, while its still loading the XMB then you can see the timing changing as it struggles to do everything.

 

[DeViL303]

I had some other ideas for new animations, but maybe we should wait until after release, as we could be here forever.

Anyway some ideas, we could have a few little progress bars that takes different times to complete, like 1 second to complete, 5 seconds to complete , 10 seconds to complete etc, then it could be used for small tasks that never fail to give the illusion of a progress bar , also if the console freezes for example, then the progress bar wont finish, so it might actually be useful in some places like enabling hen maybe..

Also I was thinking of some pulsing green text animations for notifications, like "Success", "Complete" and "Done" "Installed" and pulsing red "Failed", "Error" "See Log" etc....

We could also have a little stopwatch/clock type animation that spins.

Endless what we could do really.

 

[sandungas]

Interesting, so we could make our mind into thiknking that every icon from imagefont.bin is stored in ram only 1 time, and whatever functions are used to animate it runs 1 time too (for all the apparences of the icon)
And the animation pauses incase you "hide" the icon (or when you hide all apparences of it incase are multiple)
Hmmm, not sure how many consequences have that and if are good or bad for us

----------
So that icons in the way how you are displaying them are taking 32x32 pixles ? ok, good to know. Im thinking in it and i guess...
Some of the icons (like the smileys for chat) can be displayed at other sizes (the chat have an option to increase the font size ? im wondering if this would increase size of icons too)
Other icons (like the dualshock ones) could be displayed at different places (floating dialogs, or inside blocks of text, etc...) and could have different sizes too for everyone of them, we are not sure if what im saying is right but is posible because i guess the real sizes are hardcoded somewhere else

It seems we dont need to respect the original sizes because we are using that icons in other "custom" ways, and our goal is to have the biggest size posible that matches with wherever enviroment we are displaying them... so that 32x32 you meassured looks like the best compromise
About the "target" screen resolution... we should work always for 1080p... the smaller resolutions are generated based on it so we only worry about 1080p and the firmware deals with smaller sizes automatically

Btw, i dont remember if/when you mentioned this 32x32 so not sure what you did to meassure it... but the most accurate way is by displaying an icon fully opaque (like the zodiac ones), make an screenshot, and count the pixels in a image editor app in PC