I am currently using Flash CS4 to make some sprites. The sprite is completely vector based and should therefore have good quality. However, once I apply some 3D properties to anything, it becomes very aliased. Is there some quality setting I'm missing?
stage.quality = StageQuality.HIGH;
High quality is the default, but if it isn't with you for some reason, that line should and fix it. It might slow it down some though you know. Especially if you have a lot to anti-alias. (There's also a "best" quality which smooths non-static bitmaps if you want to try that.)
Related
I wonder, if it is more beneficial to use the abilities of QML for animations, or prefer to use animation files (such as GIF oder MNG) for simple, small-scale animations.
Examples for what I call "simple, small-scale animations" are:
turning Hourglasses
those rotating dots, known from video platforms, while loading
flashing alert symbols
those "recharging buttons" known from many RPGs used for special attacks
I don't know much about the internals of Qt, so I am unsure, whether I benefit from hardware acceleration, when programming the animations (e.g. image rotation) or not. And if so, whether this hardware acceleration outperforms the display of pre-calculated animations from GIF and MNG.
Greetings and thanks,
-m-
I wouldn't worry about things like this unless they visibly slow the performance of your application. Some points to consider:
The use cases you mentioned almost always involve only one "busy indicator" being visible at a time.
Both Image and AnimatedImage have the high DPI #*x file look-up.
Both Image and AnimatedImage support caching.
Both Image and AnimatedImage will use the Qt Quick scene graph to display the images (OpenGL textures, which should result in hardware acceleration).
AnimatedImage has to read several images, but won't require rotation.
Rotation of images is pretty cheap, as far as I know.
It's trivial to swap out one with the other, or with something else.
If you're looking for good general performance advice, read the Performance Considerations And Suggestions documentation.
I am looking to make a website dynamically scale its assets (png/jpg) and output the appropriate css for three sets of resolutions: 540p, 720p, 1080p
Currently we have assets created for each resolution, so thats 3 sets maintained manually, ideally I want a Jenkins/hudson job to create the assets (by scaling from the highest resolution asset set, maybe use imagemagick commandline) and then generate CSS to make the resolution layout possible.
This is clearly not an old or unique problem, I am wondering what is the best approach to take for this?
The webpage is intended for low computing power embedded devices, which have limited capability, albeit HTML5 supporting. The solution has to be a server side creation of assets and CSS scaling as we cannot rely on the devices to be able to cope with much scaling.
Look forward to your thoughts and replies.
Cheers in advance.
Not a real solution, but rather a work-around which is working well and is easier to maintain:
Replace PNGs with SGVs. Take the highest resolution version and use something like http://vectormagic.com.
For JPGs take the highest resolution version, but compress it heavily and use something like ImageOptim. This works well for:
Browsers are nowadays very good at resizing higher resolution images to smaller ones.
Since the pixel density is so high if you are using the full size, the compression (artifacts) will be much less visible. And if your browser is scaling down, artifacts will be less visible because of the smoothing your browser applies.
File sizes will be bigger, but not much, since you can use a higher compression and it's getting more efficient with the image's size.
Reference: http://www.fngtps.com/2012/reasonable-ways-to-use-high-resolution-images-on-retina-displays/
I currently use a repeating pattern of raster images on one of my websites, which isn't so complex that it couldn't be converted to vector, but hasn't, as of yet, been scaled up to look decent on HiDPI/Retina displays.
I'm considering converting the raster pattern to vector, and setting the resulting .svg image as the background, but I want to know whether there are any disadvantages to using vector images in a website background.
Depending on the complexity of the image (filters, masks, gradients...), it could consume more CPU to render the image; the good thing is that more and more graphic tasks are sent to the GPU, so that's not a big problem
Not compatible with older browsers
Browser support isn't perfect yet, so if you're using complex features, there might be differences in the way the final image looks
But I strongly believe that vector graphics have much more advantages than disadvantages, so go for it.
I have to create a pretty complex map which is divided in pieces, which themselves are each pretty complex polygonal structures. These are given to me as transparent PNGs. Obviously i can't just use the rectangular PNG itself to define each mouse-sensitive area.
First and last thing that came to my mind was using Image-Maps.
But before i go down that road, i wanted to ask whether anyone could think of a more modern solution to this?
Browser support requirements are IE >= 7, FF >= 3, newer Chrome & Opera. So usage of CANVAS might not be an option.
When designing web documents, you should always choose the thing which come closes to expressing your intent, so that your documents are most adaptable to use-cases you didn't think of.
An image map is entirely appropriate for placing links on map images. <canvas> makes your document less interpretable. SVG would be a reasonable choice if it fits your data well, but is less widely implemented than image maps.
SVG would be a good choice, there are plugins to add compatibility for ancient IE versions. There's nothing really wrong with maps, just make sure it's really clear where the links go as the status bar doesn't have the info like a normal link.
IE7 won't do SVG or Canvas (unless you like plugins as Mr. Bradshaw points out), and while VML might work there, it is a quagmire. You could use some javascript to compute point-in-polygon on mousemove. But really, image-maps (either client-side or server-side) will probably be the simplest approach.
Currently, I'm scaling a 118x118 pixel PNG graphic to 19x19 and it looks terrible in IE7.
Just to note, I'm utilizing -ms-interpolation-mode: bicubic;
** Does IE generally not work as intended with PNGs?
Thanks
In general, trying to deliver a 120-ish pixel image and display it to the user at 20-ish pixels is not the best idea. You're going to have high overhead from the loading of the image that you don't really need, plus it's nearly always going to scale at a much lower quality than you could get from a rasterized image (and you're sending vector)
It's also not the best idea to be doing things so proprietary as using Microsoft's "special" functions. Yes, they work. But again, you're sending additional overhead to support one browser that's losing market share by the day. Insist on w3 standard functionality to do your work and everyone will be happier in the long run....especially the person who picks up your legacy code.
If you HAVE to do it this way, make use of an image manipulation library like GD or ImageMagick. Or, more simply, take the time to properly format your image or icon down with Photoshop, Gimp, or the like. For 2-3 minutes' worth of work, you'll have a happier user and be able to move on to more important things.