How to create a scrolling group using a native scroller and the improved graphics architecture
The 'scrolling' layerMode can be used to good effect to cache scrolling group content. If a group is completely unadorned (no border, no scrollbars), then the engine will take the bounds of the group to be that of its contained objects and clip the rendering of those objects to the rect. In particular, it will be the unclipped content that is cached - thus eliminating redraw overhead for scrolling.
Create your group content
Create a new mainstack and add the content you want your scrolling group to contain. In this example we have used 3 images and 3 text fields.
Group the controls together and call the group 'gallery'.
Resize the group
Set the size of your stack, for this example I have made a stack that is 480 x 640. Resize your group, set the lockLocation of the group to 'true'.
Set the layerMode of the group
The engine determines what to cache based on the per-object layerMode property. This is one of static, dynamic or scrolling.
Scrolling applies only to group and is used where the group contains contents that will be scrolled so is ideal in this example.
set the layerMode of group "gallery" to "scrolling"
Set the stack properties
To use the new 'accelerated rendering' feature we need to set some stack properties which control the accelerated rendering. The compositor properties are not persistent so they must be set in preOpenStack or preOpenCard.
on preOpenStack if the platform is "iphone" then set the compositorType of this stack to "opengl" else set the compositorType of this stack to "software" end if set the compositorTileSize of this stack to 32 set the compositorCacheLimit of this stack to (16 * 1024 * 1024) end preOpenStack
Add script to allow scrolling
The group must handle scrolling by detecting touch gestures and setting the hScroll and vScroll properties of the group.
The basic method is
on mouseDown: record the scroll value of the group and postition of the touch
on mouseMove: calculate how far the gesture has moved horizontally and vertically, set the scroll values of the group
The contents of the group should be scrolled along with the gesture.
The "gallery" group script
local sScrolling local sInitialMouseX, sInitialMouseY local sInitialHScroll, sInitialVScroll on mouseDown ## Allow the group to scroll put true into sScrolling ## Record the initial touch position put item 1 of the mouseLoc into sInitialMouseX put item 2 of the mouseLoc into sInitialMouseY ## Record the initial hScroll and vScroll put the vScroll of me into sInitialVScroll put the hScroll of me into sInitialHScroll end mouseDown on mouseMove mouseX, mouseY ## If the screen is being touched then if sScrolling then ## Calculate how far the touch has moved since it started put mouseY - sInitialMouseY into tVChange put mouseX- sInitialMouseX into tHChange ## Reset the hScroll and vScroll to follow the touch lock screen set the vScroll of me to sInitialVScroll - tVChange set the hScroll of me to sInitialHScroll - tHChange unlock screen end if end mouseMove on mouseRelease mouseUp end mouseRelease on mouseUp put false into sScrolling end mouseUp
Toggle accelerated rendering on/off
To see the difference when accelerated rendering is used add a button to the stack that switches it on and off.
on mouseUp ## Switch graphics properties on and off if the label of me is "Off" then set the label of me to "On" if the platform is "iphone" then set the compositorType of this stack to "opengl" else set the compositorType of this stack to "software" end if set the compositorTileSize of this stack to 32 set the compositorCacheLimit of this stack to (16 * 1024 * 1024) set the layerMode of group "gallery" to "scrolling" else set the label of me to "Off" set the compositorType of this stack to "none" end if end mouseUp
Set up the standalone application settings to build for your desired platform and test the stack.
The Example Stack
You can download the example stack here.