I've been experimenting with createjs to convert some flash as3 animations to HTML5. everything works fine in desktop browsers, but on an i-pad the animation are considerably slower. Where there are complex vector objects they are so slow as to be unusable. I can speed things up by caching the objects, but the quality of the resulting graphics is poor. Are there any solutions to this problem?
Thanks in advance
Pete
take a look on canvas size. after a centain size the mobile vídeo boards cannot accelerate the graphics like pc does.
Tip #4. Watch The Size of Your Canvas
Obviously, the larger the canvas the more costly the drawing
operation, but if you’re targeting mobile devices, there are some size
limits you must keep in mind.
From Safari Web Content Guide:
The maximum size for a canvas element is 3 megapixels for devices with
less than 256 MB RAM and 5 megapixels for devices with greater or
equal than 256 MB RAM
So if you want to support Apple’s older hardware, the size of your
canvas cannot exceed 2048×1464.
But that’s not all! Even with smaller sizes, you have to keep your
canvas’s aspect ratio between ~3/4 and ~4/3. If you step outside those
boundaries, webkit seems to switch to a totally different rendering
mode splitting the canvas into multiple fixed-size areas and rendering
them separately with a noticeable delay between them.
There doesn’t seem to be any documentation on this but I have
confirmed this happens on both Chrome and Safari on iOS versions 6.0.1
and 5.1.1.
source http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/
Related
I have an app and want to place a graphics in it. If i make a graphics in high resolution,for example 2048 x 1536 (iPad), is there a way to downscale it properly to other devices with lower res? My goal is to avoid making n versions of graphics for diferent devices (#2x, ipad, etc...), all of them beign basically the same image just downsized in Photoshop. I would prefer to make one very high resolution graphics and downscale in iOS automaticaly (preserving ratio).
Don't do this. When you go into a memory constrained device you'll have a higher chance to crash! Eg. putting iPhone 6 Plus (#3x) graphics into the lowest iOS 8 compatible device the iPod Touch.
I recommend if you don't want to do multiple images, mind you this is really trivial to do... You can try an application like PaintCode, it will inflate your binary a little but its usually smaller than an image set.
I got used to track my apps by GA. However I haven't payed attention before to its size, until I added ipad, iphone 6/6+ support to my app, and size increased over 50 mb. I deem it really awful for a utility app. But all those png's with high resolution graphics produce valuable size content and libGoogleAnalyticsServices.a, which now has size of 11,4 MB. I attach GA version 3 using cocoapods, is there a way to minimize the library?
I'm developing a game with lots of graphics for iOS platform. None of the graphics are dynamic, they're all ready made images. There are 6 layers on the screen and each layer contains 3-4 graphics objects in average that constantly scroll to left, each with different speeds. So with each screen refresh about 20-25 objects are scrolled, removed from screen and added again from right. The game is universal so images of all sizes present in the resources folder.On iPads, iPhone 5, iPhone 5s it goes smooth. But on 4th Gen iPod touch I notice some hiccup.
When I test the app with Instruments, I notice a critic memory problem at start and then the problem goes away. So this is all because I load all the above graphics on application start. All the images are combined into 4 different sprite sheets. So here's my question:
Is it the weight in kilobytes that matters or is it the dimensions? I'm asking this because I reduced the size of the images by about 70-80 percents, though their height and width remain the same, but that memory problem still exists.
If you are reducing the size of the images by utilizing compression, then expect there to be delay and a memory hit as the images are uncompressed when first loaded, and they will take up as much memory as they did before compression.
The 4th generation iPod Touch probably is having some memory pressures and it will try to release memory elsewhere in order to allow for your images to load up and stay in memory. That may be the hiccup you see, as other apps, like Mobile Safari or Mail are asked to give up some memory or to terminate.
(The size the images take in the resources folder is inconsequential. It is the size they take when they are uncompressed and in memory that matters).
You could make the images smaller by making them 4bit instead of 8bit color, or you could make them monochrome. You can also use a non-retina size or smaller, and then let the OS stretch them out to fit the space required. I would try to use the best images first, and if you get a memory warning (didReceiveMemoryWarning), then reload with the images that are less dense.
you can not load all image before the game beginning, you should use the cache to control the size of the memory. And before the scenery of game change ,the release the cache ,reload the need ones.
So you must control your resource dependents in the every game scenery.
This is the common method to management the large resource application.
I have an app based on "OpenGL Game" Xcode template, for everyday testing/dev I would like to render full screen but at lower resolution in simulator (e.g. 1/2 or 1/4). Any efficient/savvy way to put this in place?
(in case anybody wonder, I want to do this because my app is running very slow in simulator, so rendering at a smaller resolution would make testing/debugging a lot more programmer-friendly)
The contentScaleFactor of the view is 2.0 by default on a Retina display. If you reduce the scale factor, GLKView automatically uses a smaller framebuffer and scales its contents up to screen size for display.
Scale factor 1.0 is half size (or the same number of pixels as a non-Retina screen). 0.5 would be quarter size — big, chunky pixels on any display. Non-integral scale factors between 1.0 and 2.0 work, too, and can be a great way to compromise between quality and performance on a Retina display.
Update: just had a vote remind me of this answer. I'm surprised I wouldn't have said this originally, but I may as well add it now...
The iOS Simulator runs OpenGL ES using a software renderer (i.e. on the host Mac's CPU, not its GPU). That's why it's slow. Performance characteristics and rendering results can vary from renderer to renderer, so never trust the simulator for anything OpenGL/GPU-related (except perhaps in very broad strokes).
I'm working on an iOS app using PhoneGap. I ran into an annoying problem where some of my images weren't loading. Thinking it was a cache issue I played around swapping images.
I finally discovered that the issue had to do with the height of my image. After a whole bunch of trial and error I discovered that an image taller than 7864px will not load in the iPad simulator or the iPad itself. It will load fine in Safari. It's not a file size limitation as these are only 45k in size and I'm loading images that are 700k in size elsewhere without a problem.
Has anyone run into this? I can't find any documented restrictions on image dimensions within mobile Safari. If there are restrictions, knowing them would be handy.
For native apps, Apple says images larger than 2048x2048 1024x1024 are to be avoided and should be broken down into smaller ones. The problem here is not the file size on disk, but the size in memory: the image has to be decoded and turned into a "flat" representation.
So let's do some math: assume an image 5000x5000 pixels, with 8-bit RGB. This means each pixel occupies 3 bytes:
5,000 * 5,000 * 3 = 75,000,000 (roughly 71.5 MiB)
So you see your seemingly small image really fills up the memory very fast. iOS now cannot throw parts away if it's under memory pressure, it's the whole image or nothing.
Your only solution is break down the image into smaller parts. iOS can then remove images that aren't visible any more from memory (I doubt with such a huge image that all parts are visible all the time).