I have a problem where the images look a little pixelated because they have been scaled down alot, just need a way to make everything appear smoother.
I need the game I'm making to look high quality and also work at different resolutions so when I made all the graphics I made them massive and same for the stage size in flash.
The stage size is 2000*1500 and it's being scaled down to 800*600 which is an exact ratio, I didn't expect to see pixelization when scaling the images DOWN, that's why I made them so large.
If there's no options for smoothing things out, then does anyone know the best option for swapping images at run-time? This way I can have pre-made images for all the most popular resolutions.
If you are using bitmaps, try smoothing and pixelsnapping:
image.smoothing = true;
image.pixelSnapping = "never";
If you have library images (bitmaps), try changing "Allow Smoothing" and "Compression"
If you want to automate this you can use JSFL:
http://mrsteel.wordpress.com/2007/06/12/flash-jsfl-script-allow-smoothing-on-all-bitmaps-in-library/
Related
What sort of approach should I take when I'm writing a game that uses sprites.
Say for example, my phone runs with a 1080p resolution. If I wanted to run my game on my phone without some weird stretching going on, would I have to use a large sprite sheet with huge sprites, or would I just write the game with a small sprite sheet, using the original sizes for each sprite (without upscaling), and just let everything be automatically scaled by LibGDX?
Thank you!
I would recommend storing the image larger. You could then enable mipmapping and tweak the texture filters. (See libgdx texture filters and mipmap)
This way, the image gets automatically scaled into a variety of sizes on runtime, and then the appropriate image gets selected depending on the size the image is shown.
See this:
http://real-sense.com/index.php?option=com_content&view=article&id=106
The set of vertical images on the right are being resized using CSS
.thumbnail-product-resize
{
width:144px;
height : auto;
}
Does anyone know how to do this in a cleaner way so I don't lose quality on the image?
I mean that if I had resized the image using photoshop, the text won't appear as blurry as it does here.
Tested in FF
Thanks
The quality of your images will depend on the original size of the image you use. If have a large image with good quality, say of size 400x500, and it is then resized in the HTML to 80x100, it will still be a 400x500 image. However you can only fit a certain number of pixels on a smaller image of 80x100, so this bigger image has to be sampled. This means that an average is taken of pixels and then made to represent a 80x100 size image.
If you want a more definite result you can change to original size of the image to 80x100. This will probably give you better results.
Once upon a time browser image resizing gave truly heinous results due to the unsophisticated nearest neighbor technique they used to scale images. Now they usually perform filtering when scaling and there isn't that much difference between in-browser resizing and resizing in Photoshop.
The real advantage to scaling an image before serving it to the client is that you aren't forcing the download of large images when they aren't necessary. Depending on the size of your images, this can significantly reduce your page load times.
One final thing to consider is that more and more people have devices with "retina" displays. For those users scaling the image before serving it will result in much less crisp images.
Here's an in-depth comparison of the image scaling methods used by various browsers: http://entropymine.com/resamplescope/notes/browsers/
Even if you had done this in photoshop those images you have would still appear pretty much the way do just now.
FYI you don't need to include height:auto in your CSS above.
Best bet would be to create a seperate set of thumbnails (using photoshop) which maybe just show a portion of the image.
Loading the thumbnails and resizing them with css the way you are doing is bad practice as you are still having the user download the large images first.
It is impossible to shrink an image without loosing quality unless it is an vector-image. That would mean that you'd have to use SVG. And considering the images displayed I don't think you wan't to do that.
Also you mentioned the cleaner way to do it, use photoshop or something similar.
When I'm scaling down big images using canvas and drawImage method, the result is far from perfect.
Compare this images. Left one is actually the canvas with scaled image and the right one is a desirable result. Original of this images is 1600x900 photo. Scale goes from original size to 200x113.
When original image have less width and height or scaling ratio more (ie 0.5 - 0.9), then all fine. But I need to get my users ability to resize big images and make nice thumbnails.
I tried to scale image with multiple small steps (for example 1600px -> 1000px -> 500px -> 200px), the result was better, but it's very bad for perfomance, so I refused this.
If achievement of my goal using HTML5 and canvas now isn't possible, is there any chance that in future it will? I'm just thinking whether should I refuse HTML5 technology and make uploading on ActionScript or keep trying (or waiting) to do this with HTML5? I like HTML5 and actually I don't want to leave such a friendly technology.
The left image was scaled down using a more-primitive form of re-sampling or interpolation. This may be entirely due to how the browser's rendering engine happens to scale images, with the results varying from browser to browser.
If it's an option, one approach where you have full control over the resulting image quality is to upload the image, scale it on the server, and then download it back to the client.
Another approach is to use a JS library to resample the image on the client side. Not sure how practical that is.
I created a black and white collage consisting of a number of images - but saved the file as 1280*1024 - ideally encompassing that rez of a screen.
The issue is, would it be wiser to have the background scale, and stretch the images in the case of a larger screen or should I have it repeat so as not to lose resolution, and have smaller screens cropped from some of the background?
Thanks for any insight!
I personally don't think scaling an image up is ever an option. It's incredibly noticeable, and it doesn't look good. I would recommend using a background image that at least works on 1920 x 1080, and gracefully fade out the image on the edges or tiles well so if someone sees the page on an even larger screen, there aren't strong lines on the edges of the background.
If you are concerned about the bandwidth involved in large images, check out CSS3 Media Queries. All mobile browsers support this CSS3 module, and it will allow you to target certain resolutions and send them smaller images (both in dimensions and file size).
If your image does tile well, I would recommend going with the smallest pattern, and letting css do the repetition for you. There's no point in pushing more pixels down the pipe than necessary.
It's up to the user really but they obviously can't make that decision. I'd scale it but that's not as easy as tiling it. I've never successfully scaled a background image.
It will also depend on your preference.
Are you okay with having a stretched image as a background, in case the user has a larger screen? If yes, then by all means set the background image to stretch. Or, are you more keen on preserving the integrity of the image? In the latter case, it's much better to have the image tile.
If you're interested in creating a full page background image, try one of these techniques found on CSS Tricks: "Perfect Full Page Background Image".
In Flash I have some PNG images, and I wish these images to become 50% larger on hover. However the tween I have used to make them larger distorts the quality of the images considerably.
For the tween I am not using any external libraries and I am using a standard scaleX tween.
Is there a way around this loss of quality?
Yes, start with images that are of the largest size they'll ever be, and scale them DOWN from there. So in your case, the normal size of the images will be 50% larger than they are now, which is how they will appear when hovered-over. When they are not hovered over, scale them down by 33%.
Also, make sure the bitmap.smoothing is set to true - I think this makes the flash smooth the bitmap even when scaling down.