imagefont.bin tool for PS3 and Vita

[Zar]

I don't understand what do you want to do ?

 

[DeViL303]

I don't understand what do you want to do ?

To create the frames for an imagefont.bin animation, we need to make all images in the sequence share the same palette.

 

[sandungas]

Yep, the problem is when we convert all the frames of the animation to indexed colors (this is when the palette is created)
If we do it individually for every frame, with a program like pngquant it creates an optimal palette for every frame and are different

So is needed to create a single palette that fits well with the colors of all the frames, pngquant allows to do it in 2 different ways
If used as a library... there are a few functions that can be used to "scan" images... you run this functions on several different images (all the frames), and it creates a list with all the colors in some kind of temporal buffer... after that (i guess) you can process the colors of the buffer to optimize the palette... and then start converting images with that palette (all the frames)

The other way is what i was explaining in my previous post, in the command line you can indicate a mapfile.png to be used as template. This way the palette of that file is used in all the frames
Is a bit more inaccurate than the using that features of the library, but it looks like is going to work good enought
Before that we had no other way to do it... so this is better than nothing


-----------------------
Btw @DeViL303 can you upload the frames of the animated images that needs to be converted ?, i have some files uploaded by you with a folder named "still need to be done" but i thinkk are old and seems to be the officials taken from PS3 firmware

At this point im a bit used to run that special options in pngquant command line... and some photoshop tricks to create an accurate palette, it will not take me much time
And you are more used to the changes needed to do in the setting files of littlebalup tool
So, lets make at least a few tests to confirm that this procedure is working, i could prepare the images and you build the animations, have a deal ?

 

[DeViL303]

Here are 6 that I have handy. I am not great at making these, gfx is not one of my strong points at all. Some of these are just the same image mirrored fort the 2nd frame.

But anyway they will do for practicing and they would be an upgrade. See what you think yourself. The timing might need to be adjusted on some of them.

If this works i will try make the rest.

 

[sandungas]

Here are 6 that I have handy. I am not great at making these, gfx is not one of my strong points at all. Some of these are just the same image mirrored fort the 2nd frame.

But anyway they will do for practicing and they would be an upgrade. See what you think yourself. The timing might need to be adjusted on some of them.

If this works i will try make the rest.

Done: https://www.sendspace.com/file/0v88ob

I hope everything is fine, the files inside the folders named "temporal stuff" are not really needed, are just intermediate files i had to generate because i needed them or because i was checking things... in one of them you can see the palettes (.pal) extracted from the final images with irfanview

 

[sandungas]

Btw, i still have the command lines i used, im going to paste them here to show you as an example of what i did:

C:\>pngquant.exe --map mapfile.png "U+F46E_frame001.png" "U+F46E_frame002.png" "U+F46E_frame003.png" "U+F46E_frame004.png" "U+F46E_frame005.png" "U+F46E_frame006.png" "U+F46E_frame007.png"

C:\>pngquant.exe --map mapfile.png "U+F405_frame001_RGB.png" "U+F405_frame002_RGB.png" "U+F405_frame003_RGB.png" "U+F405_frame004_RGB.png"

C:\>pngquant.exe --map "U+F470_frame004_RGB.png" "U+F470_frame001_RGB.png" "U+F470_frame002_RGB.png" "U+F470_frame003_RGB.png" "U+F470_frame004_RGB.png" "U+F470_frame005_RGB.png" "U+F470_frame006_RGB.png" "U+F470_frame007_RGB.png" "U+F470_frame008_RGB.png"

C:\>pngquant.exe --map "U+F476_frame001_RGB.png" "U+F476_frame001_RGB.png" "U+F476_frame002_RGB.png"

C:\>pngquant.exe --map "U+F477_frame001_RGB.png" "U+F477_frame001_RGB.png" "U+F477_frame002_RGB.png"

C:\>pngquant.exe --map "U+F634_frame001_RGB.png" "U+F634_frame001_RGB.png" "U+F634_frame002_RGB.png" "U+F634_frame003_RGB.png" "U+F634_frame004_RGB.png"

