I'm wanting to create retina sprites to support #1x, #2x, #3x, #4x retina displays. I'm using Codekit, hooked up to an external version of Compass. I've tried a few plugins out:
https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass
https://github.com/Gaya/Retina-Sprites-for-Compass
which allow for the easy creation of #1x and #2x, but I can't find a simple solution for creating the other sizes.
I'd like to be able to include the sprite on any class or pseudo class rather than generating a separate sprites stylesheet or block of CSS.
In an ideal world, all the sprites would be on one spritesheet as I don't think I'll be using any javascript to preload and I'd like to have as few HTTPs requests as possible
Thank you for your time,
Related
Framework: Phaser.js version 3
Symfony 5
Langage: Javascript,
HTML5,
CSS3
Hello, I'm learning Phaser.js 3; I would like to create smooth animations (25fps) with lots of frames in my spritesheet. Is it possible to use large spritesheets to create animations without writing the name of each frame each time? If I have 230 frames, I cannot write the name of each frame... Thank you in advance for your answer
Yes it should be possible, you can generate the names with generateFrameNames or generateFrameNumbers, here is the link to the documentation, and here an example.
Or you can use a configuration file (json) to define the animations, like shown in this example.
for this there are texture packer tools, for example this one http://free-tex-packer.com/, that can help.
btw.: If you want smooth animations, and havn't created the spritesheets already, may be (spine-)bones animations might be a easy and space saving option, here is two example from the official website http://phaser.io/examples/v3/view/spine/basic-spineboy and http://phaser.io/examples/v3/view/spine/batch-test
Here a short video highlights the benefits of bones for phaser games https://www.youtube.com/watch?v=sq6mnix8eAg , it is very basic and not very technical
In a Qt Quick Controls 2 project, I need to draw several animated SVG. As the AnimatedImage doesn't support the SVG animation, I could find a solution to achieve that by creating my own c++ component and by using a timer to refresh the animation every x time. For that reason I know that my animated SVG are supported correctly by the QtSvg renderer.
However I want a solution supported natively by the AnimatedImage qt quick control. Actually I'm able to compile and modify the code of the native QtSvg module, as well as its qsvg plugin, which is the bridge between the QtSvg module and the QImageIOHandler interface, used by the AnimatedImage to draw the content.
But even if I add the necessary code in the plugin to support the animation (Animation property support, functions related to the animation, ...), the AnimatedImage component continue to draw a static SVG.
I dug a lot in the plugin's caller source code, and I deduced some conclusions:
The plugin caller cache the frames in several QPixmap, and read the animation loop only once (then the cache is replayed)
The read() function is called several times in the plugin if, an only if, the source image file is divided in frames, like it's the case e.g in GIF images, or in cursor (.cur) files, so a frame is read and cached, then the file cursor is moved to the next frame, and the next frame is read and cached, and so on
For that reason the way the SVG images are animated may be incompatible with the Qt animated image engine, because the whole SVG data are read only once, which notifies the engine that the image contains only one frame, instead of considering that the frame count should be determined by the duration and the FPS
For that reason I have the following questions:
Are my above conclusions correct? If not, how is working the AnimatedImage and the Qt image plugins under the hood?
Is there a way to create a Qt image plugin which supports the animated SVG images? If yes, how can I do that?
I could not find a good, well explained document about how to create animated image plugin, can someone advise me one?
Why Qt didn't plan to support animated SVG natively, and is there anything planned in the future to fix a such situation?
NOTE I know that I may use the QtWebEngine to support animated SVGs, but it's not an option for me, because:
QtWebEngine adds ~300Mo to my application. As its current size is ~10Mo, a such increase isn't relevant to just show several animated images.
QtWebEngine brings several side effects in my case, which have no response, like e.g: https://forum.qt.io/topic/114326/webengine-how-to-draw-an-animated-svg-above-a-transparent-web-view
So please don't propose a such alternative as a solution.
I'm building a new app with this great tool and i have a question to solve.
What is the best way to handle imnage size for multiple scren and multiple devices.
Apple = retina and non-retina
Android = ldpi, mdpi, hdpi, xhdpi, xxhdpi and tablets (all this with multiple screen resolution)
BlackBerry10 = one resolution (but not equal to the others)
WindowsPhone8 = one resolution (but not equal to the others)
For this case, what is the best way ?
Use SVG images (Optimizacion, perfomance, size of app) ??
Dedicate CSS tags for device pixel ratio (CSS Image Replacement) (the designer can kill me :smile: lol ) see the list http://bjango.com/articles/min-device-pixel-ratio/
CSS Sprite sheet
Another way
Before the decision, think in what is the best to apply in all devices.
Thanks in advance
There really isn't a single way to do this since each implementation of an image will require a different approach depending on its purpose. SVGs are great but not everything works as an SVG.
Media queries will be your ally.
See this: supporting multiple resolution and density of images in phonegap
and this for an alternate approach: Angular.js data-bind background images using media queries
There are also some nice polyfills for the html5 picture element which you might find useful.
See: https://github.com/scottjehl/picturefill
...and its angularjs directive implementation https://github.com/tinacious/angular-picturefill
Referring to the kind of look of the images seen on this site - http://sl.dream-theme.com/html/albums-light.html (I'm in no way involved with this WP theme, just providing an example). The author is using jRaphael to create "path cuts" which is a nice and browser-safe approach, but I'd like to avoid including an additional library solely for that purpose.
very basic:
http://dabblet.com/gist/2874826
uses css pseudo elements to mask the image (pretty descent browser support -- will render as a square image in legacy browsers, probably nbd?)
If shadows / borders / things are needed you could add and additional wrapper to fake the slanted borders using more pseudo elements or a manipulated (transformed) box, or something.
i'm buildling a website and I want to create a translucid menu. I know that .gif image types enable transparency, but from my experience, not translucidy(anything between being transparent and opaque) - by default it seems to set the opacity to 100%, ie a solid image without any translucity/transparency.
I'm not sure if the issue is with the file type, or with how I'm exporting my menu. If it's worth anything, I'm using Fireworks to create and export my menu.
As is, I'm exporting my seperate files for my menu as .pngs, which seem to support translucent images, but I know that I'll be wanting to reduce the file size of these images soon, so is there a better alternative to getting a semi-transparent image other than using the .png file type?
Thanks,
Patrick
I'd say PNG is probably the best bet. The more modern browsers (read: not IE6) understand the 8-bit alpha channel it provides, whereas GIFs just have the transparency key.
Often these days, the bottleneck on sites isn't the size of the image (either in dimensions or in data) but rather the number of requests that it takes to load a page. More modern website designs try to pack as many images into one using techniques like CSS Spriting (woot.com, most of google). The other bottleneck is often not setting caching up correctly, forcing return visitors to reload a bunch of stuff.
You'll see google's various pages caching everything it can, and reducing the number of things a single page needs to download (combine all Javascripts into one, all CSS stylesheets into one) so that the browser is make 2 and 3 requests instead of 15-20.
I'd go with PNGs, and look into CSS sprites and caching as an alternative optimization.
See here for an example of an image sprite used on google's homepage.