I'm making a top-down game in flash, and I need to have the whole game zoomed in; the characters and scenery are really small. If I increase the height and width in flash, it messes up the image, putting pixels and strange coloration where they shouldn't be. What I am looking for is a way to change the size of the pixels, or something to that effect.
You'll 'mess up' a bitmapped image by enlarging it beyond its resolution. Two easy solutions: 1. Make your characters and scenery as vector images. Or 2. If you want them to be bitmaps (jpgs, png, whatever) create them initially at a size == the largest size you'll get to in your zoom. Then scale them down on stage to their starting scale. When you zoom in they'll look good.
Related
I've got a couple questions about the use of images in a html document that I couldn't find an answer for.
Why is the standard 12x12 / 24x24 / 48x48 / 96x96 /... and not 8x8 /
16x16 / 32x32 / 64x64 / ... ?
Why is a 130x130px image resized to 50x50px by the browser (by
setting its width/height in the html doc) going to be more blurry
than a 100x100 image resized to 50x50 ? (is it just easier for the
browser to divide the size by 2 ?)
Is there a specific resolution for images that is worth using over another to be
more 4k friendly ? For instance using 384x384px images instead of
96x96 for 4K screen owners ?
1. Why are there icon size standards?
First of all there are no "standard" sizes for icons but it is always a good idea to create icons with a equal ratio = square images. That does not mean you are not allowed to break the rules, but it depens for which medium you are creating the icons. Android using a differend base size then iOS, because they need to support different resolutions. For desktop it is always good to start from a scale of 16px as a base. reference for icon sizes
2. Why get images blurry when resizes?
Image you are the browser and you need to repaint your 120x120px pixel image into an 50x50 canvas. The problem you face right now is that you need to decides on several point which color to choose especially on edges? What the browser does ist to mix up colors for edges where he knows there is not more enoug space to display it crisp. This is causing the "blurry" effect. No think about resizing the 120x120 to the half. Thats a lot more easier because you dont need to mix colors anymore. Or in more technical term:
Well rastered images when scaled in either direction are going to have some anomalies. When you make them bigger, it’s obvious – things get pixelated quickly. When you shrink them down, whatever is rendering it has to guess on what pixel goes where. https://css-tricks.com/forums/topic/scaling-down-images-with-css-makes-them-blurry/#post-188194
3. Are there a specific resolution for images
Thats basicly a very good question and opens the topic of "responsive" Images. As you know the pixen density on 4k Monitors / Smartphones is a lot higher then on regular screen. The fact that images cannot scale the informations by themself makes them pixelated when enlarged and blurry when shrinked. Best case would be to use SVG as often as you can, icons are best usecase for icons. Normally just putting the bigges image online would do the task, but performancewise it would be catastrophical. If you want to master this topic I can give you some good links to dive in:
https://css-tricks.com/optimizing-large-scale-displays/
https://css-tricks.com/responsive-images-css/
Hope thats answers, at least, a bit of your worries :)
I'm developing a game using libGDX framework but I have some problems trying to adapt it to different resolutions. I'll give an example of the problems I'm having.
I use Scene2D to show a simple menu. That menu have some buttons with textures loaded from a texture atlas (button textures are 9patch). In desktop, with a resolution of 800x480 the buttons look nice (even the BitmapFont) but in Android, where I use setViewport to keep the width (800px) but scale the height keeping the aspect ratio, I get pixelated images. I think that this is because my mobile higher resolution. The whole stage must be scaled to fit so the images appear pixelated.
So, my question is, what is the best way to solve this? How can I support different resolutions without end with a pixel art look?
What resolution is the android device you tested it on? You said you've used 9-patch images. This should not produce pix-elated results unless your setting them to a size and then modifying their scale(difference between screen resolution and viewport size). If you don't want any scaling you should use your screens width or height for the viewport and calculate the other one by keeping your aspect ratio. This means that you'll have to build all your object's sizes at runtime based on your new viewport.
There isn't a one way fit all solution for such problems so you'll have to find which one suits your app. You can define your button sizes as % of screen's width or height; Or set them to a fixed value and adjust the spaces between them; or a combination of both(make an object partially bigger and modify the space between them).
I am working with box2d, and generating a few grounds of variable size (all rectangles). The image the grounds use is 500px by 200px, however, when I create and size my grounds, the background image stretches to fill the body. I am trying to have it aligned to top left and just tile with no resizing but am really unsure of how to control it.
I imported the image as a movieclip to my library, if it helps, and also have a basic empty class for it (EarthGround.as). I've been doing a little research but really haven't found anything definitive about manipulating the movieclips associated image.
You have to be specific with that. Maybe a screen shot would help.
Until then, possible causes could be:
Box2D uses real world values where 1 pixel = 1 meter. You have to
choose a scale factor.
Box2d uses the center of any object as its registration point. You
should always do the same with your flash sprite/movieclip, to keep
it simple.
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.
I was wondering if anyone has done any tests with background images. We normally create a background that repeats at least in one direction (x or y or both).
Example
Let's say we have a gradient background that repeats in X direction. Gradient height is 400px. We have several possibilities. We can create as small image as possible (1 pixel width and 400 pixels high) or we can create a larger image with 400 pixels height.
Observation
Since gradient is 400 pixels high we probably won't choose GIF format, because it can only store 256 adaptive colours. Maybe that's enaough if our gradient is subtle, since it doesn't have that many, but otherwise we'll probably rather store image as a 24-bit PNG image to preserve complete gradient detail.
Dilemma
Should we create an image of 1×400 px size that will be repeated n times horizontally or should we create an image of 100×400 px size to speed up rendering in the browser and have a larger image file size.
So. Image size vs. rendering speed? Which one wins? Anyone cares to test this? With regards to browser rendering speed and possible small image redraw flickering...
The rendering speed is the bottleneck here, since bigger tiles can be put into the browser's cache.
I've actually tried this for the major browsers, and at least some of them rendered noticeably slow on very small tiles.
So if increasing the bitmap size does not result in ridiculously big file sizes, I would definately go with that. Test it yourself and see. (Remember to include IE6, as still many people are stuck with it).
You might be able to strike a good balance between bitmap size and file size, but in general I'd try 50x400, 100x400, 200x400 and even 400x400 pixels.
I found out that there may be a huge difference in the rendering performance of the browser, if you have a background-image with width of 1px and repeating it. It's better to have a background-image with slightly larger dimensions. So a image with a width of 100px performs much better in the browser. This especially comes into play when you use a repeated background-image in a draggable layer on your website. The drag-performance is pretty bad with an often-repeated background-image.
I'd like to point out that for the cost of sending down an extra few rows (1-2 only example here) .8k - 1.6kb (if you can get away with 8-bit) more like 2.4kb - 4.0kb for 24bit
2 pixel columns more means the required iterations required to blit the background in is cut down to 1/3 for up to 1.6kb (8-bit) or 4kb (24bit)
even 1 extra column halves the blitting required down to half the element width.
If the background's done in less than a second for a 56.6k modem I reckon it's lean enough.
If small dimensions of an image have a negative impact on rendering, I'm sure any decent browser would blit the image internally a few times before tiling.
That said, I tend not to use 1 pixel image dimensions, so I can see the image clearly without resizing it. PNG compression is good enough to handle this at very little cost to file size, in most situations.
I'd put money on the bottleneck being the image download rather than the rendering engine doing the tiling, so go for the 1 pixel wide option.
Also the 24-bit PNG is redundant since you're still only getting 8 bits per channel (red, green and blue).
I generally prefer to go in between, 1pixel wide will probably make your gradient seem a bit unclear but you can do something like 5pixel width which gives enough room to the gradient to maintain consistency and clarity across the page.. but I would suggest you can add more patterns and images to a single image and then use background positioning(css sprites) to position them because download a single image of say 50kb would take less time comapared to 5 40kb images since the browser makes fewer requests to the server...
I have not benchmarked this but I'd bet that on most modern computers the rendering won't be an issue whereas you always want to save on on the image download time. I often go for the 1px type of graphics.