For the first 2 animations i was creating a "mapfile.png" that is a custom image that contains all the frames... the only purpose of it is to create the palette with it... this way photoshop (or gimp) is going to use one of that nice algorithms (pink-floyd steimberg whatever) to calculate the best colors
Later i realized is better to create that "mapfile.png" as RGB (not indexed), then use PNGoo to optimize it... this in fact converts it to indexed colors... but i have the feeling pngquant does it better than photoshop/gimp... not sure

And for the last images i realized there was not needed to create a "mapfile.png" because the frames are either the same image displaced, or mirrored.... so i used one of the frames as template with the "--map" argument

Additionally... i realized the image used with the "--map" argument doesnt really needs to be indexed previouslly... you can use a RGB.png (not indexed) with it

 

[DeViL303]

Done: https://www.sendspace.com/file/0v88ob

I hope everything is fine, the files inside the folders named "temporal stuff" are not really needed, are just intermediate files i had to generate because i needed them or because i was checking things... in one of them you can see the palettes (.pal) extracted from the final images with irfanview

NICE!

 

[sandungas]

Cool, and the timings are ok too

 

[DeViL303]

Yeah, I had to adjust the timings a little. But looking good now.


Here are another 3 upgrades, not great, but that's all I have time to do tonight.

 

[sandungas]

Yeah, I had to adjust the timings a little. But looking good now.


Here are another 3 upgrades, not great, but that's all I have time to do tonight.

The "broken heart" seems to have some garbage pixels at the borders... thats the kind of problem generated by photoshop when the original image is indexed and you convert it to RGB

As far i experienced and did read in google it seems photoshop cant handle high quality transparency levels with indexed colors

The solution... is to do the conversion from INDEXED ---to---> RGB in gimp (and save it in RGB)
Gimp does it very well, a lot better than photoshop

After that the RGB ---to ---> INDEXED needs to be made with pngquant (or PNGoo)
Pngquant does it a lot better than gimp and photoshop

 

[sandungas]

Just had an idea, is a bit pointless but i think it would work pretty fine, remember we was talking about how to create a timer modifying .rco files ?, well, with imagefont.bin icons it can be made, and a lot better

The idea is... a clock to meassure time in format HH:MM:SS needs 6 digits, and every digit needs 10 values (numbers from 0 up to 9)... so we can create 6 animated icons with the same 10 frames (but different timings)

Counting digits from right to left:
The digit most at right should change every 1 second
Second digit most at right should change every 10 seconds

Third digit most at right (to meassure minutes) should change every 60 seconds
Fourth digit (to meassure minutes) should change, hmmm every 60 * 10 seconds ?

Fifth digit most at right (to meassure hours) should change every 60 *60 seconds
Sixth digit (to meassure hours) should change, hmmm every 60 * 60 * 10 seconds ?


-------
Not sure about the maths... but this is supposed to be simple

 

[DeViL303]

Just had an idea, is a bit pointless but i think it would work pretty fine, remember we was talking about how to create a timer modifying .rco files ?, well, with imagefont.bin icons it can be made, and a lot better

The idea is... a clock to meassure time in format HH:MM:SS needs 6 digits, and every digit needs 10 values (numbers from 0 up to 9)... so we can create 6 animated icons with the same 10 frames (but different timings)

Counting digits from right to left:
The digit most at right should change every 1 second
Second digit most at right should change every 10 seconds

Third digit most at right (to meassure minutes) should change every 60 seconds
Fourth digit (to meassure minutes) should change, hmmm every 60 * 10 seconds ?

Fifth digit most at right (to meassure hours) should change every 60 *60 seconds
Sixth digit (to meassure hours) should change, hmmm every 60 * 60 * 10 seconds ?


-------
Not sure about the maths... but this is supposed to be simple

That is a good idea, we should do it.

I have done 9 more upgrades, very close now to being complete now. I fixed the broken heart one. I think there is only the battery icon left.

Can you fix the palettes on these please. Thanks

 

[DeViL303]

