GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
http://epicgta2.omnitude.net/gta2text/
Looks like the GIF made it faster!
Output image filesize: 63.4 KB (63368 bytes)
Time taken to:
Render font: 31.3 ms
Create GIF: 14.6 ms
Free resources: 0.1 ms
Total: 46.0 ms
Before:
Output image filesize: 65.2 KB (65150 bytes)
Time taken to:
Render font: 54.9 ms
Create GIF: 15.4 ms
Free resources: 0.2 ms
Total: 70.5 ms
Output image filesize: 130.1 KB (130142 bytes)
Time taken to:
Render font: 14.7 ms
Create GIF: 18.0 ms
Free resources: 0.1 ms
Total: 32.9 ms
Before:
Output image filesize: 130.5 KB (130458 bytes)
Time taken to:
Render font: 11.2 ms
Create GIF: 17.8 ms
Free resources: 0.1 ms
Total: 29.1 ms
Edit: hmm, the big image got slightly slower for some reason :O
Edit2: i decided to hide the color codes even if using other font than the normal font; easier to make same text on different fonts.
Looks like the GIF made it faster!
Output image filesize: 63.4 KB (63368 bytes)
Time taken to:
Render font: 31.3 ms
Create GIF: 14.6 ms
Free resources: 0.1 ms
Total: 46.0 ms
Before:
Output image filesize: 65.2 KB (65150 bytes)
Time taken to:
Render font: 54.9 ms
Create GIF: 15.4 ms
Free resources: 0.2 ms
Total: 70.5 ms
Output image filesize: 130.1 KB (130142 bytes)
Time taken to:
Render font: 14.7 ms
Create GIF: 18.0 ms
Free resources: 0.1 ms
Total: 32.9 ms
Before:
Output image filesize: 130.5 KB (130458 bytes)
Time taken to:
Render font: 11.2 ms
Create GIF: 17.8 ms
Free resources: 0.1 ms
Total: 29.1 ms
Edit: hmm, the big image got slightly slower for some reason :O
Edit2: i decided to hide the color codes even if using other font than the normal font; easier to make same text on different fonts.
My GTA2 related projects:
-
- Immortal
- Posts: 889
- Joined: 16 May 2009, 06:14
- GH nick: BenMillard
- Location: London, UK
- Contact:
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
I can help with HTTP caching and image compression settings. That's part of my day job as a website developer. You are about to learn more than you ever needed about these subjects.
PNG is slower to write but faster to download than GIF
8-bit PNG is basically the same as GIF, but the compression produces a smaller resulting file.
A full implementation of PNG can try various compression modes before choosing the one which works best for that particular set of pixels. PNGcrush does this, trying up to 100 different modes. This is heavy on processing.
Once you've found a compression profile that works well for this particular type of image, you don't need to test multiple compression modes any more.
It's still a bit slower to produce the file than the equivalent GIF compression. But the resulting file can be 40% smaller, making it a faster download experience for users.
Server-Side Caching
You can write each image you generated as a static files on the server. The URL you provide points to the static file. So every visitor is just getting a static file off your server's HDD.
Static files usually get HTTP caching headers by default, along with MIME types and so on. This means each visitor only downloads the file once.
PNG Transparency Support
IE7 and any better browser support smooth transparency.
IE6 has <2% market share in most developed nations, so that's really irrelevant.
Smooth transparency uses more filesize than on/off transparency, but reduces 'jaggies' when you have curved edges against various background colours.
8-bit PNG supports on/off transparency (aka 'index transparency') and that's even supported by IE6. 8-bit PNG also supports smooth transparency (aka 'alpha channel transparency') which is what IE6 does not support.
Smooth transparency is usually what you get when saving 24-bit PNGs. IE6 does not support that.
PNG Metadata
Files produces from Photoshop, Paint Shop Pro, even Microsoft Paint, can include data chunks which aren't needed. PNGcrush removes all data chunks which are not actually needed to display the image.
Removing the gamma correction chunk makes the image always render in normal sRGB. That's what the Internet uses. IE tries to apply any gamma correction information, which usually makes the colours different than the exact same RGB code in a web page. (Since web pages are displayed in sRGB.)
HTTP Caching
Even if you generate an image on the fly, you can tell each visitor's web browser to store that image locally. Their browser won't even request the image again, so long as it still has the local version. This means 0% server resources for subsequent views of the same image by the same user - literally.
Simplest way is to set an Expires date which is in the future. Make sure you use the right RFC standard date format. It's a weird archaic one, think PHP has a function with a preset for generating it. The timezone has to be 'GMT' but it's actually UTC. Again, PHP has a function to do that magic for you.
Alternatively, you can set the Last-Modified date header. Browsers will compare that date to the current time to see how old the image is. They'll then guess how long they should wait until they should check the image for changes. They're pretty clever at making a reasonable guess about this. When the guessed time comes up, they'll send a "conditional GET" which includes an If-Modified-Since header. If your system knows the image has changed since the date of the image that browser has, your system can regenerate the image and send it back. Otherwise, you just return 206 Not Modified with no HTTP body.
You can send both of these headers, but the behaviour of web browsers is not defined. (I should think a definition is being drafted, though.)
PNG is slower to write but faster to download than GIF
8-bit PNG is basically the same as GIF, but the compression produces a smaller resulting file.
A full implementation of PNG can try various compression modes before choosing the one which works best for that particular set of pixels. PNGcrush does this, trying up to 100 different modes. This is heavy on processing.
Once you've found a compression profile that works well for this particular type of image, you don't need to test multiple compression modes any more.
It's still a bit slower to produce the file than the equivalent GIF compression. But the resulting file can be 40% smaller, making it a faster download experience for users.
Server-Side Caching
You can write each image you generated as a static files on the server. The URL you provide points to the static file. So every visitor is just getting a static file off your server's HDD.
Static files usually get HTTP caching headers by default, along with MIME types and so on. This means each visitor only downloads the file once.
PNG Transparency Support
IE7 and any better browser support smooth transparency.
IE6 has <2% market share in most developed nations, so that's really irrelevant.
Smooth transparency uses more filesize than on/off transparency, but reduces 'jaggies' when you have curved edges against various background colours.
8-bit PNG supports on/off transparency (aka 'index transparency') and that's even supported by IE6. 8-bit PNG also supports smooth transparency (aka 'alpha channel transparency') which is what IE6 does not support.
Smooth transparency is usually what you get when saving 24-bit PNGs. IE6 does not support that.
PNG Metadata
Files produces from Photoshop, Paint Shop Pro, even Microsoft Paint, can include data chunks which aren't needed. PNGcrush removes all data chunks which are not actually needed to display the image.
Removing the gamma correction chunk makes the image always render in normal sRGB. That's what the Internet uses. IE tries to apply any gamma correction information, which usually makes the colours different than the exact same RGB code in a web page. (Since web pages are displayed in sRGB.)
HTTP Caching
Even if you generate an image on the fly, you can tell each visitor's web browser to store that image locally. Their browser won't even request the image again, so long as it still has the local version. This means 0% server resources for subsequent views of the same image by the same user - literally.
Simplest way is to set an Expires date which is in the future. Make sure you use the right RFC standard date format. It's a weird archaic one, think PHP has a function with a preset for generating it. The timezone has to be 'GMT' but it's actually UTC. Again, PHP has a function to do that magic for you.
Alternatively, you can set the Last-Modified date header. Browsers will compare that date to the current time to see how old the image is. They'll then guess how long they should wait until they should check the image for changes. They're pretty clever at making a reasonable guess about this. When the guessed time comes up, they'll send a "conditional GET" which includes an If-Modified-Since header. If your system knows the image has changed since the date of the image that browser has, your system can regenerate the image and send it back. Otherwise, you just return 206 Not Modified with no HTTP body.
You can send both of these headers, but the behaviour of web browsers is not defined. (I should think a definition is being drafted, though.)
GTA5 Race, DM & Capture | GTA2 Levels & Coding | GTA2 YouTube Videos
Gran Turismo 6 custom track club(Sign in with PSN details, then follow link again.)
Gran Turismo 6 custom track club(Sign in with PSN details, then follow link again.)
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
Yeah, we figured those out already. cache isnt problem anymore etc. all fine
I didnt know 8-bit PNG with transparency worked with IE6 though
Im not going to use pngcrush program for this, that would be epicly slow.
I find it more important to reduce server CPU time than saving ~5-10% of bandwidth; now i can generate two images in the same time as i did before! the filesize might be a problem only if your connection was 7KB/s (dial up modem) or similar.
I'll repeat our conclusions we made: GIF's are used because their size is sometimes smaller and sometimes slightly bigger, but more importantly: they are 3 times faster to write.
I didnt know 8-bit PNG with transparency worked with IE6 though
Im not going to use pngcrush program for this, that would be epicly slow.
I find it more important to reduce server CPU time than saving ~5-10% of bandwidth; now i can generate two images in the same time as i did before! the filesize might be a problem only if your connection was 7KB/s (dial up modem) or similar.
I'll repeat our conclusions we made: GIF's are used because their size is sometimes smaller and sometimes slightly bigger, but more importantly: they are 3 times faster to write.
My GTA2 related projects:
- Cuban-Pete
- Immortal
- Posts: 909
- Joined: 29 Jan 2010, 15:03
- GH nick: Cuban-Pete
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
So -loading- from gif gives only a small improvement?
O well, I think we optimized it enough by now. I think we are close at calling it finished. Perhaps some cosmetic stuff on the generate page, but functionality speaking it's as good as finished, right? Or do you have still some idea's?
O well, I think we optimized it enough by now. I think we are close at calling it finished. Perhaps some cosmetic stuff on the generate page, but functionality speaking it's as good as finished, right? Or do you have still some idea's?
"Mmmm, your eyes are so beautiful."
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
GIF input optimization: 54.9 ms -> 31.3 ms = 42% faster
GIF output optimization: 57.2 ms -> 14.6 ms = 74% faster
total saved time: 66.2 ms ! huge ! it takes now only 46.0 ms total to generate an image! so we saved more time than it actually takes to generate one image!!!! CRAZY!!!!!!!!!!!!! NOT SMALL!!!!
GIF output optimization: 57.2 ms -> 14.6 ms = 74% faster
total saved time: 66.2 ms ! huge ! it takes now only 46.0 ms total to generate an image! so we saved more time than it actually takes to generate one image!!!! CRAZY!!!!!!!!!!!!! NOT SMALL!!!!
My GTA2 related projects:
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
http://epicgta2.omnitude.net/gta2text/
--
I also made it possible to decode the encoded URL's directly to the index.php if you want to edit someones text, just paste everything after "text=" from the image URL to the index URL after "text=":
http://epicgta2.omnitude.net/gta2text/? ... Uy7nq34A&z
--
I also made it possible to decode the encoded URL's directly to the index.php if you want to edit someones text, just paste everything after "text=" from the image URL to the index URL after "text=":
http://epicgta2.omnitude.net/gta2text/? ... Uy7nq34A&z
My GTA2 related projects:
- Cuban-Pete
- Immortal
- Posts: 909
- Joined: 29 Jan 2010, 15:03
- GH nick: Cuban-Pete
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
Really nice! Just two small things. You forgot the colour-preview-link. Now nobody knows what [2] means or [10] etc. I can add it if you want. It's just this link:
http://epicgta2.omnitude.net/gta2text/g ... FMNwAQ..&z
I prefer the text box, the preview image and the other bunch to be in the middle of the screen/window. With my 24" it looks better. I had this in my v1.1. I also had a different colour around the "box", but that is all extra/bonus.
I was also thinking about a nice favicon. I got these:
http://epicgta2.omnitude.net/gta2text/g ... FMNwAQ..&z
I prefer the text box, the preview image and the other bunch to be in the middle of the screen/window. With my 24" it looks better. I had this in my v1.1. I also had a different colour around the "box", but that is all extra/bonus.
I was also thinking about a nice favicon. I got these:
"Mmmm, your eyes are so beautiful."
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
btw you dont need to put the color code in the text if the whole text is same color; just choose color and it works without codes
im not sure what the purpose of the list of colors and names is, only for polish users? thats why i didnt include it. might be best to make the select -list to have different background color for those different text colors (if possible? testing ). edit: WORKS!
i thought website icons works only for the whole domain? nevertheless, i think the 5th icon is best from those candidates.
Edit: are you from poland?
i think its self explanatory when the user tries to copy the text to the textareaNow nobody knows what [2] means
im not sure what the purpose of the list of colors and names is, only for polish users? thats why i didnt include it. might be best to make the select -list to have different background color for those different text colors (if possible? testing ). edit: WORKS!
i thought website icons works only for the whole domain? nevertheless, i think the 5th icon is best from those candidates.
Edit: are you from poland?
My GTA2 related projects:
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
added the colors now: http://epicgta2.omnitude.net/gta2text/ check the list of colors
My GTA2 related projects:
- Cuban-Pete
- Immortal
- Posts: 909
- Joined: 29 Jan 2010, 15:03
- GH nick: Cuban-Pete
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
No, I meant nobody knows what number 2 or number 10 etc for colour is. Also nobody is going to try each one of them one for one, so a preview/example text with all colours is very user friendly.
yes, that is more clear.
No, I'm from the Netherlands.
Website icons can be used for each folder, if I'm correct. I zipped number 5 here: //edit: hmm. with this way of presenting colours, i think numbers 2, 4 and 17 are pretty useless.. they look to be double
//edit2: I do like that most colours represent a gang in gta2. now you can't see it that clearly anymore. oh well...
yes, that is more clear.
No, I'm from the Netherlands.
Website icons can be used for each folder, if I'm correct. I zipped number 5 here: //edit: hmm. with this way of presenting colours, i think numbers 2, 4 and 17 are pretty useless.. they look to be double
//edit2: I do like that most colours represent a gang in gta2. now you can't see it that clearly anymore. oh well...
"Mmmm, your eyes are so beautiful."
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
favicon added.
yes the colors are weird, very similar colors alot there. wonder who chose them?
edit: how do i set Firefox to display the color in the listbox when i select it? O_O works on IE without any hacks ... do i really need to put JS in there...?
yes the colors are weird, very similar colors alot there. wonder who chose them?
edit: how do i set Firefox to display the color in the listbox when i select it? O_O works on IE without any hacks ... do i really need to put JS in there...?
My GTA2 related projects:
- Cuban-Pete
- Immortal
- Posts: 909
- Joined: 29 Jan 2010, 15:03
- GH nick: Cuban-Pete
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
lol, me. but based on colours used on polish forum. as far as I can remember they used different colours for gangs and on the website (gta2.info) the first time in gta2 community (2-4 years ago)
"Mmmm, your eyes are so beautiful."
- Cuban-Pete
- Immortal
- Posts: 909
- Joined: 29 Jan 2010, 15:03
- GH nick: Cuban-Pete
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
I must say that you did some nice (programming) work on this project. Thanks!
"Mmmm, your eyes are so beautiful."
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
You're welcome!
Was fun project for me too Hadnt programmed on PHP for a while.
Was fun project for me too Hadnt programmed on PHP for a while.
My GTA2 related projects:
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
My GTA2 related projects:
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
Thanks. http://gtamp.com/text is now using the "ultra final version".
- Cuban-Pete
- Immortal
- Posts: 909
- Joined: 29 Jan 2010, 15:03
- GH nick: Cuban-Pete
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
Maybe promote this awesome feature/webpage a little more? Maybe even use it on GH chat box for crazy rolling rock Fridays, lol.Sektor wrote:Thanks. http://gtamp.com/text is now using the "ultra final version".
"Mmmm, your eyes are so beautiful."
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
make gta2 more popular.
that should do it.
i might implement it on the maplist page to some extent at some point but atm there are so many other things that should be done first
that should do it.
i might implement it on the maplist page to some extent at some point but atm there are so many other things that should be done first
yur sa'nok ngeyä
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
i played around with it
http://gta2dare.omnitude.net/maplist/li ... &skin=font
http://gta2dare.omnitude.net/maplist/li ... &skin=font
yur sa'nok ngeyä
Re: GTA2 Font Topic - TXT2GTA2 (Version 3 Released!)
I added GTA2 text as BBcode:
Code: Select all
[t]text[/t]