optimize for mobile

[colep]

I am building a pure action script mobile project for the IPad.

I will be scrolling through full screen 40 images. 1024 by 768.

Any tips or tricks for optimizing this using Greensock? ThrowPropsPlugin ?

I want to use panel-based flick scrolling but am worried about performance with such large images.

Do you have any thoughts of re: using the scroll rect? withThrowPropsPlugin ?

 

I see you are using masks with your examples which i am worried about doing on mobile.

 

thanks

cp

[jpsimon]

This is perfect for you:

http://gotoandlearn.com/play.php?id=143

 

He shows you how to use blitting to keep performance up.

 

Here's another teaching you about tablet swiping gestures:

http://gotoandlearn.com/play.php?id=145

[GreenSock]

Alright, you inspired me to create a new BlitMask class that should help out with this type of scenario. I documented the class too - here's an excerpt from the ASDocs:

A BlitMask is basically a rectangular Sprite that acts as a high-performance mask for a DisplayObject by caching a bitmap version of it and blitting only the pixels that should be visible at any given time, although its bitmapMode can be turned off to restore interactivity in the DisplayObject whenever you want. When scrolling very large images or text blocks, a BlitMask can greatly improve performance, especially on mobile devices that have weaker processors.

 

Here are some of the conveniences BlitMask offers:

 

[*:7e0uozhl]Excellent scrolling performance
[*:7e0uozhl]You don't need to do anything special with your target DisplayObject - move/scale/rotate it however you please and then update() the BlitMask and it syncs the pixels. The BlitMask basically sits on top of the DisplayObject in the display list and you can move it independently too if you want.
[*:7e0uozhl]Use the BlitMask's scrollX and scrollY properties to move the target DisplayObject inside the masked area. For example, to scroll from top to bottom over the course of 2 seconds, simply do:


myBlitMask.scrollY = 0;
TweenLite.to(myBlitMask, 2, {scrollY:1});


[*:7e0uozhl]For maximum performance, set smoothing to false or for maximum quality, set it to true
[*:7e0uozhl]You can toggle the bitmapMode to get either maximum performance or interactivity in the target DisplayObject anytime. (some other solutions out there are only viable for non-interactive bitmap content)
[*:7e0uozhl]MouseEvents are dispatched by the BlitMask, so you can listen for clicks, rollovers, rollouts, etc.

 

This is an experimental class at this point and I wanted to get your input before I release it to the masses. I'd be curious to know what type of performance gains you see when using it compared to a regular mask.

 

(see attached file for class and ASDocs)

 

You like?

[KevCJones]

Hey Mr Greensock,

 

How ironic on the first day i say hmmm i wonder if Greensock has anything that helps with mobile dev you post this.... strange but nice. I will be trying this out in the next few day i think just a couple of questions.

 

The theory and docs make sense but what does this do that cacheAsBitmap does not do on a given full-screen sprite so i know where i can chalk up the benefits?

Where do you see the road map of the class taking you? For example multiple targets (would this be a benefit?)

 

I've made a mini demo where nearly all the display object are bitmaps and a scene is maybe built from 8-9 bitmaps at a time. Would you expect me to see much performance boost given that im already leveraging bitmaps benefits already? The only way i see it would be rendering them into one.

 

 

Cheers for thoughts in advance.

[GreenSock]

The theory and docs make sense but what does this do that cacheAsBitmap does not do on a given full-screen sprite so i know where i can chalk up the benefits?

This is very different than cacheAsBitmap (although I suppose there are some similarities). One of the most processor-intensive tasks for the Flash Player is calculating which pixels need to change on the screen and then rendering them. So let's say you've got a TextField that's 500 pixels wide and 10,000 pixels tall (that's a lotta text). Whenever you move it even one pixel, Flash must process all 5,000,000 pixels and figure out where they'd be on the new frame (even the ones that are off screen) and then display them appropriately. Tons of work, most of which is totally unnecessary when you're only wanting to display a small fraction of those pixels (inside a masked area).

 

If you set cacheAsBitmap to true, Flash takes a bitmap capture of that object so that when you move it (only altering the x and/or y properties), it doesn't need to recalculate all the text and vectors into pixels first before rendering them to the screen. However, in our little example, Flash would still need to concern itself with 5,000,000 pixels on every frame even if you're masking them to only show a 200x200 area. BlitMask, however, only cares about that 200x200 area. It alleviates Flash from having to even think about the rest of the 5,000,000 pixels (after the initial capture of course).

 

Changing the scrollRect of a DisplayObject definitely helps things perform better, but there are several down sides to using it:

[*:278n0urw]It only allows whole pixel values. No sub-pixel rendering (smoothing).
[*:278n0urw]You can't rotate the content within the masked area
[*:278n0urw]I think most developers find working with scrollRect very cumbersome and confusing.
[*:278n0urw]You can't easily scale the content inside the mask (well, you could but you'd have to counteract the scale by adjusting the scrollRect at the same time to make it look like the mask was stationary)

 

Where do you see the road map of the class taking you? For example multiple targets (would this be a benefit?)

No, I don't think BlitMask will be supporting multiple targets because when you turn bitmapMode off, it literally sets itself as the mask of the target and Flash won't allow one object to be the mask for more than one target. I didn't really intend BlitMask to be a full blitting engine or Bitmap Canvas of sorts where lots of things get blitted to a single Bitmap. It's more for masking a single, large DisplayObject (which could certainly be a Sprite containing lots of children if you want).

 

I've made a mini demo where nearly all the display object are bitmaps and a scene is maybe built from 8-9 bitmaps at a time. Would you expect me to see much performance boost given that im already leveraging bitmaps benefits already? The only way i see it would be rendering them into one.

If your Bitmaps are large and you're only showing a portion of them at any given time, you very well could see some performance gains with BlitMask, yes. If your Bitmaps are relatively small and fit within the stage anyway, it'd probably be pointless to use BlitMask. I'd be curious to know what mileage you get, though. Please do report back the results you get.