The idea is... a clock to meassure time in format HH:MM:SS needs 6 digits, and every digit needs 10 values (numbers from 0 up to 9)... so we can create 6 animated icons with the same 10 frames (but different timings)

Here are the frames for the timer. taken from a ps3 rco, resized to 36 high, indexed. If you fix the palettes, I will try sort out the timings.



I'm also thinking of adding 20 flags, all PS3 languages plus Ireland China uses same flag for 2.

 

[sandungas]

If the goal is to make an animated icon with a common indexed palette shared by all frames... the first step is to remove the indexed palette from the individual frames
But you are indexing all them, this way it requires a lot more time to prepare them for pngquant because in the way i was doing it needs to be removed individually

Is easyer when all the frames are in RGB
This way you can select one of the frames as the "mapfile" to create the common indexed palette and convert all the other frames with a single pngquant command
Or... (this is longer because is needed to do it with an image editor app like photoshop or gimp)... incase the frames contains very different colors, is needed to prepare a "mapfile" with all the frames together
Or... (this is not available for us)... use the pngquant library functions to scan all the frames and generate an optimal palette automatically

 

[sandungas]

If the goal is to make an animated icon with a common indexed palette shared by all frames... the first step is to remove the indexed palette from the individual frames

Wait, it seems is not a requirement... i just converted your (indexed) frames for U+F4A0 with just a pngquant command and it seems it did work

Im going to do the others and i will upload them in few minutes

 

[sandungas]

Done, the 9 more animations and timer, hope it works i made them as faster as posible, lol, if there is some mistake in some frame advise me and i will repeat that one

https://www.sendspace.com/file/9e181y

 

[DeViL303]

Done, the 9 more animations and timer, hope it works i made them as faster as posible, lol, if there is some mistake in some frame advise me and i will repeat that one

https://www.sendspace.com/file/9e181y

Great, they seem to be working.

There is still the cloud with lightening and the water splash from post #109 to do. That is all of them then except the battery icon.

I would like to make a better battery icon in the same style if possible.

 

[sandungas]

Great, they seem to be working.

There is still the cloud with lightening and the water splash from post #109 to do. That is all of them then except the battery icon.

I would like to make a better battery icon in the same style if possible.

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)

 

[littlebalup]

Hi guys. Sorry to not be more involved in those stuf. But it's very nice to see you made great progresses with animated symbols. I don't have a better way to propose. Maybe someday we will have access to the crappy $ony proprietary software or plugin, who know?

 

[sandungas]

Hi guys. Sorry to not be more involved in those stuf. But it's very nice to see you made great progresses with animated symbols. I don't have a better way to propose. Maybe someday we will have access to the crappy $ony proprietary software or plugin, who know?

I was thinking that it could be made a .bat script with pngquant to automatize the color indexing
The idea is... we can identify the animated icons by reading the filenames and comparing them

You know... in the animated icons you added a "suffix" at the end with the frame number, i dont remember now how to compare character strings in a .bat but i guess it can be made
And the static icons... are the others

After that is posible to convert all them to indexed colors with pngquant
With the static icons there is no probem because the palette is calculated individually and the result should be nice
The animated icons have the problem i mentioned before, is needed to choose (only) one of the frames as the -mapfile

Lets say... if we have an animation where the first frame have lot of blues and no red colors... but the second frame have red colors but not blue. If we take the first frame as --mapfile the second will look bad, this problem could happen with all the frames
But other than that... it should work, and just as a practic example... all the animated icons uploaded by DeViL303 in the latests posts have an aceptable result by using only a frame for the --mapfile

------------
The other way is by including the pngquant library in python and use that functions to scan the frames (are just 3 or 4 functions as much, i was reading about it a bit and doesnt seems complicated)
If i remember right python can include windows libraries, right ?... or is going to be too much messy if made his way ?

Anyway... adding this features dependant of pngquant to create the indexed colors palettes in a automatic way are like expanding your program to another level, it could make it a lot more noob friendly... or it could make it a mess... im not sure, so think in it and decide if worthy