So I returned to the forums couple of weeks ago after a while (year or two).
I noticed that there was some problems and pixel art was blurry in Google Chrome. So I decided to do something about it and hacked together an extension to fix the problems.
You can download the unpacked extension here (http://bantza.raah.fi/junk/AGSForum.zip). It is unpacked, so to install it: unzip to folder, enable "Developer mode" on Chrome's Extensions page and "Load unpacked extension".
Feel free to poke around the code to make it better or to use this approach to make a generic extension for enjoying pixel art in Chrome.
Features:
- Sharp zoomable images for pixel art in posts.
- Fixed links to forum and games database. (These have been fixed since, I think?)
- Change the layout of forum frontpage a little.
- Disable animation on avatars and make them sharp.
- Remove Facebook & Twitter.
It would of course be a lot better to actually report problems with the forums, rather than hacking your own solution that the majority of users wouldn't use.
The pixel art zoom thing changed a few weeks ago (http://www.adventuregamestudio.co.uk/forums/index.php?topic=47585.0) for most browsers, it just doesn't seem to work properly on WebKit yet. If you can suggest how to get that working on Chrome et al, that would probably be the best solution.
Quote from: AGA on Thu 21/02/2013 12:11:48
It would of course be a lot better to actually report problems with the forums, rather than hacking your own solution that the majority of users wouldn't use.
Well the only real problem with the forum was the broken links and they seem to be fixed anyway. And it was so basic thing to do after changing domains that I figured fix was already on the way.
Only reason I wanted to share this was that blurry image thing and I though there might be some Chrome users who could benefit from this.
Quote from: AGA on Thu 21/02/2013 12:11:48
The pixel art zoom thing changed a few weeks ago (http://www.adventuregamestudio.co.uk/forums/index.php?topic=47585.0) for most browsers, it just doesn't seem to work properly on WebKit yet. If you can suggest how to get that working on Chrome et al, that would probably be the best solution.
There is no CSS solution for this in Chrome that I'm aware of. Issue has been tracked many years ago, but nothing has happened to it. How it works in this extension is that IMG-tag is replaced with CANVAS-tag where the image is rendered without filtering.
Quote from: zabnat on Thu 21/02/2013 13:03:57
There is no CSS solution for this in Chrome that I'm aware of. Issue has been tracked many years ago, but nothing has happened to it. How it works in this extension is that IMG-tag is replaced with CANVAS-tag where the image is rendered without filtering.
Hmm. Well the image zoom function is JavaScript, not server side. So it might be possible to hack it to use a <canvas> to redraw the image if the user's browser is reported as being sufficiently modern to understand HTML 5. I'll take a look when I get the chance.
This is the full list of CSS commands for nearest neighbour:
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering:optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
Tried that, but it only seems to work non blurrily on Firefox:
function setZoomLevel(obj, lvl)
{
obj = obj.parentNode.parentNode;
img = new Image();
realImg = obj.getElementsByTagName("img")[0];
img.src = realImg.src;
realImg.width = img.width * lvl;
realImg.height = img.height * lvl;
obj.style.width = realImg.width + "px";
obj.style.cssText += "image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor;";
}
IE8 and Chrome both seem to still be blurry.
"-ms-interpolation-mode: nearest-neighbor;" works for me in IE8 WIN7.
Apparently "image-rendering:-webkit-optimize-contrast;" currently only works in OSX version of Chrome.
There might be a deal breaker in using canvas: Animated images. Canvas can be animated, but for some unknown reason animation only works in Chrome when there are less than about 70000 pixels on the canvas. Above that, only first frame is shown. Furthermore, showing the first frame seems to be the specified behavior and animation on smaller images might stop working in future.